プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。似ているモーション
A
Rubber Band (ラバーバンド)
別名 Rubberband
要素が横に伸びて縦に縮む動きを弾むように数回繰り返し、元の形に戻ります。
使いどころ
ボタンのフィードバック、注目を集める演出
[適用する場所]にラバーバンド(Rubber Band)のアテンション効果を追加してください。rubberbandとも呼ばれます。
要素が横に伸びて縦に縮み、その後小さく弾む動きを数回挟みながら元のサイズに落ち着くようにしてください。
トリガーされたら一度だけ再生し、伸び縮みしている間も周りのレイアウトがずれないようにしてください。A
要素が不安定な物のように、傾きながら左右に揺れます。
使いどころ
アイコンやボタンへの注目
[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。A
マウスを乗せてください
ホバーすると要素が横方向に斜めにゆがみます。
使いどころ
ボタン、タグ
[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。A
Head Shake (ヘッドシェイク)
別名 Headshake, No Shake
要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。
使いどころ
無効な入力や拒否の表示
[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。Emphasisのほかのモーション
A
Ping (ピング)
別名 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
要素のコピーがレーダーの波紋のように、拡大しながら消えていく動きを繰り返します。
使いどころ
通知ドット、ライブステータス
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。A
Pulse (パルス)
別名 Pulsing
要素がやわらかく拡大縮小、またはフェードを繰り返します。
使いどころ
スケルトンローダー、ライブインジケーター、CTA
[適用する場所]にパルス(Pulse)効果を追加してください。パルシング(pulsing)とも呼ばれます。
要素がゆっくり一定のリズムで、やわらかくふくらんでは戻るようにしてください。控えめで、弾むような動きは不要です。
周りのレイアウトを動かさずに途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。