売上や登録者数などの数字を、0から目標の値まで増やして見せる演出です。
テキストレイヤーの「ソーステキスト」にエクスプレッションを書くと、キーフレームを打たずに作れます。
- 基本：Math.round(linear(time, 0, 2, 0, 1000))
- 3桁ごとのカンマ：正規表現で「,」を入れる
- 小数点：toFixed(1) で桁をそろえる
- キーフレームで動かしたい：スライダー制御と組み合わせる
この記事の式は、After Effectsのエクスプレッション（JavaScriptエンジン）向けです。
2026年10月14日、Windows 11 Pro（10.0.26200）、After Effects 26.5（Build 89）日本語版・JavaScriptエンジンで検証しました。本文の基本・桁区切り・小数・％・スライダーの式をAE本体に適用し、値と描画を確認しています。
基本の書き方
まず制作中のコンポを複製するか、960×540・24fps・4秒の練習用コンポジションを作ります。「レイヤー」→「新規」→「テキスト」で文字を作り、見える色とサイズにします。今回の数値表示はConsolas・48px、レイヤーのIN点は0秒です。
- テキストレイヤーを作り、数字を1つ入力する
- 「テキスト」→「ソーステキスト」のストップウォッチを Alt（Macは Option）を押しながらクリックする
- 入力欄の既存文字をすべて選択して次の式へ置き換え、欄の外側をクリックして確定する
var startTime = 0;
var endTime = 2;
var startNum = 0;
var endNum = 1000;
var n = startNum;
if (endTime > startTime) {
n = linear(time, startTime, endTime, startNum, endNum);
}
String(Math.round(n));linear は、time が0秒から2秒に進む間に、0から1000へ一定の速さで変わる値を返します。
0秒より前は最初の数、2秒より後は最後の数で止まります。
Math.round で整数にしてから文字列を返します。時刻は有限の数値で、終了時刻を開始時刻より後に設定します。逆順または同時刻にすると、この例は開始値の表示を保ちます。
だんだん遅くして止める
linear を ease に変えると、動き始めと止まる前がゆっくりになります。
Math.round(ease(time, 0, 2, 0, 1000));最後だけゆっくりにしたいときは easeOut です。0→1000を0〜2秒で数える式で、AE本体の1秒時点はlinearが500、easeが500、easeOutが625でした。easeは始まりと終わり、easeOutは終わり側で減速します。
3桁ごとにカンマを入れる
var n = Math.round(linear(time, 0, 2, 0, 1234567));
String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");数字を文字にして、後ろから3桁ごとに「,」を入れています。
| 時間 | 数字 | カンマつき |
|---|---|---|
| 0秒 | 0 | 0 |
| 0.5秒 | 308642 | 308,642 |
| 1秒 | 617284 | 617,284 |
| 2秒 | 1234567 | 1,234,567 |
| 3秒 | 1234567 | 1,234,567 |
toLocaleString() でも桁区切りを付けられますが、エクスプレッションのエンジンによって結果が変わるおそれがあるため、ここでは正規表現を使っています。
小数点を表示する
linear(time, 0, 2, 0, 98.6).toFixed(1);toFixed(1) で、小数点以下を1桁にそろえます。
1秒のときは 49.3、2秒のときは 98.6 になります。
小数点とカンマを両方つけるときは、整数の部分だけにカンマを入れます。
var s = linear(time, 0, 2, 0, 1234567.89).toFixed(2);
var p = s.split(".");
p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "." + p[1];この式をAE 26.5で表示すると、1秒（24フレーム目）は617,283.94、2秒（48フレーム目）は1,234,567.89でした。24fpsでは1.3秒は31.2フレームに当たり、フレーム境界ではありません。比較する場合は、同じfpsとフレーム番号にそろえてください。
以下の2枚は2026年10月13日の別条件の作例です。到達値が12,500・123.45・100.0％なので、上の掲載式の到達値1,234,567.89などとは区別してください。
百分率の式は「linear(time,0,2,0,100).toFixed(1)+’%’;」で、1:00の時点では「6,250」「61.73」「50.0%」と表示されていました。
2:00では、「12,500」「123.45」「100.0%」になりました。
%や単位をつける
Math.round(linear(time, 0, 2, 0, 100)) + "%";後ろに文字をつなげるだけです。
「円」「人」なども同じように書けます。
"¥" + String(Math.round(linear(time, 0, 2, 0, 50000))).replace(/\B(?=(\d{3})+(?!\d))/g, ",");スライダーで動かす
数え方をキーフレームで細かく決めたいときは、スライダー制御を使います。
- テキストレイヤーに「エフェクト」→「エクスプレッション制御」→「スライダー制御」を足す
- スライダーの値にキーフレームを打つ（例：0秒で0、2秒で1000）
- ソーステキストに次の式を書く
Math.round(effect("スライダー制御")("スライダー"));英語版では effect("Slider Control")(“Slider”) です。
日本語版AE 26.5で、スライダーの0秒=0・2秒=1000をリニア補間にすると、表示は0秒「0」、1秒「500」、2秒「1000」でした。キーを選び、右クリックの「キーフレーム補間法」で時間補間を確認します。イージーイーズやグラフエディターで補間を変えると、途中の表示値も変わります。
うまくいかないとき
- 数字の幅が変わって左右に揺れる：等幅の数字があるフォントにするか、段落の揃えを右揃えにする
- エラーになる：式を書いたのが「ソーステキスト」か、スライダーの名前が式と同じかを見る
- カンマが入らない：数字を String() で文字にしてから replace しているかを見る
エクスプレッションのほかの記事は、After Effectsの使い方まとめからご覧いただけます。
カウントの条件と表示を確かめる練習
練習用テキストのソーステキストへ1例ずつ貼ります。
0→1000を0～2秒で数える基本式なら0秒「0」、1秒「500」、2秒「1000」です。
開始・終了値を1000→0にすると減算にも使えます。
2026年10月14日に、本文の式を1つずつAE本体へ適用して次の条件を確認しました。タイムライン左上の現在時刻に0:00:01:00を入力すると、24fpsの1秒へ移動できます。下の画面のBASICは500、COMMAは617,284、DECIMALは49.3、BOTHは617,283.94、PERCENTは50％です。
5つのテキストには、それぞれ本記事の基本式・桁区切り・小数1桁・小数とカンマ・整数％の式を適用しています。3秒でも各到達値の表示を保ち、式エラーはありませんでした。
| 条件 | AE 26.5の実測 | 確認する点 |
|---|---|---|
| 開始0・終了1000、1秒 | 500 | 通常の増加 |
| 開始1000・終了0、1秒 | 500 | 通常の減少 |
| 終了時刻=開始時刻 | 開始値 | 基本式のガード |
| -1234567に桁区切り | -1,234,567 | 符号を保持 |
| -1.5をMath.round | -1 | 負数の丸めに注意 |
負数の半端がちょうど0.5なら、Math.round(-1.5) は-1です。
正負対称の四捨五入が必要な用途では、この丸め方を使う前に表示仕様を決めます。
toFixed は文字列を返し、2進数の小数表現によって境界の丸めが予想と異なる場合があります。
合計計算や金額の確定処理には使わず、表示例として確認してください。
スライダー例の貼付先もソーステキストです。
エフェクトを追加した後、ピックウィップで参照文字列を作り、末尾の丸め処理を加えます。
戻すときは式を無効にするか保存した元の式を戻し、スライダーの練習キーも元の状態に戻します。
READMEの貼付先を確認し、1つずつ練習用プロパティに使います。
ダウンロードZIP全体の再検証は今回の対象外です。上の実測は、このページに掲載した式をAEへ適用した結果です。
まとめ
- ソーステキストに Math.round(linear(time, 0, 2, 0, 1000)) と書けば数え上がる
- 3桁ごとのカンマは正規表現で入れる
- 小数点は toFixed でそろえる
- 細かく動かすならスライダー制御と組み合わせる
参考：Adobe公式：エクスプレッション言語リファレンス（2026年10月14日確認）。linear・ease・easeOutの引数と補間仕様を参照しています。
よくある質問：After Effectsで数字をカウントアップさせるとき
数字をカウントアップさせる式は、どこに書きますか？
テキストレイヤーの「テキスト」→「ソーステキスト」のストップウォッチを、Alt（Macは Option）を押しながらクリックして、式を書きます。キーフレームを打たずに作れます。
カウントを減らす（カウントダウンする）には？
開始・終了値を入れ替えます。記事の例では、1000→0にすると減算にも使えます。0→1000を0～2秒で数える基本式なら、0秒は「0」、1秒は「500」、2秒は「1000」です。
最後だけゆっくり止めるには？
linearをeaseに変えると、動き始めと止まる前がゆっくりになります。最後だけゆっくりにしたいときはeaseOutを使います。
3桁ごとのカンマは、どう入れますか？
数字をString()で文字にしてから、正規表現で後ろから3桁ごとに「,」を入れます。カンマが入らないときは、String()で文字にしてからreplaceしているかを確認してください。toLocaleString()でも桁区切りを付けられますが、エクスプレッションのエンジンによって結果が変わる場合があります。
数字が変わるたびに左右に揺れて見えるときは？
等幅の数字があるフォントにするか、段落の揃えを右揃えにします。
小数点を表示したいときの注意点は？
toFixed(1)で桁をそろえます。ただしtoFixedは文字列を返し、2進数の小数表現によって境界の丸めが予想と異なる場合があります。合計計算や金額の確定処理には使わず、表示例として確認してください。
負の数を丸めるときの注意点は？
負数の半端がちょうど0.5なら、Math.round(-1.5)は-1です。正負対称の四捨五入が必要な用途では、この丸め方を使う前に表示仕様を決めてください。
エラーになるときや、この記事の確認範囲は？
式を書いたのが「ソーステキスト」か、スライダーの名前が式と同じかを見てください。また、終了時刻は開始時刻より後に設定します。逆順または同時刻にすると、基本式は開始値の表示を保ちます。2026年10月14日にAE 26.5で掲載式の値と描画、スライダー、減算、同時刻ガード、負数を確認しました。macOS、旧版、別フォント、ダウンロードZIP全体、動画書き出しは今回の検証範囲外です。
