Preloader Curtain Lift (プリローダーカーテンリフト)
別名 Splash screen, Intro loader
ロゴやカウンターを載せた全画面のイントロレイヤーが、スライドまたはフェードで消えてサイトが現れます。
使いどころ
サイトの初回読み込み
バリエーション
- slide-up
- fade
- counter then reveal
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にプリローダーカーテンリフト(Preloader Curtain Lift)を追加してください。スプラッシュスクリーン(splash screen)、イントロローダー(intro loader)とも呼ばれます。
全画面のイントロレイヤーをローディングバーが満ちるまで表示し、そのあと上へなめらかにスライドして消え、下からサイトがやわらかく落ち着いて現れるようにしてください。
再生は初回読み込み時だけにし、実際の読み込み時間より長くページを止めず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は省略してください。似ているモーション
A
B
クリックしてください
Curtain / Panel Wipe (カーテン/パネルワイプ)
別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels
塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。
使いどころ
ポートフォリオサイトや制作会社サイトのページ移動
[適用する場所]にカーテン/パネルワイプ(Curtain / Panel Wipe)のページトランジションを追加してください。ページワイプ(page wipe)、スタッガードパネル(staggered panels)とも呼ばれます。
塗りつぶしのパネルが1枚ずつ順に画面を横切って古いページを覆い、完全に覆われている間にページを切り替え、パネルはそのまま画面外へ抜けて新しいページを見せるようにしてください。大胆でなめらかに。
パネルが古いページを覆う前に新しいページを見せないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。- %
Number Ticker (カウントアップ)
別名 Count Up, Animated Counter, Number Counter, countUp
数字が見えた時点で、開始値から目標値までカウントします。
使いどころ
統計、KPIブロック
[適用する場所]にカウントアップ(Number Ticker)を追加してください。カウントアップ(count up)、アニメーテッドカウンター(animated counter)とも呼ばれます。
数字が画面に入ったら、ゼロから目標値までカウントし、最初は速く、着地にかけて穏やかに減速するようにしてください。
周りががたつかないよう等幅の数字を使い、カウントは一度だけにし、スクリーンリーダーとモーションを減らす設定(prefers-reduced-motion)のユーザーには最終値をすぐに示してください。A
Slide Out (スライドアウト)
別名 Slide Out Up, Slide Out Down
要素がコンテナの端の外へすべり出て消えます。
使いどころ
ドロワーやパネルを閉じるとき
[適用する場所]にスライドアウト(Slide Out)の退場アニメーションを追加してください。slide out up、slide out down とも呼ばれます。
要素が完全に不透明なままコンテナの端の外へすべり出て消えるようにしてください。素早く、去るにつれて加速させてください。
コンテナの端で切り取り、見えなくなったらキーボードやスクリーンリーダーからも隠し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。Page Transitionのほかのモーション
A
B
クリックしてください
Shared Axis (共有軸トランジション)
別名 Shared axis X/Y/Z
出ていくコンテンツと入ってくるコンテンツが、フェードしながら X・Y・Z いずれかの軸に沿って一緒に動き、空間的な関係を示します。
使いどころ
ステッパー、同階層の移動、ドリルダウン
[適用する場所]にシェアードアクシス(Shared Axis)のページトランジションを追加してください。共有軸トランジション、shared axis X/Y/Z とも呼ばれます。
進むときは、古いコンテンツが片側へ少しだけスライドして素早くフェードアウトし、新しいコンテンツが反対側からスライドしてすぐあとにフェードインするようにしてください。戻るときは方向を逆にします。
移動距離は方向がわかる程度に短くし、軸はナビゲーションに合わせてください。同階層は横、ステップは縦、掘り下げは奥行きです。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
クリックしてください
Slide Page Transition (スライドページトランジション)
別名 Push / pop, Directional slide, Slide-over route
新しいページが片側からスライドインし、古いページがスライドアウトします。方向はナビゲーションの深さに従います。
使いどころ
モバイルアプリ風の進む/戻るナビゲーション
[適用する場所]にスライドページトランジション(Slide Page Transition)を追加してください。プッシュ/ポップ(push / pop)、方向付きスライド(directional slide)とも呼ばれます。
進むときは新しいページが横から押し出すように入り、古いページは反対側へ抜けるようにしてください。戻るときは両方とも逆方向に動かします。なめらかに、始まりと終わりはゆるやかに。
方向はブラウザーの戻るボタンも含めてナビゲーションの深さに合わせ、スライド中にページが横スクロールしないようにしてください。