プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。似ているモーション
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (テキストジェネレート)
別名 Text Generate Effect
ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。
使いどころ
AI風のイントロ文
[適用する場所]にテキストジェネレート(Text Generate)エフェクトを追加してください。
単語が一つずつフェードインし、それぞれのやわらかなぼかしが晴れていくことで、テキストが生成されているように見せてください。一定のペースで落ち着いた動きにしてください。
読み込み時に一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
マウスを乗せてください
Text Scramble (テキストスクランブル)
別名 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
テキストがランダムな文字に置き換わって切り替わり続け、徐々に最終的な単語に落ち着きます。
使いどころ
テック系のヒーロータイトル、リンクのホバー
[適用する場所]にテキストスクランブル(Text Scramble)のホバーエフェクトを追加してください。テキストデコード(text decode)、暗号化テキスト(encrypted text)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。Typing Indicator (タイピングインジケーター)
別名 Typing dots, Chat is typing
吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。
使いどころ
チャット、AI アシスタント
[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。aBcD
ポインターを動かしてください
Adaptive Caret (アダプティブキャレット)
別名 Cursor: Adaptive caret size
テキストキャレットが、隣の文字の大きさに合わせて伸び縮みします。
使いどころ
エディター、タイピング演出
[適用する場所]にアダプティブキャレット(Adaptive Caret)の効果を追加してください。アダプティブキャレットサイズ(adaptive caret size)とも呼ばれます。
テキストキャレットがポインターに最も近い文字の前へ移動し、その文字の高さに合わせて素早く伸び縮みするようにしてください。なめらかでキビキビとしたサイズ変化で、弾みは不要です。
テキスト自体はずらさず、キャレットがポインターと同じようにキーボード操作にも追従するようにしてください。Textのほかのモーション
ABC DEF
マウスを乗せてください
Underline Draw (アンダーラインドロー)
別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
ホバーすると、リンクの下に片側または中央から下線が伸びます。
使いどころ
ナビゲーションリンク、インラインリンク
[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。ABCDEF
マウスを乗せてください
Variable Font Weight Animation (バリアブルフォントウェイトアニメーション)
別名 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
可変フォントの軸を使って、文字がなめらかに太く・細くなります(幅や傾きが変わることもあります)。
使いどころ
インタラクティブな見出し
[適用する場所]にバリアブルフォントウェイトアニメーション(Variable Font Weight Animation)のホバーエフェクトを追加してください。フォントウェイトシフト(font weight shift)とも呼ばれます。
ポインターがテキストに乗っている間、文字が左から右へなめらかな波のように順番に太くなり、ポインターが離れると細く戻るようにしてください。
太さが飛ばずになめらかに変わるよう可変フォントを使い、見出しが広がっても周りのコンテンツを押しのけないようにし、キーボードフォーカス時にも同じ効果を表示してください。Video Text (ビデオテキスト)
別名 Text Video Mask
大きな文字が窓のようになり、その内側で再生中の動画が見えます。
使いどころ
ヒーロータイトル
[適用する場所]にビデオテキスト(Video Text)エフェクトを追加してください。テキストビデオマスク(text video mask)とも呼ばれます。
大きく太い文字を再生中の動画をのぞく窓にして、動く映像が文字の形の内側にだけ見えるようにしてください。
動画はミュートでコントロールなしのループ再生にし、スクリーンリーダー向けに言葉を実際のテキストとして用意し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止画を表示してください。