Shared Layout Animation (シェアードレイアウトアニメーション)
別名 layoutId, Shared element (in-page)
要素が、別の位置にある対応する要素へ移動しながらサイズを変え、同じ1つの要素のように見えます。
使いどころ
選択中のハイライト、サムネイルから拡大表示
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にシェアードレイアウトアニメーション(Shared Layout Animation)を追加してください。ページ内の共有要素(in-page shared element)とも呼ばれます。
選択が変わったら、要素が元の位置から新しい位置へなめらかに移動しながらサイズを変え、やわらかく収まるようにして、2つではなく1つの物に見えるようにしてください。
同時に表示するのは常に1つだけにし、移動中に周りのレイアウトがずれないようにしてください。似ているモーション
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
- 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)にしている場合はすぐに新しいレイアウトに切り替えてください。ABC
クリックしてください
Tab Indicator Slide (タブインジケータースライド)
別名 Sliding underline, Active tab indicator, Segmented control pill
下線やピル型の背景が、前のタブから新しく選んだタブへすべるように移動します。
使いどころ
タブバー、セグメントコントロール
[適用する場所]にタブインジケータースライド(Tab Indicator Slide)を追加してください。スライディングアンダーライン(sliding underline)、アクティブタブインジケーター(active tab indicator)とも呼ばれます。
新しいタブを選んだら、下線が前のタブから新しいタブへ素早く、なめらかに減速しながらすべり、幅が違う場合は新しいタブの幅に合わせて伸び縮みするようにしてください。
矢印キーで操作できる正しいタブのセマンティクスを保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすべらせずにインジケーターを移してください。BC
A
A
クリックしてください
Container Transform (コンテナトランスフォーム)
別名 Card expand to detail, Expandable card, Morph card to page
カードが詳細画面いっぱいまで広がり、一つの見えるコンテナが形を変えながら新しい内容を見せます。
使いどころ
リストのカードから詳細へ、FABからシートへ
[適用する場所]にコンテナトランスフォーム(Container Transform)のトランジションを追加してください。カードから詳細への展開(card expand to detail)、エクスパンダブルカード(expandable card)とも呼ばれます。
カードを開くと同じコンテナが詳細画面いっぱいまでなめらかに広がり、元の内容はすばやくフェードアウトし、広がりきる直前に新しい内容がフェードインするようにしてください。閉じるときは逆再生です。
別々の二つの箱をクロスフェードするのではなく一つの連続したコンテナとして見せ、開いたら詳細画面にフォーカスを移してください。Component & Layoutのほかのモーション
A
Toast Slide-In (トーストスライドイン)
別名 Snackbar, Toast notification, Toast stack
短いメッセージが画面の端からスライドまたはフェードで現れ、しばらく表示されてから消えます。重なったトーストは場所を空けるようにずれます。
使いどころ
保存完了の通知、エラー、元に戻すの案内
[適用する場所]にトーストスライドイン(Toast Slide-In)を追加してください。スナックバー(snackbar)、トースト通知(toast notification)とも呼ばれます。
各メッセージは画面の端からスライドアップしながらフェードインし、なめらかに減速させてください。新しいトーストが来たら、表示中のものがなめらかにずれて場所を空けるようにしてください。
フォーカスを奪わずにスクリーンリーダーへメッセージを伝え、読めるだけの時間表示し、ホバーやフォーカス中は自動で閉じるのを一時停止してください。A
マウスを乗せてください
Tooltip Fade (ツールチップフェード)
別名 Tooltip reveal
少しホバーしたあと、小さなラベルが要素の横に少しずれながらフェードインします。
使いどころ
アイコンの説明、省略されたテキスト
[適用する場所]にツールチップフェード(Tooltip Fade)を追加してください。ツールチップリビール(tooltip reveal)とも呼ばれます。
少しホバーしたあと、ラベルが要素の横に少しずれながらフェードインし、ポインターが離れたら待たずにすぐ消えるようにしてください。
キーボードフォーカスでも表示し、Escape キーで閉じられるようにして、スクリーンリーダーが読み上げられるよう要素と関連付けてください。