Tracking In (トラッキングイン)
別名 Text Tracking In, Letter-spacing In
文字が大きく間隔を空けた薄い状態から始まり、現れながら通常の字間に詰まっていきます。
使いどころ
見出しテキストの登場
バリエーション
- expand
- contract
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にトラッキングイン(Tracking In)のテキストアニメーションを追加してください。text tracking in、letter-spacing in とも呼ばれます。
文字が大きく間隔を空けた薄い状態から始まり、完全に見えるようになりながら通常の字間まで詰まっていくようにしてください。なめらかに、最後は減速させてください。
字間が変わる間もテキストを中央揃えの1行に保って周りのレイアウトがずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は通常の字間で表示してください。似ているモーション
ABCD
Blur In (ブラーイン)
別名 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。
使いどころ
見出しやヒーローテキストの表示
[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。ABCDEF
マウスを乗せてください
Letter Scatter (レタースキャッター)
別名 Explosive Letter Burst, Scatter Gather Letters
ホバーで文字が飛び散って戻ったり、登場時に外側へはじけたりします。
使いどころ
遊び心のあるリンク
[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。ABCDEF
マウスを乗せてください
Variable Font Weight Animation (バリアブルフォントウェイトアニメーション)
別名 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
可変フォントの軸を使って、文字がなめらかに太く・細くなります(幅や傾きが変わることもあります)。
使いどころ
インタラクティブな見出し
[適用する場所]にバリアブルフォントウェイトアニメーション(Variable Font Weight Animation)のホバーエフェクトを追加してください。フォントウェイトシフト(font weight shift)とも呼ばれます。
ポインターがテキストに乗っている間、文字が左から右へなめらかな波のように順番に太くなり、ポインターが離れると細く戻るようにしてください。
太さが飛ばずになめらかに変わるよう可変フォントを使い、見出しが広がっても周りのコンテンツを押しのけないようにし、キーボードフォーカス時にも同じ効果を表示してください。Entrance & Exitのほかのモーション
A
Zoom In (ズームイン)
別名 Scale In, Zoom In Up, Zoom In Down
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。
使いどころ
モーダル、画像ライトボックス、ポップオーバー
[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
Zoom Out (ズームアウト)
別名 Scale Out
要素が縮みながらフェードアウトし、消えていきます。
使いどころ
モーダルを閉じる、項目を消す
[適用する場所]にズームアウト(Zoom Out)の退場アニメーションを追加してください。スケールアウト(scale out)とも呼ばれます。
要素が中心に向かって縮みながらフェードアウトし、消えるようにしてください。素早く、進むにつれて加速させてください。
完全に消えてからレイアウトとキーボードフォーカスから外し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。A
Back In (バックイン)
別名 Back In Up, Back In Down
要素が縮小され位置がずれた状態から、スライドして入り込み、元の大きさまで拡大します。
使いどころ
ヒーロー要素、カード
[適用する場所]にバックイン(Back In)の登場アニメーションを追加してください。バックインアップ(back in up)、バックインダウン(back in down)とも呼ばれます。
要素が縮小され少し薄くなった状態で画面の端の外から入ってきて、所定の位置に着いてから元の大きさに戻るようにしてください。素早く飛び出すのではなく、意図的な2段階の動きです。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。