究極のシンプル！白と黒だけで表現された美しいホームページ13選

更新日: 2018年01月31日

デザイン

マイページにお気に入り

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

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

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

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

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

1. LAURENT PEREZ DEL MAR

http://www.laurentperezdelmar.com

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

2. ALEXANDER ENGZELL

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

3. HOCHBURG

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

4. KUROKAWA WONDERLAND

http://kurokawawonderland.jp?lang=jp

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

5. PLAIN

http://plainmade.com

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

6. Michael Schmid

http://workdiary.de

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

7. Tokyo Mild Foundation

http://tokyomildfoundation.com

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

8. ÓLAFUR ARNALDS

http://olafurarnalds.com

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

9. 株式会社メフィラス

http://mefilas.com

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

10. PRÆSENS

http://praesens.co

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