サイズ選択
S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- S/M/L など段階的なサイズを選ぶ商品詳細
- 品切れサイズを残したまま示したい在庫表示
- 未選択のまま購入させたくないカート導線
- 避ける場面
- 数値入力が要る寸法指定（オーダーメイド）
- 選択肢が 10 を超えて折り返しが増える場合
- 構成要素
- 見出し
- サイズピル
- 品切れピル
- 案内テキスト
- カートに入れるボタン
- 持っている状態
- 通常
- 押下中
- 無効
- エラー
- 成功
- キーボード
Tab でサイズ群（1 回）とカートボタンへ。←→／↑↓ で隣のサイズを選択、Home／End で端へ、Enter／Space でも選択・投入。品切れ XL は飛ばす
- 支援技術
role=listbox／option＋aria-selected とローミング tabindex。品切れは disabled＋aria-disabled＋取り消し線で色以外にも示す。案内文は aria-live=polite。focus-visible の輪郭あり。reduced-motion でシェイク停止
- 動き
選択の色変化 150ms・押下で 0.92 倍バウンス。未選択で購入を押すとボタンが 400ms 左右に振れて注意を引く
デザインの要点
- 品切れは隠さず取り消し線＋薄色で残す。無いサイズが「存在しない」のか「売り切れ」なのかは購買判断を変える
- 未選択でカートを押したら、ボタンを 400ms 振って赤字の案内を出す。黙って何も起きないのが最悪の反応
- ピルは高さ 40px・最小幅 46px。指で押す前提なので文字より当たり判定を優先する
- 選択後は案内を消し、投入完了は緑字で 2.2 秒だけ出す。赤の案内が残ると「まだ間違っている」と読まれる
コード（コピーして使えます）
<div class="sz-wrap">
<p class="sz-heading">サイズ</p>
<div class="sz-list" role="listbox" aria-label="サイズ選択" id="szList">
<button class="sz-pill" data-size="S" role="option" aria-selected="false" tabindex="0">S</button>
<button class="sz-pill" data-size="M" role="option" aria-selected="false" tabindex="-1">M</button>
<button class="sz-pill" data-size="L" role="option" aria-selected="false" tabindex="-1">L</button>
<button class="sz-pill sz-sold" data-size="XL" role="option" aria-selected="false" tabindex="-1" disabled aria-disabled="true">XL</button>
</div>
<p class="sz-hint" id="szHint" aria-live="polite"></p>
<button class="sz-cart-btn" id="szCartBtn">カートに入れる</button>
</div>