役割と比率

ねらい

配色でいちばんよくある失敗は、「色を選ぶこと」だと思い込むことだ。きれいな色を3つ4つ並べたのに、なぜか画面がうるさい、安っぽい、まとまらない――その原因はほとんど、色の選び方ではなく配り方にある。

このクエストのねらいは一つ。色を「足すもの」から「役に割り当てて配分するもの」へ、頭を切りかえること。具体的には、画面の色を3つの役割――ベース（地）・メイン（主役）・アクセント（差し色）――に分け、それぞれにどれだけの面積を与えるかで考える。前章で習った補色や類似は、ここで「どの役に置くか」という形で実戦投入される。

色は「数」ではなく「役」で考える

まず一番大事な考え方を握る。画面の中の色は、何色あるかではなく、それぞれが何の役を果たしているかで見る。

役は3つだ。

• ベース（地） … 画面の大部分を占める、背景・土台の色。いちばん広い。たいてい白・生成り（きなり＝染めていない布のような薄い黄みがかった白）・薄いグレーなど、おとなしい色。
• メイン（主役） … そのデザインの「顔」になる色。ブランドの色、見出しや主要な面に使う色。ベースの次に広い。
• アクセント（差し色） … いちばん狭いのに、いちばん目立つ色。「ここを押せ」「ここを見ろ」を伝えるボタンやリンクに使う。

ここが直感に反するところだ。面積がいちばん小さいアクセントが、いちばん強い色になる。広い色は静かで、狭い色は強い。色の強さと面積は、わざと逆にする。

なぜ「数」で考えてはいけないのか。「3色まで」のような数のルールは、配分を教えてくれないからだ。同じ赤・白・黒でも、赤が画面の半分なら警告音だらけのうるさい画面になり、赤が5%なら洗練された一枚になる。色が同じでも、面積が違えば別物になる。だから数ではなく役と面積で考える。

なぜ強い色ほど面積を狭くするのか（歴史）

ここが理屈の心臓だ。「強い色は狭く」は、誰かの好みではない。200年前の観察に根がある。

1810年、ドイツの文豪ゲーテ（あの『ファウスト』の作者だ）は『色彩論』という本で、色には見た目の“強さ・重さ”がそれぞれ違うと書いた。そして後の時代、その強さに数字をふったのがイッテン（後で出てくる）だ。もとはゲーテが**“その色の明るさ”**として測った値で、明るい色ほど目に強く効く――だから黄色は「9」と強く、暗い紫は「3」と弱い、となる。黄色は少しでも目に飛び込んでくるが、紫はおとなしい。

すると面白い結論が出る。強い色と弱い色を“同じ面積”で並べると、釣り合わない。 強い黄色がうるさく勝ってしまう。釣り合わせるには、強い色を狭く、弱い色を広くするしかない。考え方はかんたんで、強さが3倍なら、面積を1/3にすればちょうど釣り合う。だから黄1に対し紫3、という面積比になる。ゲーテは黄と紫なら「1:3」くらいの面積比で釣り合う、とした。

この観察を、デザインの理論としてきれいに整理したのがヨハネス・イッテンだ。彼はあのバウハウス（機能を最優先したドイツの造形学校。様式編で出てくる）で色彩を教えた人で、著書『色彩論（色彩の芸術）』（1961年）で、色の対比を7種類に分けた。その一つが面積対比――「色は、面積の大きさによって効き方が変わる」という法則だ。強い色は小さく使え、弱い色は大きく使え。これがアクセントを「狭く・強く」する理屈の正体だ。

70:25:5 ―― 目安であって、法則ではない

役が3つに分かれたら、次は「どれくらいの面積で配るか」。ここでよく出てくるのが70:25:5（あるいは60:30:10）という比率だ。ベース約70、メイン約25、アクセント約5。

正直に言う。この数字そのものに、絶対の根拠はない。 これは主にインテリア（部屋づくり）の世界で長く使われてきた経験則だ――やってみて上手くいった積み重ねから来る目安だ。壁を一番広く、家具を次に、クッションや小物で差し色を少し――その配分が落ち着いて見えた、という積み重ねから来ている。誰が何年に決めた、という厳密な出典は、はっきりしない。だから「70:25:5でなければならない」というのは嘘だ。68でも72でも、まとまっていれば正解だ。

