アニメーション数値実績セクション
このパーツは、制作実績や満足度といった実績数字を4カラムで並べ、画面に入った瞬間に0からカウントアップする演出を加えたセクションです。各数字は data-target 属性に最終値を持ち、JSがその値まで段階的に増やして表示します。
このパーツの使いどころと実装ポイント
このパーツは、制作実績や満足度といった実績数字を4カラムで並べ、画面に入った瞬間に0からカウントアップする演出を加えたセクションです。各数字はdata-target属性に最終値を持ち、JSがその値まで段階的に増やして表示します。背景は濃紺から紫へのlinear-gradientで、白い数字とのコントラストを強く取り、ページの中で印象に残る帯として機能します。
向いている場面
- 会社の信頼性を数字で示すコーポレートサイト
- 導入社数や継続率を打ち出すSaaS・サービスサイト
- 受講者数や合格実績を見せたいスクール
カスタマイズの勘所
数字を変えるときは表示テキストの初期値（0）ではなくdata-targetの値を書き換えます。単位（件+・%・年+など）は別要素なので、数字と単位を取り違えないよう注意してください。カラム数を増減したい場合はgrid-template-columns:repeat(4,1fr)の数を調整し、狭い画面用の2カラム指定も合わせて見直します。
実装上の注意
カウントアップは見栄えの演出であり、JSが動かない環境でも最終値が読めることが大切です。実数と異なる数字を出すと信頼を損なうため、表示値は必ず事実に合わせてください。アニメーションを控えたいユーザーへの配慮として、過度に長い動きは避けると親切です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
数字が0のまま動かないときは何を確認すればよいですか?
data-target属性に最終値が入っているか、JSがそのセクションを監視できているかを確認してください。要素が画面に入ったことを検知してカウントを始める仕組みのため、初期状態で画面外にあることと、スクリプトが正しく読み込まれていることが前提になります。
カラム数を3つや5つに変えられますか?
変えられます。grid-template-columnsのrepeat(4,1fr)の数字を変更し、HTML側のstats-itemの数も合わせてください。スマホ用に指定されている2カラムの値も、新しい列数に応じて見直すと崩れません。