在庫・残数表示
「残りわずか 3点」の残量バーと控えめなパルスアニメーションで購買意欲を後押しするウィジェット。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 実際に残数が少ない限定品・セール品の詳細
- 在庫連動で残数を正確に出せる EC
- 予約・チケットなど枠数が決まっている販売
- 避ける場面
- 在庫が潤沢なのに演出だけで煽る（ダークパターン）
- 残数を正確に取得できない商品
- 構成要素
- 商品行
- 点滅ドット
- 残りわずかラベル
- 残量バー
- 購入ボタン
- 持っている状態
- 通常
- 押下中
- 無効
- 空
- キーボード
Tab で購入ボタンへ、Enter／Space で購入（残数が 1 減る）。在庫 0 でボタンが disabled になる
- 支援技術
残量バーは role=progressbar＋aria-valuenow を更新。残数と在庫切れは aria-live=polite で読み上げ、点滅ドットは aria-hidden。reduced-motion でパルス停止
- 動き
赤いドットが 1.6s ease-in-out で拡大・減光を繰り返す（緊急感）。残量バーは width 500ms で減る
デザインの要点
- 残数は実在庫と連動した数字だけを出す。「急いで」と煽る文言を足すと消費者保護のダークパターンになる
- パルスは 8px の点を 1.6s で薄く脈打たせる程度に留める。点滅が速いほど信用を失う
- 残量バーは 15% から始めて数量に比例して減らす。バーが半分あるのに「残りわずか」では矛盾する
- 在庫 0 は購入ボタン自体を「在庫切れ」に変えて disabled にする。押してから断るより先に伝える
コード（コピーして使えます）
<div class="su-wrap">
<div class="su-product-row">
<div class="su-thumb" aria-hidden="true">
<svg viewBox="0 0 56 56" fill="none">
<rect width="56" height="56" rx="10" fill="#dce5f7"/>
<rect x="10" y="14" width="36" height="28" rx="5" fill="#2b50c7" opacity=".55"/>
<circle cx="28" cy="24" r="8" fill="#fff" opacity=".75"/>
</svg>
</div>
<div class="su-info">
<p class="su-name">プレミアム ポーチ</p>
<p class="su-price">¥3,480</p>
</div>
</div>
<div class="su-stock-area">
<div class="su-label-row" aria-live="polite">
<span class="su-dot su-pulse" aria-hidden="true"></span>
<span class="su-label" id="suLabel">残りわずか</span>
<span class="su-count" id="suCount">3点</span>
</div>
<div class="su-bar-bg" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="在庫残量">
<div class="su-bar-fill" id="suBarFill" style="width:15%"></div>
</div>
<p class="su-sub">残数は実在庫と連動して更新されます</p>
</div>
<button class="su-btn" id="suBtn">今すぐ購入する</button>
</div>