アニメーション数値実績セクション
このパーツは、セクションが画面に入ったタイミングで数字がゼロから目標値まで カウントアップ する実績表示です。各数値は data-target 属性に最終値を持たせ、表示領域への到達を検知して加算アニメーションを動かします。
このパーツの使いどころと実装ポイント
このパーツは、セクションが画面に入ったタイミングで数字がゼロから目標値までカウントアップする実績表示です。各数値は data-target 属性に最終値を持たせ、表示領域への到達を検知して加算アニメーションを動かします。濃紺の背景に緑のアクセントで4つの指標を横並びにし、スマホでは2列に折り返すレスポンシブ設計です。
向いている場面
支援社数・満足度・継続年数などの数字で信頼を示したいBtoBサービス・コンサル、累計販売数や会員数を訴求するEC・アプリ、導入実績を見せたいSaaSに向きます。動きが付くことで数字に視線が集まりやすくなります。
カスタマイズと注意点
- 項目は
data-targetの値と単位・ラベルを書き換えるだけで差し替えられます - 「98%」「24h」のように単位はスパンで分けてあり、桁数が変わってもレイアウトが安定します
数字は誇張せず実数を入れてください。アニメーションは視覚効果なので、動きが苦手な利用者向けに最終値が必ず正しく表示される（途中で止まらない）ことを確認しましょう。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
表示する数値や単位は自由に変えられますか？
変えられます。各項目の data-target にカウントアップの目標値を入れ、隣の単位スパンとラベルのテキストを書き換えるだけです。社数・パーセント・年数・時間など、単位はそれぞれ別に設定できます。
数字が動かず0のまま止まることはありますか？
表示領域に入ったことを検知して動く仕組みのため、検知に対応していない古い環境では動かないことがあります。その場合でも最終値が正しく見えるよう、初期表示や代替表示を用意しておくと安心です。