ポップなWEBデザインを見やすくする配色｜鮮やかな色の整理方法
ポップなWEBデザインは、鮮やかな色を使えば完成するわけではありません。見出し、日時、申込みボタンが全部同じ強さで目立つと、どこから読めばよいか迷いやすくなります。大切なのは色を一律に弱めることではなく、鮮やかな色ごとに仕事を決め、同じ場所で主役を競わせないことです。ここでは、地域のアートマーケットの告知ページを例に整理します。
鮮やかな色は「何を伝えるか」で担当を決める
ポップな雰囲気を残したいときは、コーラル・黄色・青のように色相（赤、黄、青などの色の種類）が離れた色を使う方法があります。ただし、三色をすべて大きな背景、見出し、ボタンに繰り返すと、強調の順位が曖昧になります。先に「イベント名を印象づける色」「開催情報をまとめる色」「次の操作に使う色」と担当を分けましょう。
そのうえで、本文と余白は明るい無彩色に近い色で支えます。高い彩度（色の鮮やかさ）と文字の読みやすさは別問題です。色が目立っても、背景との明るさの差が足りなければ細い文字は読みにくくなります。写真や装飾の配色も、見出しの周囲だけに留めると情報を探しやすい構成にできます。
アートマーケット告知ページの配色例
HEX（「#」に続く数字と英字でWEBの色を指定する表記）で、次のように役割を固定します。イベント名、日時、申込みの順に見せる構成です。
- ページの土台：やや黄みのあるアイボリー#FFF9F2を本文の背景にします。鮮やかな面に囲まれない場所を作り、長い案内文を読み進めやすくします。
- 文字と見出し：濃紺#203047を基本にします。アイボリー#FFF9F2とのコントラスト比は約12.75:1です。
- イベント名の帯：鮮やかなコーラル#FF725Cを冒頭の見出し帯に使い、濃紺#203047の文字を載せます。この組み合わせは約4.96:1です。コーラルはページ全体へ広げず、最初に見せたい情報に限定します。
- 日時の案内：明るい黄色#FFD45Eのラベルに濃紺#203047の文字で「開催日」「時間」を明記します。文字と背景は約9.42:1です。
- 申込みボタン：深い青#2658A7に白文字#FFFFFFを使います。比は約6.92:1です。CTA（申込みなど次の行動を促すボタン）はこの青に統一し、飾りには流用しません。
コントラスト比は、二色の明るさの差を数値で表したものです。コーラルは見出し、黄色は日程、青は操作と分担させると、色の楽しさを保ちつつ、色が表す場所を予測しやすくなります。ボタン周囲はアイボリー#FFF9F2と余白で区切り、日程のラベルはイベント名の帯に重ねず独立させます。
小さな画面では色の境界と文字を確認する
アイボリー#FFF9F2と黄色#FFD45Eのコントラスト比は約1.35:1です。この差だけに頼らず、日程欄には濃紺#203047の枠線や余白を付けて範囲を示します。スマートフォンでは大きな色面が続くと文字が埋もれやすいため、日時の案内と申込みボタンの間にも余白を設け、視線が自然に移るよう調整します。
WCAG 2.2（WEBのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、大きな文字は3:1以上が必要です。重要な操作部品の境界など、文字以外の視覚情報には原則3:1以上が求められます。文字の太さと大きさも考慮し、白文字をコーラルや黄色へ安易に載せないことが大切です。イベントの日時や申込み可否は色だけで表さず、言葉でも伝えましょう。
HueRollで各色のHEXを入力すれば、色を調整し、選んだ色と白・黒のコントラストを確認できます。任意の二色同士の比較やAA・AAAの自動判定はできないため、この例の濃紺とコーラルなどの数値は別途計算したものです。