プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にシャッターフィル(Shutter Fill)のホバーエフェクトを追加してください。シャッター(shutter)とも呼ばれます。
新しい背景色が中央の縦線から両側へシャッターのように開き、ポインターが離れたら中央へ閉じるようにし、その間ラベルの色も読みやすい色に切り替えてください。なめらかに素早く。
塗りは要素の内側で切り取ってラベルをその上に置き、キーボードフォーカスでも同じ効果を出してください。似ているモーション
A
マウスを乗せてください
ホバーすると要素の内側で矩形が広がったり縮んだりして、背景が切り替わります。
使いどころ
ボタン
[適用する場所]にレクタングルフィル(Rectangle Fill)のホバーエフェクトを追加してください。
内側の矩形が中心へ縮むにつれて新しい背景色が四辺から閉じるように広がり、ポインターが離れると再び開いて戻るようにし、その間ラベルの色も読みやすいように切り替えてください。滑らかで素早く。
ラベルは塗りの上に置き、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
Background Sweep (背景スイープ)
別名 Background Fill, Slide Fill
ホバーすると、色付きの背景が片方の端から要素全体をなぞるように広がります。
使いどころ
ボタン、メニューリンク
[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Radial Fill (ラジアルフィル)
別名 Circle expand
ホバーすると色付きの円が中心から広がって、または中心へ縮んで要素を塗りつぶします。
使いどころ
ボタン
[適用する場所]にラジアルフィル(Radial Fill)のホバーエフェクトを追加してください。サークルエクスパンド(circle expand)とも呼ばれます。
新しい色の円が中心から滑らかに広がって要素を塗りつぶし、ポインターが離れると中心へ縮んで戻るようにし、その間ラベルの色も読みやすいように切り替えてください。
円は要素の形の内側に収まるよう切り抜き、ラベルは円の上に置いて、キーボードフォーカス時にも同じ効果を出してください。A
B
クリックしてください
Curtain / Panel Wipe (カーテン/パネルワイプ)
別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels
塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。
使いどころ
ポートフォリオサイトや制作会社サイトのページ移動
[適用する場所]にカーテン/パネルワイプ(Curtain / Panel Wipe)のページトランジションを追加してください。ページワイプ(page wipe)、スタッガードパネル(staggered panels)とも呼ばれます。
塗りつぶしのパネルが1枚ずつ順に画面を横切って古いページを覆い、完全に覆われている間にページを切り替え、パネルはそのまま画面外へ抜けて新しいページを見せるようにしてください。大胆でなめらかに。
パネルが古いページを覆う前に新しいページを見せないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。Hoverのほかのモーション
A
マウスを乗せてください
ホバーすると要素が数ピクセル下がり、ページに押し込まれたように見えます。
使いどころ
ボタン
[適用する場所]にシンク(Sink)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が少し下がってそのまま留まり、ページに押し込まれたように見せ、離れたら元の位置に戻るようにしてください。なめらかに、弾まずに。
周りのレイアウトはずらさずに見た目だけを動かし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
ホバーすると要素が横方向に斜めにゆがみます。
使いどころ
ボタン、タグ
[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Speech Bubble (吹き出し)
別名 Bubble
ホバーすると、要素の一辺に吹き出しの小さな三角形が現れます。
使いどころ
タブ、ツールチップ
[適用する場所]に吹き出し(Speech Bubble)のホバーエフェクトを追加してください。バブル(bubble)とも呼ばれます。
要素の一辺の裏から小さな三角形のしっぽがスライドして出てきて吹き出しの形になり、ポインターが離れたら引っ込むようにしてください。素早くなめらかに。
しっぽは要素と同じ色にしてひとつの形に見えるようにし、キーボードフォーカスでも同じ効果を出してください。