プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
色付きの背景が端からスイープして入り、弾むように少し行き過ぎてから戻ります。
使いどころ
ボタン
[適用する場所]に背景バウンススイープ(Background Bounce Sweep)のホバーエフェクトを追加してください。
新しい背景色が片方の端からスイープして入り、反対側の端を弾むように少し行き過ぎてから落ち着くようにしてください。文字色は読みやすさを保つように切り替え、ポインターが離れたらなめらかにスライドして戻してください。
文字は塗りの上に表示し、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると要素の内側で矩形が広がったり縮んだりして、背景が切り替わります。
使いどころ
ボタン
[適用する場所]にレクタングルフィル(Rectangle Fill)のホバーエフェクトを追加してください。
内側の矩形が中心へ縮むにつれて新しい背景色が四辺から閉じるように広がり、ポインターが離れると再び開いて戻るようにし、その間ラベルの色も読みやすいように切り替えてください。滑らかで素早く。
ラベルは塗りの上に置き、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
Shutter Fill (シャッターフィル)
別名 Shutter
ホバーすると、背景が中央または端からシャッターのように開いたり閉じたりします。
使いどころ
ボタン、カード
[適用する場所]にシャッターフィル(Shutter Fill)のホバーエフェクトを追加してください。シャッター(shutter)とも呼ばれます。
新しい背景色が中央の縦線から両側へシャッターのように開き、ポインターが離れたら中央へ閉じるようにし、その間ラベルの色も読みやすい色に切り替えてください。なめらかに素早く。
塗りは要素の内側で切り取ってラベルをその上に置き、キーボードフォーカスでも同じ効果を出してください。A
B
ポインターを動かしてください
Direction Aware Hover (ディレクションアウェアホバー)
別名 Direction-aware overlay
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へ抜けていきます。
使いどころ
画像ギャラリー、ポートフォリオグリッド
[適用する場所]にディレクションアウェアホバー(Direction Aware Hover)のエフェクトを追加してください。方向感知オーバーレイ(direction-aware overlay)とも呼ばれます。
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へスライドアウトするようにしてください。素早く、なめらかに。
入るときと出るときのポインター位置から方向を判定し、タッチやキーボードフォーカスでは決まった一方向を使ってください。Hoverのほかのモーション
A
マウスを乗せてください
Bob (ボブ)
別名 Hang
ホバー中、要素が浮き上がったあと上下にゆらゆらと揺れ続けます。
使いどころ
アイコン、ボタン
[適用する場所]にボブ(Bob)のホバーエフェクトを追加してください。ハング(hang)とも呼ばれます。
要素が少し浮き上がり、ポインターが乗っている間は上下にやさしく揺れ続け、離れたら元の位置に戻るようにしてください。ゆっくり、やわらかく。
揺れのループはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。A
マウスを乗せてください
ホバーすると、枠線の色がフェードインしたり切り替わったりします。
使いどころ
ボタン、入力欄
[適用する場所]にボーダーフェード(Border Fade)のホバーエフェクトを追加してください。
ポインターが要素に乗っている間、枠線が落ち着いた色からアクセントカラーへなめらかにフェードするようにしてください。控えめに、動きやサイズ変化はつけません。
何もずれないよう枠線の太さはどちらの状態でも同じにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると、同心円状の枠線のリングが要素から外側へ広がったり、内側へ縮んだりします。
使いどころ
ボタン
[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。