カウントアップアニメーション実績セクション

このパーツの使いどころと実装ポイント

このパーツは、スクロールで表示されたタイミングに数字が0から増えていくシンプルなカウントアップ実績セクションです。各数値には data-count 属性で最終値を持たせ、IntersectionObserver で要素が画面に入ったのを検知してアニメーションを開始します。グリッドは標準で2列、画面幅640px以上で4列に切り替わるため、スマートフォンでは2×2、パソコンでは横一列に並びます。青系のベタ背景に白文字を重ねた、装飾を抑えた構成です。

向いている場面

「導入企業数」「顧客満足度」「業界経験年数」「専門スタッフ数」といった信頼指標を端的に見せたい場面に向きます。サービスサイトのトップ、会社案内、採用ページなどで、数字を主役にして規模感を伝えたいときに使えます。前後のセクションとの区切りを兼ねた帯としても機能します。

カスタマイズと注意点

• 数値を変えるときは data-count の値を書き換え、要素の中身は0のままにしておくと演出が成立します。
• パーセントや「年」などの単位はラベル側で表現しているため、単位の付け方を統一すると見た目が整います。
• JavaScriptが動かない環境では0表示のままになる可能性があるので、ラベルだけでも意味が伝わるようにしておくと安心です。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。