プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に吹き出し(Speech Bubble)のホバーエフェクトを追加してください。バブル(bubble)とも呼ばれます。
要素の一辺の裏から小さな三角形のしっぽがスライドして出てきて吹き出しの形になり、ポインターが離れたら引っ込むようにしてください。素早くなめらかに。
しっぽは要素と同じ色にしてひとつの形に見えるようにし、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
Tooltip Fade (ツールチップフェード)
別名 Tooltip reveal
少しホバーしたあと、小さなラベルが要素の横に少しずれながらフェードインします。
使いどころ
アイコンの説明、省略されたテキスト
[適用する場所]にツールチップフェード(Tooltip Fade)を追加してください。ツールチップリビール(tooltip reveal)とも呼ばれます。
少しホバーしたあと、ラベルが要素の横に少しずれながらフェードインし、ポインターが離れたら待たずにすぐ消えるようにしてください。
キーボードフォーカスでも表示し、Escape キーで閉じられるようにして、スクリーンリーダーが読み上げられるよう要素と関連付けてください。A
クリックしてください
Popover / Dropdown Open (ポップオーバー/ドロップダウンオープン)
別名 Menu pop, Popover pop-in, Dropdown scale-fade
フローティングメニューが、トリガーのある位置から拡大しながらフェードインします。
使いどころ
ドロップダウンメニュー、ポップオーバー、選択リスト
[適用する場所]にポップオーバー/ドロップダウンオープン(Popover / Dropdown Open)のアニメーションを追加してください。メニューポップ(menu pop)、ドロップダウンスケールフェード(dropdown scale-fade)とも呼ばれます。
メニューはトリガー横の角から少し拡大しながらフェードインし、素早くキレよく開いて、閉じるときは少し速めにフェードアウトさせてください。
トリガーに固定したまま表示し、Escape キーや外側のクリックで閉じられるようにして、開いている状態をトリガー側でスクリーンリーダーに伝えてください。Hoverのほかのモーション
A
マウスを乗せてください
ホバーすると、要素の縁の内側に内枠の線が現れます。
使いどころ
ボタン、カード
[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。ABC
マウスを乗せてください
Underline Reveal (アンダーラインリビール)
別名 Overline Reveal, Reveal
線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。
使いどころ
ナビゲーションリンク、ボタン
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。A
ポインターを動かしてください
カード上のポインターの動きに合わせて、カードがわずかに移動・拡大します。
使いどころ
プロモーションカード
[適用する場所]にウォブルカード(Wobble Card)のエフェクトを追加してください。
ポインターがカード上を動くと、カードはポインターの方へわずかに寄り、中のコンテンツは反対方向へわずかにずれながら少し拡大してなめらかに追従し、ポインターが離れたらすべて元に戻るようにしてください。
動きは小さく抑え、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。