アプリUIをデザインするときに気をつけたい「配色」の7原則

UIデザインにおいて、配色に関する知識が重要なことはあなたもご存知かもしれません。「補色」「コントラスト」「同時対比」など、配色理論は研究が進められており、色の組み合わせが人間に与える印象も明らかになっています。

しかし、たとえ配色理論の基礎を知っていたとしても、その理論を効果的にアプリUIに応用できるとは限りません。知識があることと、優れたデザインを実装できることは、イコールではないのです。

そこで今回は、アプリUIをデザインする際に役立つ配色理論と、理論をUIデザインに応用する方法を解説します。

原則1. 使用するのは3色まで

アプリUIをデザインする際には、とにかくカラフルにすることがデザインと思われがちです。しかし重要なのは「シンプルさ」。たくさんの色を使うのではなく、1〜2色のベースカラーを決め、そこから派生した色を使うのがおすすめです。

もし3色を使いたいなら、一歩間違えると色がごちゃごちゃしてしまうリスクがあるため、以下のようなルールを設定するといいでしょう。

• 1色はドミナントカラーとして背景色に使用（明るくニュートラルな色がおすすめ）
• 1色は補色として文字に使用（ドミナントカラーとは適度にコントラストをつける）
• 最後の1色はアクセントカラーとして、CTAやエラーメッセージなどに使用（明るい色で、事業のプライマリーカラーにすることも可能。バリエーションが必要な場合は濃淡を変えて使う）

なお、ベースカラーを暗くしたカラーを使いたい場合、明るさを下げて、彩度を高くするのがいいでしょう。反対に、明るい色のバリエーションを増やす際には、明るさを上げて彩度を下げるのがおすすめです。

▲左側は色数が多すぎる。右側のようなデザインがおすすめ（出典：UX Planet）

原則2. 配色ルールに従う

配色には「単色」「類似色」「補色」などのように、色彩理論に基づくルールがあります。

• 単色：
  ひとつの色だけを使い、彩度や明度を変えてバリエーションを増やす手法
• 類似色：
  いくつかの色味が近い色を使う手法
• 補色：
  2つの対照的な色を使う手法

個性を出すためについルールから逆張りしたくなりますが、原則はルールに従っておくのが無難です。

ルールを守っても個性を出すことは可能で、たとえば単色と中間色の組み合わせ（例：異なる濃淡の青に対して、白をアクセントカラーとして使用する）も活用できます。その他、配色ルールの活用ポイントは以下のとおりです。

• 類似色を使用する場合、カラーホイールの反対側にある彩度の高い色をアクセントカラーとして使用する
• 補色の組み合わせは彩度と明度に注意。補色のペアのうちひとつをドミナントカラーに、もうひとつをアクセントカラーに選ぶ。ドミナントカラーの彩度を下げ、さまざまな濃淡を試すと目に優しい色になる
• 彩度の低い単色パレットに、アクセントとして明るい色を組み合わせると効果的（例：濃淡の異なるグレーにアクセントカラーとしてブルーを使う）
• 文字と背景の組み合わせに補色を使うのはNG

原則3. 文字と背景色にコントラストをつける

文字と背景にコントラストをつけるようにしましょう。さらに、コントラスト比は最低でも4.5：1にするのがおすすめ。アイコンなど他の要素についても同様です。また白い背景には、明るい色ではなく黒や灰色の文字を使うようにしましょう。ユーザーの視認性が妨げられるからです。

その他、コントラストに関連して配慮すべき点は以下のとおり。

• カラーパレットは、WCAGのようなアクセシビリティガイドライン（障がいのある方でもアクセスしやすい基準）に準拠していることを確認する
• 原則、「緑と赤」「緑と茶」「青と紫」「緑と青」「青と灰色」「緑と灰色」を隣接させない
• コントラストをつける際、色だけに頼らず、アイコン、文字、パターン、テクスチャなどと色を組み合わせる

原則4. 色の組み合わせをテストする

色の組み合わせは、色単体で見ればいいわけではありません。アプリのUI上でどのように見えるのかが重要なので、実際のUIにあてはめてテストしましょう。

テストに際しては、色のコントラスト比をグリッド表示で確認できる『Eightshapes Contrast Grid』のようなツールを使うのも有効。カラーパレット内のすべての組み合わせを確認できます。

▲カラーパレット単体（左）ではよく見えても、UIに当てはめてみる（右）と見づらい場合がある（出典：UX Planet）

原則5. 同時対比をコントロールする

同時対比とは、まったく同じ彩度の補色、または補色に近い色が隣接している場合に発生する現象のことです。隣接した色の差が強調される効果があるため、同時対比はうまくコントロールしながら活用していく必要があります。

一般的に、文字と背景の組み合わせであれば同時対比は避けるべきとされ、そのためにはどちらかの色の彩度を下げるといいでしょう。逆に、通知などの特定の要素にあえて注目させる場合は、同時対比を活用するのがおすすめです。

ただし、UI全体が派手になりすぎてしまうため、彩度が高い色は複数使用しないほうが無難です。

▲左側のように文字と背景に同時対比が発生すると、可読性に影響を与える（出典：UX Planet）

原則6. 「60：30：10」のルールを守る

「60：30：10」のルールとは、60%をメインカラーに、30%をメインカラーの補色に、10%をアクセントカラーにするルールのこと。インテリアやファッションの領域ではメジャーなルールで、これはUIにも応用可能です。

具体的には、以下のようにUIに応用していくといいでしょう。

• 60％を中間色または淡色にする（ドミナントカラー）
• 30％を補色にする。第2のブランドカラーになる可能性あり
• 10%をアクセントカラーにし、CTAやアイコンなどのインタラクティブな要素に使う

原則7. 異なる機能に近い色を配置しない

UIデザインにおいては、一般的に「デザインが似ていると、機能も似ている」とユーザーに捉えられます。これは色についても同様なので、ユーザーに似た印象を与えたければ近い色を、そうでなければ異なる色を使うのがおすすめです。

具体的には、インタラクティブな要素とそうでない要素、「カートに入れる」と「FAQのアイコン」のように、異なる機能をもつ要素に同じ色を使わないようにしましょう。インタラクティブな要素には、ホバー時などの状態に応じて、明るい色と暗い色の両方を使うようにする、などの形で応用できます。

おわりに

上記のポイントは、配色の基本的な理論をUIデザインに応用する場合の一例です。もちろん、100%理論通りにUIデザインを行う必要はなく、時には理論から外れたデザインが評価されるかもしれません。しかし、アプリのUIデザインにおける色の扱いかたについて考えるうえで、基礎となる理論を知っておいて損はないでしょう。

せっかく機能や構造にこだわっていても、色の使いかたを誤るとUIを損ねてしまいます。駆け出しのうちは理論を意識し、使いやすいデザインを心がけるのがおすすめです。

（執筆：Abhijit Nayak　翻訳：Asuka Nakajima　編集：齊藤颯人　提供：UX Planet）