WEBサイトの配色で統一感を出す方法｜色を増やしすぎないコツ
WEBサイトの配色に統一感を出すには、色を何色以内に収めるかだけでなく、同じ役割の部分に同じ色を使うことが大切です。トップページでは青、料金ページでは緑、申込みボタンはページごとに別の色、という状態では、色数が少なくても使い方がばらばらに見えることがあります。ここでは登山用品の修理受付サイトを例に、複数のページや部品をつなぐ配色のルールを考えます。
色数の上限より、背景・案内・操作の役割を先に決める
最初に、ページ全体の背景、本文、見出しやリンク、補助的な案内、申込みなどの主要操作という役割を書き出します。例えば、明るい背景にはオフホワイト#F7F8F4、本文には濃いグレー#29363D、見出しと案内には深い青緑#235B61、申込みボタンには赤茶#9B452Dを割り当てます。HEXはWEBで色を指定する16進数のコードです。
色を決めたら、トップページ・修理内容の一覧・受付フォームで同じ役割の色が変わらないようにします。見出しを目立たせたいからと毎回新しい青を作る、キャンペーンがあるから別のボタン色を足す、といった変更を減らせます。一方、白や薄いグレーなどは情報を読むための面に必要なら併用して構いません。大切なのは色名の数を無理に削ることではなく、色の用途を説明できることです。
ただし、「同じ役割ならどんな背景でも同じ色」とするのも適切ではありません。濃い背景上のリンクと明るい背景上のリンクでは、文字色を切り替える必要があります。統一するのは部品の目的と表示のルールであり、背景を無視した固定色ではありません。
登山用品の修理受付サイトを3画面でそろえる配色例
トップページ、修理メニュー・料金ページ、修理受付フォームの3画面を想定します。背景やカードは明るく、深い青緑をサイト共通の案内色、赤茶を修理申込みの操作色として使い分けます。
- 3画面共通の本文：背景をオフホワイト#F7F8F4、本文を濃いグレー#29363Dに統一します。文字と背景のコントラスト比は約11.65:1です。料金や注意事項が増えても、この組み合わせを基本にします。
- トップページの案内エリア：深い青緑#235B61に白#FFFFFFでサービス名と修理の概要を表示します。比率は約7.66:1です。「修理の流れを見る」は白#FFFFFFの下線付きリンクにし、暗い面に別の強調色を増やしません。
- ページ共通の見出しとリンク：明るい背景#F7F8F4の上では青緑#235B61を見出しや下線付きリンクに使います。文字と背景は約7.18:1です。修理メニューと受付フォームで同じ見出しの役割を保ちます。
- 修理メニューのカード：白#FFFFFFに濃いグレー#29363Dで修理の内容・目安料金を表示すると約12.43:1です。カードの白#FFFFFFと周囲のオフホワイト#F7F8F4の差は約1.07:1しかないため、グレー#74828Aの枠線と余白で区切ります。枠線と白#FFFFFFは約3.96:1です。
- 受付フォームの入力欄：入力欄を白#FFFFFF、項目名を濃いグレー#29363D、輪郭をグレー#74828Aにそろえます。枠線と白#FFFFFFは約3.96:1、ページ背景#F7F8F4に対しても約3.71:1です。入力欄は説明ラベルを付け、薄いプレースホルダーだけに頼りません。
- 発送方法・修理期間の案内：淡いセージグレー#E8F0ECに濃いグレー#29363Dの文字を載せます。文字と背景は約10.72:1です。この案内面とページ背景#F7F8F4の差は約1.09:1なので、必要に応じてグレー#74828Aの枠線を使います。枠線と案内面は約3.41:1です。
- 補足説明：オフホワイト#F7F8F4の上で補足文字にグレー#526269を使えば約5.95:1です。ページごとに違う薄い文字色を増やさず、料金の注記や発送条件を共通の表示にします。
- 共通の「修理を申し込む」ボタン：修理メニューの下と受付フォームへの導線に、赤茶#9B452Dの背景と白#FFFFFFの文字を使います。文字とボタンは約6.40:1、ボタンとオフホワイト#F7F8F4は約6.00:1です。淡いセージグレー#E8F0ECの上でもボタン面との差は約5.52:1です。
この例では、ページが変わっても「読む本文」「案内する見出し」「修理を申し込むボタン」の色の役割が共通しています。色を使い回すのは手抜きではなく、利用者が同じ操作を見つけやすくするためのルールです。
例外を増やす前に、ページをまたいで確認する
赤茶#9B452Dのボタンを深い青緑#235B61の案内エリアへ置くと、ボタンと周囲の比率は約1.20:1です。見た目の色相が違っても、面の輪郭を見分けにくくなります。暗い案内エリアでは白#FFFFFFの下線付きリンク、明るい本文では赤茶のボタンというように、役割と背景の両方を確認します。
また「受付中」「修理内容を確認中」「受付終了」などの状態は、色の違いだけで示さず文字でも伝えます。状態ごとに色を追加する前に、文言・アイコン・配置で区別できるか検討しましょう。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラストが必要です。入力欄の輪郭など操作の識別に必要な非テキスト情報には、隣接色と3:1以上が基準です。
公開前にはトップページ・料金一覧・受付フォームを続けて開き、見出し、リンク、カード、申込み操作が同じルールで表示されているか確認します。HueRollでは色や関連色の候補、選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した色同士の比率は別途計算しています。