Webデザインの配色に悩むのは、Webデザイナーなら誰でも経験しているでしょう。
そんな時、シンプルに「白」「黒」だけを使ったデザインを選択するのも1つの手段です。

純潔でさわやかな印象のある「白」と、大胆で重厚的な「黒」は、一見すると正反対の色のように見えます。
しかし、そんな「白」と「黒」をうまく組み合わせることで、シンプルかつエレガントで、クールなホームページが出来上がります。

一方で、配色を最小限に抑えている分、ごまかしが効かない分野でもあります。

今回は、白と黒だけで表現された美しいホームページをご紹介します。
たったの2色でもデザイン性の高いホームページができることを確認してみましょう。

白と黒だけで表現された美しいホームページ

1. LAURENT PEREZ DEL MAR

1_laurent.jpeg
http://www.laurentperezdelmar.com

フランスの音楽家・作曲家のLaurent Perez Del Marさんのポートフォリオサイトです。
シングルページ・パララックスエフェクトがかかっていて、背景でLaurentさんが演奏や作曲をしているシーンが白黒で写ります。
白黒でコントラストを高めにすることで、洗練された印象が音楽とマッチします。

2. ALEXANDER ENGZELL

2_alexande.jpeg
https://engzell.me

スウェーデンのデザイナーAlexander Engzellさんのポートフォリオサイトです。
白黒ベースのオープニング動画から始まり、画面をおよそ1:3に分割して一連の動画作品を紹介しています。

3. HOCHBURG

3_hochburg.jpeg
http://www.hochburg.net/de/

Hochburgはドイツのデザインエージェンシーです。
トップページで宇宙飛行士を思わせるオープニング動画が始まり、ヘルメットのような物体をシルエットにブランドの紹介ページが始まります。
黒のボールドのサンセリフ体が大胆でかっこいいですね。

4. KUROKAWA WONDERLAND

4_kurokawa.jpeg
http://kurokawawonderland.jp?lang=jp

日本の阿蘇山の奥地にある黒川温泉郷のイメージサイトです。
まるで夢の中にいるかのような心地のするBGMが流れ、黒を基調とした独特の世界観に引き込まれていきます。
円形のタイムラインがユニークで、操作すると動画を早送りしたり巻き戻したりすることができます。

5. PLAIN

5_plain.jpeg
http://plainmade.com

PLAINはアメリカ・ペンシルヴァニア州のクリエイティブエージェンシーです。
中央にメッセージを寄せながらも、余白を十分に取ることで素朴で洗練された印象を与えます。

6. Michael Schmid

6_michaelschmid.jpeg
http://workdiary.de

ドイツのデジタルデザイナーMichael Schmidさんのポートフォリオサイトです。
斜めの切り込みやタイトルに使用された太めのタイポグラフィ、ミニマルなボタンなどが特徴的です。
白背景と黒背景、グレー背景を交互に繰り返すのも面白いですね。

7. Tokyo Mild Foundation

7_tokyomild.jpeg
http://tokyomildfoundation.com

東京マイルドファウンデーションは、Webプロモーションを行う株式会社LIGとWeb広告代理店の株式会社WevNALが作った新会社です。
テレビのノイズのような待ち受けから始まり、黒をベースとしたメンバー紹介ページに入ります。
パーティクルやマイクロインタラクションなどの最新Webトレンドをしっかりと押さえたホームページは大変参考になります。

8. ÓLAFUR ARNALDS

8_orafur.jpeg
http://olafurarnalds.com

ポスト・クラシカルの鬼才とも呼ばれる、アイスランドの音楽家・作曲家のÓlafur Arnaldsさんのポートフォリオサイトです。
白とグレーを基調に、大胆な太めのサンセリフ体が存在感を放っています。

9. 株式会社メフィラス

9_mefilas.jpeg
http://mefilas.com

株式会社メフィラスは、大阪に拠点を構えるクリエイティブエージェンシーです。
白地の背景をベースとして、余計なものを極力排除し、タイポグラフィで圧倒的な存在感を演出しています。
おしゃれなオフィスの写真にも注目してみてください。

10. PRÆSENS

10_plaesens.jpeg
http://praesens.co

PRÆSENSはポーランドのワルシャワに拠点を構えるクリエイティブエージェンシーです。
でしゃばりすぎない素朴な大きさのヘッダー、白黒の美しい写真、十分な余白がそろい、非常にエレガントなイメージを与えてくれます。
「Codes & Crafts」の文字がアニメーションで出現するのもかっこいいですね。

11. Cat Gracia Photography

11_catgracia.jpeg
http://www.catgarciaphoto.com

ロンドン在住の写真家Cat Graciaさんのポートフォリオサイトです。
トップページでは全面背景でCat Graciaさんの撮影した白黒写真を楽しむことができます。
どこか格調高いイメージが残る写真ばかりですね。

12. Kurt Stallaert

12_kurt.jpeg
http://www.kurtstallaert.com

冒頭で全面に出てくるタイポグラフィが非常に印象的な、ベルギー生まれの広告写真家Kurt Stalleartさんのポートフォリオサイトです。
独特な世界観を持つ写真が崩れたグリッドで配置されています。

13. LiveArea

13_livearea.jpeg
http://livearealabs.com

ロンドンに本拠地を置くEコマースに強いクリエイティブエージェンシーLiveAreaのホームページです。
白黒写真、細字のタイポグラフィ、街並みを表す線画がユニークです。
ヘッダーに近づくごとに暗めの背景になっていきます。

まとめ

以上、白と黒で表現された美しいホームページをご紹介しました。

今回見てきた中で面白いと感じたのは、同じ白と黒を使っていても、どちらを主として使っていくかによっても、また使うタイポグラフィや写真によっても、大きく雰囲気が左右されるというところです。
場合によっては質素に、またあるときには大胆にと見せる顔を変えるのは、白黒デザインの面白いところなのかもしれませんね。

センスが試されるデザイン。ぜひ、白黒のWebデザインにも挑戦してみてください。