プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にラバーバンド(Rubber Band)のアテンション効果を追加してください。rubberbandとも呼ばれます。
要素が横に伸びて縦に縮み、その後小さく弾む動きを数回挟みながら元のサイズに落ち着くようにしてください。
トリガーされたら一度だけ再生し、伸び縮みしている間も周りのレイアウトがずれないようにしてください。似ているモーション
A
Jello (ジェロ)
別名 Jelly
要素がゼリーのようにぷるぷると左右にゆがみ、揺れ幅がだんだん小さくなります。
使いどころ
ボタンやロゴの遊び心のある強調
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。A
マウスを乗せてください
Bounce Scale (バウンススケール)
別名 Bounce In / Out
ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。
使いどころ
ボタン、バッジ
[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。Shake (シェイク)
別名 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
要素が一方向の軸に沿って素早く小刻みに往復します。
使いどころ
フォームのエラー表示
[適用する場所]にシェイク(Shake)効果を追加してください。エラーシェイク(error shake)、invalid input shakeとも呼ばれます。
要素が左右に数回素早く小刻みに揺れ、ちょうど元の位置で止まるようにしてください。速く、きっぱりと。
ループさせずにエラーが起きるたびに一度だけ再生し、意味が動きだけに頼らないよう、目に見えるエラーメッセージも一緒に表示してください。A
マウスを乗せてください
要素がすばやく大きくなり、弾むようにポンと元に戻ります。
使いどころ
アイコン、ボタン
[適用する場所]にポップ(Pop)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく膨らんで通常のサイズに戻り、小さく弾むようなポンとした動きにしてください。
大きいサイズのまま止めたりループさせたりせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。Emphasisのほかのモーション
Spin (スピン)
別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。A
要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。