3 / 10
レッスン 3
42分色彩理論と配色テクニック
📝 最後に理解度チェック（3問）があります色彩理論と配色テクニック — デザインの力を最大化する色の使い方
色は、デザインの中で最も即効性のある要素です。色を変えるだけでクリック率が劇的に変わり、ブランドの印象がまるで違うものになります。しかし色の使い方を誤ると、ユーザーを混乱させ、ブランドを傷つけます。
このレッスンでは、色彩理論の基礎から、実務で即使えるプロの配色テクニックまでを体系的に解説します。「なんとなく」の色選びから脱却し、論理的な根拠を持った配色ができるようになりましょう。
色の三属性 — すべての色はこの3要素で決まる
すべての色は、**色相（Hue）・明度（Value/Brightness）・彩度（Saturation/Chroma）**の3つの属性で定義されます。この三属性を理解することが、配色コントロールの第一歩です。
色相（Hue）— 色の種類
赤・橙・黄・緑・青・紫など、色そのものの種類を指します。色相環（Color Wheel）上の位置で表現され、0〜360度で管理されます。
| 角度 | 色 |
|---|---|
| 0° / 360° | 赤（Red） |
| 30° | 橙（Orange） |
| 60° | 黄（Yellow） |
| 120° | 緑（Green） |
| 180° | シアン（Cyan） |
| 240° | 青（Blue） |
| 270° | 青紫（Indigo） |
| 300° | 紫（Violet） |
明度（Value/Brightness）— 色の明るさ
色の明暗を表します。白に近いほど明度が高く（明るい）、黒に近いほど明度が低い（暗い）。
デザインにおける明度の活用:
- ◆高明度（明るい色）: 広がり、軽さ、清潔感
- ◆低明度（暗い色）: 重厚感、高級感、夜のイメージ
- ◆明度差を大きくする → コントラストが生まれ、読みやすくなる
彩度（Saturation/Chroma）— 色の鮮やかさ
色の鮮やかさ・濃さを表します。彩度が高いほど鮮やかで目立ち、低いほどグレーに近いくすんだ色になります。
デザインにおける彩度の活用:
- ◆高彩度（鮮やか）: 注目・アクション・感情喚起（CTAボタンなど）
- ◆低彩度（くすみ）: 落ち着き・上品さ・洗練（背景・テキストなど）
- ◆彩度差でメリハリをつける → 重要な要素が際立つ
💡 プロのデザイナーは、高彩度の色を「点」として使います。ページ全体を鮮やかにするのではなく、CTAボタンや重要なアラートにのみ使うことで、その要素を際立たせます。
色相環と配色パターン4種
色相環と配色パターン
1. 補色配色（Complementary）
色相環で180度反対の位置にある2色の組み合わせです。最も強いコントラストが生まれ、互いを引き立て合います。
代表例:
- ◆青（#6366f1）× 橙（#f97316）
- ◆赤（#ef4444）× 緑（#10b981）
- ◆紫（#a855f7）× 黄（#eab308）
使いどころ: メインカラーとCTAボタンの色の組み合わせに最適。青いWebサービスにオレンジのCTAボタンを使うのは、補色配色の応用です。
注意点: 両色を同等の面積で使うと「けんか」するような印象になります。必ず一方を主役（60〜70%）、もう一方をアクセント（10〜20%）として使います。
2. 類似色配色（Analogous）
色相環で隣接する2〜3色の組み合わせです。自然界に多く見られる調和のとれた配色で、統一感と穏やかさが生まれます。
代表例:
- ◆青（#6366f1）× 青紫（#818cf8）× 紫（#a855f7）
- ◆黄（#eab308）× 橙（#f97316）× 赤橙（#ef4444）
使いどころ: 背景とカード、ナビとサイドバーなど、同系統のコンポーネントに統一感を持たせる際に使います。
注意点: コントラストが弱くなりがちです。テキストの視認性を確保するために、明度差を加えましょう。
3. トライアド配色（Triadic）
色相環を3等分した位置にある3色の組み合わせです。活気があり、バランスの取れた配色です。
代表例:
- ◆赤（#ef4444）× 青（#6366f1）× 黄（#eab308）
- ◆橙（#f97316）× 緑（#10b981）× 紫（#a855f7）
使いどころ: 子ども向けサービス、エンターテインメント、クリエイティブ系のブランド。
注意点: 3色を同等量使うと雑然とします。1色をメイン（60%）、1色をサポート（30%）、1色をアクセント（10%）にします。
4. スプリットコンプリメンタリー（Split-Complementary）
メインカラーの補色の隣接2色を使う配色です。補色配色と類似色配色の中間のような性質を持ち、コントラストはありつつも補色ほどきつくないバランスが特徴です。
代表例:
- ◆青（#6366f1）× 黄橙（#f59e0b）× 赤橙（#f97316）
使いどころ: バランスの良いLPやサービスサイト。補色配色ほど強烈なコントラストは必要ないが、類似色配色ではメリハリが出しにくい場合に。
色が持つ心理効果
色には、文化や経験によって形成された心理的な連想があります。Webデザインでは、この心理効果を意図的に活用してブランドの印象をコントロールします。
赤（Red）
心理効果: 情熱・興奮・緊急性・エネルギー・愛情・危険 代表ブランド: Netflix, YouTube, Coca-Cola, Pinterest デザイン活用:
- ◆セール・特価バッジ（「今すぐ購入！」の緊急感）
- ◆削除・エラーの警告
- ◆食品・飲食系のブランドカラー（食欲増進効果）
青（Blue）
心理効果: 信頼・安心・知性・冷静・誠実・専門性 代表ブランド: Facebook, Twitter/X, Samsung, PayPal, IBM デザイン活用:
- ◆金融・医療・BtoBサービスの主要カラー
- ◆デフォルトのリンクカラー（慣習）
- ◆「安全・安心」を伝えたいブランド
緑（Green）
心理効果: 自然・安心・成長・健康・環境・調和 代表ブランド: Whole Foods, Spotify, WhatsApp, Land Rover デザイン活用:
- ◆成功・完了の状態表示
- ◆環境・自然系ブランド
- ◆医療・ウェルネス・オーガニック系
黄・オレンジ（Yellow/Orange）
心理効果: エネルギー・楽観・明るさ・温かさ・行動力 代表ブランド: Amazon（オレンジ）, McDonald's（黄）, IKEA（黄+青） デザイン活用:
- ◆CTAボタン（行動を促す）
- ◆警告・注意の表示
- ◆子ども向け・カジュアルなブランド
紫（Purple）
心理効果: 高級感・神秘・創造性・独自性・ロイヤリティ 代表ブランド: Cadbury, Hallmark, Twitch, Yahoo デザイン活用:
- ◆プレミアムプラン・VIPバッジ
- ◆クリエイティブ系ツール
- ◆美容・スピリチュアル系
黒（Black）
心理効果: 高級感・洗練・権威・モダン・強さ 代表ブランド: Apple, Chanel, Nike, Prada デザイン活用:
- ◆ラグジュアリーブランドのメインカラー
- ◆ダークモードUI
- ◆高コントラストを必要とするテキスト
白・ニュートラル（White/Neutral）
心理効果: 清潔感・シンプル・余裕・軽さ・開放感 デザイン活用:
- ◆背景色（空間を作り、内容を際立たせる）
- ◆ヘルスケア・医療系
- ◆ミニマリズムを重視するブランド
⚠️ 色の心理効果は文化によって異なります。白は西洋では「清潔」を意味しますが、東アジアの一部では「喪服の色」として認識されます。グローバルサービスでは、文化的文脈を考慮した色選びが必要です。
60-30-10ルール — プロが使う配色比率
60-30-10ルール
配色の悩みの多くは、「何色を使うか」ではなく「何割ずつ使うか」が原因です。プロのデザイナーが愛用する60-30-10ルールを身につければ、バランスの取れた配色が作れます。
60%: メインカラー（ドミナントカラー）
ページの60%を占める、最も面積の大きい色です。通常は背景色・カード・余白などに使います。視覚的な疲れを抑えるため、明度が高い（明るい）色が適しています。
典型例: 白（#ffffff）・薄いグレー（#f8fafc）・クリーム（#fefce8）
30%: サブカラー（セカンダリカラー）
ページの30%を占める、2番目に大きい色です。ヘッダー・サイドバー・セクション背景などに使います。ブランドのアイデンティティを表す色を置くことが多いです。
典型例: ダークネイビー（#1e293b）・ブランドカラー（#6366f1）
10%: アクセントカラー（ハイライトカラー）
最も少ない面積（10%）に使う、最も目立つ色です。CTAボタン・リンク・アイコン・バッジなど、ユーザーのアクションを促したい箇所に限定して使います。
典型例: 補色のビビッドカラー（#f59e0b）・鮮やかなグリーン（#10b981）
実践例: SaaS管理画面
| 色の役割 | 色 | 使用箇所 | 割合 |
|---|---|---|---|
| メイン | #f8fafc（薄いグレー） | 背景・カード | 60% |
| サブ | #1e293b（ダーク） | サイドバー・ヘッダー | 30% |
| アクセント | #6366f1（インディゴ） | ボタン・リンク・アイコン | 10% |
Webデザインの配色実践
テキストカラーの設計
テキストにもカラー階層が必要です。複数の重要度に応じた色を定義しましょう。
| テキスト種別 | カラー | 明暗比（on白） |
|---|---|---|
| 主要見出し | #0f172a | 17.7:1（AAA） |
| 本文テキスト | #1e293b | 16.1:1（AAA） |
| サブテキスト | #475569 | 7.8:1（AAA） |
| プレースホルダー | #94a3b8 | 3.2:1（AA大） |
| 無効状態テキスト | #cbd5e1 | 1.9:1（基準外・装飾的） |
ボタンカラーの設計
ボタンには状態に応じたカラー設計が必要です。
| 状態 | 背景色 | テキスト色 |
|---|---|---|
| デフォルト | #6366f1 | #ffffff |
| ホバー | #4f46e5（10%暗く） | #ffffff |
| 押下（Active） | #4338ca（20%暗く） | #ffffff |
| 無効（Disabled） | #e2e8f0 | #94a3b8 |
| 読み込み中 | #6366f1（70%透過） | #ffffff |
リンクカラーの設計
リンクは慣習として青系統が使われますが、ブランドカラーに合わせることも可能です。重要なのは、通常テキストとリンクが視覚的に区別できることです。
- ◆未訪問リンク: プライマリカラー（例: #6366f1）
- ◆訪問済みリンク: プライマリカラーの暗いバリアント（例: #4338ca）
- ◆ホバー: 下線を追加 or 10%明るく
背景色の層設計
ページに奥行きと構造を与えるために、背景色を3〜4段階に設計します。
| 層 | カラー | 用途 |
|---|---|---|
| Layer 0 | #f8fafc | ページ全体の最下層背景 |
| Layer 1 | #ffffff | カード・モーダルの背景 |
| Layer 2 | #f1f5f9 | テーブル行のストライプ、入力フィールド |
| Layer 3 | #e2e8f0 | ホバー状態、区切り線 |
アクセシビリティとカラーコントラスト
WCAG（Web Content Accessibility Guidelines）
WCAGはW3Cが策定するWebアクセシビリティのガイドラインです。日本の公的機関や上場企業のWebサイトでは、WCAG 2.1 AA準拠が求められます。
カラーコントラストの基準:
| 基準レベル | 通常テキスト | 大テキスト（18pt+） | UI要素 |
|---|---|---|---|
| AA | 4.5:1以上 | 3:1以上 | 3:1以上 |
| AAA | 7:1以上 | 4.5:1以上 | — |
色覚特性（色覚多様性）への配慮
世界の男性の約8%、女性の約0.4%が色覚の多様性を持ちます。最も多い「赤緑色覚」の方は、赤と緑の区別が難しい場合があります。
配慮のポイント:
- ◆色だけで情報を伝えない（形・アイコン・テキストを併用する）
- ◆エラーは赤+アイコン+テキストで伝える（赤のみはNG）
- ◆グラフは色の違いだけでなく、模様・ラベルも使う
確認ツール:
- ◆Figmaプラグイン「Stark」（色覚シミュレーション機能あり）
- ◆Chrome拡張「Let's Get Color Blind」
業界別おすすめ配色パターン
SaaS / BtoBツール
推奨: 青紫系メイン + ニュートラル + アクセントカラー 理由: 信頼感・専門性・機能的な印象を与える 参考: Linear（紫）、Notion（モノトーン）、Vercel（黒白）
| 役割 | カラー例 |
|---|---|
| メイン背景 | #f8fafc |
| サイドバー | #1e293b |
| プライマリ | #6366f1 |
| アクセント | #10b981 |
EC / ショッピングサイト
推奨: ニュートラル主体 + 強いアクセントカラー（オレンジ・赤） 理由: 商品を際立たせるため、背景はニュートラルに抑える 参考: Amazon（白+オレンジ）、楽天市場（赤）
飲食 / フード系
推奨: 暖色系（赤・橙・茶）または自然系（緑・ベージュ） 理由: 食欲を刺激し、素材感・温かさを伝える 参考: McDonald's（黄+赤）、スターバックス（深緑）
医療 / ヘルスケア
推奨: 青・緑系 + 白を多用 + 最低限のアクセント 理由: 清潔感・安心感・専門性が最優先 参考: ピクシブ医療（白+青）、CLINICS（白+緑）
配色ツールの使い方
Adobe Color（color.adobe.com）
Adobeが無料提供するカラーホイールベースの配色ツールです。
主な使い方:
- ◆カラーホイールで補色・類似色・トライアドなどを自動生成
- ◆「コントラスト確認」タブでアクセシビリティチェック
- ◆画像からカラーパレットを自動抽出（ブランドカラーの参考に）
Coolors（coolors.co）
スペースバーを押すだけでランダムなパレットを生成できるツールです。
主な使い方:
- ◆スペースバーで新パレット生成
- ◆気に入った色はロック（南京錠マーク）
- ◆エクスポートでHEX値一覧をコピー
- ◆「Contrast Checker」でコントラスト比確認
Realtime Colors（realtimecolors.com）
実際のUIに色を当てはめてリアルタイムでプレビューできるツールです。
主な使い方:
- ◆ランダム生成または手動でカラーセットを入力
- ◆実際のLPデザインで色の組み合わせを即確認
- ◆CSSコードを自動生成（CSS変数形式）
🏋️実践ワーク
- ◆
三属性の観察: Adobe ColorまたはFigmaのカラーピッカーを使い、普段使っているサービス（LINE、X、Amazonなど）のプライマリカラーを調べてください。色相・明度・彩度はどのように設定されていますか？競合他社のカラーと比較してみましょう。
- ◆
60-30-10ルール適用: 自分が作りたいWebサービスのテーマ（ECサイト・ブログ・ポートフォリオ）を1つ選び、60-30-10ルールで配色を決定してください。Adobe ColorまたはCoolorsを使ってパレットを作成し、WebAIMのコントラストチェッカーで全テキストのコントラスト比を確認しましょう。
- ◆
業界別配色比較: SaaS・飲食・医療・ECの4業界から、それぞれ代表的なWebサービスを1つ選び、使われている色を抽出してください。業界ごとにどんな色の傾向があるかをまとめ、その心理的理由を考察しましょう。
📝まとめ
- ◆色の三属性（色相・明度・彩度）を理解すると、色をシステマチックにコントロールできる
- ◆補色・類似色・トライアド・スプリットコンプリメンタリーの4パターンを場面に応じて使い分ける
- ◆色には心理効果がある。赤=緊急、青=信頼、緑=安心など、ブランドのトーンに合った色を選ぶ
- ◆60-30-10ルールを守ることで、初心者でも自然にバランスの取れた配色が作れる
- ◆WCAGのコントラスト比基準（AA: 4.5:1以上）を必ず確認し、アクセシビリティを確保する
- ◆色だけで情報を伝えず、形・テキスト・アイコンを併用して色覚多様性に配慮する
- ◆Adobe Color・Coolors・Realtime Colorsを活用して、プロフェッショナルな配色を効率よく作る
理解度チェック
3問全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。
Q1.60-30-10ルールで、10%のアクセントカラーを使う場所として本文に沿うものはどれですか。
Q2.青がメインのWebサービスで、補色のオレンジをCTAボタンに使います。本文が挙げる補色配色の注意点に沿った使い方はどれですか。
Q3.入力フォームで、エラー項目を赤い枠線だけで示しています。色覚の多様性に配慮した改善として本文に沿うものはどれですか。
すべての問題に答えると押せます
「デザイン基礎 - 視覚コミュニケーション入門」全10レッスンを無料で修了しよう
- ✓ 理解度チェックの採点と、合格レッスンの記録
- ✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
- ✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード
無料で受講をはじめる（1分）
完全無料・クレジットカード不要
関連するブログ記事
関連レッスン（他のコースから）
UI/UXデザイン実践講座
アクセシビリティとインクルーシブデザイン
アクセシビリティ（Accessibility）とは、障害の有無・年齢・環境を問わず、すべての人がウェブサイトやアプリを利用できる状態を実現す
30分本文は無料で閲覧可
実践Webデザイン - Figma完全マスター講座
Figmaとは？Webデザインツールの選び方
デザイナーとエンジニアが初めてコラボレーションできるツールを作る——そんなビジョンのもと、Figmaは2016年にDylan FieldとE
30分無料公開
デザインシステム構築・運用上級講座
アクセシビリティ設計の実践
アクセシビリティ（a11y）は、障がいの有無や環境に関わらず、すべてのユーザーがプロダクトを利用できるようにする設計思想です。
25分本文は無料で閲覧可
Canvaデザイン実践講座
ブランドキットの設定と一貫性のあるデザイン
ブランドキットとは、企業やブランドのビジュアルアイデンティティ（ロゴ・カラー・フォント）をCanva上に登録し、すべてのデザイン制作に一貫し
25分本文は無料で閲覧可
Canvaデザイン実践講座
Canvaの基本操作と無料/有料プランの違い
Canvaはオーストラリア発のオンラインデザインツールです。
25分無料公開
Canvaデザイン実践講座
テンプレートの活用とカスタマイズ
デザインをゼロから作るのは時間がかかり、センスがないと感じる原因にもなります。
25分本文は無料で閲覧可