明るければ良いというわけではない!なぜ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=”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選
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング