カルーセル — 動きの伝え方辞典

media

carousel slider

カルーセル

画像が横にスライドして切り替わるスライダー。スライドを1本のトラックに並べてtranslateXで動かすのが基本形。矢印・ドット・自動送りをどこまで付けるかで性格が決まり、自動送りは便利に見えて読ませたい内容には不向き。

01 — Demo video

Play live →

02 — Prompt template

画像カルーセルを実装してください。

- スライドを横一列に並べたトラックを transform: translateX(-index × 100%) で動かす(left/marginは使わない。リフロー禁止)
- 切り替えは {{duration}}s の ease-in-out。前後の矢印ボタンと、現在位置を示すドットの両方を付ける
- 自動送りの間隔は {{interval}}秒(0なら自動送りなし)。自動送りを入れる場合、矢印・ドットを操作したらタイマーをリセットし、ホバー中は停止する
- ドットは現在のスライドを色で明示し、クリックでそのスライドへ直接ジャンプできるようにする
- スワイプ(タッチ)でも前後に送れるようにする
- 各ボタンに aria-label を付ける(例: Next slide)
- prefers-reduced-motion 時は自動送りを止め、切り替えもアニメーションなしの即時にする

画像カルーセルを実装してください。

- スライドを横一列に並べたトラックを transform: translateX(-index × 100%) で動かす(left/marginは使わない。リフロー禁止)
- 切り替えは {{duration}}s の ease-in-out。前後の矢印ボタンと、現在位置を示すドットの両方を付ける
- 自動送りの間隔は {{interval}}秒(0なら自動送りなし)。自動送りを入れる場合、矢印・ドットを操作したらタイマーをリセットし、ホバー中は停止する
- ドットは現在のスライドを色で明示し、クリックでそのスライドへ直接ジャンプできるようにする
- スワイプ(タッチ)でも前後に送れるようにする
- 各ボタンに aria-label を付ける(例: Next slide)
- prefers-reduced-motion 時は自動送りを止め、切り替えもアニメーションなしの即時にする

画像カルーセルを実装してください。

- スライドを横一列に並べたトラックを transform: translateX(-index × 100%) で動かす(left/marginは使わない。リフロー禁止)
- 切り替えは {{duration}}s の ease-in-out。前後の矢印ボタンと、現在位置を示すドットの両方を付ける
- 自動送りの間隔は {{interval}}秒(0なら自動送りなし)。自動送りを入れる場合、矢印・ドットを操作したらタイマーをリセットし、ホバー中は停止する
- ドットは現在のスライドを色で明示し、クリックでそのスライドへ直接ジャンプできるようにする
- スワイプ(タッチ)でも前後に送れるようにする
- 各ボタンに aria-label を付ける(例: Next slide)
- prefers-reduced-motion 時は自動送りを止め、切り替えもアニメーションなしの即時にする

03 — Params

duration(スライド時間 s) — 範囲 0.2〜1.2 / 初期 0.5
1回の移動時間。0.4〜0.6sが目安。自動送りと併用するなら短めにしないと動きっぱなしに見える。
interval(自動送りの間隔 s) — 範囲 0〜8 / 初期 0
0で自動送りなし。使うなら5s以上。読ませたいテキストが載るスライドに短い間隔は禁物。

04 — Vocab

トラック — スライドを横一列に並べた入れ物。動かすのは各スライドではなくトラック1本だけで、移動量は -index × 100% で決まる。
自動送り(autoplay) — 一定間隔で勝手に次へ進む機能。ヒーローの装飾には使えるが、読ませたいテキストには不向き。入れるなら「操作でリセット・ホバーで停止」の設計が必須。
ドットインジケーター — 全体の枚数と現在位置を示す点。「あと何枚あるか」が見えないカルーセルは最後まで見てもらえない。クリックで直接ジャンプできるとなお良い。
スワイプ — タッチでの送り操作。touchstartとtouchendの座標差で方向を判定する。カルーセルはPCよりスマホで触られることが多く、省略すると体験が大きく欠ける。

05 — NG → OK examples

言い方: 「「画像をスライダーで見せて」」

なぜNG: ライブラリを丸ごと読み込む重い実装や、頼んでいないのに3秒間隔の自動送りが付いた「読めないカルーセル」が返ってきがち。自動送りの有無と止め方を指定しないと、ユーザーの操作とタイマーが喧嘩するUIになる。

言い方: 「「カルーセルを実装。トラックをtranslateXで0.5s ease-in-out、矢印+ドット付き。自動送りなし(入れるなら5s・操作でリセット・ホバーで停止)。transformのみ、reduced-motionは自動送り停止+即時切替」」

なぜOK: 移動方式・時間・UI部品・自動送りのポリシーまで一文で固定。「自動送りなし」と明言するだけで、読ませたいコンテンツが勝手に流れていく事故を防げる。