検索結果ページの配色はどうする？情報量が多くても見やすくする方法

検索結果ページは、タイトルリンク、サイト名やURL、説明文、更新日などの情報が繰り返し並ぶため、色を増やしすぎると重要な部分が埋もれやすくなります。基本は、背景を明るく保ち、結果タイトルをアクセントカラー、説明文と補足情報を濃さの違うニュートラルカラーに分けることです。色だけでなく、見出し・余白・下線・フォーカス表示も組み合わせると、情報量が多くても追いやすくなります。

タイトルリンク・説明文・補足情報の役割を色で分ける

以下のHEX（Webで色を表す16進数コード）例では、ページ背景をライトグレー ■#F8FAFC、検索結果の表示面を白 ■#FFFFFF にします。この2色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約1.05:1と小さいため、結果の区切りを背景差だけに頼らず、余白や見出し構造でも整理します。

検索結果のタイトルリンクをロイヤルブルー ■#1D4ED8 にすると、白 ■#FFFFFF に対して約6.70:1です。説明文をブルーグレー ■#475569 にすると約7.58:1、サイト名・日付などの補足情報をスレートグレー ■#64748B にすると約4.76:1です。本文より目立たせたい結果タイトル、内容を判断する説明文、補助的な情報という順に役割を分けられます。

ページ上部の「検索結果」や検索語の見出しにはダークネイビー ■#0F172A を使うと、白に対して約17.85:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。

各結果の並び順をそろえ、検索語の強調は色だけにしない

結果ごとに「タイトルリンク→サイト名やURL→説明文→補足情報」のような順序をそろえると、スクロールしても同じ位置に同じ種類の情報が現れます。W3CのLink Purposeでは、リンクの目的がリンクテキスト単独、またはその文脈から判断できることが求められます。「詳細はこちら」のような曖昧な文字より、遷移先の内容が分かる結果タイトルをリンクにする方が目的を判断しやすくなります。

検索語を説明文の中で強調する場合は、色だけでなく太字なども併用します。たとえばペールイエロー ■#FEF3C7 の背景にダークブラウン ■#78350F の文字を置くと約8.15:1です。WCAGのUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められるため、検索語の一致を背景色だけで示さないようにします。

見出しを使う場合は、結果一覧全体の見出しや各セクションの名前が内容を説明する言葉になるようにします。W3CのHeadings and Labelsでも、見出しやラベルはそのトピックや目的を説明することが求められています。色の階層と文書構造を同じ方向にそろえると、見た目だけでなく内容の整理にもつながります。

リンクの操作状態は本文色と混同しない

青いタイトルリンクを使う場合も、色だけでクリック可能だと伝えず、下線など別の手掛かりを残すと分かりやすくなります。また、キーボード操作時には現在のリンクが分かるフォーカス表示を用意します。たとえば白 ■#FFFFFF の周囲にブルー ■#2563EB のフォーカスリングを置くと約5.17:1です。

検索結果が多いページでは、1件ごとに違う色を付けるより、役割ごとの色を固定する方が情報を追いやすくなります。タイトルリンクは ■#1D4ED8、説明文は ■#475569、補足情報は ■#64748B のようにルールを決め、検索語の強調やフォーカスだけを追加の状態色として扱います。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、検索結果タイトル・説明文・補足情報・強調色など、実際に隣接する組み合わせは別途確認します。