プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。似ているモーション
A
マウスを乗せてください
ボタンにホバーすると、中のアイコンがくるりと回転します。
使いどころ
アイコンボタン
[適用する場所]にアイコンスピン(Icon Spin)のホバーエフェクトを追加してください。
ポインターが入ると要素内のアイコンが滑らかに一回転し、離れると逆向きに回って戻るようにしてください。
回すのはアイコンだけでボタン全体は回さず、キーボードフォーカス時にも同じ効果を出してください。Circular Spinner (サーキュラースピナー)
別名 Spinner, Throbber, Circular indeterminate
リングや円弧が回り続け、読み込み中であることを示します。
使いどころ
ボタン、ページの読み込み
[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。A
マウスを乗せてください
ホバーすると要素が数度だけ回転します。
使いどころ
アイコン、サムネイル
[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。ABCDEFGHIJKLMNOP
Spinning Text (スピニングテキスト)
別名 Circular Text, Text on Circle
円に沿って配置したテキストが、途切れなく回転し続けます。
使いどころ
回転するバッジ、スタンプ
[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。Emphasisのほかのモーション
A
要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。A
要素が大きくなり、回転しながら小刻みに揺れてから元のサイズに戻る、お祝いのような動きです。
使いどころ
成功時の表示、お祝い
[適用する場所]にタダー(Tada)のアテンション効果を追加してください。
要素が一度少し小さくなってから大きくなり、素早く傾きながら左右に揺れて元のサイズに戻るようにしてください。ささやかなお祝いのような動きです。
成功した直後などに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。Vibrate (バイブレート)
別名 Vibration, Buzz
要素がスマートフォンのバイブのように、さまざまな方向へ細かく素早く震えます。
使いどころ
アラート、着信風の合図
[適用する場所]にバイブレート(Vibrate)のアテンション効果を追加してください。バズ(buzz)、バイブレーション(vibration)とも呼ばれます。
要素がスマートフォンのバイブのように、いろいろな方向へ細かく素早く一瞬震えてから止まるようにしてください。
コンテンツが読めるよう動きはごく小さくし、ループさせずにアラートごとに一度だけ再生してください。