テキストアニメーターは、テキストレイヤーの文字を1文字ずつ、または1単語ずつ動かす機能です。
文字ごとにキーフレームを打たなくても、タイプライターのように表示したり、文字をばらばらに揺らしたりできます。
- アニメーター:何を変えるか(不透明度・位置・回転など)
- セレクター:どの文字にどれだけ効かせるか
- 範囲セレクター:開始・終了を動かして、効く範囲を移動させる
- ウィグリーセレクター:効き方をランダムに揺らす
- エクスプレッションセレクター:文字の番号を使って式で決める
この記事は、Adobe公式ヘルプ「Animating text」(2026年10月3日に公式資料を確認)にもとづいています。
After Effectsの画面での再現は含みません。
アニメーターとセレクターの関係
テキストアニメーターは、「アニメーター」と「セレクター」の組み合わせで動きます。
アニメーターで「不透明度を0にする」と決め、セレクターで「その変化をどの文字に効かせるか」を決める、という分担です。
よくあるやり方は、アニメーターの値を「最後の見た目」ではなく「変化させたい量」に設定し、セレクターを動かして効く範囲を変えることです。
アニメーターを足す
タイムラインでテキストレイヤーを選び、次のどちらかで足します。
- メニューの「アニメーション」→「テキストをアニメート」から、変えたいプロパティを選ぶ
- タイムラインのテキストレイヤーの「アニメーター」の横にある「アニメート」のメニューから選ぶ
足すと、アニメーターのグループと、初期のセレクター(範囲セレクター)がタイムラインに出てきます。
同じアニメーターに別のプロパティを足すときは、アニメーターのグループを選んでから「追加」のメニューで足します。
1文字ずつ表示する(タイプライター)
- テキストレイヤーに「不透明度」のアニメーターを足す
- アニメーターの「不透明度」を 0% にする(この時点で全部の文字が消える)
- 「範囲セレクター」を開き、「開始」の 0% にキーフレームを打つ
- 「高度」で単位をパーセント、基準を文字、シェイプを四角にし、滑らかさ(Smoothness)を0%にする。終了は100%、オフセットは0%にする
- 2秒後に移動して、「開始」を 100% にする
開始を0%から100%へ動かすと、選択範囲から外れた文字が元の不透明度へ戻ります。初期の滑らかさ100%では文字が徐々に切り替わるため、タイプライターとしては0%にします。
「開始」「終了」を文字数で考えたいときは、範囲セレクターの「高度」にある「単位」を「インデックス」にします。
範囲セレクターの主な設定
| 設定 | 決めること |
|---|---|
| 開始・終了(Start / End) | 効かせる範囲の始まりと終わり |
| オフセット(Offset) | 開始・終了で決めた範囲を、まとめてずらす量 |
| 基準(Based On) | 数える単位(文字・スペースを除く文字・単語・行) |
| シェイプ(Shape) | 範囲の端での効き方の形(四角・三角など) |
| イーズ(高)・(低)(Ease High / Low) | 効き始め・効き終わりの変化のなめらかさ |
| 順序をランダム化(Randomize Order) | 効かせる文字の順番をランダムにする |
「基準」を「文字」にすると、スペースも1文字として数えるので、単語の間で一瞬止まったように見えます。
止まるのが気になるときは「スペースを除く文字」にします。
ウィグリーセレクター
ウィグリーセレクターは、効き方を時間とともにランダムに揺らします。
位置や回転のアニメーターと組み合わせると、文字がばらばらに震える動きになります。
| 設定 | 決めること |
|---|---|
| 最大量・最小量(Max / Min Amount) | 揺れの幅 |
| ウィグル/秒(Wiggles/Second) | 1秒に何回揺れるか |
| 相関(Correlation) | 100%で全部の文字が同じように揺れ、0%でばらばらに揺れる |
| 次元を固定(Lock Dimensions) | 拡大・縮小などで、縦と横を同じ量だけ揺らす |
セレクターは、アニメーターのグループの「追加」→「セレクター」から、範囲・ウィグリー・エクスプレッションを選んで足します。
範囲セレクターの「順序をランダム化」は効かせる順番を、ウィグリーセレクターは値そのものをランダムにする、という違いがあります。
エクスプレッションセレクター
エクスプレッションセレクターは、1文字ごとに式を計算して、効かせる量を決めます。
「量」の初期の式は次のとおりです。
selectorValue * textIndex/textTotaltextIndex はその文字が何文字目か、textTotal は全部の文字数です。
同じselectorValueが各文字に入る条件なら、後ろの文字ほど割合が大きくなります。selectorValueは先にあるセレクターの値なので、範囲やウィグリーセレクターの状態で結果が変わります。
たとえば、1文字おきに効かせたいときは次のように書けます。
textIndex % 2 == 0 ? 100 : 0偶数番目の文字には100%、奇数番目には0%だけ効きます。
公式ヘルプは、エクスプレッションセレクターの例として、アニメーションプリセットの「Text Bounce」や「Inch Worm」を当ててみることを勧めています。
文字ごとの3D
テキストレイヤーで「文字単位の3D化」を有効にすると、アニメーターの位置・アンカーポイント・スケールに奥行きが加わり、X回転・Y回転も使えるようになります。
文字が1枚ずつ奥から飛んでくるような動きは、この設定と範囲セレクターの組み合わせで作ります。
テキストの縦書きと横書きの切り替えは、After Effectsのテキストを縦書き・横書きに切り替える方法で紹介しています。
5文字で選択範囲と式を確かめる練習
別名保存したプロジェクトの練習用テキストを「ABCDE」にし、上の不透明度アニメーターで0秒は非表示、2秒は全文表示になるか確認します。
うっすら表示される文字が残る場合は、シェイプ四角と滑らかさ0%を確認します。
ほかのアニメーターやセレクターを併用せずに始めます。
偶数だけに作用させる練習は、複製した別のアニメーターで範囲セレクターを外し、エクスプレッションセレクターの「量」に偶数判定の式を貼ります。
不透明度0%ならB・Dが消え、A・C・Eが残る条件です。
基準を単語・行に変えると番号の意味が変わるので、文字を対象にして比較します。
公式の初期式はAEの配列演算を使います。
標準JavaScriptへそのまま移植すると同じ計算にはなりません。
AEのmulで書く場合は次の例です。
量が3要素の配列でも、同じ比率で各成分を掛けます。
var ratio = textTotal > 0 ? textIndex / textTotal : 0;
mul(selectorValue, ratio);| 入力 | 計算例 | 条件 |
|---|---|---|
| textIndex=1、textTotal=5、量 [100,100,100] | [20,20,20] | mulの各成分 |
| textIndex=5、textTotal=5 | [100,100,100] | 末尾の割合 |
| textTotal=0 | [0,0,0] | ゼロ除算を避ける |
これらは公式仕様とローカル計算による確認で、AE画面の再現は未検証です。
戻すときは練習アニメーターを削除せず、その複製を無効にするか保存したプロジェクトへ戻します。
元の文字・セレクターの順序・量の式を記録しておきます。
まとめ
- アニメーターで何を変えるか、セレクターでどの文字に効かせるかを決める
- 1文字ずつ表示するなら、不透明度0%のアニメーターと範囲セレクターの開始を動かす
- ばらばらに揺らすならウィグリー、決まりで効かせるならエクスプレッションセレクター
- スペースで止まるときは、基準を「スペースを除く文字」にする
参考:Adobe「Animating text」(2026年10月3日に公式資料を確認)。
