プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。似ているモーション
A
Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。A
Pulse (パルス)
別名 Pulsing
要素がやわらかく拡大縮小、またはフェードを繰り返します。
使いどころ
スケルトンローダー、ライブインジケーター、CTA
[適用する場所]にパルス(Pulse)効果を追加してください。パルシング(pulsing)とも呼ばれます。
要素がゆっくり一定のリズムで、やわらかくふくらんでは戻るようにしてください。控えめで、弾むような動きは不要です。
周りのレイアウトを動かさずに途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。3
Notification Badge Bounce (通知バッジバウンス)
別名 Badge pop, Badge pulse, Ping
新しい通知が届くと、件数バッジがポンと現れて弾んだり脈打ったりします。
使いどころ
ベルアイコン、受信トレイ
[適用する場所]に通知バッジバウンス(Notification Badge Bounce)のアニメーションを追加してください。バッジポップ(badge pop)、ピン(ping)とも呼ばれます。
新しい通知が届いたら、件数バッジが何もないところからポンと現れ、素早く弾むように数回跳ねて落ち着き、同時にやわらかいリングが一度だけ広がるようにしてください。
ループさせず新しい通知ごとに一度だけ再生し、新しい件数をスクリーンリーダーに読み上げさせてください。A
マウスを乗せてください
ホバーすると、同心円状の枠線のリングが要素から外側へ広がったり、内側へ縮んだりします。
使いどころ
ボタン
[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。Emphasisのほかのモーション
A
Rubber Band (ラバーバンド)
別名 Rubberband
要素が横に伸びて縦に縮む動きを弾むように数回繰り返し、元の形に戻ります。
使いどころ
ボタンのフィードバック、注目を集める演出
[適用する場所]にラバーバンド(Rubber Band)のアテンション効果を追加してください。rubberbandとも呼ばれます。
要素が横に伸びて縦に縮み、その後小さく弾む動きを数回挟みながら元のサイズに落ち着くようにしてください。
トリガーされたら一度だけ再生し、伸び縮みしている間も周りのレイアウトがずれないようにしてください。Shake (シェイク)
別名 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
要素が一方向の軸に沿って素早く小刻みに往復します。
使いどころ
フォームのエラー表示
[適用する場所]にシェイク(Shake)効果を追加してください。エラーシェイク(error shake)、invalid input shakeとも呼ばれます。
要素が左右に数回素早く小刻みに揺れ、ちょうど元の位置で止まるようにしてください。速く、きっぱりと。
ループさせずにエラーが起きるたびに一度だけ再生し、意味が動きだけに頼らないよう、目に見えるエラーメッセージも一緒に表示してください。