WEBサイトが派手に見える原因は？彩度を整える配色のコツ
WEBサイトが派手に見えるとき、原因は色数の多さだけではありません。3色しか使っていなくても、鮮やかな色が背景・ラベル・予約ボタンで同時に大きく主張すると、何を先に見ればよいか分かりにくくなります。いちご狩りの予約サイトを例に、元気な印象を残しながら彩度と色の面積を調整する方法を紹介します。
派手に見える原因は「高彩度の色が同時に競うこと」
彩度は色の鮮やかさを表す尺度です。HSL（色相・彩度・明度で色を表す方式）では彩度を百分率で確認できます。例えば鮮やかなコーラル#F45B45、シアン#12BCD0、黄色#F1D831は、HSLの彩度がおおよそ84〜89％の色です。これらをページ冒頭・受付ラベル・お知らせ欄へ広く使うと、どの情報も同じように強調されがちです。
ただし、「派手」と「読みにくい」は同じ問題ではありません。白#FFFFFFの文字をコーラル#F45B45に置いたときのコントラスト比は約3.27:1、シアン#12BCD0に置くと約2.30:1で、通常サイズの文字には不足します。一方、黄色#F1D831に濃い文字色#30363Bを合わせれば約8.51:1です。文字が読めても、黄色い面が大きすぎるとページ全体の注目が散ることがあります。
まず鮮やかさを一律に下げるのではなく、どの色が何を伝えるのかを決めます。目を引くブランド色は小さく残し、文字・ラベル・主要ボタンは隣の背景との明暗差を確認して選びます。
いちご狩り予約ページで彩度と面積を調整する例
農園の写真、予約できる日程、品種の紹介、注意事項、予約ボタンがあるページを想定します。HEXはWEB用の色を16進数で表すコードです。修正前の鮮やかな色を残す場所と、落ち着いた色へ替える場所を分けます。
- ページ冒頭：全面のコーラル#F45B45を、広い背景ではクリーム#FAF7F1へ変更します。見出しは濃いチャコール#30363Bにし、文字と背景の比率を約11.44:1にします。コーラルは写真の周りの細い装飾線など、意味を伝えない小さな場所に残します。
- 「受付中」のラベル：シアン#12BCD0に白#FFFFFFを載せる約2.30:1の組み合わせから、深い青緑#25636Aと白#FFFFFFの約6.84:1へ変えます。新しいラベルと周囲のクリーム#FAF7F1の差も約6.39:1です。空き状況は文字でも示します。
- お知らせ欄：黄色#F1D831の大きな面を、淡いセージ#E7EEE8へ変更し、チャコール#30363Bの文字を置きます。文字との比率は約10.37:1です。お知らせを全ページで繰り返し強調するより、見出しと文言で重要度を伝えます。
- 品種・日程カード：白#FFFFFFの背景にチャコール#30363Bで説明すると約12.23:1です。カードの白#FFFFFFとクリーム#FAF7F1の差は約1.07:1なので、グレー#78817Dの枠線を使います。枠線と白#FFFFFFは約4.01:1です。
- 注意事項の枠線：淡いセージ#E7EEE8の案内欄にグレー#78817Dの線を使うと約3.40:1です。ただし案内欄とクリーム#FAF7F1の面同士は約1.10:1なので、見出し・余白・枠線を併用します。
- 補足説明とリンク：クリーム#FAF7F1の上で補足文字をグレー#555F62にすれば約6.14:1です。リンクには深い青緑#25636Aを使い、約6.39:1の差と下線を付けます。
- 「予約する」ボタン：コーラル#F45B45に白#FFFFFFで文字を書く代わりに、深いベリー#8B3B4Bの背景と白#FFFFFFの文字を使います。文字とボタンは約7.43:1、ボタンと周囲のクリーム#FAF7F1は約6.95:1です。
修正後は、鮮やかなコーラルをブランドの小さな装飾として残し、受付情報・注意事項・予約操作には役割に合った色を使います。画面を無彩色にするのではなく、強調する場所を絞る考え方です。
彩度を下げるだけでなく、文字とボタンの見え方も確認する
深いベリー#8B3B4Bの予約ボタンを、元のコーラル#F45B45の背景にそのまま置くと、面同士の比率は約2.28:1です。同じボタン色でも背景が変われば見分けやすさは変わるため、明るい本文の上に配置します。彩度を抑えた案内欄でも、区切りが必要なら枠線や余白を使いましょう。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。操作に必要な非テキスト情報は隣接色と3:1以上が基準です。色を落ち着かせる調整が、文字や操作を見分けにくくしないことを確認してください。
最後にスマートフォンで写真の周囲、受付ラベル、予約ボタンを見比べます。HueRollではHEXの入力やHSL値の表示、選択色と白・黒とのコントラスト確認ができます。ただし、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した色同士の比率は別途計算しています。