デザイン配色の黄金比
配色に迷ったら「70：25：5」の配色比率を意識すると、バランスの良いデザインを作りやすくなる。これは「ベースカラー・メインカラー・アクセントカラー」の面積比率を表す基本ルールである。
色の役割を分けることで視線誘導がしやすくなり、統一感のあるデザインにつながる。
ベースカラー
70%
メインカラー
25%
アクセントカラー
5%
この比率はあくまで目安であり、デザインの目的や雰囲気に応じて柔軟に調整する。
色の使い分け
配色は、色の面積比率を意識するとバランスよくまとめやすくなる。
※ あくまで目安の比率であるため、この比率を参考にしつつ、実際の配色は感覚に合わせて調整すると良いでしょう。
ベース・カラー*Base Color
背景色とは、配色の約70%を占める背景色。
全体の土台となり、白や淡い色など主張しない色が使われることが多い。
メイン・カラー*Main Color
主役色とは、約25%を占める主役の色。
ロゴや見出しなど、印象を決める重要な役割を持つ。
アクセント・カラー*Accent Color
強調色とは、約5%を占める強調色。
視線を集めたり、デザインにメリハリをつけるために使用される。
色の選び方
配色はまずメインカラーを決め、その後にベースカラーとアクセントカラーを組み立てると考えやすい。
メインカラーは、デザインの印象を決める主役の色。
コンセプトやターゲットに合った色を選ぶことが重要。
ベースカラーは、背景となる色。
メインカラーを引き立てるため、ベースカラーには白や淡い色などの低彩度・高明度の色を使うと視認性が高くなる。
アクセントカラーは、最後に決める強調色。
補色や高彩度の色を使うと視線を集めやすい。
色数を増やす
基本の3色に近い色を追加することで、デザインの幅を広げることができる。
ただし、色数が増えるほど統一感は弱くなるため注意が必要。
背景色にバリエーションを持たせて柔らかい印象にする。
メインカラーの明度・彩度を変えて階層をつくる。
複数の強調色を使い、視線誘導を細かく設計する。