JavaScriptだけで簡単実装！数値が動くカウントアップアニメーションの作り方

5月 23, 2025 5月 23, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトをちょっとだけ“動かす”ことで、ユーザーの印象に大きな違いが生まれるって、ご存じでしたか？

例えば、実績紹介や売上、訪問者数などの「数字」がスクロールに合わせてスーッとカウントアップしていく演出。
あの視覚効果、見ている側としても「おっ、動いてる！」と興味を引かれますよね!

しかもこの仕組み、実はJavaScriptだけで、意外とシンプルに実装できるんです。
今回は、外部ライブラリなしで、軽量かつ汎用的なカウントアップアニメーションを作る方法を、やさしく、しっかり解説します！

カウントアップアニメーションとは？

カウントアップアニメーションとは、ページ読み込みやスクロールに合わせて、0から指定した数値まで数字がアニメーション付きで増加していく動きのこと。

たとえば

「〇〇名が利用しています！」の人数表示
「開業から〇年」の経過年数
「売上実績〇万円」などのビジネス実績

このような見せ方に活用されることが多く、ページの信頼性や視覚的な訴求力をグッと高めてくれる便利な演出です。

まずはHTMLの基本構造

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

最初に、カウントアップする数字を表示するためのHTMLを用意しましょう。

 <div class="counter" data-target="1000">0</div>

このように、表示したい数値（最終的に1000までカウントアップさせたい）が data-target 属性に設定されています。
初期値は「0」。ここからJavaScriptで、目標値まで徐々に数値を増やしていくという仕組みです。

JavaScriptでアニメーションを実装

次に、JavaScriptでこのカウントアップ処理を実装していきましょう。
以下が基本のスクリプトです。

const counters = document.querySelectorAll(".counter");
counters.forEach((counter) => {
  counter.innerText = "0";
  const updateCount = () => {
    const target = +counter.getAttribute("data-target");
    const current = +counter.innerText;
    const increment = target / 100;
    if (current < target) {
      counter.innerText = `${Math.ceil(current + increment)}`;
      setTimeout(updateCount, 20);
    } else {
      counter.innerText = target;
    }
  };
  updateCount();
});

ポイントは以下の通りです