配色の黄金比「60:30:10」とは
「60:30:10」とは、空間やデザインにおいて、3つの色を「60%：30%：10%」の割合で使うと、誰でも簡単にバランスの取れた美しい配色が作れるという、古くから知られている比率のことです。多くのプロのデザイナーが、このルールを基本として配色を組み立てています。
ルールの基本的な考え方
このルールの考え方は非常にシンプルです。まずデザインに使う色を3つに絞り、それぞれの色に役割を与えます。
- 60%：ベースカラー（基盤となる色）
- 30%：メインカラー（テーマを象徴する主役の色）
- 10%：アクセントカラー（注意を引く差し色）
なぜ心地よく感じるのか
この比率は、人間の脳が情報をスムーズに処理し、心地よいと感じるバランスに基づいています。最も広い面積のベースカラーが空間の安定感を作り、次に広いメインカラーが個性を与え、最も小さいアクセントカラーが視線を導く。この役割分担が明確なため、情報が整理され、見る人にストレスを与えないのです。
インテリアからWebデザインへ
元々はインテリアデザインの世界で確立されたこのルールですが、その普遍的な美しさから、ファッションやグラフィック、そしてWebデザインの世界でも広く応用されています。部屋の壁、家具、小物を選ぶように、Webサイトの背景、メインコンテンツ、ボタンの色を考えていくのです。
3つの色の役割を理解する
「60:30:10」ルールを効果的に使うためには、各割合の色が持つ役割を正しく理解することが不可欠です。それぞれの色がデザインの中でどのような仕事をするのかを見ていきましょう。
60%：ベースカラーの役割
最も大きな面積を占めるベースカラーは、デザイン全体の背景となり、空間の雰囲気を決定づける色です。他の色を引き立てる役割を持つため、白、ライトグレー、淡いベージュといった、控えめで落ち着いた色が選ばれることが多く、テキストの可読性を確保する上でも重要です。
30%：メインカラーの役割
メインカラーは、そのデザインのテーマやブランドイメージを最も強く表現する「主役」の色です。ロゴやキービジュアル、見出しなどに使用され、サイト全体の印象を決定づけます。顧客に最も伝えたい感情（例：信頼感なら青、温かみならオレンジ）を表現する色を選びましょう。
10%：アクセントカラーの役割
最も面積が小さいアクセントカラーは、ユーザーの視線を引きつけ、特定の行動を促すための最も重要な色です。購入ボタンやリンク、お問い合わせフォームなど、クリックしてほしい場所に限定的に使用します。メインカラーの反対色など、鮮やかで目立つ色を選ぶと効果的です。
実践！Webサイトへの応用方法
それでは、このルールを実際のWebサイトにどのように当てはめていくのか、具体的な手順を見ていきましょう。自分のサイトを思い浮かべながら読んでみてください。
ベースカラーで空間を作る
まず、サイト全体の背景色や、コンテンツ間の余白部分にベースカラー（60%）を適用します。これにより、サイト全体の統一感が生まれ、コンテンツが読みやすい安定した土台が完成します。多くの場合、白やごく薄いグレーが最適です。
メインカラーで印象を決定
次に、ヘッダーやフッター、主要な見出し、アイコンなどにメインカラー（30%）を使います。これがサイトの第一印象を決めます。ブランドロゴの色をメインカラーに設定すると、ブランドイメージを強く印象づけることができます。
アクセントで視線を誘導
最後に、最も重要な「購入する」ボタンや「詳しくはこちら」のリンク、セール情報のバッジなどにアクセントカラー（10%）を配置します。使用箇所を限定することで、その要素の重要性が際立ち、ユーザーは直感的に「ここが重要だ」と認識してくれます。
まとめ
配色に迷ったとき、黄金比率「60:30:10」ルールは、あなたを助けてくれる強力な設計図となります。このルールは、あなたのデザインから「なんとなく」をなくし、すべての色に明確な意図と役割を与えてくれます。まずはあなたのブランドを表現する3色を選び、この魔法の比率を当てはめてみてください。それだけで、あなたのサイトは驚くほど洗練され、伝わるデザインへと進化するはずです。
コメント