カウントアップ ナンバー
カウントアップ ナンバーは、数字が 0 から目標値まで勢いよく増えていく、実績や指標を印象的に見せる演出です。各数字は data-target に最終値を持ち、表示領域に入ったことを IntersectionObserver が検知してからアニメーションを開始します。
解説
カウントアップ ナンバーは、数字が 0 から目標値まで勢いよく増えていく、実績や指標を印象的に見せる演出です。各数字は data-target に最終値を持ち、表示領域に入ったことを IntersectionObserver が検知してからアニメーションを開始します。増加処理は setInterval で短い間隔ごとに少しずつ値を足し、桁区切りを付けながら表示を更新し、目標に達したら停止します。一度動いたら unobserve で監視を外し、再生は一回きりにしています。
映える使い方
- 導入社数や満足度など、サービスの実績を示すセクション
- 会社案内や採用ページの数字で語る紹介
- キャンペーンの累計件数や達成率の見せ場
増える速さはアニメーションの総時間で、発火するタイミングは交差の threshold で調整します。表示は桁区切り付きで読みやすく、等幅の数字指定でガタつきを抑えています。注意点として、動きが苦手な利用者向けに prefers-reduced-motion で最終値を即表示する分岐を用意すると親切です。数字そのものは本文として残るため、読み上げや SEO の妨げにもなりません。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
増えるスピードや到達する数値を変えられますか
到達する数値は各要素の data-target に書いた値で決まります。増える速さはアニメーション全体の時間を変えれば調整でき、短くすれば速く、長くすればゆっくり数えあがります。
画面に入るたびに何度も再生されますか
いいえ、一度表示されてアニメーションが始まると監視を解除するため、再生は一回きりです。スクロールで戻ってきても再び数えなおすことはありません。