プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
ホバーすると要素が数度だけ回転します。
使いどころ
アイコン、サムネイル
[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。A
Jello (ジェロ)
別名 Jelly
要素がゼリーのようにぷるぷると左右にゆがみ、揺れ幅がだんだん小さくなります。
使いどころ
ボタンやロゴの遊び心のある強調
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。A
Light Speed In (ライトスピードイン)
別名 Lightspeed In
要素が斜めに傾いた状態で横から勢いよく飛び込み、着地とともにまっすぐになります。
使いどころ
バナーや見出しのドラマチックな登場
[適用する場所]にライトスピードイン(Light Speed In)の登場アニメーションを追加してください。lightspeed in とも呼ばれます。
要素が高速で移動しているように斜めに傾いたまま横から勢いよく飛び込み、傾きを一度だけ反対側へ行き過ぎさせてから、着地とともにまっすぐになるようにしてください。速くドラマチックに、最後は減速させてください。
画面外にある間に横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。Hoverのほかのモーション
A
マウスを乗せてください
Speech Bubble (吹き出し)
別名 Bubble
ホバーすると、要素の一辺に吹き出しの小さな三角形が現れます。
使いどころ
タブ、ツールチップ
[適用する場所]に吹き出し(Speech Bubble)のホバーエフェクトを追加してください。バブル(bubble)とも呼ばれます。
要素の一辺の裏から小さな三角形のしっぽがスライドして出てきて吹き出しの形になり、ポインターが離れたら引っ込むようにしてください。素早くなめらかに。
しっぽは要素と同じ色にしてひとつの形に見えるようにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると、要素の縁の内側に内枠の線が現れます。
使いどころ
ボタン、カード
[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。ABC
マウスを乗せてください
Underline Reveal (アンダーラインリビール)
別名 Overline Reveal, Reveal
線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。
使いどころ
ナビゲーションリンク、ボタン
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。