Marina YalanskaはTubikのコンテンツとマーケティング担当者、Tubikブログのチーフエディター兼リードライター、Design4Usersの共同設立者兼チーフエディター、Bookmarinの創設者です。
この記事は”Light or Dark UI? Tips to Choose a Proper Color Scheme“の翻訳転載です。
配信元または著者の許可を得て配信しています。
私たちの日常生活は、無限に続く選択肢の連続です。
私生活でも仕事でも、数多くの対立や課題について考えなければなりません。
解決策は、提案だけでなく、事実、経験、知識に基づいたものであるほうが良いでしょう。
今日は、UIデザイナーがプロジェクトごとに選択しなければならないことの1つ、「インターフェースには、明るい色と暗い色のどちらの配色が適しているか？」ということについて説明します。
目次
配色の選択に影響を与える要素について
しかし、すべての目標に対応する特定の答えはありません。
ユーザー側だけでなく、ビジネスの目標、市場の状況、現在のデザイントレンドなど、さまざまな要因によって答えは大きく変わります。
ここで、この問題に関して考えるべき本質的な要素を確認しておきましょう。
読みやすさ・見やすさ
これらの用語は、いずれもテキストで表現された内容に対する知覚に直接結びついています。
読みやすさとは、人々が単語や文章、文字の一部をいかに簡単に読むことができるかを定義するものです。
また、ユーザーが特定のフォントの文字をいかに早く、直感的に見分けることができるかを測るものです。
これらの特性は、特に多くの文章で埋め尽くされたインターフェースでは、慎重に考える必要があります。
特に文字を効果的に認識させるためには、インターフェースの色彩設計が重要な役割を果たすでしょう。
例えば、背景が異なる物体を知覚するのと同様に、白または明るい背景に表示された黒い文字は、暗い背景に表示された白いコピーよりも大きく見えます。
可読性が低いと、ユーザーはデータを読み取ることができません。
さらに、関連性のあるデータであっても読み取ることができないため、ユーザーはテキストを読みながら言いようのない緊張を感じたり、重要な情報を見逃してしまう可能性さえあります。
つまり、背景が明るいインターフェースが読みやすいということでしょうか？
…必ずしもそうとは限りません。
ユーザーエクスペリエンスデザインの有名な第一人者であるJacob Nielsenはこう述べています。
「文字と背景の色の対比が高い色を使用しましょう。
最適な読みやすさを得るには、白地に黒の文字（いわゆるポジティブな文字）が必要です。
同様に黒背景に白文字（ネガティブな文字）でも、ほぼ同じような効果があります。
しかしポジティブな文字と対比は同じですが、反転した配色は人を少し混乱させ、読む速度を少し遅くします。
特に背景を白より濃くした場合、文字が黒より薄いと読みにくくなってしまいます。」
そのため、デザイナーが背景の違いによる文字の見え方の違いを研究し、フォントの選択を慎重に行えば、どんな配色でも十分に読むことができる可能性があります。
しかし、1980年代に行われたいくつかの科学的研究によると、多くのユーザーにとって大量のテキストを表示する場合は、明るい背景がより効果的な方法であるようです。
広告媒体の仕組みを研究していたD. Bauer氏とC.R.Cavonius氏は、「Improving the legibility of visual display units through contrast reversal(コントラスト反転による視覚表示装置の読みやすさの向上)」（1980年）という論文でその成果を発表しています。
また彼らは、明るい背景に暗い文字で書かれた文章を読む場合に26％高い読み取り精度が得られることを発見しました。
なぜ、そうなるのでしょうか？
Sensory Perception and Interaction研究グループ（ブリティッシュ・コロンビア大学）のJason Harrison氏は、この現象を次のように説明しています。
乱視の人（さまざまな統計によると人口の約50％）は、白地に黒文字よりも黒地に白文字の方が知覚しにくいと感じています。
これには、光量が関係しています。
明るい画面（白い背景）では、虹彩はもう少し閉じ、「変形」レンズの効果を減少させます。
しかし暗い画面（黒背景）では、虹彩が開いて光を受けやすくなり、水晶体の変形により、目の焦点はかなりぼやけてしまいます。
このことから、文章が多く、長時間の読書が必要なインターフェースでは、背景が明るい方が快適に感じられるかもしれません。
アクセシビリティー
アクセシビリティーとは、ウェブや携帯電話のインターフェースが、できるだけ多くの人に届き差別なくその機能を提供できることと定義されています。
したがって、「使うか使わないか」の判断は、身体的な能力ではなくユーザーのニーズや嗜好（しこう）にほぼ基づきます。
配色は、この側面に影響を与える要因の上位に挙げられています。
背景色やレイアウトの色を決める際には、年齢や性別、障がいの有無などを考慮した上で、色の組み合わせを決定する必要があります。
User research(ユーザーリサーチ)は、UXデザイナーがターゲットとするユーザーに近づくためのデータを提供する大きな助けとなります。
明瞭性
明瞭性とは、画面やページ上の核となる部分をすべて見分けることができることを意味します。
まず、画面上の操作がシンプルで分かりやすいことが挙げられます。
レイアウトを確認し情報の配置や操作方法を把握することが簡単だと、ユーザーは必要な情報を得るための労力を必要としません。
この点をきちんとテストしないと、視覚的な表現力が弱くなり、画面が総崩れしてしまうことがあります。
これにはコントラストのバランスが重要で、配色はその基礎です。
また、「ぼかし効果」といって、画面やページをぼかした状態で見て、重要な部分に目がいきやすいかをチェックすることも大切です。
対応力
インターフェースの対応力とは、ユーザーがどのようなデバイスでも使いやすく、機能的であることを意味します。
高解像度モニターで見ると魅力的でスタイリッシュなスケッチも、低解像度の小さな画面では汚い汚れに変わってしまうかもしれません。
そのため、デザインの段階で良かれと思った配色も、日常のさまざまな場面で適用されると美しさを失ってしまうことがあります。
配色は色や形、文字の印象に直接影響するため、最終決定する前にさまざまなデバイスでテストする必要があります。
環境
ウェブや携帯電話のインターフェースは、よく調査すると、対象者にとって一般的と思われる環境下で使用されています。
例えば、自然光の下で常時使用する場合、特にタブレットやスマートフォンに代表される光沢のある画面は暗い背景だと反射して見えてしまうことがあります。
逆に暗い環境では、暗い背景は画面の光を奪ってしまい、操作性や可読性に悪影響を及ぼします。
そのため、色の組み合わせやコントラスト、陰影がとても重要です。
配色選びのチェックリスト
上記の要因を踏まえ、ウェブやモバイルのインターフェースの一般的な配色を選択する際に、従うべき基本的なステップを簡単にチェックリストでご紹介します。
1.インターフェイスの目的を定義する
インターフェースの実用性や問題解決能力のポイントを見極めた上で、配色をより根拠のあるものにします。
テキスト主体のUI（ブログ、ニュースアプリ、電子書籍端末など）の場合、明るい背景は有効な選択となる傾向があります。
光によって画面は開放的になり、ユーザーは純粋に文字に集中しやすくなります。
一方、文字よりも画像を中心にしたビジュアル重視のインターフェースであれば、背景を濃い色や明るい色にすることで画像の色に深みが出て、レイアウト全体がよりスタイリッシュに、また高級感のあるものに仕上がるので、良い方法かもしれません。
2.ターゲットを分析する
デザイナーがすべきことは、ターゲット層の把握と分析です。
潜在的なユーザーは誰か、そして彼らがウェブやアプリから何を得たいのかを知ることで、使いやすく魅力的なインターフェースを作るための基礎です。
中高年層は、直感的に操作しやすい明るい色調のインターフェースを好む傾向があります。
また、若い世代は暗い色調のインターフェースに新鮮さやスタイリッシュさを感じることが多く、ターゲット層を取り込むことができます。
若者や子供たちは、明るい背景や面白い表現を使ったインターフェースに惹かれます。
色の選択は、明らかにインターフェースの機能とその内容の性質に左右され、ターゲット層のユーザーの嗜好（しこう）は、常にユーザー中心の意思決定への良いヒントになります。
3.競合他社のリサーチ
もうひとつ心に留めておくべきこと、それは、あなたの製品は青い海の中に1つだけ現れるわけではないということです。
非常に激しい競争の中で、ユーザーの注目を集めるために戦わなければなりません。
アプリやウェブサイトを際立たせ、ユーザーとの最初の接点を大切にするためには、配色の選択が非常に重要です。
既存製品の調査する時間は、効果のない解決策の再設計に費やされる時間および労力の節約になります。
4.とにかくテストをする
色はインターフェースの使いやすさと魅力に直接影響する要素で、デザインはすべて、異なる解像度、さまざまな画面、多様な条件下で適切にテストされなければなりません。
テストでは、製品が市場に出る前に配色の強弱を明らかにし、話し合います。
デザインが非効率であれば、第一印象で魅了するチャンスを失うことになるのです。
課題を解決するには
厳密な配色にこだわらず、デザイナーは次のような妥協点を見いだすことがあります。
暗めのインターフェース、白地の文字用タブ
UXデザイントレンドの解説でも述べたように、このトレンドは特に暗い背景をベースとしたインターフェースで人気を博しました。
また、しばしば論争となる読みやすさについても、もうひとつの方法で実現しました。
たとえば、主要なデータブロックに明るい背景のボックスやスペースを使用することで、この問題を解決し、画面やページに洗練された雰囲気を与えることができます。
Tubikチームが開発した「Watering Tracker」アプリは、その効率的な活用例のひとつです。
ユーザーに配色の選択肢を与える
もうひとつのアプローチは、ユーザーに好みの配色を提供することです。
ToDoリストアプリ「Upper」では、ユーザーが配色を選択できます。
ユーザーにとって本当に使いやすい製品になり、使いやすさだけでなく、美的な好みによってより個別化された選択ができます。
しかしその一方で、デザイナーや開発者がすべての仕組みを作り上げるのに、さらなる労働時間を要するという問題もあります。
