Circular Reveal (サーキュラーリビール)
別名 Clip-path circle expand, Theme toggle reveal
クリックした位置から広がる円の中に、新しい画面が現れます。
使いどころ
ダーク/ライトテーマの切り替え、ページの切り替え
バリエーション
- expand from click
- expand from center
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にサーキュラーリビール(Circular Reveal)のトランジションを追加してください。クリップパスの円拡大(clip-path circle expand)、テーマ切り替えリビール(theme toggle reveal)とも呼ばれます。
押したコントロールから円が外へ広がり、その中に新しい画面が現れて全体を覆うようにしてください。なめらかで一定、始まりと終わりはゆるやかに。
円は押した位置ちょうどから始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は円を使わずに即座に切り替えてください。似ているモーション
A
マウスを乗せてください
Radial Fill (ラジアルフィル)
別名 Circle expand
ホバーすると色付きの円が中心から広がって、または中心へ縮んで要素を塗りつぶします。
使いどころ
ボタン
[適用する場所]にラジアルフィル(Radial Fill)のホバーエフェクトを追加してください。サークルエクスパンド(circle expand)とも呼ばれます。
新しい色の円が中心から滑らかに広がって要素を塗りつぶし、ポインターが離れると中心へ縮んで戻るようにし、その間ラベルの色も読みやすいように切り替えてください。
円は要素の形の内側に収まるよう切り抜き、ラベルは円の上に置いて、キーボードフォーカス時にも同じ効果を出してください。クリックしてください
Ripple (リップル)
別名 Material ripple, Touch ripple, Ripple Button, Ink ripple
クリックやタップした位置から円形の波が広がり、フェードアウトします。
使いどころ
ボタン、リスト項目
[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。A
Clip Reveal (クリップリビール)
別名 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。
使いどころ
画像や見出しの表示
[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。Page Transitionのほかのモーション
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)にしている場合は単純なフェードにしてください。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つが重なる瞬間は作らず、拡大中に入ってくるコンテンツのレイアウトがずれないようにしてください。