プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグロー(Glow)のホバーエフェクトを追加してください。ネオングロー(neon glow)とも呼ばれます。
ポインターが乗っている間は要素のまわりにやわらかな色付きのハローがフェードインし、離れたらフェードアウトするようにしてください。やさしく、動きはつけません。
ハローがレイアウトに影響しないようにし、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
Hover Shadow (ホバーシャドウ)
別名 Drop Shadow on hover, Elevation on hover
ホバーすると要素の下にやわらかい影が現れたり濃くなったりして、浮き上がって見えます。
使いどころ
カード、ボタン
[適用する場所]にホバーシャドウ(Hover Shadow)のエフェクトを追加してください。ドロップシャドウオンホバー(drop shadow on hover)、エレベーションオンホバー(elevation on hover)とも呼ばれます。
ポインターを乗せている間は要素の下のやわらかい影が濃く広がって浮き上がって見え、離れると元に戻るようにしてください。要素自体は動かしません。
ライトテーマでもダークテーマでもなじむよう影は控えめにし、キーボードフォーカス時にも同じ効果を出してください。ABCDEF
Neon Glow Text (ネオングローテキスト)
別名 Neon Sign Flicker, Glowing Text
テキストがネオン管のように光り、ちらついたり脈打ったりします。
使いどころ
ナイトライフやゲーム系のテーマ
[適用する場所]にネオングローテキスト(Neon Glow Text)のエフェクトを追加してください。ネオンサインフリッカー(neon sign flicker)、グローイングテキスト(glowing text)とも呼ばれます。
テキストがネオン管のように柔らかく安定した光で輝き、ときどき本物の看板のように一瞬消えるようにしてください。
速い点滅は一部のユーザーに害を与えることがあるので、ちらつきは速くせずたまに起こる程度にし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を一定に保ってください。A
マウスを乗せてください
ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。
使いどころ
ボタン
[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
グラデーションの枠線が要素の周りを動き、ポインターを乗せると広がります。
使いどころ
ボタン、カード
[適用する場所]にホバーボーダーグラデーション(Hover Border Gradient)のエフェクトを追加してください。
短いグラデーションのハイライトが枠線の一部に留まり、ポインターを乗せている間は枠線に沿って一定の速さで周回し、枠線全体がやわらかく光って明るくなるようにしてください。
枠線が動くのはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。Hoverのほかのモーション
A
マウスを乗せてください
Grow (グロウ)
別名 Scale Up, Zoom In on hover
ポインターが乗っている間、要素がなめらかに少し拡大します。
使いどころ
ボタン、リンク、サムネイル
[適用する場所]にグロウ(Grow)のホバーエフェクトを追加してください。スケールアップ(scale up)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し拡大し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Hollow (ホロウ)
別名 Ghost fill
ホバーすると塗りつぶしの背景が消え、枠線だけのボタンになります。
使いどころ
ボタン
[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。