価格シミュレーター
数量 ± とオプション選択で合計金額がカンマ区切りのアニメ付きカウントアップで更新されるウィジェット。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 数量とオプションで合計が変わる商品詳細
- セット商品・定期便の見積もり
- 購入前に合計を確かめさせたいカート導線
- 避ける場面
- 数量上限が大きく ± では遅い業務発注（数値入力が向く）
- オプションが 3 段以上に階層化する構成
- 構成要素
- 商品名
- グレード選択
- 数量ステッパー
- 合計金額
- カートに入れるボタン
- 持っている状態
- 通常
- フォーカス
- 押下中
- 無効
- キーボード
Tab でグレード→−→＋→カートへ。セレクトは ↑↓ で変更、−／＋は Enter／Space。上限・下限で該当ボタンが disabled
- 支援技術
label for でセレクトに名前。−／＋は aria-label、数量と合計は aria-live=polite で読み上げ。セレクト・ボタンに focus-visible の輪郭。reduced-motion で合計の弾みを省く
- 動き
合計が 1.12 倍に 150ms バウンスして値の更新を示す。数量ボタン背景 100ms
デザインの要点
- 合計の文字は即時に書き換え、弾みは見た目だけにする。transitionend 待ちにすると環境次第で値が止まる
- 上限・下限に達したら該当ボタンを disabled にする。押しても変わらないボタンは壊れて見える
- appearance:none のセレクトには矢印を自前で描く。無いと入力欄に見えて開けることに気づかない
- 合計は 22px の太字で 1 か所だけ。数量・単価より大きく組み、目線の終点にする
コード（コピーして使えます）
<div class="pq-wrap">
<p class="pq-title">ドリップコーヒーセット</p>
<div class="pq-option-row">
<label class="pq-label" for="pqGrade">グレード</label>
<select class="pq-select" id="pqGrade">
<option value="0">スタンダード (±¥0)</option>
<option value="500">プレミアム (+¥500)</option>
<option value="1200">スペシャルティ (+¥1,200)</option>
</select>
</div>
<div class="pq-qty-row">
<span class="pq-label">数量</span>
<div class="pq-qty-ctrl">
<button class="pq-qty-btn" id="pqMinus" aria-label="減らす">−</button>
<span class="pq-qty-val" id="pqQty" aria-live="polite">1</span>
<button class="pq-qty-btn" id="pqPlus" aria-label="増やす">＋</button>
</div>
</div>
<div class="pq-divider"></div>
<div class="pq-total-row">
<span class="pq-total-label">合計</span>
<span class="pq-total-val" id="pqTotal" aria-live="polite">¥1,980</span>
</div>
<button class="pq-cart-btn">カートに入れる</button>
</div>