Webデザインの配色ガイド
色の選び方と組み合わせの基本

色彩の基礎知識

Webデザインで配色を考えるとき、まず理解しておきたいのが色の三属性です。色は「色相（Hue）」「彩度（Saturation）」「明度（Lightness/Value）」の3つの要素で構成されています。これらを正しく理解することで、意図した印象を正確に伝えられる配色が可能になります。

色の三属性

1. 色相（Hue）

   赤・青・黄といった色味の違いを表します。色相環（カラーホイール）上で0~360度の角度で表現され、0度が赤、120度が緑、240度が青です。色相環上の位置関係が配色パターンの基礎になります。

2. 彩度（Saturation）

   色の鮮やかさを表します。彩度が高いほど鮮やかでビビッドな色に、低いほどグレーに近い落ち着いた色になります。Webデザインではメインカラーに高彩度、背景や補助色に低彩度を使うのが基本です。

3. 明度（Lightness / Value）

   色の明るさを表します。明度が高いほど白に近く、低いほど黒に近くなります。テキストの可読性やコントラスト比に直結するため、アクセシビリティの観点で最も重要な属性です。

Web で使うカラーモデル

Webデザインでは主に2つのカラーモデルが使われます。

配色パターン5選

色相環の位置関係を利用した配色パターンは、デザイナーが配色を決める際の強力なフレームワークです。ここでは実務で最も使われる5つのパターンを紹介します。

1. 補色（Complementary）

色相環で正反対に位置する2色の組み合わせ。最もコントラストが強く、視覚的インパクトが大きいのが特徴です。CTAボタンやセール告知など、注目を集めたい要素に効果的です。ただし、2色を同じ面積で使うと目がチカチカするため、一方を主役、もう一方をアクセントとして7:3程度の比率で使うのがコツです。

