Count Up
カウントアップ
128
どんな動き？
数字が0から目標となる値まで一気に増えていくように見せるアニメーション。実際には途中のいくつかの数値を高速に切り替えて「カウントされている」様子を表現する。CountUp.jsというライブラリの定番機能として広く知られ、実績データや導入社数、売上金額などの数値を印象づけたいセクションでよく使われる。数字の勢いが説得力や信頼感を生み出す効果がある。
よく使う場所
実績セクション統計データダッシュボード料金表
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Count a number up from zero to its target value when the element enters the viewport.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Displayed value: 0
Animation:
The number rapidly increments through intermediate values toward the target, slowing as it approaches the final number.
Final state:
Displayed value: the target number (e.g. 128), held steady.
Timing:
duration: 1.2–1.6s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CountUp.jsGSAPJavaScriptanime.js
別名・関連ワード
Counter AnimationNumber CounterAnimated Number