配色の作り方 ― ベース・メイン・アクセントと 60-30-10

配色は色数より「役割と面積」で決まる

きれいな配色を作ろうとすると、つい色をたくさん選びたくなります。ですが実際は、色の数を増やすよりも、それぞれの色に役割を与えて面積を配分するほうが、まとまった印象になります。使う色は2〜3色にしぼり、どの色をどれだけの広さで使うかを決める。これが配色の骨組みです。

ベース・メイン・アクセントの三つの役割

配色は、次の三つの役割に分けて考えると整理できます。

ベースカラー    … 背景など、いちばん広い面積。おとなしい色
メインカラー    … 主役。そのデザインの印象を決める色
アクセントカラー … 差し色。いちばん狭い面積で、目を引く色

ベースは彩度をおさえた色や無彩色に近い色、メインはテーマとなる色、アクセントはメインの補色や彩度の高い色を少しだけ、というのが基本の組み立て方です。

60-30-10 の法則

三つの役割の面積比の目安が 60-30-10 です。ベースを 60%、メインを 30%、アクセントを 10% くらいにすると、バランスが取りやすいと言われます。

ベース 60% : メイン 30% : アクセント 10%

数字はあくまで目安ですが、「主役より背景を広く、差し色はほんの少し」という比率の感覚をつかむのに役立ちます。アクセントを増やしすぎると、どこを見ればよいか分からなくなります。

色相環から色を選ぶ

三つの色をどう選ぶかは、色相環の関係で決められます。落ち着かせたいなら類似色、はっきりさせたいなら補色というように、このツールの補色・類似色のカードで候補を出し、それをベース・メイン・アクセントに割り当てると、手を動かしながら決められます。

まとめ

配色は「色をたくさん選ぶ」ことではなく、「役割を決めて面積を配る」ことです。ベース・メイン・アクセントの三役に分け、60-30-10 を目安に面積を振り、色相環の関係で色を選ぶ。この順番で考えると、少ない色でもまとまった配色になります。