商品比較ページの配色はどうする？違いを見つけやすくする方法

ECサイトで似た商品を並べて比べるページでは、表の列を追っているうちに商品名と数値の対応を見失うことがあります。すべてのマスを色分けするより、見出し・行・違いのある項目に役割を決めた方が比較しやすくなります。商品比較ページの配色は、特定の商品を目立たせるためではなく、同じ条件で違いを確かめるために使いましょう。

見出し・交互の行・注目項目で色の役割を分ける

比較表では、縦の列を商品ごと、横の行を価格や機能などの項目ごとにそろえます。商品名を並べた最上段は本文とは異なる薄い背景色にし、項目名の列も文字を太くして、どの値を見ているか分かるようにします。

表の背景は白を基本に、1行おきにごく薄いグレーを敷く方法があります。これを交互の行色といい、隣の行に視線が移るのを抑える補助になります。ただし背景の差が小さい場合は色だけでは境目を判別できないため、行の区切り線も併用します。

注目してほしいのは、特定の商品の列よりも「比較の結果が異なる行」です。例えば調光機能の差を示すなら、その行だけ淡い色にし、項目名に「比較ポイント」と添えます。価格が高い商品を赤、安い商品を緑と決めつけず、金額や条件を文字・数字で直接比べられるようにします。

3種類のデスクライトで考える比較表と配色例

架空のデスクライトA・B・Cを比較する例です。価格や機能は説明用の仮定で、実在商品の仕様ではありません。調光とは、ライトの明るさを段階的に変える機能のことです。

HEX（画面上の色を16進数で表すコード）を使う場合、次のように背景・文字・線の役割を固定します。

• 表の見出し行は薄いブルーグレー■#E7F0F7、見出し文字は濃いブルー■#173B57。両者のコントラスト比（明るさの差）は約10.12:1です。
• 表の本文はホワイト■#FFFFFFと薄いグレー■#F3F6F8を交互に使い、文字は濃いグレー■#253444に統一します。文字と背景の比は順に約12.70:1、11.70:1です。
• 調光の行を比較ポイントとして示すなら、行全体の背景を淡いミント■#E9F4EFにし、左端に「比較ポイント」と記します。文字は同じ濃いグレー■#253444で、比は約11.28:1です。
• 比較ポイントの左側の線には深緑■#236049を使います。ミント背景との比は約6.57:1。通常の区切り線はグレー■#64748Bにすると、白背景との比は約4.76:1です。
• 各商品の「詳細を見る」ボタンは共通のブルー■#215D77とホワイト■#FFFFFFの文字にそろえます。比は約7.25:1で、商品ごとに購入操作の意味が変わらないようにします。

スマホと色以外の手がかりも確認する

スマホで横幅が足りない場合は、比較表を横にスクロールできるようにして「横にスクロールできます」と案内します。商品名の行や項目名の列が見失われないか、実機で確認してください。表を商品ごとの縦長カードに組み替える場合も、項目の順番を同じに保ちます。

機能の有無を緑と赤だけで示すのではなく、「あり」「なし」「3段階」などと書きます。WCAG 2.2（Webコンテンツを利用しやすくするための基準）では、通常サイズの文字は背景と原則4.5:1以上、操作に必要な部品や状態の視覚情報は隣接色と原則3:1以上のコントラストが必要です。表の区切りや強調色が薄い場合でも、文字と項目名だけで対応をたどれるかを試します。

比較対象を入れ替えたときも、同じ項目は同じ行に表示し、差のある行だけを強調し直しましょう。色数を増やすより、並び方と表示ルールを変えないことが、違いを見つけやすい比較ページにつながります。