売り切れ商品の色は薄くする？ECサイトで状態を伝える方法

ECサイトで売り切れた商品を示すため、商品カード全体を薄い色にすることがあります。ただし、写真も商品名もまとめて薄くすると、どの商品だったのかを確認しにくくなります。大切なのは色を薄くすること自体ではなく、「今は買えない」と伝えつつ、商品情報と次にできる操作を残すことです。

売り切れは商品全体を薄くせず、表示と操作で伝える

結論からいうと、商品写真や文字を一律に薄くする必要はありません。商品の形・色・名前が分かる状態を保ち、写真の隅や価格付近に「売り切れ」と明記する方が状況を確かめやすくなります。薄い背景や彩度（色の鮮やかさ）を抑えた表現は、補助的に使うとよいでしょう。

特に、商品カード全体の不透明度（どれくらい透けずに見えるか）を下げると、写真だけでなく価格や在庫表示まで薄くなります。「売り切れ」の文字まで読みにくくなる配置は避けます。

購入ボタンは売り切れ品をカートに追加できない状態にし、画面上でもその結果が分かるようにします。再入荷通知の機能がある場合は、その案内を別の操作として表示できます。一部のサイズだけ売り切れなら、商品全体ではなく該当サイズに「売り切れ」と示してください。

マグカップの商品一覧で比較する配色例

陶器のマグカップを2点並べ、片方は購入可能、もう片方は売り切れという商品一覧を考えます。次のHEX（画面の色を16進数で表したコード）は、表示設計の例です。

• 両カードの背景はホワイト■#FFFFFF、写真の背景は薄いグレー■#F3F5F7で統一します。売り切れ品も写真の色は保ちます。
• 商品名と価格は濃いグレー■#243344にします。白背景とのコントラスト比（明るさの差）は約12.87:1で、売り切れても文字色は変えません。
• 売り切れ品の写真の左上に、濃いグレー■#3D4756の「売り切れ」ラベルを置き、文字をホワイト■#FFFFFFにします。ラベル内の文字と背景の比は約9.40:1です。
• 購入可能な商品の「カートに入れる」はブルー■#1D5871のボタンにホワイト■#FFFFFFの文字を組み合わせます。比は約7.82:1です。
• 売り切れ品の購入ボタンは薄いグレー■#E5E9EEにし、「購入できません」を濃いグレー■#475569で表示します。比は約6.21:1です。購入操作は実際にも無効にします。

再入荷通知を提供する場合は、購入不可ボタンとは別に、ホワイト■#FFFFFFを背景にブルー■#285D79の文字と枠を使った「再入荷通知を受け取る」ボタンを設ける方法もあります。文字・枠と白背景の比はいずれも約7.16:1です。

薄くする場合の範囲と読みやすさを確認する

売り切れをさらに控えめに見せたい場合も、写真部分だけを少し淡くする程度にとどめ、商品名・価格・「売り切れ」ラベルは通常の濃さを保ちます。写真の色味が購入検討に必要な場合は、元の色を確認できる詳細ページを残すとよいでしょう。ラベルと写真が重なって見えにくい場合は、ラベルの下地を不透明にします。

WCAG 2.2（Webコンテンツのアクセシビリティに関する基準）では、通常の文字は背景と原則4.5:1以上、操作に必要なボタンの輪郭などは隣接色と原則3:1以上が目安です。ただし、実際に操作できないボタンの表示にはコントラスト要件の例外があります。例外があっても、売り切れを知らせる説明文や、操作できる再入荷通知ボタンは読み取りやすく設計しましょう。

最後にスマホでも、一覧を見ただけで購入可否が分かるか、売り切れ品を誤ってカートに入れられないか、再入荷通知が本当に利用できるかを確認します。再入荷予定がない商品には、通知機能があるような表示を付けないことも大切です。