プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にドック拡大(Dock Magnification)のエフェクトを追加してください。ドック(dock)とも呼ばれます。
ポインターが近づくにつれて並んだアイコンがなめらかに大きくなり、いちばん近いアイコンが最大、その両隣も少し大きくなり、ポインターが離れたらすべて通常サイズに戻るようにしてください。
アイコンは固定のベースラインから上方向に大きくし、タッチやキーボードでは通常サイズのまま操作できるようにしてください。似ているモーション
A
マウスを乗せてください
Grow (グロウ)
別名 Scale Up, Zoom In on hover
ポインターが乗っている間、要素がなめらかに少し拡大します。
使いどころ
ボタン、リンク、サムネイル
[適用する場所]にグロウ(Grow)のホバーエフェクトを追加してください。スケールアップ(scale up)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し拡大し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。A
ポインターを動かしてください
Magnetic Button (マグネティックボタン)
別名 Magnetic target, Magnetic hover
ポインターが近づくと要素が引き寄せられ、離れるとぱっと元の位置に戻ります。
使いどころ
CTAボタン、ナビゲーションのアイコン
[適用する場所]にマグネティックボタン(Magnetic Button)の効果を追加してください。マグネティックターゲット(magnetic target)、マグネティックホバー(magnetic hover)とも呼ばれます。
ポインターが近づくとボタンが少しそちらへ引き寄せられ、ラベルはさらに少し大きく動くようにしてください。ポインターが離れたら、小さく弾んで元の位置へ戻ります。
周りのレイアウトがずれないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は引き寄せをオフにしてください。マウスを乗せてください
Hover Zoom (ホバーズーム)
別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。Hoverのほかのモーション
A
マウスを乗せてください
Float (フロート)
別名 Lift, Raise
ホバーすると、要素が浮かぶように数ピクセル上に移動します。
使いどころ
カード、ボタン
[適用する場所]にフロート(Float)のホバーエフェクトを追加してください。リフト(lift)、レイズ(raise)とも呼ばれます。
ポインターが乗っている間は要素が少し浮き上がったままになり、離れたら元に戻るようにしてください。なめらかでやさしく、弾みはつけません。
周りのレイアウトをずらさず見た目だけ動かし、キーボードフォーカスでも同じ効果を出してください。ABC
ポインターを動かしてください
Focus Cards (フォーカスカード)
別名 Blur siblings on hover, Hover focus blur, Card hover effect
ホバーしたカードだけがくっきり残り、ほかのカードはぼやけて暗くなります。
使いどころ
カードグリッド、ギャラリー
[適用する場所]にフォーカスカード(Focus Cards)のエフェクトを追加してください。ブラーシブリングオンホバー(blur siblings on hover)、ホバーフォーカスブラー(hover focus blur)、カードホバーエフェクト(card hover effect)とも呼ばれます。
ポインターがカードに乗っている間は、そのカードだけがくっきりしたまま、ほかのカードがぼやけて暗くなり少し縮むようにしてください。すべてなめらかにフェードし、ポインターが離れたら元に戻します。
キーボードフォーカスでも同じように強調し、何もホバーしていないときはすべてのカードをくっきり読みやすく保ってください。A
マウスを乗せてください
Glow (グロー)
別名 Neon glow
ホバーすると、要素のまわりに色付きの光のハローが現れます。
使いどころ
ボタン、カード、アイコン
[適用する場所]にグロー(Glow)のホバーエフェクトを追加してください。ネオングロー(neon glow)とも呼ばれます。
ポインターが乗っている間は要素のまわりにやわらかな色付きのハローがフェードインし、離れたらフェードアウトするようにしてください。やさしく、動きはつけません。
ハローがレイアウトに影響しないようにし、キーボードフォーカスでも同じ効果を出してください。