在庫あり・残りわずか・売り切れを色で表す方法

ECサイトで同じ商品の色違いを選ぶとき、「在庫あり」「残りわずか」「売り切れ」が分かりにくいと、購入できる色を探すのに時間がかかります。緑・黄・グレーの色分けは便利ですが、色だけでは購入できるかどうかを伝えきれません。在庫の状態名と購入操作を一致させ、一覧でもスマホでも確認しやすい表示を考えましょう。

在庫状態は色よりも言葉と購入できるかどうかを優先する

まず商品の各バリエーションに「在庫あり」「残りわずか」「売り切れ」という状態名を明記します。バリエーションとは、同じ商品の色やサイズなどの選択肢です。緑を在庫あり、黄系を残りわずか、グレーを売り切れに割り当てても、状態名があれば色を区別できない人にも意味が伝わります。

「残りわずか」は販売者が実際の在庫数に基づいて判断する表示です。何点以下をそう呼ぶかを運用上決め、在庫が更新されたら表示も直します。残数を表示する場合も、確認できた数字だけを使いましょう。根拠のない「残り3点」などの表示で購入を急がせることは避けます。

売り切れの商品では、ラベルをグレーにするだけでなく、購入できない状態を操作にも反映します。購入可能な商品と同じ有効な「カートに入れる」ボタンを残さず、「売り切れ」と明記します。再入荷通知などが用意されている場合は、その機能を購入操作と別に示します。

3色のステンレスボトルを並べる在庫表示の配色例

ネイビー、アイボリー、チャコールの3色があるステンレスボトルの販売ページを想定します。ここでの在庫状態は配色説明用の架空の例です。HEX（16進数でWEBの色を指定するカラーコード）を使い、状態ごとに背景と文字を組み合わせます。コントラスト比は隣り合う色の明るさの差を表す数値です。

• 商品ページの土台：ページ背景をごく淡い青灰■#F7F9FB、商品カードを白■#FFFFFFにします。両色の差は約1.06:1と小さいため、余白や商品名の配置でカードを整理します。商品名は濃い青灰■#233445にし、白との比は約12.74:1です。
• ネイビー・在庫あり：淡いグリーン■#ECF8F0のラベルに濃い緑■#25613Dで「在庫あり」と書きます。文字とラベル面の比は約6.74:1。購入できる状態を示す補助色として緑を使い、商品そのもののネイビーとは意味を分けます。
• アイボリー・残りわずか：淡い黄■#FFF4DBのラベルに濃い茶■#805415で「残りわずか」と表示します。文字と背景の比は約6.01:1です。実際の残数を確認できないなら「残り2点」などの数字を足さず、注文可能なら購入ボタンは在庫ありの商品と同じ操作色にします。
• チャコール・売り切れ：薄いグレー■#F0F2F5のラベルに濃いグレー■#4B5563で「売り切れ」と書きます。比は約6.74:1です。商品写真まで極端に薄くすると形や色を判断できなくなるため、写真は確認できる状態に保ち、購入操作を利用不可にします。
• 購入できる商品のボタン：白■#FFFFFFのカード上に濃い青■#1D5874の「カートに入れる」ボタンを置き、文字を白■#FFFFFFにします。ボタンと周囲、ボタンと文字の比はいずれも約7.78:1です。在庫ありと残りわずかでボタンの色を変えず、在庫状態はラベルで伝えます。

ボトル自体の色見本と在庫状態の色が混同されないよう、商品色の選択肢には「ネイビー」などの色名を添え、その近くに在庫ラベルを配置します。色名が商品を表し、ラベルが購入可否を表すように役割を分けます。

スマホ表示と更新漏れを確認する

スマホでは色見本・価格・在庫ラベルが近づきます。ラベルの文字を小さくしすぎず、選んだバリエーションのすぐ近くに状態を表示します。品切れの選択肢を隠す場合も、ほかの色が存在することを知らせる必要があるかを検討しましょう。「売り切れ」と「販売終了」は意味が異なるため、入荷予定が未確認なら再入荷すると断定しません。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、色を情報伝達の唯一の手段にしないことが求められます。通常サイズの文字は背景に対して原則4.5:1以上、操作の識別に必要なアイコンや境界は隣接色と原則3:1以上が基準です。ただし、今回の淡い在庫ラベルの面自体を操作ボタンと同じ基準で扱う必要があるとは限りません。ラベルの文字が読めるかと購入ボタンが識別できるかを別々に確認します。

HueRollではHEXで候補色を調整し、選択色と白・黒のコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していません。今回のように淡い面と濃い文字を使う場合は、実際の組み合わせを別途計算し、在庫表示が最新かも確認してください。