Notification Badge Bounce (通知バッジバウンス)
別名 Badge pop, Badge pulse, Ping
新しい通知が届くと、件数バッジがポンと現れて弾んだり脈打ったりします。
使いどころ
ベルアイコン、受信トレイ
バリエーション
- badge pop
- bounce
- pulse ping
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に通知バッジバウンス(Notification Badge Bounce)のアニメーションを追加してください。バッジポップ(badge pop)、ピン(ping)とも呼ばれます。
新しい通知が届いたら、件数バッジが何もないところからポンと現れ、素早く弾むように数回跳ねて落ち着き、同時にやわらかいリングが一度だけ広がるようにしてください。
ループさせず新しい通知ごとに一度だけ再生し、新しい件数をスクリーンリーダーに読み上げさせてください。似ているモーション
A
Ping (ピング)
別名 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
要素のコピーがレーダーの波紋のように、拡大しながら消えていく動きを繰り返します。
使いどころ
通知ドット、ライブステータス
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。A
Bounce (バウンス)
別名 Bounce (attention)
要素が上下に跳ね、弾みがだんだん小さくなっていきます。
使いどころ
下へのスクロール案内、CTAボタン
[適用する場所]にバウンス(Bounce)の注目エフェクトを追加してください。
要素が跳び上がっては落ちる動きを、だんだん小さくなる素早いバウンドで数回繰り返し、着地のたびに少しつぶれるようにしてください。
ループさせずトリガーされたときに一度だけ再生し、モーションを減らす設定にしているユーザーには再生しないでください。A
マウスを乗せてください
要素がすばやく大きくなり、弾むようにポンと元に戻ります。
使いどころ
アイコン、ボタン
[適用する場所]にポップ(Pop)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく膨らんで通常のサイズに戻り、小さく弾むようなポンとした動きにしてください。
大きいサイズのまま止めたりループさせたりせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。A
1
クリックしてください
Add to Cart Fly (カート追加フライ)
別名 Fly to cart, Add-to-cart animation
商品画像が縮みながら弧を描いてカートアイコンへ飛んでいきます。
使いどころ
EC サイト
[適用する場所]にカート追加フライ(Add to Cart Fly)のアニメーションを追加してください。フライトゥカート(fly to cart)、カート追加アニメーション(add-to-cart animation)とも呼ばれます。
追加ボタンを押すと、商品画像の小さなコピーが縮みながらなめらかで素早い弧を描いてカートアイコンへ飛び、カートは個数が更新されるときに小さく弾むようにしてください。
押すたびに一度だけ再生して元の商品カードは動かさず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は飛ぶ動きを省いて、カートの更新だけは行ってください。Micro-interactionのほかのモーション
••••••ABCDEF
クリックしてください
Password Reveal Toggle (パスワード表示切り替え)
別名 Show/hide password, Eye icon toggle
パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。
使いどころ
ログイン・新規登録フォーム
[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。中をスクロールしてください
テキストがスクロールで画面に入ると、ポインターの矢印が単語の周りにハイライトの枠を描きます。
使いどころ
見出し、マーケティングコピー
[適用する場所]にポインターハイライト(Pointer Highlight)の効果を追加してください。
テキストがスクロールで画面に入ったら、キーワードの周りに左から右へ枠が描かれ、小さなポインターの矢印がその角に沿って動くようにしてください。なめらかで一定の速さで、誰かが手で単語に印をつけているような感じです。
最初に画面に入ったときに一度だけ、テキストをずらさずに描き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成した枠をすぐに表示してください。A
クリックしてください
Press (Button Tap Scale) (プレス)
別名 Tap feedback, Active scale, Press state
押している間は要素が少し縮み、離すと弾むように元に戻ります。
使いどころ
ボタン、カード
[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。