デザイン配色の基本｜70:25:5の黄金ルール

デザイン配色の黄金比

配色に迷ったら「70：25：5」の配色比率を意識すると、バランスの良いデザインを作りやすくなる。

「70：25：5」は、ベースカラー・メインカラー・アクセントカラーの面積比率を表した配色の基本ルールで、Webデザインや広告、ファッション、インテリアなど、さまざまな分野で活用されている。

色の役割を明確に分けることで、情報の優先順位を整理しやすくなり、視線誘導や統一感のあるデザインにつながる。

ただし、この比率はあくまで目安であり、デザインの目的や雰囲気に合わせて柔軟に調整することが大切である。

色のバランス

配色は、色の面積比率を意識するとバランスよくまとめやすくなる。
 
※ あくまで目安の比率であるため、この比率を参考にしつつ、実際の配色は感覚に合わせて調整すると良いでしょう。

ベースカラー

 
ベース・カラー*Base Color
背景色とは、配色の中でもっとも広く「全体の70%の面積」を占める色で、全体のイメージの基盤となる色のこと。
 
主に「背景色」として使用され、メインカラーやアクセントカラーの妨げにならないように、白や淡い色が用いられることが多い。
 
濃い色を背景に使用すると、目がチカチカして疲れやすく、文字が読みにくくなることがあるため注意が必要。

メインカラー

 
メイン・カラー*Main Color
主役色とは、配色の中で2番目に広く「全体の25％の面積」を占める色で、ロゴやキャッチフレーズなど、見る人の目を引きやすい「メインコンテンツ」に使用される。「アソート・カラー*Assort Color
配合色」ともいう
 
対象のイメージを強調する役割を持つ色であるため、「キーカラー」や「ブランドカラー」として用いられることが多い。
 
キーカラー
キー・カラー*Key Colorとは、配色において、コンセプトやターゲットのイメージに最も適した「メインになる色」のこと。
ブランドカラー
ブランド・カラー*Brand Colorとは、その企業が展開する製品など、「ブランドを象徴する色」のこと。

アクセントカラー

 
アクセント・カラー*Accent Color
強調色とは、配色の中でもっとも小さく「全体の5％の面積」を占める色で、全体を引き締めたり変化をつける役割がある。

色の選び方

伝えたいテーマに基づき、メインカラーを基準にして、ベースカラーとアクセントカラーを決めていく。

1．メインカラー

 
はじめに、デザインのイメージを大きく左右する「主役となる色」を決める。
 
色にはそれぞれ固有のイメージがあるため、コンセプトやターゲットに合った色を選ぶことで、伝えたいメッセージをより効果的に伝えることができる。
 
また「文字のよみやすさ」といった可読性などを考慮して、明度の低い色を用いると扱いやすくなる。

2. ベースカラー

 
次に、もっとも面積の広い「背景となる色」を決める。
 
ベースカラーは、メインカラーを引き立て、全体の印象に大きく影響する色。
 
原色など主張の強い色は避けて、メインカラーとのコントラストが大きくなる色、主に無彩色や高明度で低彩度の色を選ぶと扱いやすくなる。
 
また、メインカラーの明度を上げた色をベースカラーに使うことも定番で、統一感のある配色になる。

3. アクセントカラー

 
最後に、もっとも面積が小さいが「注目させたい色」を決める。
 
アクセントカラーは、配色にメリハリをつけるための色。高彩度の色や、メインカラーの補色を使うと視線を集めやすくなる。

色数を増やす

基本3色をベースに、近い色を追加していくことで、バランスを崩さずに配色の幅を広げることができる。
 
ただし、色数が増えるとデザインのバランスが取りにくくなったり、伝えたいイメージが伝わりづらくなる可能性もあるので注意が必要。

ベースカラーを分割

メインカラーを分割

ｱｸｾﾝﾄｶﾗｰを分割