コピペで簡単！Studioで無料プランでできるカウントアップ実装ガイド ⏫

この記事は『Studio』のEmbed一つで完結する、フォント設定つきカウントアップ実装を"コピペで"導入できるようにまとめたものです。外部のHTMLやID設定は不要。Embedにそのまま貼るだけで動きます。

なぜカウントアップが効果的なのか？📈

数字の動きはそれだけで視線を引きつけます。例えば「導入社数」「累計来場者」「レビュー件数」などを0→目標値に滑らかに上昇させることで、実績や成長を直感的に伝えられます。テキストを1つ置くだけより滞在時間や注目度が上がりやすいのが魅力です。

完成コード（コピペ用・フォント設定済み）💡

このコードを『Studio』のEmbedにそのまま貼り付けるだけで動きます。フォント、サイズ、色、アニメーション時間をコメント部分で調整可能です。

<div style="all:initial; display:block; text-align:center;">

  <style>
    /* ===== 数字の見た目をここで調整 ===== */
    #count1 {
      font-family: "Arial", "Helvetica", sans-serif; /* ←フォント変更 */
      font-size: 48px;       /* ←フォントサイズ(px, em, remでもOK) */
      font-weight: 700;      /* ←太字: 400=普通, 700=太字 */
      color: #2b6cb0;        /* ←文字色（16進 or rgb） */
      line-height: 1.2;      /* ←行間 */
      display: inline-block;
    }
  </style>

  <!-- StudioのEMBED内に置く数字（初期は0） -->
  <span id="count1" data-to="5000" data-duration="2000">0</span>

  <script>
    (() => {
      const el = document.getElementById("count1");
      if (!el) return;

      // ==== 設定（data属性から読み込む） ====
      const to   = parseFloat(el.dataset.to || '1000');  // ゴール
      const from = parseFloat(el.dataset.from || '0');   // 開始
      const dur  = parseInt(el.dataset.duration || '1500', 10); // 時間(ms)
      const dec  = parseInt(el.dataset.decimals || '0', 10);    // 小数桁

      const format = v =>
        v.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

      const start = performance.now();

      function step(now) {
        const t = Math.min(1, (now - start) / dur);
        const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
        const val = from + (to - from) * eased;
        el.textContent = format(val);
        if (t < 1) requestAnimationFrame(step);
      }

      requestAnimationFrame(step);
    })();
  </script>

</div>

設置手順（『Studio』）🧩

1. Embedブロックを配置
2. 上記コードをそのままコピペ
3. 数字を変更 → <span>のdata-to="5000"を任意の数値へ
4. アニメーション時間を変更 → data-duration="2000"を調整
5. フォントや色を変更 → <style>内のCSSを編集
6. 公開して確認（プレビューでは正しく動作しない場合があります）

よく使うカスタマイズ集🛠️

• 桁区切りありの数値：自動で「1,234,567」形式に
• 小数点あり：data-decimals="1"で「1000.0」表示
• 接頭辞/接尾辞を追加：円や人を一緒に見せたいときは<span>の外にテキストを置く
• フォント変更：CSSのfont-familyをGoogle Fontsに差し替え

つまずきポイントと対処法🧯

• 動かない場合 → 公開環境で確認
• 文字化けする場合 → フォント指定を確認
• 数字が途中で止まる → data-toに半角数字以外が混ざっていないかチェック

用語ミニ解説📚

• Embed：『Studio』でHTML/JS/CSSを直接埋め込めるブロック。
• easeOutCubic：数字が最初は早く、最後はゆっくり止まるアニメーションの計算式。

事例イメージ & デモ🎥

Embedの中に<iframe>でカウントアップ用ページを埋め込み、実際に「5,000 Downloads」のように数字が動くデモを確認しながら実装を進めることができます。

まとめ：まずは1つ導入してみよう✅

Embed一つで導入完結！数字を動かすだけでページの印象は一気にプロっぽく変わります。

data-toを変えて色々な数値を動かしてみてください。累計利用者数、販売実績、レビュー件数…どんな数値も動かすと説得力アップ！