Typing Indicator (タイピングインジケーター)
別名 Typing dots, Chat is typing
吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。
使いどころ
チャット、AI アシスタント
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。似ているモーション
Bouncing Dots (バウンシングドット)
別名 Dots loader, Ellipsis loader, Three-dot loader
並んだドットが順番に弾んだり、フェードしたり、拡大縮小したりします。
使いどころ
インラインの読み込み、チャットの待ち時間
[適用する場所]にバウンシングドット(Bouncing Dots)を追加してください。ドットローダー(dots loader)、スリードットローダー(three-dot loader)とも呼ばれます。
ドットが軽く弾むリズムで一つずつ跳ねて着地し、少し間を置いてから繰り返すようにしてください。
ループはつなぎ目なく続け、スクリーンリーダー向けにステータスのラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。ABC DEFG
Typewriter (タイプライター)
別名 Typing Animation, Typewriter Effect, Typing Text
文字がタイプされるように一つずつ現れ、たいていその後に点滅するキャレットが続きます。
使いどころ
ヒーローの見出し、キャッチコピー
[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。ABCDEF
Wavy Text (ウェービーテキスト)
別名 Text Wave
文字が順番に上下に揺れ、単語の中を波が流れていくように見えます。
使いどころ
遊び心のある見出し、ローディング表示
[適用する場所]にウェービーテキスト(Wavy Text)エフェクトを追加してください。テキストウェーブ(text wave)とも呼ばれます。
文字を順番に上下させ、やさしくなめらかな波が単語の中を流れ続けるようにしてください。
途切れなくループさせ、スクリーンリーダーには一つの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。Loading & Progressのほかのモーション
Bar Loader (Equalizer) (バーローダー)
別名 Bars loader, Audio bars
縦のバーがタイミングをずらして伸び縮みし、オーディオのイコライザーのように見えます。
使いどころ
読み込み中や再生中の表示
[適用する場所]にバーローダー(Bar Loader (Equalizer))の読み込みアニメーションを追加してください。bars loader、オーディオバー(audio bars)とも呼ばれます。
数本の縦バーが、オーディオのイコライザーのように互いにタイミングをずらして伸び縮みするようにしてください。軽快で、でも一定のテンポで。
ループはつなぎ目なく続け、スクリーンリーダー向けに状態を示すラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Blur-Up Placeholder (ブラーアッププレースホルダー)
別名 LQIP, Blur placeholder, Progressive image load
画像の小さなぼかし版が先に場所を埋め、本来の画像が読み込まれるとくっきりします。
使いどころ
ヒーロー画像、ギャラリー
[適用する場所]にブラーアッププレースホルダー(Blur-Up Placeholder)の画像読み込み効果を追加してください。LQIP、ブラープレースホルダー(blur placeholder)とも呼ばれます。
画像の小さく強くぼかした版をすぐに画像の場所に表示し、本来の画像が読み込まれたら、なめらかにやや素早くくっきりさせてください。
画像の正確なサイズをあらかじめ確保して表示時に何もずれないようにし、ぼかしの端が枠からはみ出さないように切り取ってください。