コンテンツ量が多いWEBサイトの配色｜情報を整理して見せる色の使い方
検索結果、記事一覧、絞り込み、更新情報が一画面に並ぶWEBサイトでは、情報ごとに色を変えても整理された画面になるとは限りません。色が多いと、何が操作できて、何が読むための情報なのかかえって見分けにくくなる場合があります。家電製品のサポートサイトを例に、情報量を減らさず、背景・文字・リンク・操作状態に役割を分けて配色する方法を紹介します。
情報の種類ではなく、画面での役割に色を割り当てる
まず、ページの要素を「読む情報」「探す・絞り込む操作」「更新を知らせる情報」「次に進む操作」に分けます。例えば、取扱説明書・よくある質問・修理案内という3種類の記事があっても、記事カード全体を3色に塗り分ける必要はありません。記事の種類は「取扱説明書」などの文字で示し、カードの背景と本文文字は共通にします。
代わりに色で区別するのは、現在選ばれている絞り込み条件や、文字リンク、目に留めてほしい更新欄などです。選択中を色だけで示すと、色の違いが分かりにくい環境では状態が伝わりません。「選択中」の表示やチェックマークも組み合わせましょう。
検索結果が多い場合ほど、同じ役割には同じ色を使うことが重要です。記事タイトルは同じ見出し色、更新日は同じ控えめな文字色、詳細へ進むリンクは同じリンク色と下線にそろえます。色の種類を増やす代わりに、情報の並ぶ順番と余白を一定にすると、一覧を繰り返し確認しやすくなります。
家電サポートサイトの検索・記事一覧を配色する例
製品名の検索欄、記事の種類を選ぶ絞り込み、検索結果の一覧、更新履歴、お問い合わせへの案内を想定します。HEXとは、先頭の#と6桁の数字・英字で色を示すWEB用のコードです。コントラスト比は、文字や枠線と、それに接する背景との相対的な明るさの差を表します。
- 共通の土台：ページ背景は淡いグレー#F7F8FA、本文は濃い青灰#263342にして、文字との比を約12.09:1にします。記事見出しは深い紺#203C5Cで、背景との比は約10.61:1です。結果一覧には白#FFFFFFのカードを繰り返し使い、カード上の本文は濃い青灰#263342で約12.85:1を確保します。
- 検索欄と結果一覧：白い入力欄#FFFFFFの枠線を青みのグレー#64748Bにすると、枠線と入力欄の比は約4.76:1です。検索欄には「製品名を検索」と表示し、検索ボタンも文字で役割を示します。記事カードでは種類・更新日を青灰#516173の補足文字にまとめ、白い背景#FFFFFFとの比は約6.35:1。記事の見出しと情報の並び順を統一します。
- 絞り込みの選択状態：「取扱説明書」など選択中の項目だけに淡い青#DCECF5を使い、文字を濃い青#214F70にして約7.18:1にします。選択状態を示す枠線は青#175F8Eとし、淡い青#DCECF5との比は約5.67:1です。「選択中」の表示も付けます。未選択の項目は白#FFFFFFのままにし、すべての分類に別々の色を付けません。
- 記事へのリンク：「詳しく見る」などのリンクは青#175F8Eに下線を付け、白いカード#FFFFFFの上で約6.85:1を確保します。記事名だけでは内容が分からない場合は、短い説明文も添えます。リンクの色は記事の種類によって変えず、同じ操作を同じ見た目にそろえます。
- 更新欄と次の操作：更新履歴を淡いクリーム#FFF2DEの欄に載せ、見出しは濃い茶#6C4217にすると約7.82:1です。必要な案内を読んだ後の「お問い合わせへ進む」ボタンには深い青緑#12645Aを使い、白文字#FFFFFFとの比を約7.01:1にします。この塗りボタンをすべての記事カードには置かず、問い合わせ先の案内に絞ります。
この例では、読む記事は共通の白い面にまとめ、選択状態・リンク・更新欄・問い合わせ操作だけ色の役割を変えています。掲載記事が増えてもカードごとに新しい色を追加せずに済み、一覧の規則を保てます。
淡い色の境界、状態表示、スマホでの探しやすさを見直す
白い記事カード#FFFFFFとページ背景#F7F8FAの差は約1.06:1しかありません。カード自体を押せるようにする場合は、枠線や十分な間隔を加え、どこから操作できるかを明確にします。例えば枠線の青灰#64748Bは、ページ背景#F7F8FAと約4.48:1の差があります。一方、ただ読むための区画なら、枠線を増やす前に見出しと余白で区切れるか確認できます。
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）レベルAAでは、通常サイズの文字に背景と原則4.5:1以上、規定の大きな文字に3:1以上が必要です。入力欄の輪郭など、操作を識別するうえで必要な非テキスト情報も隣接色と3:1以上が求められる場合があります。数値を満たすだけでサイト全体の使いやすさが保証されるわけではありません。
スマートフォンでは絞り込み条件と結果が縦に並ぶため、現在選んだ条件を見失わないように表示しましょう。検索結果が0件なら、色だけでなく「該当する記事はありません」と書き、条件の解除方法を示します。HueRollではHEXから関連色や配色候補を探し、選択色と白・黒のコントラストを確認できます。ただし任意の2色の比較やAA・AAAの自動判定には対応していません。この記事の白・黒以外の組み合わせは別途計算しています。