WEBデザイン参考:黒を基調としたシンプルでおしゃれなWEBサイト集

黒をメインカラーにしたシンプルなWEBサイトを集めてみました。黒はクールで大人っぽい色ですが、使い方によっては暗すぎたり硬いイメージにもなってしまうので扱いが難しいです。今回集めたのはどれもハイクオリティなサイトばかりなので、ぜひ自分でデザインするときやおしゃれなサイトを探すときの参考にしてみてください。

Tetracode Technology

音楽イベント系の会社のWEBサイトです。カラーがモノクロでシンプルに統一されてるだけじゃなく。三角形のモチーフでページ全体が構成されています。動きもあって、シンプルな中にも先進的なイメージが伝わるデザインになっています。

Tetracode Technology

株式会社GIG

こちらはWEB制作会社のサイトです。斜めのラインでページ全体を構成していて動きのあるイメージが伝わります。柔らかい大きめの影の付け方や、スクロール時のアニメーションなんかも今どきの演出ですね。

株式会社GIG

OKURAYAMA STUDIO

伊達冠石や赤土などを使った製品を制作しているスタジオのWEBサイトです。ページの上部では「一画面に一枚の写真と小さな文字」というシンプルな構成を徹底していて、岩というモチーフの静かなイメージをしっかり表現しています。

OKURAYAMA STUDIO

DSOC

Sansanのデータ統括部門のサイトです。黒と白だけで徹底された画面がクール。背景のドットがうごめく演出は大量のデータを扱うビジネスの特徴をよく表していますね。

DSOC

Sense Island

アートイベントの告知用のWEBサイトです。黒と白だけの配色もさることながら、縦書きと横書きを組み合わせた文字組みもかっこいいデザインです。「配色がモノクロなときは色がシンプルになる分レイアウトで遊んでみよう」という考え方も自分でデザインするときのヒントにできますね。

Sense Island

Everess

余白をたっぷり使ったシンプルでクールなWEBデザインです。レイアウトもシンプルながら高さをずらしたり変化をつけているのが良いですね。上品で高級感のあるイメージが伝わります。

Everess

Minas Designs

こちらも海外のWEBデザインです。黒で統一された画面と、緩急をつけたアニメーションがマッチしていた高級感たっぷり。上品で大人なデザインですね。「モノクロ+余白たっぷり+ゆったりした動き」の3つは組み合わせると鉄板で高級感を出せるので頭に入れておいて損はないですよ。

Minas Designs

CONSTELLA コンステラ

こちらは美容系(ヘアケア)のサービスをしている会社のWEBサイトです。ファーストビューであえて多くを語らずイメージだけを見せてるのが潔いです。スクロールしていくときれいにパララックスアニメーションがついていて、おしゃれなイメージがしっかり伝わりますね。

CONSTELLA コンステラ