第1章: はじめに
本ガイドの目的
本ガイドは、Webサイトの配色を「3色設計」で考えるための入門書です。基本的な役割や色の比率、具体的な選び方の考え方を段階的に示します。初心者でも実務者でも使える実践的な手法を目指します。
この章で伝えること
本章では全体の構成と学び方を説明します。どの章で何を扱うかを明示し、学習の進め方と注意点をお伝えします。まずは配色が与える印象と、3色設計を使う利点を理解してください。
誰に向けているか
・個人または企業のWeb担当者
・デザイン初心者やノンデザイナー
・既存サイトの印象を改善したい方
期待できる成果
配色の基礎が身につき、伝えたいイメージに合う色の組み合わせを選べるようになります。後続の章で比率や配色パターン、実務フローを学び、実際のサイトに適用できます。
読み方のヒント
各章は独立して読めますが、順に学ぶと理解が深まります。実例を見ながら手を動かすと習得が早くなります。
Webサイト配色における3色設計の基本
3色設計とは
Webの配色でよく使われるのが「ベース」「メイン」「アクセント」の3色設計です。各色を役割ごとに決めることで、視覚に一貫性を持たせ、ユーザーの視線を誘導できます。慣れれば短時間で安定した配色が組めます。
各色の役割と比率の目安
- ベースカラー（約70%）: 背景や余白に使い、可読性と清潔感を保ちます。薄いグレーや白が無難です。
- メインカラー（約20〜30%）: ブランドの印象を出す色。ヘッダー、見出し、重要なブロックに使います。コーポレートカラーなどが該当します。
- アクセントカラー（約5〜10%）: ボタンやリンク、強調したい部分に使います。視線誘導やコンバージョン向上に役立ちます。
70:25:5や70:20:10のように比率を決めると、バランスが取りやすくなります。
実践のポイント
- コントラストを確保して可読性を優先してください。文字は背景と十分差をつけます。
- 色の重なりを想定して配置をテストします。例えば濃いメインに薄いベースを合わせると安定します。
- アクセントは目立たせるために他とコントラストを持たせますが、多用は避けます。
配色の具体例
- 背景: #F7F7F7（ベース）
- 見出し・ナビ: #1E5AA8（メイン）
- ボタン・リンク: #FF6B35（アクセント）
チェックリスト
- ベースが背景全体の約70%か
- メインでブランド感が出ているか
- アクセントは5〜10%で効いているか
これらを基に配色を調整すると統一感のあるサイトになります。
失敗しない色選びの3原則
原則1：既存要素を基準にメインカラーを決める
ロゴやキービジュアルに使われている色をまず確認します。既にブランドに根付いた色をメインにすると、サイト全体に統一感が生まれます。例：ロゴが青系なら、メインに#0A6ED1のような青を採用し、サブは同系の薄いトーンやアクセントとして明るいオレンジを使います。
原則2：色のイメージを業種・目的に合わせる
色には直感的な印象があります。業種や目的に合う色を選ぶと、ユーザーの受け取り方が自然になります。例：医療は信頼感のある青や緑、飲食は食欲をそそる赤やオレンジ、ラグジュアリーは黒や深いボルドー。用途（安心感、行動促進、落ち着き）を明確にして色を決めます。
原則3：コントラストで可読性とCTAの視認性を確保する
背景と文字の明暗差をはっきりさせます。明るい背景には濃い文字、濃い背景には明るい文字を使い、読みやすさを優先してください。CTAボタンは背景と高コントラストの色にして目立たせます（例：白背景に#FF6B00のボタン）。色だけで情報を伝えず、形や文字で強調することも大切です。
実務のコツ：決めたらモノクロ表示で見え方を確認し、小さなサイズでも判別できるかをチェックしてください。
目的別・配色アイデア
信頼感・落ち着き（コーポレート・士業・医療）
メイン：ネイビー #123A63、ベース：クールグレー #E6E9EE、アクセント：ブルー #2B7DE9。
使い方：ネイビーをロゴや主要見出しに使い、クールグレーを背景やカードに広く使います。ブルーはボタンやリンク、小さなアイコンに割り当てて視線を誘導します。配分目安は60（ベース）/30（メイン）/10（アクセント）。テキストは濃色で十分なコントラストを確保してください。
親和性・柔らかさ（美容・ウェルネス・教育）
基調：ピンク系やベージュ系を中心に、生成りの白で余白を大きく取ります。例：ソフトピンク #F3D7E0、ベージュ #F5EDE6。
使い方：背景やカードにベージュ、ボタンやハイライトに淡いピンクを使うと優しい印象になります。写真や手描き風のアイコンを合わせると親しみやすさが増します。
活気・ポジティブ（トライアド配色）
色相環で正三角形を描く3色を選びます。例：フレッシュな組合せとして #E94E77（マゼンタ）/ #FFD166（ゴールド）/ #06D6A0（ティール）。
使い方：一色を主役に、残りをボタンやバッジ、アクセント線に使います。動きや強弱を出すためにグラデーションや斜めのレイアウトと組み合わせると効果的です。背景は中立色で抑えると読みやすくなります。
実務的な小さな注意点
- ボタン色はアクセントを想定し、ホバー時に明度を変えて反応を示す。
- 文字と背景のコントラストを確認して視認性を優先する。
- 3色のうち1色はニュートラル（白・灰・黒）に寄せるとまとまりやすい。
実務的な色選定フロー
ステップ1: ロゴ色からメインカラーを決める
ロゴの主要色を出発点にします。ロゴ色そのままが強すぎる場合は、彩度を抑えたり明度を調整してUI向けに最適化します（例: ロゴが濃い青なら、メインは少し明るめの青）。
ステップ2: 背景の明度を選ぶ
サイト全体を明るめ（ライト）か暗め（ダーク）かで決めます。ライトなら背景は淡い灰〜白、ダークなら濃いグレー〜黒を基準にします。背景とメイン色の視認性を必ず確認します。
ステップ3: アクセントカラーを選ぶ
メインカラーの補色か、視認性の高いコントラスト色をアクセントにします。CTAや重要なラベルに使い、視線を誘導します（例: 青メイン→やや暖色のオレンジ系）。
ステップ4: ボタン・リンクの状態を定義する
通常・ホバー・無効（disabled）の3状態を決めます。同じ色相で明暗を変えると統一感が出ます。ホバーは+10〜20%の明度変化、無効は彩度を下げるのが実務的です。フォーカス時のアウトライン色も忘れずに設定します。
ステップ5: 色トークンで体系化する
すべての色をCSSカスタムプロパティ(–color-main, –color-accent, –bg, –text, –muted, –btn-bg, –btn-bg-hover, –btn-disabledなど)やSCSS変数で管理します。これにより実装・修正が速くなります。
実務チェックリスト:
– コントラスト確認（見出し・本文・ボタン）
– 各状態を実機で確認
– デザインツールとコードで色トークンを同期
– 障害のある方の見え方も一度確認する
この流れをテンプレート化すると、短時間で安定した配色を作れます。
