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

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

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

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

白背景 vs. 黒背景

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

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

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

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

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

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

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

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

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

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

色とイメージの関係

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

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

YouTubeのシークレットモード

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

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

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

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

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

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

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

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

4. 「Dark Mode」を選択

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

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

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

まとめ

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

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

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