Accordion Expand-Collapse (アコーディオン開閉)
別名 Collapse, Disclosure, Expandable section
ヘッダーを切り替えると、コンテンツのパネルがなめらかに全体の高さまで広がるか、ゼロまで縮みます。
使いどころ
FAQ、設定のグループ、サイドバーのツリー
バリエーション
- height animation
- single-open accordion
- multi-open accordion
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にアコーディオン開閉(Accordion Expand-Collapse)の効果を追加してください。コラプス(collapse)、ディスクロージャー(disclosure)とも呼ばれます。
ヘッダーを押すとパネルが中身の高さいっぱいまでなめらかに広がり、もう一度押すと完全に閉じるようにし、ヘッダーの矢印もそれに合わせて回転させてください。素早くなめらかに、弾みはなしです。
固定の推定値ではなく中身の実際の高さまでアニメーションさせ、ヘッダーは開閉状態を伝える本物のボタンにして、キーボードでも操作できるようにしてください。似ているモーション
- 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
Drawer Slide (ドロワースライド)
別名 Off-canvas, Side sheet, Slide-over, Navigation drawer
サイドパネルが左・右・上の端からスライドして入り、コンテンツを押し出すか上に重なります。
使いどころ
モバイルのナビゲーション、設定パネル、カート
[適用する場所]にドロワースライド(Drawer Slide)を追加してください。オフキャンバス(off-canvas)、サイドシート(side sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが横の端からコンテンツの上にスライドして入り、すばやくなめらかに減速するようにしてください。閉じるときは同じ動きで出ていきます。
開いている間はキーボードフォーカスをドロワーの中に保ち、Escapeキーや暗くなった部分のクリックで閉じられるようにし、閉じたら開いたボタンにフォーカスを戻してください。A
クリックしてください
Popover / Dropdown Open (ポップオーバー/ドロップダウンオープン)
別名 Menu pop, Popover pop-in, Dropdown scale-fade
フローティングメニューが、トリガーのある位置から拡大しながらフェードインします。
使いどころ
ドロップダウンメニュー、ポップオーバー、選択リスト
[適用する場所]にポップオーバー/ドロップダウンオープン(Popover / Dropdown Open)のアニメーションを追加してください。メニューポップ(menu pop)、ドロップダウンスケールフェード(dropdown scale-fade)とも呼ばれます。
メニューはトリガー横の角から少し拡大しながらフェードインし、素早くキレよく開いて、閉じるときは少し速めにフェードアウトさせてください。
トリガーに固定したまま表示し、Escape キーや外側のクリックで閉じられるようにして、開いている状態をトリガー側でスクリーンリーダーに伝えてください。Component & Layoutのほかのモーション
A
Backdrop Scrim Fade (バックドロップスクリムフェード)
別名 Overlay fade, Scrim
オーバーレイの背後に半透明の暗いレイヤーがフェードインし、ページを暗くします。
使いどころ
モーダル、ドロワー、シートの背後
[適用する場所]にバックドロップスクリムフェード(Backdrop Scrim Fade)を追加してください。オーバーレイフェード(overlay fade)、スクリム(scrim)とも呼ばれます。
オーバーレイが開くと、背後のページの上に半透明の暗いレイヤーがやわらかくフェードインし、オーバーレイ本体より少しゆっくり現れて、閉じるとまたフェードアウトするようにしてください。
ライトテーマでもダークテーマでもスクリムは暗いままにし、表示中は背後のページがスクロールしたりクリックを受けたりしないようにしてください。A
Bottom Sheet Slide-Up (ボトムシートスライドアップ)
別名 Bottom drawer, Sheet
パネルが下端からスライドして現れます。ドラッグでき、決まった高さに吸着することもよくあります。
使いどころ
モバイルのアクション、共有メニュー、フィルター
[適用する場所]にボトムシートスライドアップ(Bottom Sheet Slide-Up)を追加してください。ボトムドロワー(bottom drawer)、シート(sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが下端からスライドして上がり、なめらかに減速して弾まずに所定の位置に収まるようにしてください。
シートを開くたびに一度だけ再生し、閉じるときは下へスライドして戻し、開いている間はキーボードフォーカスをシートの中に保ってください。A
B
C
Carousel Crossfade (カルーセルクロスフェード)
別名 Fade slideshow, Carousel fade
スライドは位置を変えず、横に動く代わりに互いに溶け合うように切り替わります。
使いどころ
ヒーローのスライドショー、お客様の声
[適用する場所]にカルーセルクロスフェード(Carousel Crossfade)を追加してください。フェードスライドショー(fade slideshow)、カルーセルフェード(carousel fade)とも呼ばれます。
スライドは位置を変えずにゆっくり溶け合うように切り替え、前のスライドがフェードアウトすると同時に次がフェードインし、数秒止まってから次の切り替えに移るようにしてください。
最後から最初のスライドへ途切れなくループさせ、マウスを乗せたときやフォーカス時は一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自動で進めないでください。