文字を動かしたいけれど、どの項目から触ればいいの？
大丈夫です、まず位置・大きさ・時間差の3つを見れば、複雑な作例も分解できます。
「文字を動かしたいのに、何を動かせば格好よくなるのか分からない！」
文字PVを作り始めたばかりの頃は、派手な完成形ほど仕組みが複雑に見えます。
ところが実際の動きは、位置・拡大率・回転・透明度・アンカーポイント・時間差という基礎の組み合わせです。
この記事では、約15分の制作動画、字幕423件、YukkuriMovieMaker4のタイムライン755項目をもとに、13種類の文字アニメーションを初心者向けに組み直しました。
After Effectsで手順を示しますが、同じ考え方はAviUtlやAlight Motionなどでも応用できます。
複雑な文字アニメーションは、基礎動作を重ね、開始時刻をずらし、イージングで緩急を付けたものです。
- 文字アニメーションに共通する6つの基礎
- 位置・拡大・伸縮・背景・バウンド・色ずれの作り方
- 整列・3D回転・振動・パス・円形・歪み・点滅の作り方
- 素材内で使われた補助ツールと、ツールなしで再現する方法
- 動きが安っぽい、読みにくい、重いときの直し方
まず覚えたい文字アニメーションの共通ルール
13種類もあると、全部別々に覚える必要がありそう……。
先に6つの共通ルールを覚えれば、残りは組み合わせとして理解できます。
13種類を別々の技として暗記する必要はありません。
最初に、どの作例でも繰り返し使う共通ルールを覚えましょう。
- 完成形を置く時刻に、ゴールのキーフレームを打ちます。
- 開始時刻へ戻り、位置・大きさ・回転・透明度のどれかを崩します。
- 文字がどこを支点に動くかを、アンカーポイントで決めます。
- キーフレームへイージングを付け、一定速度に見える動きを避けます。
- 文字やレイヤーの開始時刻を少しずつずらし、情報量を増やします。
- 速い移動にはモーションブラーを付け、必要なら1フレームだけ極端な形を挟みます。
Adobeの公式ヘルプでも、文字アニメーターは対象プロパティ、セレクター、影響量を組み合わせて文字単位の動きを作る仕組みとして説明されています。
詳しい仕様はAdobe公式の文字アニメーション解説で確認できます。
イージング前後を見比べる
同じ始点と終点でも、速度変化が違うだけで印象は大きく変わります。
素材ではFlowを使っていますが、After Effects標準のグラフエディターでも同じ考え方を再現できます。
速く動き始めて終点で減速する曲線は登場に向き、中央でいったん落ち着いて再加速するH字型の曲線は横切りやループに向きます。
文字アニメーション13選・早見表
どの動きから試すか、先に全体像を見たいです。
ここで13種類を使いどころまで一覧にするので、気になる番号から読んでも大丈夫です。
| No. | 動き | 主役になる設定 | 向いている場面 |
|---|---|---|---|
| 1 | 一文字ずつ登場 | 位置・時間差 | タイトル、歌詞の強調 |
| 2 | 拡大して登場 | 拡大率・モーションブラー | サビ頭、見出し |
| 3 | 伸ばして登場 | 縦横別スケール・アンカー | インパクトのある単語 |
| 4 | 背景と一緒に登場 | Trim Paths・トラックマット | 帯見出し、字幕 |
| 5 | ボヨンと登場 | オーバーシュート・回転 | ポップ、かわいい演出 |
| 6 | 色ずれグリッチ | 複製・時間差・ブラー | デジタル、疾走感 |
| 7 | 文字列を並べて動かす | 複製・横移動・時間差 | 背景、リズム演出 |
| 8 | 3D方向へ傾ける | X/Y/Z回転・カメラ | 奥行き、転換 |
| 9 | 文字を震わせる | Wiggly Selector・Posterize Time | 焦り、衝撃、ノイズ |
| 10 | 線に沿って動かす | Path Options・First Margin | 流線、曲線レイアウト |
| 11 | 円形トンネル | 円パス・Tracking・複製 | サイバー、奥行き |
| 12 | 歪みながら登場 | Turbulent Displace・Evolution | 不穏、液体、衝撃 |
| 13 | ランダム点滅 | 透明度・Randomize Order・Random Seed | ネオン、電光掲示板 |
初心者は1、2、4、5の順で練習すると、キーフレーム、マット、イージング、アンカーポイントを無理なく覚えられます。
1. 一文字ずつ違う方向から登場させる
まずは何から作ればいいですか？
最初は位置と開始時刻だけを使い、文字を分けて違う方向から集めます。
もっとも応用範囲が広い基本形は、文字を個別レイヤーに分けて別方向から集める動きです。
- 完成位置へ文字を並べ、位置のゴールキーを打ちます。
- 開始位置では、隣り合う文字を左右、上下、反対方向へ移動します。
- 終点へ向かって減速するイージングを付けます。
- 各レイヤーを数フレームずつずらし、順番に登場させます。
全部を同じ方向から出すと単調になりやすいため、隣の文字とは直角または逆方向にすると形が読み取りやすくなります。
単語全体を強調したい箇所だけ登場時刻をそろえると、ばらつきの中にアクセントを作れます。
2. 拡大率でドンと登場させる
サビ頭を一瞬で強調するなら？
拡大率を使い、画面からはみ出す大きさから100％へ戻します。
サビ頭や重要な単語には、位置よりも拡大率を動かす登場が向いています。
- 完成時刻で拡大率100％のキーを打ちます。
- 開始時刻へ戻り、文字を画面からはみ出すほど大きくします。
- 減速するイージングとモーションブラーを加えます。
- 文字ごとに開始をずらし、必要な文字だけさらに大きくします。
長い文章をすべて巨大化すると読みにくいため、最初の文字やキーワードだけを大きくするのが安全です。
3. 縦横に伸ばして登場させる
拡大だけだと変化が足りないかも。
縦横比と支点を変えて、文字を一方向へ伸ばします。
文字を細長く伸ばす動きは、拡大の応用で作れます。
- スケールの縦横比固定を解除します。
- 右端、左端、上端、下端のどこから伸ばすかを決め、アンカーポイントを寄せます。
- 開始時刻で縦または横だけを大きく変形させます。
- 完成時刻では通常の比率へ戻し、減速するイージングを付けます。
- 登場直後に1フレームだけさらに極端な変形を挟みます。
文字ごとの変形方向は、隣と直角または反対へ切り替えると画面が動いて見えます。
細いフォントを極端に伸ばすと輪郭が崩れやすいため、完成表示で太さを確認しましょう。
4. 線状の背景と一緒に文字を登場させる
文字の後ろに走る帯も一緒に出したいです。
Trim Pathsとトラックマットを組み合わせて、背景と文字を連動させます。
文字の後ろに帯や線を走らせると、字幕を読みやすくしながら動きを追加できます。
- 文字を横切る形でシェイプのパスを描き、線幅を調整します。
- Trim PathsのEndを0％から100％へ動かします。
- 線の完成時刻へ向かうイージングを付け、必要ならモーションブラーを有効にします。
- 文字レイヤーのトラックマットに背景のシェイプレイヤーを指定します。
文字が消えた場合は、マットに指定したレイヤー、アルファとルミナンス、反転の設定を順に確認してください。
現在のAfter Effectsでは、マット用レイヤーをレイヤー一覧またはピックウィップで指定できます。
詳しい仕様はAdobe公式のトラックマット解説で確認できます。
5. ボヨンと弾ませて登場させる
かわいく弾む感じは、どう作るの？
完成値を少し通り越して戻す、オーバーシュートを使います。
ポップな曲やかわいい字幕には、完成値を一度通り過ぎて戻るオーバーシュートが合います。
- 開始時刻で文字を大きくし、その直後に完成サイズのキーを置きます。
- 完成サイズを少し通り過ぎるキーと、反対側へ戻るキーを追加します。
- 振れ幅を小さくしながら数回往復させます。
- 回転や位置にも同じリズムを重ねます。
Motion Tools Proのバウンス機能を使えば、振れ幅、速さ、収束時間をまとめて調整できます。
手動の場合は、100％を中心に120％、90％、105％、100％のように振れ幅を小さくすると自然に落ち着きます。
アンカーポイントを文字の下へ置くと、床から起き上がるような回転に変わります。
6. 色ずれと放射ブラーでグリッチを作る
次は一気に派手な表現ですか？
色ずれと放射ブラーを重ね、短いグリッチを作ります。
色ずれは、完成した文字アニメーションを複製して時間をずらすだけでも作れます。
- 文字の動きをプリコンポーズし、同じレイヤーを3枚に複製します。
- 下の2枚へ黄色と青の塗りを適用し、一番上は白のまま残します。
- 3枚の開始時刻を1フレームずつずらします。
- 必要に応じて拡大、レンズ補正、Posterize Time、シャープ、放射ブラーを追加します。
色ずれを見せる時間が長いと文字が読みにくくなるため、登場直後だけ見せて白へ戻すのがおすすめです。
Posterize Timeは15fps前後から試し、文字の輪郭が荒れすぎる場合は24fpsへ上げます。
7. 同じ文字列を何段も並べて動かす
背景まで文字で埋めたいときは？
同じ文字列を複製し、段ごとに方向と時間をずらします。
同じ言葉を反復して画面全体へ並べると、背景と文字演出を同時に作れます。
- 同じ単語を繰り返した長いテキストを作ります。
- 画面外の左から右へ移動する位置キーを打ちます。
- 一度止まってから加速するH字型のイージングを付けます。
- プリコンポーズして複数段へ並べ、各段の開始時刻をずらします。
- 上半分と下半分で進行方向を逆にします。
素材ではNisa Shape Repeaterを使って整列していますが、複製と整列でも同じ見た目を作れます。
背景として使う場合は、主役の歌詞よりコントラストとサイズを下げましょう。
8. カメラと3D回転で文字を傾ける
平面の文字に奥行きを出せますか？
カメラと3D回転を使い、正面の文字を立体的に振ります。
平面の回転だけで足りないときは、文字を3DレイヤーにしてX、Y、Z軸を使います。
- 文字レイヤーを3Dレイヤーに切り替え、カメラを追加します。
- 最初はY軸方向へ回転させ、少し後でX軸方向へ回します。
- 加速と減速が一つの動きに入るS字型のイージングを付けます。
- 文字が裏返る場合は回転量を減らし、正面が読める時間を長くします。
複数軸を同時に大きく回すと動きが読めないため、一方向ずつ順番に動かすのがコツです。
9. Wiggly Selectorで文字を震わせる
不安や衝撃を、文字だけで見せたいです。
Wiggly Selectorで、一文字ずつ違う震えを加えます。
焦り、衝撃、不穏さを出したいときは、テキストアニメーターの位置へWiggly Selectorを追加します。
- テキストのAnimateからPositionを追加します。
- セレクターへWiggly Selectorを追加します。
- Positionで振れ幅を決め、Wiggles/Secondで速さを決めます。
- Posterize Time、色ずれ、シャープを少量ずつ足します。
振れ幅と速さを同時に上げすぎると読めなくなるため、最初は振れ幅を小さくして速さだけを調整します。
画面全体を揺らすカメラシェイクとは違い、Wiggly Selectorなら文字ごとに異なる揺れを作れます。
10. 曲線パスに沿って文字を動かす
文字をまっすぐではなく、波のように流したいです。
マスクパスへ沿わせ、First Marginで文字列を送ります。
文字を波や弧に沿わせたい場合は、テキストレイヤーにマスクパスを描きます。
- テキストレイヤーを選択し、ペンツールで曲線のマスクを描きます。
- TextのPath Optionsを開き、描いたマスクをPathに指定します。
- First Marginを画面外の左から右へ動かします。
- Reverse Path、Perpendicular To Path、Force Alignmentで向きと整列を調整します。
- 複製したレイヤーを上下反転し、二本の流れとして配置します。
素材の字幕ではFirstMorphと聞こえる箇所がありますが、操作する項目はFirst Marginです。
パス上の文字配置と各項目は、Adobe公式のテキストをパスへ配置する手順でも確認できます。
11. 円形テキストをトンネル状に動かす
サイバーっぽい奥行き演出もできますか？
円形テキストを複製し、大きさと開始時刻をずらしてトンネルにします。
円形の文字を複製すると、奥へ吸い込まれるトンネルのような演出になります。
- テキストレイヤーへ楕円マスクを描き、Path Optionsで円を指定します。
- Reverse Pathを使って文字を外向きにし、段落を左揃えにします。
- Tracking Amountを狭い状態から広い状態へ動かします。
- First Marginを動かして円周上を回転させます。
- プリコンポーズを複製し、奥へ向かって小さくしながら時間をずらします。
円を増やしすぎるとプレビューが重くなるため、最初は3枚で奥行きを確認してから追加しましょう。
12. Turbulent Displaceで歪みながら登場させる
ホラーや液体っぽい歪みも知りたいです。
Turbulent Displaceを強い状態から0へ戻し、形を収束させます。
液体、不穏、ホラー、強い衝撃には、Turbulent Displaceで輪郭を崩す登場が使えます。
- 文字へTurbulent Displaceを追加します。
- Amountで歪みの強さ、Sizeで歪みの大きさを調整します。
- 開始時刻でAmountとEvolutionにキーを打ちます。
- 完成時刻でAmountを0にし、Evolutionだけ少し進めます。
- 拡大率、色ずれ、レンズ補正、Posterize Timeを必要な分だけ加えます。
Amountを大きくすると登場の衝撃が増え、Sizeを小さくすると輪郭が細かくざらつきます。
Evolutionを動かすと歪み模様そのものが流れるため、Amountだけを下げるより静止画感が減ります。
13. ランダム点滅でネオン風に登場させる
最後はネオンの点滅ですね？
透明度のランダム順と発光を組み合わせ、最後は読める状態で止めます。
最後は、文字をランダムな順番で点滅させながら表示する方法です。
- TextのAnimateからOpacityを追加し、透明度を0％にします。
- Range SelectorのRandomize Orderを有効にします。
- StartまたはEndを0％から100％へ動かし、文字をランダム順に表示します。
- Random Seedへキーを打ち、点滅させたい区間だけ値を変化させます。
- Glowや色変更を加え、ネオンらしい発光へ仕上げます。
Random Seedを最後まで動かし続けると常にちらつくため、読ませたい区間では値を止めます。
素材ではDeep GlowとVC Color Vibranceを使っていますが、標準のGlow、Fill、Tintでも発光と色付けの基本は再現できます。
素材内で使われた補助ツールと代替方法
同じプラグインがないと再現できませんか？
原理は標準機能で再現できるので、ここで補助ツールと代替手段を対応させます。
補助ツールは作業を速くしますが、文字アニメーションの原理そのものではありません。
| 素材内の名称 | 素材での用途 | ツールなしの代替 |
|---|---|---|
| Nisai BaraMoji | 一文字ずつ別レイヤーへ分割 | 文字レイヤーの複製、範囲セレクター、Motion Tools ProのText Splitter |
| Motion Tools／Motion Tools Pro | レイヤーの時間差、バウンス、アンカー調整 | 手動でレイヤー開始時刻をずらし、減衰するキーフレームを追加 |
| Flow | イージング曲線の選択と適用 | After Effects標準のグラフエディター |
| Nisa Shape Repeater | 文字列の反復配置 | 複製、整列、プリコンポーズ |
| Deep Glow | ネオン風の発光 | 標準Glowを複数回重ねる |
| VC Color Vibrance | 鮮やかな色付け | Fill、Tint、Curvesで色を調整 |
Nisai BaraMojiとNisa Shape Repeaterは素材内の表記を採用しており、配布元と現行版への対応は今回のプロジェクトファイルから確認できませんでした。
不明な再配布サイトから入手せず、作者の公式配布元が確認できない場合は代替手順を使ってください。
Flowは公式ページでイージング用のカーブエディターとして案内されています。
Motion Tools Proは公式ページでシーケンス、アンカーポイント、イージング、Text Splitterなどを含む統合ツールとして案内されています。
Deep Glow 2とVC Color Vibranceを使う場合は、Deep Glow 2公式ページとVideo Copilot公式ページで価格、対応OS、対応バージョンを確認してください。
After Effects以外のソフトへ置き換える考え方
After Effectsを持っていなくても、考え方は使えますか？
機能名ではなく、位置・拡大・補間などの役割へ置き換えれば応用できます。
メニュー名が違っても、探す機能はほぼ同じです。
| After Effectsの考え方 | 別ソフトで探す機能 | できること |
|---|---|---|
| Position | 位置、座標、移動 | 上下左右から登場 |
| Scale | 拡大率、サイズ | 拡大、縮小、伸縮 |
| Rotation | 回転、角度 | 傾き、起き上がり |
| Anchor Point | 中心点、支点 | 伸びる端や回転軸を変更 |
| Opacity | 透明度、不透明度 | フェード、点滅 |
| Easing | 補間、速度曲線 | 加速、減速、オーバーシュート |
| Layer offset | 開始時刻、ディレイ | 一文字ずつ順番に表示 |
| Mask／Path | マスク、パス、軌道 | 線や円に沿って移動 |
AviUtlやAlight Motionで同じ項目名が見つからない場合は、見た目ではなく役割で置き換えてください。
一文字ずつ別レイヤーへ分け、最初と最後の状態を作り、補間と時間差を調整できれば、この記事の基本作例は再構成できます。
よくある失敗と直し方
作れたけれど、なぜか安っぽく見えます……。
イージング、読みやすさ、支点、処理負荷の順で原因を切り分けましょう。
動きが安っぽく見える
一定速度、同じ方向、同じ開始時刻が重なると、機械的に見えやすくなります。
まずイージングを付け、次に隣り合う文字の方向を変え、最後に開始時刻を2〜4フレームずらしてください。
動くけれど文字が読めない
主役の動きは位置、拡大、回転のうち一つに絞り、色ずれやブラーは登場直後だけにします。
読ませる区間では動きを止め、文字と背景の明度差を確保してください。
動きの支点がおかしい
伸縮や回転が意図しない方向へ広がる場合は、キーフレームより先にアンカーポイントを直します。
プレビューが重い
プリコンポーズ、色ずれ、ブラー、Glow、Turbulent Displace、複製レイヤーが重なるほど処理量が増えます。
作業中は解像度を下げ、Glowとブラーを一時的に無効にし、円形トンネルなどの複製数を減らしてください。
すべての文字が同時に動いて単調になる
レイヤーの開始時刻を少しずつずらし、強調したい単語だけ同時に動かすとリズムが生まれます。
初心者向けの練習順
結局、どの順番で練習すれば挫折しにくいですか？
位置から始め、拡大・支点・マット・仕上げ効果の順に進みます。
- 一文字ずつ位置を変え、イージング前後を比較します。
- 位置を拡大率へ置き換え、モーションブラーを試します。
- アンカーポイントを変え、伸縮と起き上がりを作ります。
- Trim Pathsとトラックマットで背景付き文字を作ります。
- 色ずれ、振動、歪み、点滅から一つだけ仕上げ効果を足します。
- 最後にパス、円形、複数段などの複製系へ進みます。
最初から13種類を一つの画面へ詰め込まず、主役の動き一つと仕上げ効果一つで完成させるのが上達の近道です。
位置で一文字ずつ登場させ、終点へ向かう減速を付け、2フレームずつ時間差を付けます。
最後にモーションブラーか色ずれを一つだけ加えれば、短いタイトルアニメーションとして成立します。
まとめ
13種類、全部覚えられるか不安です。
暗記は不要です、基礎動作を一つ選び、時間差とイージングを足せば十分です。
文字アニメーションは、位置、拡大率、回転、透明度、アンカーポイント、時間差という基礎を重ねたものです。
格好よさを決めるのはエフェクトの数ではなく、どの文字を、どの方向へ、どの速さで、いつ見せるかという設計です。
まず一文字ずつ登場する作例を完成させ、拡大、伸縮、背景、バウンドの順に置き換えてみてください。
そこまで作れたら、色ずれ、3D回転、振動、パス、円形、歪み、点滅も同じ考え方で組み立てられます。
派手な動きを一気に作ろうとせず、基礎を一つずつ重ねれば、文字PVはちゃんと完成します。
文字PV全体の構成や制作手順も確認したい方は、文字PVの教科書もあわせてご覧ください。
いかがでしたか？
まずはどの文字アニメーションから試せばいいですか？
一文字ずつの登場から始めて、好きな動きを一つずつ重ねてみましょう。
完成した動きを見比べながら、自分の映像に合う方向、時間差、イージングを探してみてください。
コメント