使用例: 青(#2563EB)と橙(#EA580C)の組み合わせ。IT企業のサイトで信頼感のある青を基調に、CTAボタンだけ橙にすると高いクリック率が期待できます。

2. 類似色（Analogous）

色相環で隣り合う2~3色の組み合わせ。自然界でよく見られる配色で、調和が取りやすく、落ち着いた印象になります。ブランドの統一感を出したいコーポレートサイトや、リラックス感を演出したい美容・ヘルスケア系サイトに最適です。

使用例: 青(#3B82F6)、青緑(#06B6D4)、緑(#10B981)のグラデーション。環境・サステナビリティ関連のサイトに自然な印象を与えます。

3. トライアド（Triadic）

色相環で均等に120度ずつ離れた3色の組み合わせ。カラフルでありながらバランスが取れた印象になります。1色をメインに、残り2色をサブ・アクセントとして使います。ポートフォリオサイトや子ども向けサービスなど、活発な印象を与えたいときに有効です。

使用例: 赤(#EF4444)、青(#3B82F6)、黄(#EAB308)。教育系プラットフォームやゲームサイトで、楽しさと多様性を表現できます。

4. モノクロマティック（Monochromatic）

単一の色相で、彩度と明度だけを変化させた配色。最も失敗しにくく、洗練された印象を与えます。ミニマルデザインや高級ブランドのサイトに適しています。単調にならないよう、明度のコントラストをしっかりつけることが重要です。

使用例: ネイビー(#1E3A5F)を基調に、中間(#3B82F6)、淡い(#BFDBFE)の3段階。法律事務所やコンサルティングファームのサイトで信頼感と格式を演出できます。

5. スプリットコンプリメンタリー（Split Complementary）

補色の片方を、その隣接2色に分割した配色パターン。補色のような強いコントラストを保ちつつ、ハーモニーが取りやすいのが利点です。補色配色が強すぎると感じるときの代替として使えます。

使用例: 青(#3B82F6)をメインに、黄橙(#F59E0B)と赤橙(#F97316)をアクセントに。ECサイトで信頼感を保ちながら購買意欲を刺激する配色です。

色彩心理学とブランディング

色は人間の感情や行動に大きな影響を与えます。ブランドカラーの選定は、ユーザーに与える第一印象を左右する重要な意思決定です。主要な色が持つ心理的効果と、業種ごとの活用方法を見ていきましょう。

赤（情熱・緊急・エネルギー）

赤は最も強いエネルギーを持つ色です。心拍数を上げ、食欲を刺激し、緊急性を感じさせます。セールの告知、CTAボタン、飲食店のロゴに多用されます。ただし多用すると攻撃的な印象になるため、アクセント使いが基本です。Coca-Cola、YouTube、Netflixなど、エネルギッシュなブランドが採用しています。

青（信頼・冷静・専門性）

青は世界で最も好まれる色であり、信頼感・安心感を与えます。金融、IT、医療、コーポレートサイトで最も多く採用される色です。Facebook、Twitter(X)、LinkedIn、Samsung、Intelなど、テクノロジー企業の多くが青を採用しています。濃い青は権威と専門性、明るい青はフレンドリーさを表現します。

緑（自然・安心・成長）

緑は自然、健康、安定を連想させます。環境関連、ヘルスケア、金融（成長のイメージ）で効果的です。LINE、Spotify、Starbucksなどが採用。また、「安全」「成功」の意味もあるため、フォームの送信完了やバリデーション成功の表示に使われます。

黄（活力・注意・楽観）

黄色は最も視認性が高く、注意を引く色です。楽観的で明るい印象を与えますが、警告色としても使われます。IKEA、McDonald's、Snapchatなどが採用。小さい面積で使うと効果的ですが、背景色として広く使うと目が疲れるため注意が必要です。

紫（高級・創造性・神秘）

紫は古来より高貴な色とされ、高級感、創造性、知恵を連想させます。美容、コスメ、クリエイティブ業界、高級ブランドのサイトに効果的です。Twitch、Cadbury、Hallmarkなどが採用。若い女性向けのサービスでも人気の色です。

アクセシビリティと配色

美しい配色でも、読めなければ意味がありません。WCAG（Web Content Accessibility Guidelines）2.2では、テキストと背景のコントラスト比について明確な基準を定めています。すべてのユーザーが快適に利用できるWebサイトにするため、配色設計の段階からアクセシビリティを組み込みましょう。

コントラスト比の基準

よくあるコントラスト不足の例

• 薄いグレー文字（#999）に白背景 → コントラスト比2.85:1でAA不合格
• 明るい青リンク（#60A5FA）に白背景 → コントラスト比3.04:1で通常テキストはAA不合格
• 黄色テキストに白背景 → ほぼ読めない（コントラスト比1.07:1）
• プレースホルダーテキストのコントラスト不足 → 入力欄のヒントが読めない

色覚多様性への配慮

日本人男性の約5%、女性の約0.2%が色覚特性を持っています。特に赤と緑の区別が困難な場合が多く、エラー表示を赤色だけに頼るのは危険です。色以外の手がかり（アイコン、テキスト、下線、パターン）を併用し、色だけに依存しない情報伝達を心がけましょう。

ダークモードの配色設計

ダークモードは単にライトモードの色を反転させるだけでは不十分です。暗い背景には暗い背景ならではの配色ルールがあります。2026年現在、ダークモード対応はユーザー体験の向上において標準的な要件になっています。

背景色の選び方

ダークモードの背景色に純粋な黒（#000000）を使うのは避けましょう。真っ黒な背景に白い文字を載せると、コントラストが強すぎて目が疲れます（ハレーション現象）。代わりに、わずかに色味を含んだダークグレーを使います。

テキストの明るさ

ダークモードのテキストも純白（#FFFFFF）は避け、少しトーンを落とします。本文は#E2E8F0程度、見出しは#F8FAFC程度が推奨です。補足テキストはさらに明度を下げて#94A3B8程度にすると、情報の階層が生まれます。

アクセントカラーの調整

ライトモードで使っていたアクセントカラーは、ダークモードではそのまま使えないことがあります。暗い背景では彩度が高く見えすぎるため、彩度を5~15%下げ、明度を10~20%上げるのが基本的な調整方法です。HSL形式で管理していれば、この調整は容易です。

業種別おすすめ配色

業種によってユーザーが期待する色のイメージは異なります。ここでは主要な5業種について、それぞれ3つの配色例を紹介します。各配色はメインカラー、サブカラー、アクセントカラーの3色構成です。

コーポレートサイト

ECサイト

美容・サロン

飲食

IT・テック

配色ツールの活用方法

理論を学んだら、実際にツールを使って配色を試してみましょう。当サイトでは配色に役立つ3つの無料ツールを提供しています。いずれも登録不要・ローカル処理で、すぐに使い始められます。

カラーパレットジェネレーター

ベースカラーを1色選ぶだけで、補色・類似色・トライアド・スプリットコンプリメンタリーなど7つの配色パターンを自動生成します。この記事で解説した配色理論をそのまま実践でき、HEX/RGB/HSL/CSS変数形式で出力可能。Figmaトークンとしても利用できます。

カラーコンバーター

HEX、RGB、HSL間の変換を瞬時に行えるツールです。デザインカンプのHEXコードをHSLに変換して配色を調整したり、CSSで使う形式に変換したりできます。変換履歴も保存されるため、よく使う色をすぐに参照できます。

カラースケールジェネレーター

ベースカラーを1色入力するだけで、50~950の11段階のカラースケールを自動生成します。Tailwind CSSのカラーパレットのような、デザインシステムに使えるスケールをワンクリックで作成。ダークモードの背景色バリエーションもこのツールで揃えられます。

コントラストチェッカー

テキスト色と背景色を入力すると、WCAG 2.2のAA/AAA基準への適合を即座に判定します。配色を決めたら、このツールで全てのテキスト・背景の組み合わせをチェックしましょう。不合格の場合は、合格する最も近い色を提案する機能もあります。