プリローダーカウンター — 動きの伝え方辞典

preloader counter / loading percentage

プリローダーカウンター

サイト初回訪問時に0→100%の数値が駆け上がり、完了と同時に幕が開くAwwwards定番のオープニング。世界観への期待値を上げる演出だが、正体はただの待ち時間。カウントと幕開けの合計3秒以内が絶対条件になる。

01 — Demo video

Play live →

02 — Prompt template

サイト初回表示に preloader counter を実装してください。

- 画面全体を覆うオーバーレイの右下に 0〜100 の数値と%を表示する
- {{duration}}s かけて expo-out でカウントアップする(rAFの経過時間から進捗を計算。setIntervalの+1は不可)
- 100 に到達したらオーバーレイを transform: translateY(-100%) で {{curtain}}s、cubic-bezier(0.76, 0, 0.24, 1) で引き上げて本編を見せる
- カウント+幕開けの合計は3秒以内に収める。実際の読み込みが遅い場合のみ100%で待機する
- 数値に font-variant-numeric: tabular-nums を指定し、桁のガタつきを防ぐ
- 幕は top や height ではなく transform で動かす(リフロー禁止)
- sessionStorage で初回訪問のみ表示し、2回目以降はスキップする
- prefers-reduced-motion 時はプリローダーを表示せず本編を即表示する

サイト初回表示に preloader counter を実装してください。

- 画面全体を覆うオーバーレイの右下に 0〜100 の数値と%を表示する
- {{duration}}s かけて expo-out でカウントアップする(rAFの経過時間から進捗を計算。setIntervalの+1は不可)
- 100 に到達したらオーバーレイを transform: translateY(-100%) で {{curtain}}s、cubic-bezier(0.76, 0, 0.24, 1) で引き上げて本編を見せる
- カウント+幕開けの合計は3秒以内に収める。実際の読み込みが遅い場合のみ100%で待機する
- 数値に font-variant-numeric: tabular-nums を指定し、桁のガタつきを防ぐ
- 幕は top や height ではなく transform で動かす(リフロー禁止)
- sessionStorage で初回訪問のみ表示し、2回目以降はスキップする
- prefers-reduced-motion 時はプリローダーを表示せず本編を即表示する

サイト初回表示に preloader counter を実装してください。

- 画面全体を覆うオーバーレイの右下に 0〜100 の数値と%を表示する
- {{duration}}s かけて expo-out でカウントアップする(rAFの経過時間から進捗を計算。setIntervalの+1は不可)
- 100 に到達したらオーバーレイを transform: translateY(-100%) で {{curtain}}s、cubic-bezier(0.76, 0, 0.24, 1) で引き上げて本編を見せる
- カウント+幕開けの合計は3秒以内に収める。実際の読み込みが遅い場合のみ100%で待機する
- 数値に font-variant-numeric: tabular-nums を指定し、桁のガタつきを防ぐ
- 幕は top や height ではなく transform で動かす(リフロー禁止)
- sessionStorage で初回訪問のみ表示し、2回目以降はスキップする
- prefers-reduced-motion 時はプリローダーを表示せず本編を即表示する

03 — Params

duration(カウント時間 s) — 範囲 0.5〜4 / 初期 1.8
0→100の所要時間。1.5〜2sが目安。幕開けと合わせて3秒を超えたら削る。
curtain(幕開け時間 s) — 範囲 0.3〜2 / 初期 0.8
100到達後にオーバーレイが引き上がる時間。0.6〜1sが気持ちいい。

04 — Vocab

プリローダー — 本編表示前に挟む読み込み演出の総称。世界観の予告編であると同時に、ユーザーにとっては純粋な待ち時間。
幕開け(curtain reveal) — カウント完了後にオーバーレイを引き上げて本編を見せる動き。translateYで動かし、easeは強めの減速系が定石。
体感待ち時間 — 実際の秒数ではなくユーザーが感じる長さ。数値が動いている間は短く感じるが、3秒を超えると逆効果になる。
sessionStorage — 「初回訪問のみ表示」の制御に使うブラウザ保存領域。タブを閉じるまで残るため、サイト内回遊中の再表示を防げる。

05 — NG → OK examples

言い方: 「「最初にかっこいいローディング画面を出して」」

なぜNG: 何秒待たせるか・何と連動するか・毎回出すのかが全部未定義。実読み込みと無関係に5秒回り続ける演出や、ページ遷移のたびに出るプリローダーが返ってきて、直帰率を確実に上げる。

言い方: 「「preloader counterを実装。0→100を1.8s expo-out、右下にtabular-numsで表示、完了後translateY(-100%)を0.8sで幕開け、合計3秒以内、sessionStorageで初回のみ、reduced-motion時は非表示」」

なぜOK: 時間・イージング・幕開けの実装方式・表示頻度まで指定している。「初回のみ」と「合計3秒以内」の2つがUX事故を防ぐ生命線。