プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。似ているモーション
Spin (スピン)
別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。A
Orbiting Circles (オービティングサークル)
別名 Orbit Animation, Orbit, Orbiting icons
小さな円やアイコンが円軌道を描いて中心の周りを回ります。
使いどころ
連携サービスの図
[適用する場所]にオービティングサークル(Orbiting Circles)を追加してください。オービットアニメーション(orbit animation)、オービティングアイコン(orbiting icons)とも呼ばれます。
小さな円が中央の要素の周りを円形のリング上でゆっくり一定の速さで回り、外側のリングは逆向きにもっとゆっくり回るようにしてください。
ループは継ぎ目なく、回る項目は常に正立させ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。中をスクロールしてください
Text Path Scroll (テキストパススクロール)
別名 Text Path Curve Scroll Animation
テキストが曲線のパスに沿って配置され、スクロールに合わせてその上を進みます。
使いどころ
ストーリーテリングのセクション
[適用する場所]にテキストパススクロール(Text Path Scroll)エフェクトを追加してください。テキストパスカーブスクロールアニメーション(text path curve scroll animation)とも呼ばれます。
テキストが曲線の上に乗り、スクロールに合わせてその上をすべるように動かしてください。下へスクロールすると進み、上へスクロールすると戻ります。
動きは遅れなくスクロール位置に直接連動させ、スクリーンリーダーには通常のテキストとして読めるようにしてください。Textのほかのモーション
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)にしている場合は動きなしで表示してください。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (スプリットフラップテキスト)
別名 Text Flipping Board, Flip Board, Vestaboard display
空港の発車案内板のように文字がパタパタとめくれ、目的の文字で止まります。
使いどころ
ステータスボード、レトロな表示
[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はめくらずに最終テキストを表示してください。ABCDEF
Squiggly Text (スクイグリーテキスト)
別名 Wobbly Text, Turbulence Text
SVGのディスプレイスメントフィルターで、文字の輪郭が手描きのように揺らぎます。
使いどころ
ラフスケッチ風や遊び心のある見出し
[適用する場所]にスクイグリーテキスト(Squiggly Text)のエフェクトを追加してください。ウォブリーテキスト(wobbly text)、タービュランステキスト(turbulence text)とも呼ばれます。
文字の輪郭が、1秒間に何度も手で描き直しているようにわずかに揺らぐようにしてください。なめらかな波ではなく、控えめで小刻みに震える感じです。
文字は読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。