Progressive Blur (プログレッシブブラー)
別名 Gradient blur edge
ぼかしの強さが端に向かって徐々に増し、コンテンツが柔らかく消えていきます。
使いどころ
スクロールコンテナの端、ヘッダー
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にプログレッシブブラー(Progressive Blur)の端を追加してください。グラデーションブラーエッジ(gradient blur edge)とも呼ばれます。
端に向かってスクロールするコンテンツが、くっきりした線で切れるのではなく、なめらかに徐々にぼやけて柔らかくなるようにしてください。
ぼかしはその先にまだコンテンツがある端だけに表示し、ぼかした部分がクリックやスクロールを妨げないようにしてください。似ているモーション
ABC
ポインターを動かしてください
Focus Cards (フォーカスカード)
別名 Blur siblings on hover, Hover focus blur, Card hover effect
ホバーしたカードだけがくっきり残り、ほかのカードはぼやけて暗くなります。
使いどころ
カードグリッド、ギャラリー
[適用する場所]にフォーカスカード(Focus Cards)のエフェクトを追加してください。ブラーシブリングオンホバー(blur siblings on hover)、ホバーフォーカスブラー(hover focus blur)、カードホバーエフェクト(card hover effect)とも呼ばれます。
ポインターがカードに乗っている間は、そのカードだけがくっきりしたまま、ほかのカードがぼやけて暗くなり少し縮むようにしてください。すべてなめらかにフェードし、ポインターが離れたら元に戻します。
キーボードフォーカスでも同じように強調し、何もホバーしていないときはすべてのカードをくっきり読みやすく保ってください。Blur-Up Placeholder (ブラーアッププレースホルダー)
別名 LQIP, Blur placeholder, Progressive image load
画像の小さなぼかし版が先に場所を埋め、本来の画像が読み込まれるとくっきりします。
使いどころ
ヒーロー画像、ギャラリー
[適用する場所]にブラーアッププレースホルダー(Blur-Up Placeholder)の画像読み込み効果を追加してください。LQIP、ブラープレースホルダー(blur placeholder)とも呼ばれます。
画像の小さく強くぼかした版をすぐに画像の場所に表示し、本来の画像が読み込まれたら、なめらかにやや素早くくっきりさせてください。
画像の正確なサイズをあらかじめ確保して表示時に何もずれないようにし、ぼかしの端が枠からはみ出さないように切り取ってください。Background & Ambientのほかのモーション
Retro Grid (レトログリッド)
別名 Perspective grid, Synthwave grid
傾いた遠近グリッドが、シンセウェーブの床のように手前へスクロールしてきます。
使いどころ
レトロ・未来的なヒーロー
[適用する場所]にレトログリッド(Retro Grid)の背景を追加してください。パースペクティブグリッド(perspective grid)、シンセウェーブグリッド(synthwave grid)とも呼ばれます。
奥へ傾いた遠近のグリッドの床が手前へ一定の速さでスクロールし、地平線に向かってフェードアウトするようにしてください。なめらかに、終わりなく。
線が飛ばないよう継ぎ目のないループにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスクロールを止めてください。A
Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。ABC
Sparkles (スパークル)
別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
使いどころ
見出し、プレミアム感のあるアクセント
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。