Container Transform (コンテナトランスフォーム)
別名 Card expand to detail, Expandable card, Morph card to page
カードが詳細画面いっぱいまで広がり、一つの見えるコンテナが形を変えながら新しい内容を見せます。
使いどころ
リストのカードから詳細へ、FABからシートへ
バリエーション
- card to full screen
- FAB to sheet
- list item to detail
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にコンテナトランスフォーム(Container Transform)のトランジションを追加してください。カードから詳細への展開(card expand to detail)、エクスパンダブルカード(expandable card)とも呼ばれます。
カードを開くと同じコンテナが詳細画面いっぱいまでなめらかに広がり、元の内容はすばやくフェードアウトし、広がりきる直前に新しい内容がフェードインするようにしてください。閉じるときは逆再生です。
別々の二つの箱をクロスフェードするのではなく一つの連続したコンテナとして見せ、開いたら詳細画面にフォーカスを移してください。似ているモーション
BC
A
クリックしてください
Shared Element Transition (共有要素トランジション)
別名 Hero transition, View Transition shared element, view-transition-name morph
サムネイルなど対応する要素が、ページをまたいで位置とサイズを変えながら変形します。
使いどころ
サムネイルから詳細ページへ
[適用する場所]に共有要素トランジション(Shared Element Transition)を追加してください。ヒーロートランジション(hero transition)、view-transition-name morph とも呼ばれます。
次のページへ移るとき、サムネイルなど対応する要素がなめらかに移動・拡大して新しいページ上の位置に収まり、ほかのコンテンツはクロスフェードするようにしてください。戻るときは縮んで元に戻します。
両ページの対応する要素に共通のアイデンティティを与えて正しく対になるようにし、ブラウザーが変形できない場合は単純なクロスフェードにしてください。A
B
C
クリックしてください
Lightbox Zoom (ライトボックスズーム)
別名 Image zoom overlay, Medium-style zoom
サムネイルがその場所から拡大し、暗くした背景の上に大きく中央表示されます。
使いどころ
画像ギャラリー、記事
[適用する場所]にライトボックスズーム(Lightbox Zoom)を追加してください。イメージズームオーバーレイ(image zoom overlay)、Medium風ズーム(Medium-style zoom)とも呼ばれます。
サムネイルをクリックすると、その場所からなめらかに拡大して中央の大きな表示になり、背後のページは暗く引っ込むようにしてください。閉じると同じ場所へ縮んで戻ります。
Escキーまたは背景のクリックで閉じられるようにし、開いている間はフォーカスを拡大表示の中に移し、閉じたらサムネイルへ戻してください。ACB
クリックしてください
Shared Layout Animation (シェアードレイアウトアニメーション)
別名 layoutId, Shared element (in-page)
要素が、別の位置にある対応する要素へ移動しながらサイズを変え、同じ1つの要素のように見えます。
使いどころ
選択中のハイライト、サムネイルから拡大表示
[適用する場所]にシェアードレイアウトアニメーション(Shared Layout Animation)を追加してください。ページ内の共有要素(in-page shared element)とも呼ばれます。
選択が変わったら、要素が元の位置から新しい位置へなめらかに移動しながらサイズを変え、やわらかく収まるようにして、2つではなく1つの物に見えるようにしてください。
同時に表示するのは常に1つだけにし、移動中に周りのレイアウトがずれないようにしてください。A
Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。Component & Layoutのほかのモーション
- 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キーや暗くなった部分のクリックで閉じられるようにし、閉じたら開いたボタンにフォーカスを戻してください。- 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)にしている場合はすぐに新しいレイアウトに切り替えてください。