カウントアップ数字

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

スクロールで画面に入ったとき、数字がゼロから目標値まで一気に増えていくカウントアップ型の実績セクションです。各数値は b 要素に data-to 属性で目標値を持たせ、JavaScript がその値まで段階的に書き換えることでアニメーションします。一般的には IntersectionObserver で「見えたタイミング」を検知し、そこで初めてカウントを開始する実装にします。レイアウトは grid の 3 列で、数字・単位・ラベルを縦に重ねて見せます。

向いている場面

創業年・社員数・導入実績・成長率など、数字そのものが説得材料になる場面に向きます。採用サイトの会社規模アピール、サービスの利用者数、店舗の来店実績などで、動きを伴うことで印象に残りやすくなります。トップページの中盤に置き、スクロールの手を止めさせる役割も担えます。

カスタマイズと注意点

• 初期表示の 0 をそのまま HTML に書いておくと、JavaScript が無効でも数字の枠組みは見えます。最終値もフォールバックとして用意しておくと安心です。
• カウントの所要時間は 1〜2 秒程度が自然です。長すぎると待たされる印象になります。
• 年号（2024 など）にはカンマ区切りを入れないなど、数値の種類で書式を分けます。

動きに敏感な利用者に配慮し、prefers-reduced-motion が指定された場合はアニメーションを省いて最終値を即表示する分岐を入れると、アクセシビリティが高まります。掲載する数値は必ず事実に基づいてください。

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