NetflixやSpotify、Amazon Prime Videoなどは、黒を主体としたカラーデザインを採用しています。
黒がメインだと、インパクトが高まる効果が期待できるからです。

参考:
明るければ良いというわけではない!なぜSpotifyやNetflixはダークカラーを採用しているのか?

一方で、黒は荘厳・神秘的なイメージを持つ色です。
黒色を単体で使うと負のイメージがありますが、色の組み合わせによっては他の色を引き立てることもできます。

今回は、重圧濃厚な雰囲気のあるダーク・モノトーン調の海外サイトを集めました。
重厚な雰囲気を持つWebデザインを作成する際の参考にしてみてください。

ダーク・モノトーン調の海外サイト11選

1. Ken Arai

01.png
スクリーンショット:2017年10月
http://kenarai.github.io/

Ken Araiは東京出身・シカゴ在住のプロダクトデザイナーであるKen Arai氏のポートフォリオサイトです。
最近ではFacebook TVのコンセプトデザインや歌手の椎名林檎のサイトを手がけたことでも知られています。
ダークな背景の中央に画像が映えており、インパクトがあります。

2. Peter Van Alphen

02.png
スクリーンショット:2017年10月
http://www.petervanalphen.com/en/intro/

Peter Van Alphenはオランダ・アムステルダム在住の写真家Peter Van Alphenさんのポートフォリオサイトです。
ホワイトエッジのサイトのように、左右に縦書きでメニューが表示されており、真ん中の品書きにマウスカーソルを合わせると大きな写真が現れ、視線を奪われます。

3. Revery

03.png
スクリーンショット:2017年10月
https://revery.is/

Reveryはオレゴン州ポートランドのクリエイティブエージェンシーです。
ストーリーテリングとハードワーク、ヒューマンポテンシャルを信条としたこのサイトは、冒頭は黒背景で始まりますが、スクロールするといつの間にか白背景になってしまうという不思議な世界観の工夫が施されています。

4. Boffi

04.png
スクリーンショット:2017年10月
https://www.boffi.com/en-ww/

Boffiは1934年にイタリア北部に誕生した家具ブランドで、キッチンウェアに強みを持ちます。
サイト全体は白い色を基調としていますが、トップページのキッチンウェアの写真は黒を基調としており、高級感あふれる見せ方をしています。

5. CRAFTON

05.png
スクリーンショット:2017年10月
http://crafton.eu/

CRAFTONはポーランドに拠点を置くWebマーケティングエージェンシーです。
こちらも白背景がベースになっていますが、ヒーロームービーや各種画像が黒いレイヤーマスクをかけており、モノクロさがかえって高級感を引き立たせます。
グリッドを崩しながらパララックスエフェクトをかけている独特なレイアウトにも注目です。

6. In My World

06.png
スクリーンショット:2017年10月
http://www.onedayinmyworld.com/

In My Worldはメンタルヘルスに焦点を当てた差別の排除のためのプロジェクトに関するプロモーションサイトです。
黒を背景として無彩色だけを採用し、極めて緻密なストーリーテリングの手法を取り入れることで、シックで厳格な雰囲気を醸し出すことに成功しています。

7. Coloro Workspace 3D Model

07.png
スクリーンショット:2017年10月
https://coloro.huangart.at/threeDModel

Coloro Workspace 3D Modelは、カラーパレットの作成に役立つWebサービスです。
黒を背景にしているのは、SpotifyやNetflixが黒背景を採用している理由と同じで、その方が没入感が生まれるからでしょう。
その他のUIも、全体的に黒い色が採用されています。

8. Formani

08.png
スクリーンショット:2017年10月
https://formani.nl/en/

Formaniはオランダのインテリアデザインプロダクトメーカーで、個性的なドアノブなどを展開しています。
背景は真っ黒というよりも、個性的なネズミ色といったほうが正しく、エレガントでありながらも洗練されたモダンなイメージを醸し出しています。

9. High Contrast

09.png
スクリーンショット:2017年10月
https://www.highcontrast.ro/

High Contrastはルーマニアのデジタルクリエイティブエージェンシーのサイトです。
薄暗いレイヤーをかけながら、冒頭に現れる「THE DIFFERENT VIEW」(違った見方)というメッセージがはっきりと表示されており、インパクトがあります。
右に表示されているシンプルなエレベーターメニューにも注目です。

10. Mamuka Restaurant

10.png
スクリーンショット:2017年10月
https://mamuka.rest/en/promo/

Mamuka Restaurantはロシアにあるレストランですが、「Mamukaレストランの謎解き」という、ストーリーてリング仕立ての内容になっています。
黒っぽい色づかいによる没入感、鮮やかな写真、2択によるストーリーの分岐など、様々な点が印象的です。

11. Hisense UK

11.png
スクリーンショット:2017年10月
https://hisense.co.uk/

Hisense UKは、薄型テレビや冷蔵庫などの家電を製造・販売している中国Hisense(海信)のイギリス支社のサイトです。
やや黒っぽいレイヤーマスクをかけることで、シックで落ち着いた雰囲気が映え、またコーポレートカラーであるミントグリーンが引き立ちます。

まとめ

黒は、他の色とは少し違った立ち位置にいるため、デザイナーの中でも黒の扱いを得意とする人とそうでない人に分れるほど繊細な色でもあります。
しかし、黒を使いこなすことでより表現の幅を広げることができます。

上記で紹介した11のサイトを参考にして、効果的な黒色の使い方を発見してみてはいかがでしょうか。