ECサイトの通常価格とセール価格を色で見分ける方法

ECサイト（インターネット上で商品を販売するサイト）で通常価格とセール価格が並んでいると、どちらが今支払う金額なのか迷うことがあります。赤い数字を大きくするだけでは、以前の価格なのか現在の価格なのかを正確に伝えられません。価格の色に加えて、ラベル・取り消し線・文字の大きさを組み合わせ、購入する金額がひと目で分かる表示を目指しましょう。

現在の販売価格を主役にして、比較する価格は補助的に見せる

値引きのない商品では、現在の販売価格を落ち着いた濃色で明確に表示します。セール商品では、現在のセール価格を強調し、比較元の価格はそれより控えめに置きます。同じ数字でも役割が違うので、並べる位置と見出しをそろえることが重要です。

「通常価格」「セール価格」などの文字ラベルを添え、比較元の価格には必要に応じて取り消し線を使います。色だけに意味を持たせると、色の違いを見分けにくい人や白黒表示では区別できません。HTMLのdel要素は、以前の金額を取り消し線付きで示すときの一例ですが、ラベルも残してどの金額か明確にします。

セールの強調色と「カートに入れる」などの購入ボタンを同じように目立たせると、価格と操作が競い合うことがあります。価格の役割を決めてから、購入ボタンにはサイトで使う操作色を割り当てましょう。

収納ボックスの商品カードで通常販売とセールを比較する

収納ボックスのECページを例に、通常販売とセール対象の表示を比較します。以下の金額は説明用の架空の例です。HEX（16進数でWEBの色を指定するカラーコード）で色を示し、コントラスト比は文字などの色と隣接する背景色の明るさの差として計算しています。

• 商品カードの土台：ページを淡い青灰■#F7F9FB、商品カードを白■#FFFFFFにします。両色の比は約1.06:1なので、カードのまとまりは余白や見出し位置でも示します。価格の近くには余計な色を増やしません。
• 通常販売の商品：白■#FFFFFFのカードに、濃い青灰■#253449で「販売価格 8,000円」と表示します。濃い青灰と白の比は約12.60:1です。値引きのない商品には、セール用の赤系の強調を付けません。
• セール商品の比較元の価格：白■#FFFFFFのカードで、青灰■#627184の「当店通常価格 8,000円」を現在の価格より小さく添えます。青灰と白の比は約4.98:1です。比較元の金額が正しいことを確認したうえで使用し、取り消し線と文字ラベルの両方で以前の価格だと示します。
• 現在のセール価格：同じ白■#FFFFFFのカードに、深いローズレッド■#9A2439で「セール価格 6,400円」と表示します。白との比は約7.82:1です。比較元の価格より太く大きくし、今の販売価格が先に目に入るようにします。
• セールの小さなラベル：淡いピンク■#FFF0F2の面に、濃い赤紫■#8B2333で「セール価格」と表示します。文字と面の比は約7.96:1です。淡いピンクと周囲の白■#FFFFFFの差は約1.11:1しかないため、面の色だけに意味を持たせず、文字で必ず示します。現在価格のローズレッド■#9A2439も淡いピンク上で約7.07:1です。
• 購入ボタン：白■#FFFFFFのカードには濃い青緑■#205D71の「カートに入れる」を共通で使用します。ボタンと白、およびボタン上の白■#FFFFFF文字と青緑の比は約7.33:1です。通常商品とセール商品で操作の色を変えず、価格表示だけを区別します。

価格の根拠とスマホ表示を最後に確認する

セール価格と一緒に表示する「当店通常価格」は、実際の販売履歴などに基づく必要があります。根拠のない高い金額を並べて安く見せる二重価格表示は避けましょう。日本では消費者庁が過去の販売価格を比較対象にする場合の考え方を公表しています。値引き表示の前に価格の根拠と販売条件を確認してください。

スマホでは価格が改行されても「当店通常価格」と「セール価格」が別々の金額に対応する配置を保ちます。割引の有無は文字でも知らせ、取り消し線だけに頼らないようにします。通常価格・セール価格・送料などの条件を混同させず、最終的に支払う金額を確認できることが優先です。

WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は背景に対して原則4.5:1以上のコントラスト比が必要です。また、情報を区別するために色だけを使わないことも求められます。HueRollではHEXで色を調整し、選択色と白・黒のコントラストを確認できますが、任意の2色間の比較やAA・AAAの自動判定には対応していません。実際の背景との組み合わせを別途確認しましょう。