プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。似ているモーション
A
Head Shake (ヘッドシェイク)
別名 Headshake, No Shake
要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。
使いどころ
無効な入力や拒否の表示
[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。A
要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。A
要素が大きくなり、回転しながら小刻みに揺れてから元のサイズに戻る、お祝いのような動きです。
使いどころ
成功時の表示、お祝い
[適用する場所]にタダー(Tada)のアテンション効果を追加してください。
要素が一度少し小さくなってから大きくなり、素早く傾きながら左右に揺れて元のサイズに戻るようにしてください。ささやかなお祝いのような動きです。
成功した直後などに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。A
Jello (ジェロ)
別名 Jelly
要素がゼリーのようにぷるぷると左右にゆがみ、揺れ幅がだんだん小さくなります。
使いどころ
ボタンやロゴの遊び心のある強調
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。Emphasisのほかのモーション
A
Bounce (バウンス)
別名 Bounce (attention)
要素が上下に跳ね、弾みがだんだん小さくなっていきます。
使いどころ
下へのスクロール案内、CTAボタン
[適用する場所]にバウンス(Bounce)の注目エフェクトを追加してください。
要素が跳び上がっては落ちる動きを、だんだん小さくなる素早いバウンドで数回繰り返し、着地のたびに少しつぶれるようにしてください。
ループさせずトリガーされたときに一度だけ再生し、モーションを減らす設定にしているユーザーには再生しないでください。Flash (フラッシュ)
別名 Blink
要素が不透明度をすばやく切り替えて点滅します。
使いどころ
新着コンテンツの通知
[適用する場所]にフラッシュ(Flash)の注目エフェクトを追加してください。ブリンク(blink)とも呼ばれます。
要素がすばやく消えては現れる点滅を2回行い、その後は完全に表示されたままにしてください。
延々と点滅させず一度だけ再生し、速い点滅は不快に感じられることがあるため、モーションを減らす設定にしているユーザーには再生しないでください。ABC
Flicker (フリッカー)
別名 Flickering
要素の不透明度が、切れかけた電灯のように不規則にちらつきます。
使いどころ
ネオンやグリッチの演出
[適用する場所]にフリッカー(Flicker)のエフェクトを追加してください。flickering とも呼ばれます。
要素はほとんどの時間は安定させ、切れかけたネオンのように短く不規則に途切れて暗くなるようにしてください。
タイミングは等間隔ではなく不規則にし、最大の明るさでの速い点滅は避け、モーションを減らす設定にしているユーザーには止めてください。