ではなぜ、こんな“あいまいな数字”をわざわざ覚えるのか。比率を守ること自体が目的ではなく、「3役の面積に大きな差をつける」という方向を体に入れるためだ。初心者がやりがちなのは、3色をだいたい同じ面積でばらまくこと（33:33:33に近い配分）。これをやると、どれが主役か分からず、画面がガチャガチャになる。70:25:5は「そんなに差をつけていいんだ」という感覚を与えてくれる、いわば補助輪だ。だからこのクエストでは、数字そのものより「強い差をつける」という思想の方を覚えてほしい。必然ではない数字を、必然のように振りかざさない――これも典拠主義の誠実さだ。

前章の補色・類似を、どの役に割り当てるか

ここで前章（色相環と配色）とつながる。まず言葉を二つだけ思い出そう。補色とは、色相環（色を輪に並べた図）で正反対にある色どうしのこと。類似色とは、色相環で隣どうしにある近い色のことだ。補色や類似で色を選んだら、次はそれを3役に配る。組み合わせは、ざっくり次のように考えると外さない。

• ベース … ほぼ無彩色（＝白・黒・グレーのような色味のない色）か、メインをうんと薄めた色。主張させない。
• メイン … ブランドの主役色。ここで世界観が決まる。
• アクセント … メインの補色（色相環の正反対の色）を置くと、最大のコントラスト（色の差）で一番目立つ。だからボタンやリンクに最適。

逆に、メインとアクセントを類似色（色相環で隣どうしの色）にすると、ぶつからず上品にまとまるが、差し色のインパクトは弱まる。強く目立たせたいなら補色、穏やかにまとめたいなら類似――前章の知識が、ここで役割の言葉に翻訳される。

注意が一つ。アクセントは1つに絞るのが基本だ。差し色が2色3色あると、「ここを見ろ」が複数になって、結局どこも目立たない。一番強い色は、画面で一つの仕事（最重要の行動を促す）だけに使う。これが「最小面積で一番目立つ」を活かすコツだ。

設計の順番 ―― 足すのではなく、配る

最後に、実際の手順に落とす。色を「足していく」のをやめ、「役を決めて配る」に切りかえる。順番はこうだ。

1. ベースを決める（まず地の色。たいてい白か薄いグレー。ここは静かに）
2. メインを1色決める（主役。世界観を背負う色）
3. アクセントを1色決める（メインの補色など。最小面積で、最重要の場所だけに）
4. 面積で差をつける（おおよそ大・中・小。70:25:5は目安）

この順で組むと、色数が自然と絞られ、主役がはっきりする。「なんかうるさい」ときの直し方も決まっている――色を足すのではなく、役のはみ出しを疑う。アクセントが広すぎないか？　メインが地まで侵食していないか？　たいてい原因は「強い色の面積オーバー」だ。引いて配分を戻すと直る。

見分け方

街やWebで、配色が「うまい」一枚を見たら、3役で読み解いてみよう。

• 画面の大部分を占める、おとなしいベースは何色か（たいてい白・グレー系）
• 世界観を背負うメインは何色か（1色のはず）
• 一番狭いのに一番目立つアクセントはどこか（ボタン・リンク・重要な数字など、1か所のはず）

この3つがきれいに見つかれば、それは「役割と比率」で設計された一枚だ。逆に、強い色が画面のあちこちに同じくらいの面積で散っていたら、たいてい「うるさい」と感じるはず。色の良し悪しは、選んだ色より、配った面積で決まる――この目を持てば、配色は感覚ではなく設計になる。

譜例

棚（design-gallery）で配色の実例を見て、本文の3役（ベース／メイン／アクセント）と、おおよその面積比を読み解いてみよう。

• 棚：配色の実例を見る

見るときは、「一番広いベースは何色か」「世界観を背負うメインは何色か（1色のはず）」「一番狭いのに一番目立つアクセントはどこか（1か所のはず）」の3つを、実際に指さして当ててみるとよい。

練習・チェック

1. 身近なWebサイトを1つ選び、ベース・メイン・アクセントの3役と、それぞれおおよその面積（大・中・小）を当ててみよう。アクセントが1か所にきれいに絞られていれば、それは「役割と比率」で設計された一枚だ。
2. なぜ強い色ほど面積を狭くするのかを、一文で言えるか。（ヒント：色には見た目の強さの差があり、強さ×面積で釣り合わせる）
3. 友達の作ったチラシやスライドが「なんかうるさい」とき、色を足さずに直してみよう。強い色（アクセントやメイン）の面積が広がりすぎていないかを疑い、配分を大・中・小に戻すのが先だ。