アニメーション数値実績セクション
このパーツは、実績やKPIを 0からカウントアップして見せる数値セクション です。各数字には data-target 属性で目標値を持たせ、JavaScript の IntersectionObserver でその要素が画面内に入った瞬間にアニメーションを開始します。
このパーツの使いどころと実装ポイント
このパーツは、実績やKPIを0からカウントアップして見せる数値セクションです。各数字には data-target 属性で目標値を持たせ、JavaScript の IntersectionObserver でその要素が画面内に入った瞬間にアニメーションを開始します。カードは display:grid の repeat(4,1fr) で4枚を均等に横並びにし、数字・単位・ラベルの3要素で構成します。数字には font-variant-numeric:tabular-nums を当て、カウント中に桁が動いても横幅が揺れないようにしているのが実装上の工夫です。
向いている場面
- コーポレートサイトの「支援実績○社」「顧客満足度○%」の訴求
- SaaS や採用ページで導入数・継続率などの数値を印象づけたいとき
- イベント・キャンペーンの参加人数や達成率の可視化
カスタマイズと注意点
数値・単位・ラベルを書き換えるだけで流用でき、data-target の値がそのまま到達値になります。カードを4枚から増減する場合は grid-template-columns の列数を合わせて変更してください。モバイルでは2×2グリッドに切り替える設計です。注意点として、カウントアップは視覚効果なので、JavaScript が無効な環境でも 0 のまま残らないよう初期値に実数を入れておくか、フォールバックを用意すると安心です。誇張した数字を入れると信頼を損なうため、実数または根拠のある数値を使ってください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
カウントアップはページを開いた瞬間に動きますか？
いいえ。IntersectionObserverを使い、その数値カードが実際にスクロールで画面内へ入ったタイミングで開始します。ファーストビューより下に置いても、ユーザーがそこまで到達したときに初めて動くため、見られないまま再生が終わってしまうことを防げます。
数字が動くたびに横幅がガタつきませんか？
数字にtabular-nums（等幅数字）を指定しているため、0〜9のどの桁でも文字幅が一定です。これによりカウント中に値が変わっても表示幅が揺れず、レイアウトが安定します。フォントを変更する場合も、等幅数字に対応した書体を選ぶとこの効果を保てます。