← 一覧へ

やってみよう「もう一度」を押すと、数字が増えていく様子を何度でも見られます

アニメーション・演出マイナー（知る人ぞ知る）

カウントアップアニメーション

Count-up Animation / Number Ticker

画面に出たとき、数字が 0 からぐんぐん増えていって、最後の数字でピタッと止まる。

別名数字のカウントアップナンバーアニメーション数値アニメーションNumber Ticker

どこで使われている？

よく見かける場所
企業サイトの実績、寄付サイト、アプリの紹介ページ
使うとよい場面
利用者数や実績の数字を印象的に見せたいとき
避けたい場面
すぐ読みたい正確な数字（家計簿の残高など）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「カウントアップアニメーション（Count-up Animation / Number Ticker）」を実装してください。

動き：数値を表示するとき、0から目標の数値まで約1.5秒かけて数字を増やしていく。最初は速く、最後はゆっくりになるように変化させ、目標の数値でぴったり止める。桁区切りのカンマも付ける。

使う部品：requestAnimationFrame で数値を少しずつ書き換え
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならrequestAnimationFrame で数値を少しずつ書き換え
iPhoneアプリなら.contentTransition(.numericText())
AndroidアプリならanimateIntAsState
FlutterならTweenAnimationBuilder<int>
React Nativeならreact-native-reanimated で値を動かして表示

似ているもの・一緒に使うもの