私たちの日々の生活は、数多くの選択の連続です。この記事ではUIデザイナーがプロジェクトごとにぶつかる頻繁な選択の1つについて議論していきます。「インターフェースには明るい色を使うべきか、暗い色を使うべきか？」という選択です。
前編と後編に分けてご紹介します。この記事は前編です。
カラースキームの選択に影響を及ぼす要因
確かに、すべてにおいて効果的な選択肢はありません。ソリューションは、ユーザーの側面だけではなく、ビジネスでの目標、マーケットの条件、および現在のデザイントレンドなど、様々な要因に大きく依存します。必ず考慮する必要がある、重要な要素を見ていきましょう。
1.読みやすさと可読性
「読みやすさ」とは、人々がいかにして単語、フレーズ、およびコピーブロックを読むことができるかを定義します。可読性は、どのように素早く直感的に特定の書体の文字を区別できるかを示します。
これらの特性は、特に多くのテキストが含まれるインタフェースの場合には、注意深く考慮する必要があります。
他の多くの要素の中でも、テキスト認識のプロセスにおいてインタフェースで選択されたカラースキームは重要な役割を果たします。例えば、異なる背景で知覚される物体と同様に、白または明るい背景に示される黒色の文章は、暗い背景上の白いの文章よりも大きく見えます。
可読性が悪いと、ユーザーエクスペリエンスは低下します。ユーザーがデータをさっと読むことができないとき、彼らは不自由さを感じたり、重要な情報を見落としてしまうからです。
では、明るい背景のインターフェースが読みやすいのでしょうか？その答えは、「常にそうとはいえない」です。
ユーザーエクスペリエンスデザインの有名な第一人者の一人、Jacob Nielsen氏は次のように述べています。「テキストと背景のコントラストが高い色を使用しましょう。最適な読みやすさには、白い背景に黒いテキストが必要です（いわゆるポジティブテキスト）。黒い背景に対して白いテキスト（ネガティブテキスト）も同じように読みやすいでしょう。コントラスト比はポジティブテキストの場合と同じですが、反転した配色ではほんの少し読むのが遅くなります。可読性に関しては、背景が純粋な白よりも暗くなっていて、テキストは純粋な黒よりも明るくなっているようなのカラースキームにおいて低下します。」
したがって、どのようなカラースキームであっても、デザイナーが異なる背景でのテキスト知覚の特性を研究し、フォントの選択に注意深く取り組むならば、十分に読みやすくできるかもしれません。
しかし、1980年代にさかのぼるいくつかの科学的研究は、テキストに対して明るい背景にすることが大部分のユーザにとってより効果的な選択肢であることを示しています。D. BauerとC.R.Cavoniusは、広告がどのように人々に働きかけているかを研究し、「コントラスト反転によるビジュアルディスプレイユニットの読みやすさの向上」（1980年）の論文で調査を報告しました。特に、明るい背景に暗い文字が表示された場合、参加者のテキスト可読性が26％向上することがわかりました。
なぜでしょう？知覚および相互作用研究グループ（British Columbia大学）のJason Harrisonは、この現象を以下のように説明しています。
「乱視を持つ人々（さまざまな統計によれば、人口の約50％）は、黒い背景上の白いテキストの方が白い背景上の黒いテキストより、読みにくいと感じる。これはは光のレベルと関係しており、明るいディスプレイ（白い背景）では、虹彩がわずかに閉じ、レンズが変形する効果を減少させる。一方、暗いディスプレイ（黒の背景）では、虹彩が開いてより多くの光を受け取り、レンズが変形することで目にあいまいな焦点を作る。したがって、明るい背景がより見やすいように感じるのであろう。」
2.アクセシビリティ
アクセシビリティは、できるだけ多くの人々がウェブまたはモバイルインターフェースにアクセス可能であり、その機能を提供する能力として定義されています。つまり、「使用するか使用しないか」という選択は、主に、ユーザーの身体的能力によってではなく、ニーズと好みに基づいて行われるべきであるということです。配色はアクセシビリティに影響を及ぼす主な要因です。デザイナーは、パレットと色の組み合わせを選択することで、背景やレイアウト要素の色の選択も決定しますが、その際にユーザーの年齢、特別なニーズ、または障害考慮する必要があります。ユーザーリサーチは、ターゲットオーディエンスに近づくのに役立つデータをゲットする大きな助けになります。
3.明確性
明確性は、画面またはページ上のすべてのコアの要素を認識して区別する能力を定義します。
まず、ナビゲーションのシンプルさと直観性が大切です。レイアウトをさっと見て情報のゾーンやインタラクションの要素を見つけることができること、ユーザーが必要なものを手に入れるのに苦労する必要がないようにしましょう。この側面が適切にテストされていないと、ビジュアル階層が弱くなり、画面が混乱するものになる可能性があります。
コントラストがここで大きな役割を果たし、カラースキームがその基礎となります。インターフェイスが明確でコントラストが十分であるかどうかを確認するために、ぼかしモードで画面やページを見て、重要なものがすべて簡単に手に入り、目立つかどうかをチェックしましょう。
4.レスポンシブであること
インタフェースのレスポンシブさとは、ユーザーが使用するデバイスが何であれ、それを使用可能で機能的にできることを意味します。高解像度プロモニターのSketchにおいてスタイリッシュで魅力的な外観であっても、小さな低解像度スクリーン上においてはただの「しみ」にしか見えないかもしれません。デザイン段階でうまくいっていたカラースキームも、様々な日常的な条件の中では美しさを失うことがあります。カラースキームは色、形状、コピーの認識に直接影響するため、最終的な決定を下す前に様々なデバイスにおいてテストしておくことが重要です 。
5.環境
Webおよびモバイルインタフェースは、ターゲットオーディエンスが十分に研究されている場合、典型的なものとして予め想定される環境で使用されます。
例えば、自然光の下での常時使用される場合、暗い背景は文字通り、特にタブレットやスマートフォンの光沢のあるスクリーンにおいて反射の効果を作り出すことができます。逆に、照明が暗い環境ではは、ナビゲーションや可読性に悪影響を及ぼします。
色の組み合わせ、コントラスト、色合いの問題は大きな注目を集めています。
ここまでが前編です。後編ではカラースキームを選択する際のチェックリストをご紹介します。
※本記事はLight or Dark UI? Tips to Choose a Proper Color Scheme for User Interfaceを翻訳・再構成したものです。
▼こちらの記事もおすすめです！
おすすめ新着記事
おすすめタグ