プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
ホバーすると要素が横方向に斜めにゆがみます。
使いどころ
ボタン、タグ
[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ボタンにホバーすると、中のアイコンがくるりと回転します。
使いどころ
アイコンボタン
[適用する場所]にアイコンスピン(Icon Spin)のホバーエフェクトを追加してください。
ポインターが入ると要素内のアイコンが滑らかに一回転し、離れると逆向きに回って戻るようにしてください。
回すのはアイコンだけでボタン全体は回さず、キーボードフォーカス時にも同じ効果を出してください。A
要素が不安定な物のように、傾きながら左右に揺れます。
使いどころ
アイコンやボタンへの注目
[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。A
要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。Hoverのほかのモーション
A
マウスを乗せてください
ホバーすると要素の角がなめらかに丸くなります。
使いどころ
ボタン、画像
[適用する場所]にラウンドコーナー(Round Corners)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の角ばった角がなめらかに丸くなり、離れたら元の角に戻るようにしてください。やわらかく素早く。
要素のサイズは変えず、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Shine Sweep (シャインスイープ)
別名 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
ホバーすると、斜めの光の帯が要素の端から端へ横切ります。
使いどころ
ボタン、カード、バッジ
[適用する場所]にシャインスイープ(Shine Sweep)のホバーエフェクトを追加してください。sheen、シャイニーボタン(shiny button)、シャインオンホバー(shine on hover)、グリント(glint)、シマー(shimmer)、シマーボタン(shimmer button)とも呼ばれます。
ポインターが乗っている間、やわらかな斜めの光の帯が要素を左から右へ横切り、短い間を置いて繰り返すようにしてください。
光の帯は要素の内側で切り取り、ポインターが離れたら止め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。A
マウスを乗せてください
Shrink (シュリンク)
別名 Scale Down
ポインターが乗っている間、要素がなめらかに少し縮小します。
使いどころ
ボタン、タイル
[適用する場所]にシュリンク(Shrink)のホバーエフェクトを追加してください。スケールダウン(scale down)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し縮小し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。