60:30:10の法則

「何色をどれだけ使うか」が安定感を決める

3色を選んでも、使う面積の割合が偏るとデザインのバランスが崩れます。
「60:30:10」という比率はインテリアデザインの理論ですが、
グラフィック・Webデザインでも同じように機能する実用的な配色バランスの指針です。

60:30:10それぞれの役割

60%（ベースカラー）は背景や広い面積に使います。デザインの「地」となる色で、
白やライトグレーなどの落ち着いた色が適しています。
目が疲れにくく、他の要素を引き立てる役割を持ちます。

30%（メインカラー）は見出し・ナビゲーション・カードの背景など、
中程度の面積に使います。ブランドのアイデンティティを担う色で、
見た人が「このブランドといえばこの色」と認識できるよう、
ロゴなどに使用されることが多いです。そのため、
明度の低い色が扱いやすいとも言われています。

10%（アクセントカラー）はボタン・バッジ・強調テキストなど、
小さい面積にだけ使います。面積が少ないからこそ効果が最大化され、
視線を引き寄せます。

10%の面積に価値がある

アクセントカラーは10%だからこそ効果があります。
「目立たせたいから」と増やしていくと、20%では少しまとまりが欠け、
30%ではうるさく落ち着かない印象になります。

この仕組みには心理的な根拠があります。人は「めったに現れないもの」に価値を感じる性質を持っています（希少性原理）。
デザインでも同様で、アクセントカラーがほんの小さな面積にしか使われていないからこそ、
その色が登場したとき「これは重要なシグナルだ」と無意識に認識します。
逆に同じ色が画面のあちこちにあると、「どれが本当に大事なのか」が分からなくなり、
全体が騒がしく見えます。

「使いたい気持ちをぐっと抑える」。この感覚がアクセントカラーを正しく使う鍵です。

実際のデザインへの適用

たとえばInstagram投稿（1080×1350px）であれば、
白い背景エリアがベース60%、見出し・ボーダー・テキストがメイン30%、
CTAボタンや見出しアンダーラインがアクセント10%という構成になります。

実際に面積を計算する必要はありませんが、「アクセントカラーは本当に小さい部分だけ」という感覚を持つことが大切です。

まとめ

60:30:10の法則は、3色を「どれだけ使うか」という比率の指針です。
ベースを大きく・メインをほどよく・アクセントをごく少量。
この割合を意識するだけで、デザインの安定感が格段に上がります。

NEXT STEP