おすすめ商品だけ色を変える方法｜ECサイトで自然に目立たせるコツ

ECサイトの商品一覧で、6点のうち1点だけを「おすすめ」として紹介したいとき、カード全体を強い色にすると、商品写真や価格よりも背景が目立つことがあります。おすすめ商品を自然に見つけてもらうには、ほかの商品と同じ見せ方を基本にし、背景・枠線・小さなラベルだけで違いを作る方法が考えられます。

保存容器6点の商品一覧を想定した配色例

架空の生活雑貨店で保存容器を6点並べ、そのうち「食洗機対応」の1点をおすすめとして紹介する例です。実際に対応していることを確認できた商品に限って、この理由を使います。HEXはWeb画面の色を16進数で表すコードです。

ページと通常の商品カードはホワイト■#FFFFFF。通常カードの区切りには薄いグレー■#E2E8F0を使い、写真の背景はどの商品も明るいグレー■#F3F5F7にそろえます。
おすすめの1点だけカード背景を淡いミント■#EFF8F4にします。白とのコントラスト比（2色の明るさの差）は約1.08:1なので、この背景差だけでおすすめを伝えない設計にします。
おすすめカードの外枠と「おすすめ」ラベルの背景には深緑■#24604Dを使います。枠線と周囲の白背景の比は約7.35:1、ミント背景との比は約6.80:1です。ラベルの文字をホワイト■#FFFFFFにすると約7.35:1です。
すべてのカードで商品名と価格を濃い青灰■#253446に統一します。白背景では約12.66:1、ミント背景では約11.70:1です。おすすめ理由などの補足文字にはグレー■#475569を使い、白では約7.58:1、ミントでは約7.00:1です。
購入ボタンはおすすめかどうかにかかわらず、濃いブルー■#24465Aとホワイト■#FFFFFFの文字で統一します。文字と背景の比は約10.01:1です。ボタンの色が変わらなければ、押せるかどうかをおすすめ表示と混同しにくくなります。

おすすめカードには「おすすめ」の下に「食洗機対応」のような短い理由を付けます。色を変える面積はカード1枚に限定し、商品写真の撮影条件と余白はほかの5点とそろえると、違いを比較する基準を保てます。

緑の枠線は商品をおすすめとして示すためのもので、在庫の有無や選択中の状態とは区別します。売り切れの商品には別途「売り切れ」と明記し、購入できるかどうかをおすすめの色で判断させないようにします。

WCAG 2.2（Webコンテンツのアクセシビリティに関する基準）では、通常サイズの文字は背景とのコントラスト比が原則4.5:1以上、操作に必要な部品や状態を示す視覚情報は隣接色と原則3:1以上が基準です。おすすめの意味も色だけで伝えず、ラベルを併用しましょう。

スマホではカードが縦に並ぶため、「おすすめ」ラベルが画像や価格を隠さないかを確認します。おすすめ対象を差し替えるときは、古いカードから背景とラベルを外し、新しいカードだけに付け直します。選定理由が説明できる1点を控えめに強調することが、商品一覧の比較しやすさにつながります。