【Next.js】数字がカウントアップするセクションの作り方
公開日: 2026年9月12日 · 読了目安 8 分
Next.js で実績数字をカウントアップ表示する方法。本当に必要か、Intersection Observer、完成セクションの流用。数字が弱い理由も解説します。
先に結論：数字の強さは、動かすことより単位と出典
0から3秒かけて増える数字は、よくある演出です。訪問者が覚えるのは、単位（社、%、時間）と、何の数字かです。出典が無い大きな数字は、動かしても弱いままです。
作り方は3つです。最初から最終値を出す。画面に入ったときだけカウントする。完成している数字帯を載せる。
reduced-motion では最終値を最初から出します。
弱く見える3つの理由
1つ目は、数字だけ大きく、キャプションが曖昧なことです。「導入社数」なのか「月間イベント」なのかを書いてください。
2つ目は、4つ以上並べることです。3つまでにします。
3つ目は、ヒーローでもカウントすることです。LCP と注意が散ります。実績帯はヒーローの下です。
方法1：動かさない
最終値を大きく出し、単位を小さく添えます。多くの BtoB LP はこれで足ります。演出より信頼です。
方法2：画面内で一度だけ増やす
Intersection Observer か whileInView で開始します。requestAnimationFrame で easing します。何度もスクロールするたびに0に戻さないでください。
方法3：完成している数字帯を載せる
タイポ、区切り、入場まで揃った塊は、数字を大きくするだけでは出ません。
DesignLayer でライブ確認し、数字とキャプションだけ差し替えてください。https://design-layer.com/components
公開前に、数字のファクトチェックをしてください。AI やプレースホルダの値をそのまま出さないことです。