プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にウェービーテキスト(Wavy Text)エフェクトを追加してください。テキストウェーブ(text wave)とも呼ばれます。
文字を順番に上下させ、やさしくなめらかな波が単語の中を流れ続けるようにしてください。
途切れなくループさせ、スクリーンリーダーには一つの単語として読ませ、ユーザーがモーションを減らす設定(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)にしている場合は動きなしで表示してください。Bouncing Dots (バウンシングドット)
別名 Dots loader, Ellipsis loader, Three-dot loader
並んだドットが順番に弾んだり、フェードしたり、拡大縮小したりします。
使いどころ
インラインの読み込み、チャットの待ち時間
[適用する場所]にバウンシングドット(Bouncing Dots)を追加してください。ドットローダー(dots loader)、スリードットローダー(three-dot loader)とも呼ばれます。
ドットが軽く弾むリズムで一つずつ跳ねて着地し、少し間を置いてから繰り返すようにしてください。
ループはつなぎ目なく続け、スクリーンリーダー向けにステータスのラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (キネティックタイポグラフィ)
別名 Kinetic Text
テキストが静的な文章ではなく、動くグラフィック要素として拡大縮小・移動・回転します。
使いどころ
ブランドのヒーローセクション
[適用する場所]にキネティックタイポグラフィ(Kinetic Typography)を追加してください。キネティックテキスト(kinetic text)とも呼ばれます。
大きな文字を繰り返した行が、1行ごとに逆方向へゆっくり一定のペースで横に流れ、言葉そのものが動くグラフィックになるようにしてください。
各行はつなぎ目なくループさせ、スクリーンリーダーには一度だけ読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Typing Indicator (タイピングインジケーター)
別名 Typing dots, Chat is typing
吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。
使いどころ
チャット、AI アシスタント
[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。Textのほかのモーション
ABDEFGHIJKLDEFMN
Word Rotate (ワードローテート)
別名 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
文中の一語が、スライド・フリップ・フェードでリストの次の単語に入れ替わります。
使いどころ
ヒーローのキャッチコピー
[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。ABCDEF
Animated Gradient Text (グラデーションテキストアニメーション)
別名 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
グラデーションで塗られたテキストの色が、絶えず移り変わったり流れたりします。
使いどころ
ブランドの見出し
[適用する場所]にグラデーションテキストアニメーション(Animated Gradient Text)の効果を追加してください。オーロラテキスト(aurora text)、レインボーテキストスイープ(rainbow text sweep)とも呼ばれます。
文字をグラデーションで塗り、その色がテキスト上をゆっくりなめらかに流れ、つなぎ目なく無限にループするようにしてください。
背景に対してどの瞬間も文字が読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は色を止めてください。ABCDEF
マウスを乗せてください
Glitch Text (グリッチテキスト)
別名 Text Glitch, RGB Split Glitch
テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。
使いどころ
サイバーパンク風・ゲーム系の見出し
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。