プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にウォブルカード(Wobble Card)のエフェクトを追加してください。
ポインターがカード上を動くと、カードはポインターの方へわずかに寄り、中のコンテンツは反対方向へわずかにずれながら少し拡大してなめらかに追従し、ポインターが離れたらすべて元に戻るようにしてください。
動きは小さく抑え、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。似ているモーション
A
ポインターを動かしてください
3D Tilt (3Dチルト)
別名 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
カードがポインターの方向へ立体的に傾き、重なった中身が表面から浮き上がります。
使いどころ
製品カード、料金カード
[適用する場所]に3Dチルト(3D Tilt)エフェクトを追加してください。パースペクティブチルト(perspective tilt)、チルトカード(tilt card)とも呼ばれます。
ポインターの動きに合わせてカードがその方向へ立体的に傾き、内側のレイヤーがそれぞれ違う深さで表面から浮き上がり、ポインターが離れたらなめらかに平らへ戻るようにしてください。なめらかで控えめに。
文字が読みやすいよう傾きは小さくし、タッチ端末とユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はカードを平らなままにしてください。A
ポインターを動かしてください
Magnetic Button (マグネティックボタン)
別名 Magnetic target, Magnetic hover
ポインターが近づくと要素が引き寄せられ、離れるとぱっと元の位置に戻ります。
使いどころ
CTAボタン、ナビゲーションのアイコン
[適用する場所]にマグネティックボタン(Magnetic Button)の効果を追加してください。マグネティックターゲット(magnetic target)、マグネティックホバー(magnetic hover)とも呼ばれます。
ポインターが近づくとボタンが少しそちらへ引き寄せられ、ラベルはさらに少し大きく動くようにしてください。ポインターが離れたら、小さく弾んで元の位置へ戻ります。
周りのレイアウトがずれないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は引き寄せをオフにしてください。A
ポインターを動かしてください
Glare / Holographic Card (グレア/ホログラフィックカード)
別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。Hoverのほかのモーション
A
マウスを乗せてください
色付きの背景が端からスイープして入り、弾むように少し行き過ぎてから戻ります。
使いどころ
ボタン
[適用する場所]に背景バウンススイープ(Background Bounce Sweep)のホバーエフェクトを追加してください。
新しい背景色が片方の端からスイープして入り、反対側の端を弾むように少し行き過ぎてから落ち着くようにしてください。文字色は読みやすさを保つように切り替え、ポインターが離れたらなめらかにスライドして戻してください。
文字は塗りの上に表示し、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Background Fade (背景フェード)
別名 Color Fade
ホバーすると、背景色と文字色が新しい色へクロスフェードします。
使いどころ
ボタン、ナビゲーション項目
[適用する場所]に背景フェード(Background Fade)のホバーエフェクトを追加してください。カラーフェード(color fade)とも呼ばれます。
ポインターが要素に乗っている間は背景色と文字色が新しい色へなめらかにクロスフェードし、離れたら元に戻るようにしてください。落ち着いた印象で、動きはつけません。
どちらの状態でも文字と背景のコントラストを十分に保ち、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Background Sweep (背景スイープ)
別名 Background Fill, Slide Fill
ホバーすると、色付きの背景が片方の端から要素全体をなぞるように広がります。
使いどころ
ボタン、メニューリンク
[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。