プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグロウ(Grow)のホバーエフェクトを追加してください。スケールアップ(scale up)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し拡大し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
要素がすばやく大きくなり、弾むようにポンと元に戻ります。
使いどころ
アイコン、ボタン
[適用する場所]にポップ(Pop)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく膨らんで通常のサイズに戻り、小さく弾むようなポンとした動きにしてください。
大きいサイズのまま止めたりループさせたりせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。A
マウスを乗せてください
Bounce Scale (バウンススケール)
別名 Bounce In / Out
ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。
使いどころ
ボタン、バッジ
[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。マウスを乗せてください
Hover Zoom (ホバーズーム)
別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。ABCDE
ポインターを動かしてください
Dock Magnification (ドック拡大)
別名 Dock
macOS の Dock のように、ポインターが近づくと並んだアイコンがなめらかに大きくなります。
使いどころ
アイコンツールバー、ナビゲーション
[適用する場所]にドック拡大(Dock Magnification)のエフェクトを追加してください。ドック(dock)とも呼ばれます。
ポインターが近づくにつれて並んだアイコンがなめらかに大きくなり、いちばん近いアイコンが最大、その両隣も少し大きくなり、ポインターが離れたらすべて通常サイズに戻るようにしてください。
アイコンは固定のベースラインから上方向に大きくし、タッチやキーボードでは通常サイズのまま操作できるようにしてください。Hoverのほかのモーション
A
マウスを乗せてください
Hollow (ホロウ)
別名 Ghost fill
ホバーすると塗りつぶしの背景が消え、枠線だけのボタンになります。
使いどころ
ボタン
[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
グラデーションの枠線が要素の周りを動き、ポインターを乗せると広がります。
使いどころ
ボタン、カード
[適用する場所]にホバーボーダーグラデーション(Hover Border Gradient)のエフェクトを追加してください。
短いグラデーションのハイライトが枠線の一部に留まり、ポインターを乗せている間は枠線に沿って一定の速さで周回し、枠線全体がやわらかく光って明るくなるようにしてください。
枠線が動くのはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。A
マウスを乗せてください
Hover Shadow (ホバーシャドウ)
別名 Drop Shadow on hover, Elevation on hover
ホバーすると要素の下にやわらかい影が現れたり濃くなったりして、浮き上がって見えます。
使いどころ
カード、ボタン
[適用する場所]にホバーシャドウ(Hover Shadow)のエフェクトを追加してください。ドロップシャドウオンホバー(drop shadow on hover)、エレベーションオンホバー(elevation on hover)とも呼ばれます。
ポインターを乗せている間は要素の下のやわらかい影が濃く広がって浮き上がって見え、離れると元に戻るようにしてください。要素自体は動かしません。
ライトテーマでもダークテーマでもなじむよう影は控えめにし、キーボードフォーカス時にも同じ効果を出してください。