- 2025.10.27
- Web技術
- GIVデザインチーム
サイト全体の雰囲気を決める配色の考え方｜目的別パレットと3色設計のコツ
Webデザインで最初に“印象”を決めるのは色（配色）。
同じレイアウトでも配色次第で「信頼できそう」「楽しそう」「洗練されている」といった感情は大きく変わります。つまり、カラー設計はユーザーの感情と行動（クリック・お問い合わせ）を左右する重要要素です。
この記事では、3色設計（ベース／メイン／アクセント）の基本と、目的別のカラーパレット、さらに失敗しない色選びのコツをまとめます。新規サイトはもちろん、リニューアル時の配色見直しにもどうぞ。
まずは「3色設計」を意識しよう（配色の基本）
1) ベースカラー（背景・余白）約70%
白／グレー／ベージュなど主張しすぎない色。
サイトの“空気感”をつくり、可読性と清潔感を担保します。
2) メインカラー（ブランドの核）約20〜30%
ロゴやブランドイメージと合う中心色。
信頼・元気・上品などの印象を決定づけます。
3) アクセントカラー（行動促進）約5〜10%
ボタン・リンク・重要メッセージの“差し色”。
補色や高コントラストを選ぶと視線誘導とCV（クリック・送信）に効きます。
ポイント：まずは3色で設計 → 必要に応じて同系トーンを追加。色数が増えるほど“雑味”が出やすいよ。
目的別・配色アイデア（即使えるパレット例つき）
A. 信頼感・落ち着き（コーポレート／士業／医療）
- ネイビー
#123A63／クールグレー#E6E9EE／アクセント：ブルー#2B7DE9 - ねらい：知的・誠実・清潔。B2Bや採用にも効果的。
B. 明るく親しみやすい（教育／地域／採用）
- ソフトオレンジ
#FFA552／クリーム#FFF4D6／アクセント：ターコイズ#23C4C8 - ねらい：フレンドリー・活気。人柄訴求やコミュニティに◎。
C. やさしさ・安心感（医療／介護／保育／美容）
- ピンクベージュ
#EFCFD4／オフホワイト#FAFAF8／アクセント：グレージュ#B9B1A8 - ねらい：柔らかさ・親和性。緊張を和らげたい業種に。
使い方：メイン＝見出し・強調ブロック／アクセント＝CTAボタン・リンク。
迷ったら、ボタンはメインの補色系にして視認性を上げよう。
色選びのコツ（失敗しない3原則）
1) ロゴ・写真“既存の主役色”を基準に
まずはすでに露出が多いロゴやKVの色からメインを決定。
同系色（アナログ配色）で固めると統一感が出ます。
2) トーン（明度・彩度）をそろえる
淡い色＋濃い色を無秩序に混ぜるとちぐはぐに。
- 落ち着き＝低彩度×やや暗め
- 若々しさ＝高彩度×明るめ
同じトーン帯でまとめると洗練されます。
3) テキスト・ボタンのコントラストを確保
可読性は正義。
- 明るい背景 × 濃い文字（黒・濃グレー）
- 濃い背景 × 明るい文字（白・淡色）
CTAは背景とはっきり差をつけ、ホバー時に明度差をつけるとクリックが増えます。
目安：本文は濃グレー
#222〜#333が読みやすく、真っ黒より目の疲れが少なめ。
よくあるつまずきと対処
- 色を使いすぎて雑多：3色に戻して要素ごとに役割を再割当て。
- リンクが埋もれる：アクセントを補色／高コントラストに変更、下線や太字を併用。
- ブランド感が弱い：メインカラーの出現率を見出し・罫線・アイコンに広げて“面積”で印象付け。
- 写真とぶつかる：写真のトーンに合わせて上に載せるテキスト色を調整／写真に軽くオーバーレイをかける。
迷ったらこの順で決めよう（実務フロー）
- ロゴ色 → メインカラー決定
- 背景の明度を決める（白系か色背景か）
- アクセントを補色・高コントラストから選定
- **ボタン／リンクの状態（通常・ホバー・無効）**を色で定義
- 見出し・見出し下テキスト・本文の色規格をトークン化（SCSS変数やCSSカスタムプロパティ）
デザインシステム化（色トークン例）
--color-base:#FAFAFA; --color-text:#222; --color-brand:#2B7DE9; --color-accent:#F25C54; --color-border:#E5E7EB;
まとめ｜配色は“ブランドの声”
- **3色設計（ベース／メイン／アクセント）**で骨格を作る
- 目的別パレットで“感じてほしい印象”を先に決める
- トーン統一×コントラスト確保で可読性とCVを両立
色は、言葉を使わずに想いを届けるブランドの声。
次の配色検討では、「好きな色」ではなく届けたい感情から逆算して、色の力を味方につけよう。