プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にアイコンスピン(Icon Spin)のホバーエフェクトを追加してください。
ポインターが入ると要素内のアイコンが滑らかに一回転し、離れると逆向きに回って戻るようにしてください。
回すのはアイコンだけでボタン全体は回さず、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
Spin (スピン)
別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。A
マウスを乗せてください
ホバーすると要素が数度だけ回転します。
使いどころ
アイコン、サムネイル
[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
ホバーするとアイコンが下に落ちて見えなくなり、上から戻ってきます。
使いどころ
アイコンボタン
[適用する場所]にアイコンドロップ(Icon Drop)のホバーエフェクトを追加してください。
要素内のアイコンが下に落ちて見えなくなり、上から元の位置に戻ってくるようにしてください。素早く、着地はやわらかく。
ループさせずポインターが入るたびに一度だけ再生し、ラベルとボタンのサイズは変えないでください。Hoverのほかのモーション
AA
マウスを乗せてください
ホバーするとボタンのラベルが横へ抜け、矢印と塗りが広がって入ってきます。
使いどころ
CTAボタン
[適用する場所]にインタラクティブホバーボタン(Interactive Hover Button)のエフェクトを追加してください。
ラベル横の小さな点が広がってボタン全体を塗りつぶし、その間にラベルは横へスライドしながらフェードアウトし、矢印付きのラベルが新しい塗りの上にスライドして入ってくるようにしてください。滑らかで素早く。
ボタンのサイズは固定し、ラベルが常に読めるようにして、キーボードフォーカス時にも同じ効果を出してください。マウスを乗せてください
Nudge Forward / Backward (ナッジフォワード/バックワード)
別名 Arrow nudge
ホバーすると矢印や要素そのものが数ピクセルだけ前後にずれます。
使いどころ
次へ・戻るリンク、矢印
[適用する場所]にナッジフォワード/バックワード(Nudge Forward / Backward)のホバーエフェクトを追加してください。アローナッジ(arrow nudge)とも呼ばれます。
ポインターを乗せている間は矢印が指す方向へ少しスライドし、離れると戻るようにしてください。素早く小さく。
動かすのは矢印だけにしてラベルやレイアウトはずらさず、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。
使いどころ
ボタン
[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。