スワイプで決めるカード
カードを左右にドラッグすると傾きながら「残す／捨てる」のラベルが濃くなる。距離か速度がしきい値を超えると飛んでいき、下のカードが繰り上がる。届かなければ弾んで戻る。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 候補を1件ずつ残す／捨てると判定する画面
- 短いフリックを意思表示として受けたいとき
- モバイル中心の選別UI
- 避ける場面
- 取り消しできない削除の判定
- 一覧で比較しながら選ぶ購買画面
- 構成要素
- カードの山
- 残す／捨てるラベル
- 捨てるボタン
- 残すボタン
- 件数表示
- 空状態の枠
- 持っている状態
- 通常
- 押下中
- フォーカス
- 空
- キーボード
カードのドラッグはポインタ専用。代替: Tab で「捨てる」「残す」ボタンへ、Enter／Space で同じ判定ができる
- 支援技術
カードは role=group＋aria-label（商品名）、判定はボタン2つが代替経路。件数は aria-live の文で通知。ラベルは色＋文字＋傾き。reduced-motion で飛ぶ・戻る transition 無し
- 動き
ドラッグ中は移動量÷12 度で傾き、ラベル不透明度は距離に比例。戻り 300ms オーバーシュート(.34,1.56,.64,1)、飛ぶ 400ms ease-in
デザインの要点
- 判定は距離だけでなく速度も見る。短くても速いフリックは意思表示なので、届かなくても採用する
- ラベルの不透明度を移動量に比例させる。「あと少しで決まる」が指先に伝わり、しきい値を体で覚えられる
- 傾きは移動量 ÷ 12 度程度。傾けすぎると軽薄に、傾けないと物を動かしている感触が消える
- 戻るときはスプリング風のオーバーシュート。「決めなかった」ことを、弾む動きで明確に伝える
コード（コピーして使えます）
<div class="gs-wrap">
<div class="gs-stack" id="gsStack"></div>
<div class="gs-bar">
<button class="gs-btn gs-btn--no" id="gsNo" type="button">捨てる</button>
<span class="gs-count" id="gsCount" aria-live="polite">残す 0・捨てる 0</span>
<button class="gs-btn gs-btn--yes" id="gsYes" type="button">残す</button>
</div>
</div>