FacebookメッセンジャーやInstagram、Airbnbなど、シリコンバレーを牽引する企業は、白色をベースにUIをできるだけシンプルにデザインしたアプリをリリースしています。
これらの「白っぽい」デザインは、色彩をできるだけ取り除いたデザインから、「コンプレクション・リダクション」(CR)と呼ばれています。

こうした白っぽいデザインのアプリケーションは、SNSアプリを中心として使われています。
しかし、、NetflixやAmazon Prime Video、Spotifyなどのメディア系のアプリケーションは、白とは真逆の「黒っぽい」デザインを採用しています。

なぜ、NetflixやSpotifyは黒っぽいデザインを採用するのはなぜでしょうか。
今回は、ダークカラーを採用するメリットと事例をご紹介します。

白背景 vs. 黒背景

冒頭でもお伝えしたように、さまざまなアプリケーションが「白っぽい」デザイン(コンプレクション・リダクション)を採用しています。

white.png

参考:
デザインはもっとシンプルに!無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは?

このデザイントレンドは非常にシンプルなので、UIのデザインがコンテンツの邪魔をすることなく、ユーザーの投稿自体がはっきり・くっきりと見えます。

black.png

一方で、SpotifyやNetflixなどはダークカラーを取り入れています。
なぜ、動画や音楽を配信するプラットフォームアプリケーションでは、ダークカラーの背景を取り入れているのでしょうか。

コンテンツ重視なら「黒背景」がよし

実は2009年の時点でProbloggerによって、白背景と黒背景、どちらをユーザーは好むのか、調査が行われています。

調査によれば、およそ半分のユーザーブログで記事を読むなら「白背景」のほうがいいと答えています。
実際、ブログの多くは文字が多いので、白いほうが可読性も高いのが理由のひとつです。

しかし、面白いことに回答者の1割は黒背景のサイトを好んでおり、3分の1以上がブログの内容によって異なると回答しました。
確かに、ブログのように、ページ全体にテキストが占める割合が多ければ白背景のほうが読みやすいでしょうが、逆にテキストの量がそれほど多くない場合には白である必要はないとも言えます。

実際に、Richard Hall博士とPatrick Hanna博士が行なった研究によれば、画像や動画の認識率は、背景色によって決まるとも言われています。

hover.png

黒背景にすれば、画像は浮き出るように見えるので、アートワーク(ジャケット画像)を多用するようなアプリケーションに向いています。
一方、白背景だと、黒いテキストは浮き出るように見えますが、写真は背景よりも奥手にあるように見えるので、テキストの量が比較的多い場合に有効だと言えます。
SNSは、性質上テキストメッセージも多いので白背景を採用する一方、動画や音楽アプリなどはアートワークが画面に占める割合が多いので、黒背景を採用しているのです。

色とイメージの関係

白も黒も同じ無彩色ですが、白は光を通し、黒は光を反射することなく遮断します。
また、全体的に白を用いることでクリーンなイメージを与えますが、黒は周囲の色を引き締めて目立たせ、没入感を高める役割があります。

黒には他の色に与える影響が強く、色を組み合わせた時には黒のイメージが上乗せされます。
黒を単体で使うと潜在的に負のイメージが強くなりますが、色を組み合わせることで全体的にエレガントになり、強さや権威の象徴を表すとも言われています。

YouTubeのシークレットモード

youtube.png

実は、あまり公表されていませんが、同じような理由でYouTubeにもダークカラーモードが搭載されています。
このシークレットモードは、Google Chrome バージョン57以降で確認することができ、一度有効化されれば全てのページに適用されます。

少々手間がかかりますが、次のような手順で有効にすることができます。

1. デベロッパーツールタブを開く

デベロッパーツールタブを開きます。
Windowsユーザーは「Ctrl+Shift+I」、Macユーザーは「Option+Cmd+I」がショートカットキーです。

2. コンソールタブを開く

コンソールタブを開きます。
「document.cookie=”VISITOR_INFO1_LIVE=fPQ4jCL6EiE”」というテキストをペーストして、エンターを押します。

3. デベロッパータブを閉じて更新

デベロッパータブを閉じて、F5キーかメニューで更新を選んでページを更新します。

4. 「Dark Mode」を選択

右上から設定メニューをクリックして「Dark Mode」を選択し、有効化してください。

以上で、YouTubeがダークモードになりました。
このほうが、より動画に集中することができそうですね。

参考:
YouTube has a secret ‘Dark Mode’ – this is how you activate it

まとめ

すべてのデザインの背景色が白背景である必要はなく、むしろ画面にビジュアル要素が占める割合が多ければ多いほど黒背景のほうが好まれるのがご理解いただけたのではないでしょうか。

白と黒のバランスによってどのように見え方が異なるのかを確認するには、以下の記事も参考になります。
大胆に黒背景を使うのはセンスが入りますが、ぜひいろいろなホームページアプリを確認しながら、黒背景を上手に取り入れてみてください。

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