目次
「自分で色をつけたら、なんだか雑多でダサくなる💦」
「私にはデザインセンスがないのかな？💦」と不安になることはありませんか？
せっかく作業したのに、配色がチグハグだと落ち込みますよね。
「ダサ見え」の正体は“色数オーバー＋相性迷子”
結論から言えば、原因はセンス不足ではなく「色数と役割のルール」の知識不足です。
つまずきやすいのは次の2点です。
- 相性の悪い色を混在させてしまう
- 色数が多すぎる（＝情報の優先順位が見えなくなる）
感覚で色を“足していく”ほど、画面は散らかって見えます。
逆に、必要な色を絞って役割を決めるだけで、統一感は一気に高まります。
3色に絞れば一気に整う
プロのデザイナーも直感だけで配色しているわけではありません。
実務では“配色の法則”を使い、誰でも再現できる形に落とし込みます。
最初の一歩として強力なのが「3色に絞る」ルールです。
面積の黄金比：70-25-5
- ベースカラー（約70%）：背景・土台に使います。白、ごく薄いグレー、淡いベージュなど低彩度が安定します。
- サブカラー（約25%）：見出し・ボタン背景・区切り線などの補助要素に使います。ベースとのコントラストを確保します。
- アクセントカラー（約5%）：CTAボタン、バッジ、リンクのホバーなど最重要アクションに限定します。
すぐにできる手順
- まず無彩色で設計します（白〜グレーのみ）。レイアウトの優先順位を先に固めます。
- ベースを決定：背景は「白 or ごく薄いグレー」。迷ったら #FFFFFF（白） か #F7F7F7（薄いグレー） にします。
- サブを1色加える：テキストや見出し、枠線に使える“落ち着いた色”を選びます。
- アクセントを1色だけ：ブランドを象徴する色を“5%”に限定します。
- 役割を固定：
- ベース＝背景のみ
- サブ＝見出し・区切り・通常ボタン
- アクセント＝CTAやバッジのみ（本文や背景に使わない）
よくある失敗
- アクセントを見出しやリンク全体に広げてしまう
→ CTAだけにする。リンクは本文色に。 - サブ色が濃すぎて本文が読みにくい
→ サブ色の彩度を下げ、本文は黒に近いグレーで固定します。 - 図版・写真の色が暴れて見える
→ 画像の彩度をわずかに落とすか、共通トーン（やや寒色寄せ等）で揃えます。
3分で仕上がりを底上げ
配色は奥深く、本来はとても難しい分野です。
しかし、はじめの落とし所は「3色ルール＋役割固定」で十分です。
まずはこの記事の方法をそのまま真似して、まとまり感のある配色に整えてみてください。
チェックリスト（公開前に3分で確認）
- 使っている色は3色（＋黒/白/グレー）に収まっていますか？
- 70-25-5%の面積になっていますか？
- アクセントはCTAと強調部のみに限定できていますか？
- サブ色で十分なコントラストを確保していますか？
- 図版や写真の色が全体のトーンを乱していませんか？
付録：迷ったときの安全パレット3種
- 落ち着き×信頼：
ベース #F7F7F7 / サブ #334155 / アクセント #3B82F6 - ミニマル×洗練：
ベース #FFFFFF / サブ #6B7280 / アクセント #EF4444 - やさしさ×親近感：
ベース #FFFDF9 / サブ #534741 / アクセント #22C55E
