ブラーアップ — 動きの伝え方辞典

media

blur-up / progressive image loading

ブラーアップ

ぼけた低解像度画像(LQIP)を先に見せ、本画像の読み込み完了でシャープに切り替える読み込み演出。体感の待ち時間を減らしつつ、アスペクト比の固定でCLS(レイアウトのずれ)を防ぐところまでが本題。

01 — Demo video

Play live →

02 — Prompt template

画像の読み込みに blur-up(LQIP)を実装してください。

- 枠に aspect-ratio を固定で指定し、読み込みの前後でレイアウトが動かない(CLS 0)ようにする
- 先に低解像度のプレースホルダ(縮小画像・blurDataURL等)を filter: blur({{blur}}px) + scale(1.06) で表示する
- 本画像の onload を検知したら、{{duration}}s の ease-out で blur(0)・scale(1) に切り替える
- 枠に overflow: hidden を指定し、blurで滲んだ縁を枠の外に隠す(scaleを併用する理由)
- アニメーションさせるのは filter と transform のみ(リフロー禁止)
- prefers-reduced-motion 時はトランジションなしで、読み込み完了と同時に本画像へ即時切り替える

画像の読み込みに blur-up(LQIP)を実装してください。

- 枠に aspect-ratio を固定で指定し、読み込みの前後でレイアウトが動かない(CLS 0)ようにする
- 先に低解像度のプレースホルダ(縮小画像・blurDataURL等)を filter: blur({{blur}}px) + scale(1.06) で表示する
- 本画像の onload を検知したら、{{duration}}s の ease-out で blur(0)・scale(1) に切り替える
- 枠に overflow: hidden を指定し、blurで滲んだ縁を枠の外に隠す(scaleを併用する理由)
- アニメーションさせるのは filter と transform のみ(リフロー禁止)
- prefers-reduced-motion 時はトランジションなしで、読み込み完了と同時に本画像へ即時切り替える

画像の読み込みに blur-up(LQIP)を実装してください。

- 枠に aspect-ratio を固定で指定し、読み込みの前後でレイアウトが動かない(CLS 0)ようにする
- 先に低解像度のプレースホルダ(縮小画像・blurDataURL等)を filter: blur({{blur}}px) + scale(1.06) で表示する
- 本画像の onload を検知したら、{{duration}}s の ease-out で blur(0)・scale(1) に切り替える
- 枠に overflow: hidden を指定し、blurで滲んだ縁を枠の外に隠す(scaleを併用する理由)
- アニメーションさせるのは filter と transform のみ(リフロー禁止)
- prefers-reduced-motion 時はトランジションなしで、読み込み完了と同時に本画像へ即時切り替える

03 — Params

blur(初期ぼかし px) — 範囲 4〜40 / 初期 20
16〜24pxが目安。小さいと「ピンボケ画像」にしか見えず、読み込み演出だと伝わらない。
duration(シャープ化 s) — 範囲 0.2〜2 / 初期 0.8
0.6〜1sが自然。長すぎると本画像が届いているのに待たせる演出になる。

04 — Vocab

LQIP — Low Quality Image Placeholder。数KBの縮小画像を先に出す手法。Next.jsのblurDataURLはこれの自動生成版。
CLS — Cumulative Layout Shift。読み込みで要素がずれる量の指標。枠のaspect-ratio固定(またはwidth/height属性)が最も効く対策。
縁のにじみ — filter: blurは要素の縁の外側まで滲む。scale(1.05前後)で一回り大きくし、overflow: hiddenの枠外に追い出して隠す。
onload — 画像の読み込み完了イベント。blurを外すトリガーは時間ではなくこれ。キャッシュ済みに備えて img.complete も併せて見る。

05 — NG → OK examples

言い方: 「「画像をぼかしから読み込む感じにして」」

なぜNG: 読み込み完了の検知(onload)がなく、固定タイマーでぼかしを外すだけの実装が返ってきやすい。回線が遅いとぼけた画像のまま止まり、速いと無意味に待たされる。アスペクト比の固定も抜けてCLSが出る。

言い方: 「「blur-up(LQIP)を実装。aspect-ratio固定でCLS 0、プレースホルダをblur(20px)+scale(1.06)で表示、img.onloadをトリガーに0.8s ease-outでblur(0)/scale(1)へ。overflow:hiddenで縁のにじみを隠す」」

なぜOK: 切替のトリガー(onload)・CLS対策・縁の処理まで指定している。「なぜscaleを併用するか」まで書くと、実装時に勝手に省かれない。