実績数値カウントアップセクション

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

このパーツは、実績の数値が0から目標値まで増えていくカウントアップ表示の実績セクションです。各数値には data-target 属性で目標値を持たせ、要素が画面に入ったタイミングを IntersectionObserver で検知してアニメーションを開始します。常時動かすのではなく、見えたときに一度だけ走るため、ページを開いた瞬間に演出が終わってしまうことを防ぎます。数値の下には単位とラベルが付き、暗いグラデーション背景に淡色の数字が映えます。

向いている場面

「累計制作実績」「顧客満足度」「最短納期」「業界経験年数」など、信頼につながる数字を見せたい場面に向きます。コーポレートサイトの実績紹介、サービスの導入数アピール、採用ページの社内データ提示などで、訪問者に規模や実績を直感的に伝えられます。

カスタマイズと注意点

• 数値を変えるときは data-target の値を書き換えます。表示初期値は0のままにしておくと演出が成立します。
• 項目数は stats__item の増減で調整できます。グリッドは auto-fit なので自動で並び替わります。
• JavaScriptが無効な環境では数字が0のまま見える可能性があるため、重要な数値はラベルからも内容が伝わるようにしておくと安心です。

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