色を、役割の大きい順に決める
配色で手が止まるのは、「どの色を、何のために使うか」が決まっていないからです。まず背景や本文を支える土台、次にその紙面らしさ、最後に行動や注意を示す色、と役割の大きい順で決めます。
3つの役を、用途で分けると次のようになります。
| 役 | 働き | 選び方の例 |
|---|---|---|
| ベースカラー（土台） | 背景や本文を安定して読ませる | 十分なコントラストを作れる落ち着いた色 |
| メインカラー（らしさ） | ブランドや企画の印象をつなぐ | ロゴ、商品、写真から根拠を持って選ぶ色 |
| アクセントカラー（強調） | 行動や重要な状態を知らせる | 他の要素と区別でき、読める色 |
ベースが広く、アクセントが狭くなる例は多いものの、固定の面積比ではありません。写真が大きい紙面、UIの状態色が多い画面、ブランド規定がある制作物では配分が変わります。数字に合わせるのではなく、どの役が強すぎるかを見ます。
たとえるなら、オーケストラのようなものです。土台を支える低音のリズムがあり、その上に主旋律が流れ、ここぞという瞬間にシンバルが一度だけ鳴る。全部が同じ音量で鳴り続けたら、音楽になりません。配色も同じで、広く静かに支える色、主役を張る色、一瞬だけ効かせる色。役が分かれているから、まとまって聞こえるのです。 オーケストラの比喩で分かるのは、色ごとに役と強弱を持たせる考え方です。実際の面積比は、画面、紙、写真の有無によって変わります。
3つの役を、順番に決める手順
面積の順が分かれば、あとは順番に選ぶだけです。次の手順で進めます。
- ベースカラーを決める。 紙面の土台になる色です。白・生成り・薄いグレーなど、他の色を邪魔しない落ち着いた色が向きます
- メインカラーを決める。 その紙面の主役になる色です。お店のイメージや、伝えたい印象から選びます。ここが「らしさ」を決めます
- アクセントカラーを決める。 いちばん見てほしい場所に使う差し色です。ボタンや価格など、目を引きたい1カ所に絞って使います
- 役割を確かめる。 アクセントが何カ所も競っていないか、本文とのコントラストが足りるかを見直します
この手順の効き目は、迷いが消えることです。新しい色を足したくなったとき、「これは土台・主役・強調のどれか」と問うだけでよく、無限の色見本から選び直す必要がなくなります。差し色の働きについては、アクセントカラーでくわしく扱っています。
順番を守ることには、もう1つの利点があります。あとから色を変えたくなっても、役ごとに考えれば、どこをどう変えればいいかが分かりやすいのです。「主役の色だけ、もう少し明るくしたい」「差し色を赤から青に替えたい」というように、役の単位で調整できます。色をばらばらに選んでいると、1色変えるだけで全体のバランスが崩れますが、役で組み立てておけば、その心配がありません。役割分担は、決めるときだけでなく、直すときにも効きます。
メインカラーは、印象から選ぶ
3つの中で、いちばん迷いやすいのがメインカラーです。主役の色をどう選ぶか、コツを補足します。
メインカラーは、好みだけでなく、伝えたい印象と既存のブランド資産から逆算します。青なら信頼、橙なら温かい、と一律に決めず、競合、文化、写真、相手の受け取り方も比べます。この、色だけでなく紙面全体の調子をそろえる考え方がトンマナです。
実際、お店のチラシなら、そのお店らしさがいちばん出るのがメインカラーです。焼き菓子店なら焼き色のブラウン、花屋なら季節の花の色。ベースは静かに、メインで個性を出し、アクセントで行動を促す。この役割分担が、配色の背骨になります。
メインカラーを決めるとき、写真を使う紙面なら、その写真から色を拾うのも良い方法です。使う商品写真の中にある色をメインに据えると、写真と紙面が自然になじみます。ゼロから色を考えるより、すでにそこにある色を活かすほうが、まとまりやすく失敗も減ります。色に迷ったら、まず紙面に置く写真をよく見てみてください。答えが写真の中に隠れていることは、意外と多いのです。
つまずきやすい、アクセントの使いすぎ
3つの役でつまずきやすいのが、アクセントカラーです。目立つ色なので、つい広い面積に使ってしまいます。
アクセントは、周囲より使う場所が限られているから働きます。鮮やかな差し色をあちこちへ使うと、どこが重要か分かりにくくなります。割合で切るのではなく、主な行動や注意など、意味を説明できる場所に限定します。配色が安っぽく見えるのはなぜでも、色と目的の一致を扱っています。
もうひとつのつまずきは、メインとアクセントの区別が曖昧なまま、2つの色を同じくらいの面積で使ってしまうことです。すると、どちらが主役か分からず、紙面がぼやけます。主役は1つ、差し色は少しだけ。この差をはっきりつけることが、まとまりを生みます。色数そのものの絞り方は、デザインの色は何色までとあわせて見ると、より腑に落ちます。
3役に振り分けて、見直す
今日のワーク：色を役に振り分ける
あなたが「いいな」と感じる広告や商品パッケージを1つ選んでください。そして、使われている色を、土台・主役・強調の3役に振り分けてみます。
- いちばん広い面積の色は、どれですか(土台)
- その紙面らしさを作っている色は、どれですか(主役)
- ごく一部で目を引いている色は、どれですか(強調)
うまく振り分けられる紙面ほど、3役がはっきり分かれています。逆に、振り分けにくいと感じたら、それは色の役が曖昧なサインかもしれません。
配色を3役で分解する練習をすると、自分の判断材料が増えます。振り分けたあとは自分の紙面へ戻り、役の説明がつかない色や、複数のアクセントが競っていないかを見直します。最後に本文と背景、ボタンと背景のコントラストも測ってください。
色は、選ぶ前に役を決める
ベース・メイン・アクセントは、面積の大きい順に役を決めると迷いません。土台を静かに、主役で個性を、差し色でひと押し。この順に選べば、色同士がけんかせず、まとまった配色になります。色選びで手が止まるのは、色そのものより、役が決まっていないからです。
色から決めるのではなく、役から決める。この順番を身につけると、配色で手が止まることは、ぐっと減ります。3役の決め方がつかめたら、次は色数全体をどう絞るかです。次に進むなら、デザインの色は何色までで、役割分担と色数の考え方を続けて確かめてみてください。