第3章約 5 分で読めます全 42 記事中 12 本目この章の 3 / 5
配色の基本：2色・3色でまとめる
🎯
GOAL
色を絞る理由を理解し、まとまった配色パターンを作れる
色が多すぎるとどうなるか
色は増えるほど「視線の競合」が起きます。どこを見ればいいかわからなくなり、
デザイン全体がうるさく・安っぽく見えてしまいます。
下の2枚のカードを比べてみてください。情報量はまったく同じです。
左は6色・右は3色。内容は同じでも、右のほうが落ち着いて信頼感があります。色が多い＝情報量が多い、ではありません。視線を分散させるだけです。
3色それぞれの役割
まとまった配色には、色ごとに「使う量（比率）」と「役割」があります。
この比率が 60:30:10 です。
60% ベースカラー
背景や大きな面積に使う地の色
白・ライトグレー・クリーム
30% メインカラー
ブランドを表す主役の色
ヘッダー・ボーダー・テキスト見出し
10% アクセントカラー
視線を引き寄せるさし色
CTAボタン・バッジ・強調タグ
60:30:10の配色例を見てみよう
実際のデザインでは3色をどう使い分けるのか、
具体例で確認しましょう。下のカードはベースカラー・メインカラー・アクセントカラーの3色だけで作っています。
ベース
60%
背景・カード地
#FAFAF8
メイン
30%
テキスト・見出し・ヘッダー
#1C1917
アクセント
10%
CTAボタン・バッジ
#F06840
配色例：コースカード
ベース（60%）: カード背景・本文エリア
メイン（30%）: ヘッダー・テキスト・ボーダー
アクセント（10%）: CTAボタン
✏️
やってみようCoolors（coolors.co）を開き、スペースキーで配色を生成してください。気に入ったパレットが出たら「ベース・メイン・アクセント」の3色に絞って、上のカードと同じ構成で自分のブランドカラーパレットを作ってください。
NEXT STEP
次は「60:30:10の法則」続けて読む →