プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。似ているモーション
A
マウスを乗せてください
ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。
使いどころ
ボタン
[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。A
Ping (ピング)
別名 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
要素のコピーがレーダーの波紋のように、拡大しながら消えていく動きを繰り返します。
使いどころ
通知ドット、ライブステータス
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。A
Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。Hoverのほかのモーション
A
マウスを乗せてください
Bounce Scale (バウンススケール)
別名 Bounce In / Out
ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。
使いどころ
ボタン、バッジ
[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。ABCDEF
ポインターを動かしてください
Card Hover Effect (カードホバーエフェクト)
別名 Sliding highlight card grid
グリッド内でハイライト背景がカードの間をすべるように移動し、ホバーされているカードについていきます。
使いどころ
カードグリッド、機能一覧
[適用する場所]にカードホバーエフェクト(Card Hover Effect)を追加してください。スライディングハイライトカードグリッド(sliding highlight card grid)とも呼ばれます。
ホバーしたカードの背後にやわらかいハイライト背景が現れ、ポインターが次のカードへ移るとそこまでなめらかにすべって移動し、グリッドから離れたらフェードアウトするようにしてください。
キーボードフォーカスでも同じようにハイライトを動かし、カード自体は動かないようにしてください。A
ポインターを動かしてください
Card Spotlight (カードスポットライト)
別名 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
やわらかな放射状の光がポインターを追ってカードの表面を移動し、下の背景を浮かび上がらせます。
使いどころ
機能紹介カード、ベントーグリッド
[適用する場所]にカードスポットライト(Card Spotlight)のエフェクトを追加してください。スポットライトホバー(spotlight hover)、ポインターグロー(pointer glow)、マウス追従グロー(mouse-following glow)、ラジアルグラデーションホバー(radial gradient hover)とも呼ばれます。
やわらかくほのかな放射状の光がポインターを追ってカードの表面を移動し、ポインターが入ったらフェードイン、離れたらフェードアウトするようにしてください。
文字が読みやすいよう光はカードの内容の背後に置き、タッチデバイスではカードを光らせないでください。