デザイナー必須！配色の基礎理論と実践テクニック

配色はデザインの印象を大きく左右する重要な要素です。

「なんとなく」で色を選んでいませんか？色彩理論を理解すれば、根拠のある配色ができるようになります。

この記事では、配色の基礎理論と、すぐに使える実践テクニックを紹介します。

色の三属性を理解する

色には3つの属性があります。

色相（Hue）

色相は「赤」「青」「黄」といった色の種類のこと。色相環（カラーホイール）で表現されます。

彩度（Saturation）

彩度は色の鮮やかさ。彩度が高いと鮮やか、低いとくすんだ色になります。

明度（Brightness/Value）

明度は色の明るさ。明度が高いと明るく、低いと暗くなります。

💡 ポイント: HSL（色相・彩度・明度）で色を考えると、配色がしやすくなります。

基本の配色パターン

補色（Complementary）

色相環で正反対に位置する2色の組み合わせ。コントラストが強く、インパクトのあるデザインに。

例：青 × オレンジ、赤 × 緑

使いどころ: CTAボタン、強調したい要素

類似色（Analogous）

色相環で隣り合う色の組み合わせ。調和が取れた、落ち着いた印象に。

例：青 × 青緑 × 緑

使いどころ: 統一感のあるデザイン、自然なグラデーション

トライアド（Triadic）

色相環で正三角形の位置にある3色。バランスが良く、活発な印象に。

例：赤 × 黄 × 青

使いどころ: 子供向けデザイン、ポップなデザイン

実践テクニック

60-30-10の法則

配色の比率は以下がおすすめ：

60%: メインカラー（背景など）
30%: サブカラー（テキスト、カードなど）
10%: アクセントカラー（ボタン、リンクなど）

この比率を守ると、バランスの良い配色になります。

コントラスト比を意識する

Webアクセシビリティの観点から、テキストと背景のコントラスト比は重要です。

用途	最低コントラスト比
通常テキスト	4.5:1
大きなテキスト	3:1
UI要素	3:1

カラーコード変換ツールでコントラスト比を確認できます。

まとめ

配色の基礎を押さえると、デザインの質が格段に上がります。

ポイント:

✅ 色の三属性（色相・彩度・明度）を理解する
✅ 配色パターン（補色・類似色・トライアド）を使い分ける
✅ 60-30-10の法則で比率を決める
✅ コントラスト比を確認する

まずは補色と類似色から試してみてください。