AIで数字がカウントアップするアニメーションを作る【JS生成】

「導入実績 1,200社」「満足度 98%」などの数字が0からカウントアップしていく演出。実績をアピールするセクションに使えるUIです。

方法①：既存のHTMLからJSを生成する

AIへのプロンプト例

以下のHTMLの各数字要素を、ページを表示したときに0から指定の数値まで
カウントアップするアニメーションにしてください。
Intersection Observerを使ってスクロールで見えたときに始まるようにしてください。

<div class="stats">
  <div class="stat">
    <span class="count" data-target="1200">0</span>社
  </div>
  <div class="stat">
    <span class="count" data-target="98">0</span>%
  </div>
  <div class="stat">
    <span class="count" data-target="15">0</span>年
  </div>
</div>

生成されたJS例

function countUp(el) {
  const target = parseInt(el.dataset.target, 10);
  const duration = 1500; // ミリ秒
  const start = performance.now();

  function update(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    // easeOutQuad（最初速く、最後ゆっくり）
    const eased = 1 - (1 - progress) * (1 - progress);
    el.textContent = Math.floor(eased * target).toLocaleString();
    if (progress < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      countUp(entry.target);
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('.count').forEach(el => observer.observe(el));

方法②：HTMLとセットで生成する

AIへのプロンプト例

スクロールで見えたときに数字がカウントアップするセクションを
HTML・CSS・JavaScriptでまとめて作ってください。
・数字は3つ（社数・満足度・年数）を横並びに配置
・数字は大きく、ラベルは小さいフォントで
・カウントは0からスタートし、1.5秒かけてゆっくり加速して終わる

ポイント

• data-target属性に目標値を設定するだけで、JSが自動で読み取ります
• カンマ区切りにしたい場合は「数値は3桁ごとにカンマ区切りで表示して」と伝えましょう