プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
Background Fade (背景フェード)
別名 Color Fade
ホバーすると、背景色と文字色が新しい色へクロスフェードします。
使いどころ
ボタン、ナビゲーション項目
[適用する場所]に背景フェード(Background Fade)のホバーエフェクトを追加してください。カラーフェード(color fade)とも呼ばれます。
ポインターが要素に乗っている間は背景色と文字色が新しい色へなめらかにクロスフェードし、離れたら元に戻るようにしてください。落ち着いた印象で、動きはつけません。
どちらの状態でも文字と背景のコントラストを十分に保ち、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると、要素の縁の内側に内枠の線が現れます。
使いどころ
ボタン、カード
[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると、枠線の色がフェードインしたり切り替わったりします。
使いどころ
ボタン、入力欄
[適用する場所]にボーダーフェード(Border Fade)のホバーエフェクトを追加してください。
ポインターが要素に乗っている間、枠線が落ち着いた色からアクセントカラーへなめらかにフェードするようにしてください。控えめに、動きやサイズ変化はつけません。
何もずれないよう枠線の太さはどちらの状態でも同じにし、キーボードフォーカスでも同じ効果を出してください。Hoverのほかのモーション
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)とも呼ばれます。
ポインターを乗せている間は要素の下のやわらかい影が濃く広がって浮き上がって見え、離れると元に戻るようにしてください。要素自体は動かしません。
ライトテーマでもダークテーマでもなじむよう影は控えめにし、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
Hover State Layer (ホバーステートレイヤー)
別名 Hover State, State layer, Hover overlay
半透明のオーバーレイが要素に色を重ね、ポインターが乗っていることを示します。
使いどころ
デザインシステムのコンポーネント
[適用する場所]にホバーステートレイヤー(Hover State Layer)を追加してください。ホバーステート(hover state)、ステートレイヤー(state layer)、ホバーオーバーレイ(hover overlay)とも呼ばれます。
ポインターを乗せている間、コンテンツ色の薄い半透明オーバーレイが要素の上にすばやくフェードインし、離れるとフェードアウトするようにしてください。
コントラストを損なわないようごく薄くし、フォーカス時と押下時にも同じレイヤーの仕組みを使ってください。