Blur-Up Placeholder (ブラーアッププレースホルダー)
別名 LQIP, Blur placeholder, Progressive image load
画像の小さなぼかし版が先に場所を埋め、本来の画像が読み込まれるとくっきりします。
使いどころ
ヒーロー画像、ギャラリー
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にブラーアッププレースホルダー(Blur-Up Placeholder)の画像読み込み効果を追加してください。LQIP、ブラープレースホルダー(blur placeholder)とも呼ばれます。
画像の小さく強くぼかした版をすぐに画像の場所に表示し、本来の画像が読み込まれたら、なめらかにやや素早くくっきりさせてください。
画像の正確なサイズをあらかじめ確保して表示時に何もずれないようにし、ぼかしの端が枠からはみ出さないように切り取ってください。似ているモーション
ABCD
Blur In (ブラーイン)
別名 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。
使いどころ
見出しやヒーローテキストの表示
[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。Pulse Placeholder (パルスプレースホルダー)
別名 Skeleton pulse, placeholder-glow
グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。
使いどころ
スケルトンスクリーン
[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。ABCDEFGHIJKL
中をスクロールしてください
Progressive Blur (プログレッシブブラー)
別名 Gradient blur edge
ぼかしの強さが端に向かって徐々に増し、コンテンツが柔らかく消えていきます。
使いどころ
スクロールコンテナの端、ヘッダー
[適用する場所]にプログレッシブブラー(Progressive Blur)の端を追加してください。グラデーションブラーエッジ(gradient blur edge)とも呼ばれます。
端に向かってスクロールするコンテンツが、くっきりした線で切れるのではなく、なめらかに徐々にぼやけて柔らかくなるようにしてください。
ぼかしはその先にまだコンテンツがある端だけに表示し、ぼかした部分がクリックやスクロールを妨げないようにしてください。Loading & Progressのほかのモーション
Bouncing Dots (バウンシングドット)
別名 Dots loader, Ellipsis loader, Three-dot loader
並んだドットが順番に弾んだり、フェードしたり、拡大縮小したりします。
使いどころ
インラインの読み込み、チャットの待ち時間
[適用する場所]にバウンシングドット(Bouncing Dots)を追加してください。ドットローダー(dots loader)、スリードットローダー(three-dot loader)とも呼ばれます。
ドットが軽く弾むリズムで一つずつ跳ねて着地し、少し間を置いてから繰り返すようにしてください。
ループはつなぎ目なく続け、スクリーンリーダー向けにステータスのラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Button Loading State (ボタンローディングステート)
別名 Spinner button, Loading button, Button spinner, Submit loading state
処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。
使いどころ
フォーム送信、非同期の操作
[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。Circular Spinner (サーキュラースピナー)
別名 Spinner, Throbber, Circular indeterminate
リングや円弧が回り続け、読み込み中であることを示します。
使いどころ
ボタン、ページの読み込み
[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。