慣性スナップのスワイプページャー
4枚のカードを横スワイプでめくる。指の速さで次へ飛ぶか戻るかを決め、必ず1枚の位置にスナップする。ドットが連動し、PC ではドラッグと矢印ボタンで操作できる。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 数枚のおすすめ・お知らせカードを横にめくる
- 指の速さで送りたいモバイルのカード面
- PC でもドラッグと矢印で同じ操作にしたい場面
- 避ける場面
- 10 枚以上のカード（ドットが読めない）
- 自動再生の広告カルーセル
- 各カードに縦スクロールが要る内容
- 構成要素
- ビューポート
- カードのトラック
- 前後の矢印ボタン
- 位置ドット
- 持っている状態
- 通常
- フォーカス
- 押下中
- 無効
- キーボード
Tab で前後の矢印ボタンへ、Enter／Space で 1 枚めくる。端では該当ボタンが disabled。カード本体はキーボード操作の対象外
- 支援技術
矢印は aria-label「前のカード／次のカード」、端で disabled。ドットは aria-hidden の装飾で、現在位置は sr-only の role=status「2 / 4 枚目」で読む。reduced-motion で停止
- 動き
スナップ 380ms ease-out・ドット 240ms。距離 1/3 か速度 0.5px/ms で 1 枚だけ進み、端は 0.35 倍の抵抗で「もう無い」を伝える
デザインの要点
- スナップ判定は距離だけでなく速度も見る。短くても速いフリックで次へ進めると、指の意図どおりに動く
- 1枚ずつしか進ませない。速いフリックで2枚飛ぶと、どこまで進んだか分からなくなる
- ドットは現在地の表示であり操作の主役ではない。小さく置き、タップ標的は矢印ボタンで確保する
- 横ドラッグ中は縦スクロールを止めたいので track に touch-action: pan-y を指定し、横は自前で処理する
コード（コピーして使えます）
<div class="spd-wrap">
<div class="spd-viewport" id="spd-viewport">
<div class="spd-track" id="spd-track">
<article class="spd-card spd-c1"><p class="spd-kicker">今週のおすすめ</p><h3 class="spd-title">朝 5 分の片付け習慣</h3><p class="spd-text">机の上を撮って記録するだけ。3 週間続いた人は 82%。</p></article>
<article class="spd-card spd-c2"><p class="spd-kicker">新機能</p><h3 class="spd-title">家族と共有できるリスト</h3><p class="spd-text">買い物リストを一緒に編集。追加はその場で相手にも届きます。</p></article>
<article class="spd-card spd-c3"><p class="spd-kicker">ヒント</p><h3 class="spd-title">通知は 1 日 1 回にまとめる</h3><p class="spd-text">設定 › 通知 から「まとめて受け取る」を選べます。</p></article>
<article class="spd-card spd-c4"><p class="spd-kicker">読みもの</p><h3 class="spd-title">続けられる人の共通点</h3><p class="spd-text">目標を小さく、記録を目に見える場所に。1,284 人の記録から。</p></article>
</div>
</div>
<div class="spd-controls">
<button class="spd-arrow" type="button" id="spd-prev" aria-label="前のカード">‹</button>
<div class="spd-dots" id="spd-dots" aria-hidden="true"></div>
<span class="spd-sr" id="spd-pos" role="status" aria-live="polite">1 / 4 枚目</span>
<button class="spd-arrow" type="button" id="spd-next" aria-label="次のカード">›</button>
</div>
</div>