Zoom Page Transition (ズームページトランジション)
別名 Scale transition, Zoom in / out
古いページが拡大または縮小しながらフェードし、新しいページが拡大縮小して所定の位置に収まります。
使いどころ
階層を掘り下げる/さかのぼる移動
バリエーション
- zoom in
- zoom out
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にズームページトランジション(Zoom Page Transition)を追加してください。スケールトランジション(scale transition)、ズームイン/アウト(zoom in / out)とも呼ばれます。
掘り下げるときは古いページが少し拡大しながらフェードアウトし、新しいページが少し小さい状態から拡大して収まるようにしてください。戻るときは逆向きにズームアウトさせます。なめらかで素早く。
拡大縮小は控えめにして常に内容が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。似ているモーション
A
B
クリックしてください
Shared Axis (共有軸トランジション)
別名 Shared axis X/Y/Z
出ていくコンテンツと入ってくるコンテンツが、フェードしながら X・Y・Z いずれかの軸に沿って一緒に動き、空間的な関係を示します。
使いどころ
ステッパー、同階層の移動、ドリルダウン
[適用する場所]にシェアードアクシス(Shared Axis)のページトランジションを追加してください。共有軸トランジション、shared axis X/Y/Z とも呼ばれます。
進むときは、古いコンテンツが片側へ少しだけスライドして素早くフェードアウトし、新しいコンテンツが反対側からスライドしてすぐあとにフェードインするようにしてください。戻るときは方向を逆にします。
移動距離は方向がわかる程度に短くし、軸はナビゲーションに合わせてください。同階層は横、ステップは縦、掘り下げは奥行きです。A
B
クリックしてください
Fade Through (フェードスルー)
別名 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
出ていくコンテンツが完全にフェードアウトしてから、入ってくるコンテンツがわずかに拡大しながらフェードインします。
使いどころ
関連のない画面どうしの切り替え
[適用する場所]にフェードスルー(Fade Through)のページトランジションを追加してください。フェードスルートランジション(fade-through transition)、アウトインルートトランジション(out-in route transition)とも呼ばれます。
まず出ていくコンテンツを素早く完全にフェードアウトさせ、そのあと入ってくるコンテンツをわずかに拡大しながら所定の位置にフェードインさせてください。
2つが重なる瞬間は作らず、拡大中に入ってくるコンテンツのレイアウトがずれないようにしてください。A
Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。A
Zoom In (ズームイン)
別名 Scale In, Zoom In Up, Zoom In Down
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。
使いどころ
モーダル、画像ライトボックス、ポップオーバー
[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。Page Transitionのほかのモーション
A
B
クリックしてください
Circular Reveal (サーキュラーリビール)
別名 Clip-path circle expand, Theme toggle reveal
クリックした位置から広がる円の中に、新しい画面が現れます。
使いどころ
ダーク/ライトテーマの切り替え、ページの切り替え
[適用する場所]にサーキュラーリビール(Circular Reveal)のトランジションを追加してください。クリップパスの円拡大(clip-path circle expand)、テーマ切り替えリビール(theme toggle reveal)とも呼ばれます。
押したコントロールから円が外へ広がり、その中に新しい画面が現れて全体を覆うようにしてください。なめらかで一定、始まりと終わりはゆるやかに。
円は押した位置ちょうどから始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は円を使わずに即座に切り替えてください。A
B
クリックしてください
Crossfade Page Transition (クロスフェードページトランジション)
別名 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
古いページがフェードアウトし、同じ場所に新しいページがフェードインします。
使いどころ
標準的なページ遷移
[適用する場所]にクロスフェードページトランジション(Crossfade Page Transition)を追加してください。クロスディゾルブ(cross-dissolve)、フェードトランジション(fade transition)とも呼ばれます。
ページを移動するとき、古いページのフェードアウトと同時に、同じ場所へ新しいページをフェードインさせてください。やわらかく、やや速めに。
フェード中に何もずれないよう両方のページを同じ位置に置き、切り替え後は新しいページのメイン見出しにフォーカスを移してください。A
B
クリックしてください
Curtain / Panel Wipe (カーテン/パネルワイプ)
別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels
塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。
使いどころ
ポートフォリオサイトや制作会社サイトのページ移動
[適用する場所]にカーテン/パネルワイプ(Curtain / Panel Wipe)のページトランジションを追加してください。ページワイプ(page wipe)、スタッガードパネル(staggered panels)とも呼ばれます。
塗りつぶしのパネルが1枚ずつ順に画面を横切って古いページを覆い、完全に覆われている間にページを切り替え、パネルはそのまま画面外へ抜けて新しいページを見せるようにしてください。大胆でなめらかに。
パネルが古いページを覆う前に新しいページを見せないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。