「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。
ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。
今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。
色彩の理論
色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。
- 補色性は他の色との関係性という点から色を見る方法です。色相環の逆端にある色を選ぶことで、視覚的な調和をもたらします。補色性を意識した色の組み合わせは主に２種類、３色配色、４色配色というものがあり、これらに関しては後述します。
- コントラストはスクリーン上の要素を明確に分断するので、ユーザーの見るべきポイントを定め、視覚への負担を減らします。要素間でコントラストを適切に調整することによって、テキストを簡単に読める様にし、読む人の注意をひきます。
- 鮮やかさや力強さは、色の感情を表現するものです。この話題に関しては、 Create Emotion With Color In UX Design の記事の中で述べています。
色相環
色相環は、色調を円状に並べたものです。全ての色は対となる色があり、色相環はある特定の色の逆に位置する色を見つけるのに使います。
参照 : artsconnected
この色相環は、原色、二次色、三次色も示しています。原色（赤、黄色、青）を混ぜることで、二次色（オレンジ、緑、紫）を作ることができます。薄くするなら白、濃くするには黒で濃淡（それぞれtintとshadeと表現される）を調整します。
効果的な配色をする
よい配色として広く知られている３つの構成法が「３色配色」、「４色配色」、「類似色」です。
３色配色
３色配色は、３つの構造の中で最も基本的でバランスのとれたものです。
色相環の端の３つの色から成ります。３色配色の配色を作るとても簡単な方法があります。色相環で、まず基本の色を選び、その点から正三角形を描きます。正三角形の３つの頂点が自分の３色のスキームとなります。
赤、黄色、青がそれぞれ120度の角度で位置している。これらは、３色配色といえる。参照 : tuts+
正三角形を使うことで、特性として同じ鮮やかさと補色性をもつ色を確実に捉えることができます。
４色配色
色相環のそれぞれ反対側にある色は補色といいます。この２色はコントラストが強いとされ、見る人の注意を強く引きます。
参照 : tuts+
例えば、赤の補色は緑です。Apple iOSの着信歴の数の表示の例を見てみましょう。補色を使った配色は、すぐにユーザーに重要な出来事へ目を向けさせます。
類似色
色相環の互いに隣り合う色は類似色といいます。これらは、デザインの中で、調和や連続性の意味を出す時に使うことができます。
この配色は比較的使いやすいのですが、使いようによっては大げさになってしまうため、どの色の鮮やかさを使うかがポイントです。類似色を使った配色は、色相環の同じエリアにある色を選びます。
黄色とオレンジの濃淡は、類似色の配色の例です。参照 : tuts+
ジェスチャータスクアプリのClearでは、類似色を使い、タスクの重要度を色によって表現しています。リストの一番下のアイテムは薄くてより明るい色なのに対して、一番上の重要なアイテムは一番濃くて目立つ色になっています。
iOSのClearアプリ
類似色を使った配色は、アプリやサイトに合うムードや雰囲気を作るのに使うことができます。例えば、メディテーションのアプリCalmは青と緑の類似色を使い、ユーザーがリラックスし、穏やかな気分になるように仕向けています。
ライトブルーは空と水のいろで、自由で穏やかな気分になります。緑は、健康とも関連付けられる色です。
美しい配色を習得する最も良い方法は、練習することです。そうする為に、まず自動ツールを使うことができます。
AdobeのColor CCは、カラーパレットを直感的に作ることのできるツールです。カラーパレット上の全ての色を変更することが可能で、完成したパレットも数回のクリックで保存できます。
Adobe Color CC（以前は、Kulerという名称でした）は、カラースキームを作るのに素晴らしいツールです。
文字の配色
テキストに色を使うとき、補色や類似色であったとしても、互いに隣り合う色のコントラストが低いと文字がとても読みにくくなるので注意が必要です。ユーザーが外にいて、スクリーンが外光に照らされる状況が考えられるモバイル上では特にです。
上はテキストと背景とのコントラストが不足しているので、ユーザーを苛立たせてしまいます。ユーザーの目はどの色に焦点を当てて良いのか分かりません。
このあたりはW3Cのアクセシビリティガイドラインを参照すると良いでしょう。視力が低い人も考慮した、テキストにおける必要最低限のコントラスト水準が策定されています。
W3Cによると、色と背景のコントラスト比は、明るさや光の強さに基づいて1〜21の範囲にします。W3Cは、ボディテキストとイメージテキストに対してのコントラスト比を次の様に薦めています。
- 小さな文字は背景に対して最低4.5:1のコントラスト比を維持する
- 大きな文字（太字は14pt／普通の場合は18ptから）は背景に対して最低3:1のコントラスト比を維持する
左のテキストはカラーコントラスト比の推薦値に合っていないので、背景の色に対して読みにくくなっています。参照: Material Design
一度色を選んだあとは、実際のユーザーが使う全てのデバイスで、必ずテストをする必要があります。もしテストのうち一回でも文章が読みづらいと感じたなら、ユーザーにも必ず全く同じ問題が起こります。
配色のコンバージョン率への影響
UIデザインの色彩の理論はただビジュアル的な観点だけではなく、よりたくさんの意味合いを持ち、ビジネスにも大きく影響していきます。この章では、CTA（call-to-action＝行動喚起）ボタンに焦点を当てます。
CTAボタンとは、配置、形、コピー、色の４つからなるものです。この４つの側面の足並みを合わせることで効果のあるCTAボタンを作ることができます。
その中でも、ボタンの色はコンバージョンや最適化において、最も議論されている要素の一つです。CTAボタンの色を変更することで、どれだけアクションに結びつくかというA/Bテストもたくさん行われています。例えば、HubSpotもボタンの色のテスト結果を公開しています。
ボタンの色のテストのAとBの実効性。ページの内容は全ては同じで、ボタンの色だけが違います
テスト前は、緑のボタンの方が効果が良いと予想されていましたが、結果は赤いボタンの方が、21％多くのクリックをされました。
しかし、すべての状況にこの結果を当てはめるのは不可能です。
すべてのサイトやアプリに一貫して万能に効果のあるマジックカラーはないということです。従って、つねに自分のページで色をテストし、自分のユーザーと何が起こるかを見る様にしましょう。
コントラストが鍵
もしユーザーに何かをクリックして欲しいのなら、それを目立たせましょう。サイトやアプリで青をたくさん使っているなら、たぶんユーザーは青いボタンにはすぐに気付かないでしょう。
それは明るい背景に対して，明るいボタンは目立たないのとちょうど同じことです。ユーザーは、背景とコントラストがあるCTAボタンをクリックします。
まとめ
Webやアプリのデザインにおいて、配色の基本的な理解を欠くことはできません。
ここで述べてきたことは、色彩の理論がどのようにUIデザインを充実させることができるかについてのほんの入り口にしか過ぎませんし、アプリの配色についての追求に至っては、底はありません。どんな色を選んだにせよ、それは全体のデザインに大きく影響することを覚えておいて下さい。
