Carousel Slide (カルーセルスライド)
別名 Slider, Swipe carousel, Scroll-snap carousel
スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。
使いどころ
ヒーローバナー、商品ギャラリー
バリエーション
- snap scroll
- looping
- multi-browse / hero (M3)
- autoplay
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。似ているモーション
A
B
C
Carousel Crossfade (カルーセルクロスフェード)
別名 Fade slideshow, Carousel fade
スライドは位置を変えず、横に動く代わりに互いに溶け合うように切り替わります。
使いどころ
ヒーローのスライドショー、お客様の声
[適用する場所]にカルーセルクロスフェード(Carousel Crossfade)を追加してください。フェードスライドショー(fade slideshow)、カルーセルフェード(carousel fade)とも呼ばれます。
スライドは位置を変えずにゆっくり溶け合うように切り替え、前のスライドがフェードアウトすると同時に次がフェードインし、数秒止まってから次の切り替えに移るようにしてください。
最後から最初のスライドへ途切れなくループさせ、マウスを乗せたときやフォーカス時は一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自動で進めないでください。ABCDE
ドラッグしてください
Coverflow (カバーフロー)
別名 Cover flow carousel
中央のアイテムは正面を向き、両側のアイテムは奥へ角度をつけて並びます。
使いどころ
アルバム、メディアのカルーセル
[適用する場所]にカバーフロー(Coverflow)カルーセルを追加してください。カバーフローカルーセル(cover flow carousel)とも呼ばれます。
中央のアイテムは正面を向き、両側のアイテムは奥へ向きを変えて並ぶようにしてください。横にドラッグすると列が動き、離すといちばん近いアイテムになめらかに止まるようにしてください。
ドラッグに加えて矢印キーとスワイプにも対応し、タッチ端末でもページの縦スクロールができるようにしてください。A
B
C
D
中をスクロールしてください
Scroll Snap (スクロールスナップ)
別名 Scroll Snapping, Snap Scrolling
スクロールがスライドやセクションなど、決められたスナップ位置にぴたりと止まります。
使いどころ
カルーセル、全画面セクション、ギャラリー
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。A
B
クリックしてください
Slide Page Transition (スライドページトランジション)
別名 Push / pop, Directional slide, Slide-over route
新しいページが片側からスライドインし、古いページがスライドアウトします。方向はナビゲーションの深さに従います。
使いどころ
モバイルアプリ風の進む/戻るナビゲーション
[適用する場所]にスライドページトランジション(Slide Page Transition)を追加してください。プッシュ/ポップ(push / pop)、方向付きスライド(directional slide)とも呼ばれます。
進むときは新しいページが横から押し出すように入り、古いページは反対側へ抜けるようにしてください。戻るときは両方とも逆方向に動かします。なめらかに、始まりと終わりはゆるやかに。
方向はブラウザーの戻るボタンも含めてナビゲーションの深さに合わせ、スライド中にページが横スクロールしないようにしてください。Component & Layoutのほかのモーション
BC
A
A
クリックしてください
Container Transform (コンテナトランスフォーム)
別名 Card expand to detail, Expandable card, Morph card to page
カードが詳細画面いっぱいまで広がり、一つの見えるコンテナが形を変えながら新しい内容を見せます。
使いどころ
リストのカードから詳細へ、FABからシートへ
[適用する場所]にコンテナトランスフォーム(Container Transform)のトランジションを追加してください。カードから詳細への展開(card expand to detail)、エクスパンダブルカード(expandable card)とも呼ばれます。
カードを開くと同じコンテナが詳細画面いっぱいまでなめらかに広がり、元の内容はすばやくフェードアウトし、広がりきる直前に新しい内容がフェードインするようにしてください。閉じるときは逆再生です。
別々の二つの箱をクロスフェードするのではなく一つの連続したコンテナとして見せ、開いたら詳細画面にフォーカスを移してください。- A
- B
- C
- D
ドラッグしてください
Drag-to-Reorder List (ドラッグ並べ替えリスト)
別名 Reorder, Sortable list
項目をドラッグすると、ほかの項目がすっとよけて新しい順番に落ち着きます。
使いどころ
かんばん、並べ替えできる設定、プレイリスト
[適用する場所]にドラッグ並べ替えリスト(Drag-to-Reorder List)を追加してください。ソータブルリスト(sortable list)とも呼ばれます。
ドラッグ中の項目はポインターに直接付いて少し浮き上がり、ほかの項目はなめらかにスライドしてよけるようにしてください。離したら最寄りの位置にすばやく収まります。
マウスだけでなくタッチにも対応し、キーボードで項目を移動できる方法も用意して、新しい位置をスクリーンリーダーに読み上げさせてください。A
Drawer Slide (ドロワースライド)
別名 Off-canvas, Side sheet, Slide-over, Navigation drawer
サイドパネルが左・右・上の端からスライドして入り、コンテンツを押し出すか上に重なります。
使いどころ
モバイルのナビゲーション、設定パネル、カート
[適用する場所]にドロワースライド(Drawer Slide)を追加してください。オフキャンバス(off-canvas)、サイドシート(side sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが横の端からコンテンツの上にスライドして入り、すばやくなめらかに減速するようにしてください。閉じるときは同じ動きで出ていきます。
開いている間はキーボードフォーカスをドロワーの中に保ち、Escapeキーや暗くなった部分のクリックで閉じられるようにし、閉じたら開いたボタンにフォーカスを戻してください。