プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。似ているモーション
ABC DEF
マウスを乗せてください
Underline Draw (アンダーラインドロー)
別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
ホバーすると、リンクの下に片側または中央から下線が伸びます。
使いどころ
ナビゲーションリンク、インラインリンク
[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。ABC
マウスを乗せてください
ホバーするとテキストの上に線が左・中央・右から伸びます。
使いどころ
ナビゲーションリンク、タブ
[適用する場所]にオーバーライングロウ(Overline Grow)のホバーエフェクトを追加してください。
ポインターを乗せている間はテキストの上の線が中央から左右へ伸び、離れると中央へ縮んで戻るようにしてください。素早く滑らかに。
テキストがずれないよう線の分のスペースをあらかじめ確保し、キーボードフォーカス時にも同じ効果を出してください。ABC DEFG HIJ KL
Text Highlighter (テキストマーカー)
別名 Highlight Marker, Marker Underline, Hero Highlight
マーカーのような色の帯がフレーズの上に引かれ、強調します。
使いどころ
重要なフレーズの強調
[適用する場所]にテキストマーカー(Text Highlighter)エフェクトを追加してください。ハイライトマーカー(highlight marker)、マーカーアンダーライン(marker underline)とも呼ばれます。
マーカーのような色の帯が、ペンで線を引くようにキーフレーズの背後を左から右へなめらかに走るようにしてください。
フレーズがスクロールで画面に入ったときに一度だけ再生し、帯の上でもテキストが読みやすいようにし、フレーズが2行に折り返しても帯が正しく追従するようにしてください。ABC
クリックしてください
Tab Indicator Slide (タブインジケータースライド)
別名 Sliding underline, Active tab indicator, Segmented control pill
下線やピル型の背景が、前のタブから新しく選んだタブへすべるように移動します。
使いどころ
タブバー、セグメントコントロール
[適用する場所]にタブインジケータースライド(Tab Indicator Slide)を追加してください。スライディングアンダーライン(sliding underline)、アクティブタブインジケーター(active tab indicator)とも呼ばれます。
新しいタブを選んだら、下線が前のタブから新しいタブへ素早く、なめらかに減速しながらすべり、幅が違う場合は新しいタブの幅に合わせて伸び縮みするようにしてください。
矢印キーで操作できる正しいタブのセマンティクスを保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすべらせずにインジケーターを移してください。Hoverのほかのモーション
A
ポインターを動かしてください
カード上のポインターの動きに合わせて、カードがわずかに移動・拡大します。
使いどころ
プロモーションカード
[適用する場所]にウォブルカード(Wobble Card)のエフェクトを追加してください。
ポインターがカード上を動くと、カードはポインターの方へわずかに寄り、中のコンテンツは反対方向へわずかにずれながら少し拡大してなめらかに追従し、ポインターが離れたらすべて元に戻るようにしてください。
動きは小さく抑え、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。A
マウスを乗せてください
色付きの背景が端からスイープして入り、弾むように少し行き過ぎてから戻ります。
使いどころ
ボタン
[適用する場所]に背景バウンススイープ(Background Bounce Sweep)のホバーエフェクトを追加してください。
新しい背景色が片方の端からスイープして入り、反対側の端を弾むように少し行き過ぎてから落ち着くようにしてください。文字色は読みやすさを保つように切り替え、ポインターが離れたらなめらかにスライドして戻してください。
文字は塗りの上に表示し、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Background Fade (背景フェード)
別名 Color Fade
ホバーすると、背景色と文字色が新しい色へクロスフェードします。
使いどころ
ボタン、ナビゲーション項目
[適用する場所]に背景フェード(Background Fade)のホバーエフェクトを追加してください。カラーフェード(color fade)とも呼ばれます。
ポインターが要素に乗っている間は背景色と文字色が新しい色へなめらかにクロスフェードし、離れたら元に戻るようにしてください。落ち着いた印象で、動きはつけません。
どちらの状態でも文字と背景のコントラストを十分に保ち、キーボードフォーカスでも同じ効果を出してください。