Drawer Slide (ドロワースライド)
別名 Off-canvas, Side sheet, Slide-over, Navigation drawer
サイドパネルが左・右・上の端からスライドして入り、コンテンツを押し出すか上に重なります。
使いどころ
モバイルのナビゲーション、設定パネル、カート
バリエーション
- overlay
- push content
- left / right / top edge
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にドロワースライド(Drawer Slide)を追加してください。オフキャンバス(off-canvas)、サイドシート(side sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが横の端からコンテンツの上にスライドして入り、すばやくなめらかに減速するようにしてください。閉じるときは同じ動きで出ていきます。
開いている間はキーボードフォーカスをドロワーの中に保ち、Escapeキーや暗くなった部分のクリックで閉じられるようにし、閉じたら開いたボタンにフォーカスを戻してください。似ているモーション
A
Bottom Sheet Slide-Up (ボトムシートスライドアップ)
別名 Bottom drawer, Sheet
パネルが下端からスライドして現れます。ドラッグでき、決まった高さに吸着することもよくあります。
使いどころ
モバイルのアクション、共有メニュー、フィルター
[適用する場所]にボトムシートスライドアップ(Bottom Sheet Slide-Up)を追加してください。ボトムドロワー(bottom drawer)、シート(sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが下端からスライドして上がり、なめらかに減速して弾まずに所定の位置に収まるようにしてください。
シートを開くたびに一度だけ再生し、閉じるときは下へスライドして戻し、開いている間はキーボードフォーカスをシートの中に保ってください。A
Slide In (スライドイン)
別名 Slide In Up, Slide In Down, Slide In Left, Slide In Right
要素がコンテナの端の外側から定位置まで、フェードせずにすべり込みます。
使いどころ
ドロワー、サイドパネル、バナー
[適用する場所]にスライドイン(Slide In)の登場アニメーションを追加してください。slide in left、slide in right、slide in up、slide in down とも呼ばれます。
要素がコンテナの端の外側から定位置まですべり込み、その間ずっと完全に不透明のままにしてください。素早く、弾まずになめらかに減速させてください。
外にある間は隣の要素に重なったりスクロールバーが出たりしないようコンテナの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からその位置に表示してください。A
B
クリックしてください
Slide Page Transition (スライドページトランジション)
別名 Push / pop, Directional slide, Slide-over route
新しいページが片側からスライドインし、古いページがスライドアウトします。方向はナビゲーションの深さに従います。
使いどころ
モバイルアプリ風の進む/戻るナビゲーション
[適用する場所]にスライドページトランジション(Slide Page Transition)を追加してください。プッシュ/ポップ(push / pop)、方向付きスライド(directional slide)とも呼ばれます。
進むときは新しいページが横から押し出すように入り、古いページは反対側へ抜けるようにしてください。戻るときは両方とも逆方向に動かします。なめらかに、始まりと終わりはゆるやかに。
方向はブラウザーの戻るボタンも含めてナビゲーションの深さに合わせ、スライド中にページが横スクロールしないようにしてください。A
Backdrop Scrim Fade (バックドロップスクリムフェード)
別名 Overlay fade, Scrim
オーバーレイの背後に半透明の暗いレイヤーがフェードインし、ページを暗くします。
使いどころ
モーダル、ドロワー、シートの背後
[適用する場所]にバックドロップスクリムフェード(Backdrop Scrim Fade)を追加してください。オーバーレイフェード(overlay fade)、スクリム(scrim)とも呼ばれます。
オーバーレイが開くと、背後のページの上に半透明の暗いレイヤーがやわらかくフェードインし、オーバーレイ本体より少しゆっくり現れて、閉じるとまたフェードアウトするようにしてください。
ライトテーマでもダークテーマでもスクリムは暗いままにし、表示中は背後のページがスクロールしたりクリックを受けたりしないようにしてください。Component & Layoutのほかのモーション
- A
- B
- C
- D
- E
- F
クリックしてください
FLIP Layout Animation (FLIPレイアウトアニメーション)
別名 Layout animation, First-Last-Invert-Play
レイアウトが変わったあと、要素が新しい位置と大きさへなめらかに移動します。
使いどころ
絞り込みで変わるグリッド、並びが変わるリスト
[適用する場所]にFLIPレイアウトアニメーション(FLIP Layout Animation)を追加してください。レイアウトアニメーション(layout animation)、First-Last-Invert-Playとも呼ばれます。
レイアウトが変わったら、各要素がぱっと飛ぶのではなく元の位置から新しい位置へすべるように移動し、最初は速く、最後はやさしく収まるようにしてください。
毎フレームでレイアウトの再計算が起きないよう transform だけでアニメーションし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに新しいレイアウトに切り替えてください。- A
- B
- C
- D
クリックしてください
List Item Enter/Exit (リストアイテムエンター/イグジット)
別名 AnimatePresence, TransitionGroup, Animated list
項目は追加されるとフェードしながらスライドして入り、削除されるとアニメーションで消え、隣の項目がすき間を詰めます。
使いどころ
ToDoリスト、通知、カートの商品
[適用する場所]にリストアイテムエンター/イグジット(List Item Enter/Exit)のアニメーションを追加してください。アニメーテッドリスト(animated list)とも呼ばれます。
新しい項目はまず自分の場所を空けてから、フェードしながらスライドして入るようにしてください。削除する項目はまずフェードアウトしてから縮み、隣の項目がなめらかにすき間を詰めます。
削除する項目は退場が終わるまでその場に残し、項目の追加や削除でリストががたつかないようにしてください。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (マーキー)
別名 Ticker, Infinite Scroll Text
1行のコンテンツが途切れることなく横方向に無限ループで流れ続けます。
使いどころ
ロゴウォール、お知らせの帯、キーワードバナー、ニュースティッカー
[適用する場所]にマーキー(Marquee)を追加してください。横方向に無限に流れる帯で、ティッカー(ticker)とも呼ばれます。
コンテンツが右から左へゆっくり一定の速度で流れ、つなぎ目が見えないように途切れなくループさせてください。
マウスを乗せたら止まり、モーションを減らす設定(prefers-reduced-motion)の場合は動かないようにしてください。