プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。
使いどころ
ボタン
[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
ホバーすると、枠線の色がフェードインしたり切り替わったりします。
使いどころ
ボタン、入力欄
[適用する場所]にボーダーフェード(Border Fade)のホバーエフェクトを追加してください。
ポインターが要素に乗っている間、枠線が落ち着いた色からアクセントカラーへなめらかにフェードするようにしてください。控えめに、動きやサイズ変化はつけません。
何もずれないよう枠線の太さはどちらの状態でも同じにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Hollow (ホロウ)
別名 Ghost fill
ホバーすると塗りつぶしの背景が消え、枠線だけのボタンになります。
使いどころ
ボタン
[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。Hoverのほかのモーション
ABC
マウスを乗せてください
Underline Reveal (アンダーラインリビール)
別名 Overline Reveal, Reveal
線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。
使いどころ
ナビゲーションリンク、ボタン
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。A
ポインターを動かしてください
カード上のポインターの動きに合わせて、カードがわずかに移動・拡大します。
使いどころ
プロモーションカード
[適用する場所]にウォブルカード(Wobble Card)のエフェクトを追加してください。
ポインターがカード上を動くと、カードはポインターの方へわずかに寄り、中のコンテンツは反対方向へわずかにずれながら少し拡大してなめらかに追従し、ポインターが離れたらすべて元に戻るようにしてください。
動きは小さく抑え、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。A
マウスを乗せてください
色付きの背景が端からスイープして入り、弾むように少し行き過ぎてから戻ります。
使いどころ
ボタン
[適用する場所]に背景バウンススイープ(Background Bounce Sweep)のホバーエフェクトを追加してください。
新しい背景色が片方の端からスイープして入り、反対側の端を弾むように少し行き過ぎてから落ち着くようにしてください。文字色は読みやすさを保つように切り替え、ポインターが離れたらなめらかにスライドして戻してください。
文字は塗りの上に表示し、キーボードフォーカスでも同じ効果を出してください。