Confetti (紙吹雪)
別名 Confetti burst, Celebration
色とりどりの紙片がはじけ出て舞い落ち、成功を祝います。
使いどころ
購入完了、目標達成
バリエーション
- canvas-confetti
- Confetti on click button
- fireworks
- burst
- side cannons
- rain
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に紙吹雪(Confetti)のお祝い演出を追加してください。コンフェッティバースト(confetti burst)とも呼ばれます。
色とりどりの小さな紙片がボタンから素早くはじけ出て、くるくる回りながらふわりと舞い落ち、消えていくようにしてください。短く賑やかに。
ループさせず成功ごとに一度だけ発動し、ページのクリックを妨げないようにして、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。似ているモーション
クリックしてください
Like / Heart Burst (いいね/ハートバースト)
別名 Heart animation, Twitter heart, Favorite toggle
クリックするとハートアイコンが色で満たされ、小さな粒子がはじけたり脈打ったりします。
使いどころ
いいね・お気に入りボタン
[適用する場所]にいいね/ハートバースト(Like / Heart Burst)のアニメーションを追加してください。ハートアニメーション(heart animation)、お気に入りトグル(favorite toggle)とも呼ばれます。
いいねしたらハートが色で満たされて弾むようにポンと膨らみ、リングと小さな点が外へはじけて消えるようにしてください。全体に素早く遊び心のある動きで、いいねを外したときはハートが静かに空になるだけにしてください。
押下状態を持つ本物のトグルボタンにし、バーストはオンにしたときだけ再生してください。Particles (パーティクル)
別名 Floating particles, Particle field
たくさんの小さな点が背景を漂い、つながったりポインターに反応したりします。
使いどころ
ヒーローやセクションの背景
[適用する場所]にパーティクル(Particles)の背景を追加してください。フローティングパーティクル(floating particles)、パーティクルフィールド(particle field)とも呼ばれます。
大きさの異なる小さな点が、それぞれのペースでゆるやかにさまよう軌道を描いてゆっくり漂うようにしてください。穏やかで軽やかに。
遅いデバイスでも軽く動くよう点の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。ABC
Sparkles (スパークル)
別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
使いどころ
見出し、プレミアム感のあるアクセント
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。ABCDEF
マウスを乗せてください
Letter Scatter (レタースキャッター)
別名 Explosive Letter Burst, Scatter Gather Letters
ホバーで文字が飛び散って戻ったり、登場時に外側へはじけたりします。
使いどころ
遊び心のあるリンク
[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。Micro-interactionのほかのモーション
クリックしてください
Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。A
ドラッグしてください
Drag (ドラッグ)
別名 Draggable, Drag constraints
ドラッグすると要素がポインターに追従し、範囲や軸を制限することもできます。
使いどころ
スライダー、並べ替え可能なカード
[適用する場所]にドラッグ(Drag)のインタラクションを追加してください。ドラッガブル(draggable)、ドラッグ制約(drag constraints)とも呼ばれます。
ドラッグ中は要素がポインターにそのまま追従し、許可された範囲の端で止まり、離すと小さく弾んで元の位置に戻るようにしてください。
マウスだけでなくタッチでも、下のページがスクロールせずに操作できるようにし、キーボードで動かす方法も用意してください。ABC
Floating Label (フローティングラベル)
別名 Float label, Animated placeholder
フィールドにフォーカスが当たるか入力があると、プレースホルダーのラベルが上へ移動して小さくなります。
使いどころ
フォーム、ログイン入力欄
[適用する場所]にフローティングラベル(Floating Label)を追加してください。フロートラベル(float label)、アニメーションプレースホルダー(animated placeholder)とも呼ばれます。
フィールドにフォーカスが当たるか値が入ると、中にあるラベルがなめらかに素早く上へ移動しながら縮んでフィールドの上端に乗り、フィールドが空でフォーカスもないときだけ元に戻るようにしてください。
入力欄に関連付けた本物のラベルのままにし、フィールドの高さが変わらずフォームがずれないようにしてください。