カウントアップ — 動きの伝え方辞典

text

count up / number counter

カウントアップ

数字が0から目標値まで駆け上がる動き。実績・導入社数・売上などのKPIセクションで、静的な数字より圧倒的に「積み上げた感」を出せる。スクロールで見えた瞬間に発火させるのが定石。

01 — Demo video

Play live →

02 — Prompt template

数値表示に count up を実装してください。

- 0 から 12,480 まで {{duration}}s かけてカウントアップする
- イージングは{{ease}}(進捗t 0→1に適用してから目標値に掛ける)
- requestAnimationFrame の毎フレーム、経過時間から進捗を計算して Math.round + toLocaleString でカンマ区切り表示
- 終了時は必ず最終値ちょうどで止める(丸め誤差で12,479のまま終わらせない)
- 桁のガタつきを防ぐため font-variant-numeric: tabular-nums を指定する
- prefers-reduced-motion 時はカウントせず最終値を即表示する

数値表示に count up を実装してください。

- 0 から 12,480 まで {{duration}}s かけてカウントアップする
- イージングは{{ease}}(進捗t 0→1に適用してから目標値に掛ける)
- requestAnimationFrame の毎フレーム、経過時間から進捗を計算して Math.round + toLocaleString でカンマ区切り表示
- 終了時は必ず最終値ちょうどで止める(丸め誤差で12,479のまま終わらせない)
- 桁のガタつきを防ぐため font-variant-numeric: tabular-nums を指定する
- prefers-reduced-motion 時はカウントせず最終値を即表示する

数値表示に count up を実装してください。

- 0 から 12,480 まで {{duration}}s かけてカウントアップする
- イージングは{{ease}}(進捗t 0→1に適用してから目標値に掛ける)
- requestAnimationFrame の毎フレーム、経過時間から進捗を計算して Math.round + toLocaleString でカンマ区切り表示
- 終了時は必ず最終値ちょうどで止める(丸め誤差で12,479のまま終わらせない)
- 桁のガタつきを防ぐため font-variant-numeric: tabular-nums を指定する
- prefers-reduced-motion 時はカウントせず最終値を即表示する

03 — Params

duration(カウント時間 s) — 範囲 0.5〜4 / 初期 1.6
1.5〜2sが読みやすい。長すぎると待たされ、短すぎると値が読めない。
ease(イージング) — 選択: linear / ease-out / expo-out（初期: ease-out）
linearは機械的。expo-outは序盤に一気に増えて最後にゆっくり着地する。

04 — Vocab

進捗t — 経過時間÷全体時間で出す0〜1の正規化時間。イージングはこのtに適用し、値には掛け算で反映する。
expo-out — 1-2^(-10t)。序盤に一気に進み終盤で減速する指数系イージング。カウンタでは「勢いよく増えて着地」の花形。
tabular-nums — 数字を等幅で描画するfont-variant-numericの値。1と8の幅が揃い、カウント中に桁がガタつかなくなる。
toLocaleString — 12480を"12,480"にするJSの標準API。桁区切りを自前で正規表現処理する必要はない。

05 — NG → OK examples

言い方: 「「数字がグワーッと増えるやつつけて」」

なぜNG: 時間・イージング・カンマ区切り・終了値の扱いが全部未定義。setIntervalで+1し続ける実装が返ってきて、大きい値だと終わらない・端数で止まるなど事故が起きがち。

言い方: 「「count upを実装。0→12,480を1.6s、ease-outで進捗に適用、rAFで経過時間から計算、toLocaleStringでカンマ区切り、終了時は最終値で確定、tabular-nums指定」」

なぜOK: 時間・イージング・表示形式・終了処理・桁揃えまで指定している。「経過時間から計算」の一言でフレームレート非依存の正しい実装になる。