Webデザインの配色入門 - 初心者でも失敗しない色の選び方

更新日: 2026年3月

色の三属性を理解する

配色を考える前に、色の三属性を理解しましょう。すべての色は「色相」「彩度」「明度」の3つの要素で構成されています。

• 色相（Hue）: 赤、青、黄などの「色味」のこと。色相環と呼ばれる円形のチャートで表され、 隣り合う色同士は調和しやすい性質があります。
• 彩度（Saturation）: 色の鮮やかさ。彩度が高いと鮮やかな色に、 低いと灰色がかった落ち着いた色になります。
• 明度（Lightness/Value）: 色の明るさ。明度が高いと白に近づき、低いと黒に近づきます。

CSSのHSLカラーモデルはまさにこの三属性に対応しており、 配色設計とコード実装をシームレスにつなげることができます。

基本的な配色パターン

色相環を使った代表的な配色パターンを知っておくと、調和のとれた配色を作りやすくなります。

補色配色（Complementary）

色相環で正反対（180度の位置）にある2色を組み合わせるパターンです。 例えば青とオレンジ、赤と緑など。コントラストが強く、インパクトのあるデザインになります。 ボタンやCTAなど、目立たせたい要素に効果的です。

類似色配色（Analogous）

色相環で隣り合う2〜3色を使うパターンです。 例えば青、青緑、緑の組み合わせ。自然界にもよく見られる配色で、落ち着いた統一感のあるデザインに仕上がります。 企業サイトやポートフォリオに適しています。

トライアド配色（Triadic）

色相環を3等分した位置の3色を使うパターンです。 例えば赤、黄、青の三原色。バランスが良く、鮮やかで活気のあるデザインになります。 子供向けサイトやクリエイティブ系のサイトに向いています。

Webサイトで使う色の役割分担

実際のWebサイトでは、色を大きく3つの役割に分けて使います。

• ベースカラー（約70%）: 背景やメインエリアに使う色。白やライトグレーなど、目に優しい色を選びます。 サイト全体の基調となるため、読みやすさを最優先に考えます。
• メインカラー（約25%）: ヘッダー、ナビゲーション、見出しなどに使うブランドカラー。 サイトの印象を決定づける色で、ロゴやブランドイメージと合わせます。
• アクセントカラー（約5%）: ボタン、リンク、アイコンなど注目を集めたい要素に使う色。 メインカラーと補色関係にある色を選ぶと効果的です。

この70:25:5の法則を守るだけで、プロのデザイナーが手がけたようなバランスの良い配色になります。

色が持つ心理効果

色は見る人の感情や行動に影響を与えます。ターゲットやサイトの目的に合った色を選びましょう。

• 青: 信頼、安心、誠実。企業サイト、金融、IT系で人気。FacebookやTwitterも青系。
• 緑: 安らぎ、自然、成長。環境、健康、教育系に適している。
• 赤: 情熱、緊急、エネルギー。セール告知、飲食店、エンターテインメントに効果的。
• オレンジ: 親しみ、活力、楽しさ。CTAボタンに使うと購買意欲を高める効果がある。
• 黒: 高級感、洗練、モダン。ファッション、ラグジュアリーブランドで多用される。

アクセシビリティへの配慮

配色を考える際に忘れてはならないのが、色覚多様性への配慮です。 日本人男性の約5%、女性の約0.2%が色覚異常を持っています。

• 十分なコントラスト比を確保する: WCAG 2.1では、通常テキストで4.5:1以上、 大きなテキストで3:1以上のコントラスト比が求められます。
• 色だけに頼らない: エラーメッセージを赤色だけで伝えるのではなく、 アイコンやテキストでも補足しましょう。
• 赤と緑の組み合わせを避ける: 最も多い色覚異常（赤緑色覚異常）では赤と緑の区別が困難です。

配色作りの実践ステップ

1. 目的とターゲットを明確にする: 誰に何を伝えたいのかを整理する。
2. メインカラーを1色決める: ブランドやイメージに合った色を選ぶ。
3. 配色パターンを適用する: 補色、類似色などのルールでアクセントカラーを決める。
4. 明度・彩度のバリエーションを作る: メインカラーの明るい版・暗い版を用意してホバー状態や背景に使う。
5. コントラストをチェック: テキストと背景のコントラスト比が基準を満たしているか確認する。