色の役割

定義

色の役割とは、画面で使う色をただ何色も並べるのではなく、それぞれの色に担当する仕事を 決めてあげる考え方です。画面の大半を占める背景や文字、ボーダーは目立たない中立色（多くは グレー系）が静かに受け持ち、ユーザーに押してほしい主要なボタンや大事なリンクはブランドを 代表する主色が担当し、ほんの一部だけ視線を一気に引きたい箇所にアクセント色を使います。 色を何色使うかよりも、それぞれの色が何の仕事をするかが決まっているかどうかがずっと大切で、 こうして役割を分けることが色を扱う最初の一歩になります。

なぜ重要か

この使い分けが大事なのは、ユーザーが画面を読むときの負担を大きく減らしてくれるからです。 中立色が土台を静かに支えていれば、主色で塗られた要素は自然に浮き上がり、ユーザーはどこを 押せばいいのか特に迷わず気づけます。逆にすべての要素がそれぞれ派手な色をまとうと、何が 重要なのかを判断する手がかりが消えてしまい、画面は散らかって安っぽく見えます。色を役割ごとに 整理しておけば、新しい画面をつくるたびに色を一から悩む必要もなくなり、製品全体が一人の手で つくられたような一貫した印象を持ちます。さらに役割が決まっていれば、後からブランドを刷新する ときも主色を一か所差し替えるだけで済み、何十もの画面をひとつずつ探し回らなくても全体のトーンを 一度に変えられます。

よくある間違い

• アクセント色をあちこちに使いすぎるケースです。アクセントはありふれた瞬間にアクセントでは なくなります。画面のほとんどが明るい色だと、肝心の本当に大事なボタンが埋もれてしまい、 ユーザーの視線を狙った場所へ導けなくなります。
• 中立色を純粋なグレーだけで使うことです。ブランド色と何の関係もない無彩色のグレーは、 画面を冷たく安っぽく見せてしまいがちです。中立色にも主色の気配をほんの少し混ぜてあげると、 画面全体がひとつの家族のようにまとまり、ずっと調和して感じられます。
• 主色を背景のように広い面積へまるごと塗ることです。主色は押すべき場所を指し示す合図なのに、 広く敷いてしまうとどこが実際のボタンなのか分からなくなり、本来の案内役を失ってしまいます。

実務のヒント

• 色は「たくさん」ではなく「役割ごとに」使いましょう。中立・主色・アクセントの三つの席を先に 決めて、その中でだけ色を配置すれば、ブランド色を一つ変えるだけで製品全体の印象がまるごと 変わるのを確かめられます。スライダーで主色を回してみると、この威力がひと目で分かります。
• それぞれの役割に明るさの段階も一緒に用意しておきましょう。主色が一つだけでなく、淡い背景用 から濃い文字用まで段階があってこそ、実際の画面のさまざまな場面に対応できます。
• 色が決まったら、必ずコントラストの基準を満たしているか確認しましょう。どんなにきれいな 組み合わせでも文字が読めなければ、役割をきちんと果たせていないということです。

関連概念