プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にシェイク(Shake)効果を追加してください。エラーシェイク(error shake)、invalid input shakeとも呼ばれます。
要素が左右に数回素早く小刻みに揺れ、ちょうど元の位置で止まるようにしてください。速く、きっぱりと。
ループさせずにエラーが起きるたびに一度だけ再生し、意味が動きだけに頼らないよう、目に見えるエラーメッセージも一緒に表示してください。似ているモーション
A
Head Shake (ヘッドシェイク)
別名 Headshake, No Shake
要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。
使いどころ
無効な入力や拒否の表示
[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。Vibrate (バイブレート)
別名 Vibration, Buzz
要素がスマートフォンのバイブのように、さまざまな方向へ細かく素早く震えます。
使いどころ
アラート、着信風の合図
[適用する場所]にバイブレート(Vibrate)のアテンション効果を追加してください。バズ(buzz)、バイブレーション(vibration)とも呼ばれます。
要素がスマートフォンのバイブのように、いろいろな方向へ細かく素早く一瞬震えてから止まるようにしてください。
コンテンツが読めるよう動きはごく小さくし、ループさせずにアラートごとに一度だけ再生してください。A
要素が不安定な物のように、傾きながら左右に揺れます。
使いどころ
アイコンやボタンへの注目
[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。A
Rubber Band (ラバーバンド)
別名 Rubberband
要素が横に伸びて縦に縮む動きを弾むように数回繰り返し、元の形に戻ります。
使いどころ
ボタンのフィードバック、注目を集める演出
[適用する場所]にラバーバンド(Rubber Band)のアテンション効果を追加してください。rubberbandとも呼ばれます。
要素が横に伸びて縦に縮み、その後小さく弾む動きを数回挟みながら元のサイズに落ち着くようにしてください。
トリガーされたら一度だけ再生し、伸び縮みしている間も周りのレイアウトがずれないようにしてください。Emphasisのほかのモーション
Spin (スピン)
別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。A
要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。A
要素が大きくなり、回転しながら小刻みに揺れてから元のサイズに戻る、お祝いのような動きです。
使いどころ
成功時の表示、お祝い
[適用する場所]にタダー(Tada)のアテンション効果を追加してください。
要素が一度少し小さくなってから大きくなり、素早く傾きながら左右に揺れて元のサイズに戻るようにしてください。ささやかなお祝いのような動きです。
成功した直後などに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。