文字や旗に、規則的な波の動きを加えたい。そんなときに使えるのが波形ワープです。波の高さ・間隔・進む方向・速度を調整でき、キーフレームを打たなくても波が動きます。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
完成例：同じ文字に、規則的な波を加える
右側だけに波形ワープを適用し、波形の高さ18・幅180・方向90°・速度0.8にしています。文字の位置や回転、フェーズにキーフレームは入れていません。波形ワープ自身の自動アニメーションです。
エフェクトの場所と素材の用意
エフェクト → ディストーション → 波形ワープにあります。英語名はWave Warpです。「エフェクト＆プリセット」で名前を検索しても追加できます。
| 項目 | 基本例の条件 |
|---|---|
| 制作環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| コンポジション | 1280×720／30fps／6秒 |
| 文字 | PAS／Arial Bold／240px |
| 素材のまとめ方 | 文字と上下の線を、透明背景の1280×720コンポジションにまとめる |
| 表示 | 比較動画では元のコンポジションを45%に縮小して左右に表示 |
エフェクトをかけるのは文字と線をまとめたレイヤーです。説明用の背景・ラベルにはかけません。以下の高さ・幅の数値は、縮小前の素材に対する値です。
高さ・幅・方向・速度の違い
波形の高さ：ゆがみの強さ
高さ0では元の形のまま、18では文字を読める範囲の波、45では輪郭と線が大きく崩れます。読ませたい文字なら低めから始め、必要な強さまで少しずつ上げます。
波形の幅：波の間隔
幅を小さくすると細かい波が入り、大きくすると波の間隔が広がります。文字そのものを拡大する設定ではありません。同じ高さ18でも、幅80では細かく崩れ、360では緩やかにうねります。
方向：波が進む角度
方向を変えると、波の進む向きとゆがみ方が変わります。レイヤー全体を回転させる設定とは異なります。まず0°・45°・90°で形を比べ、動かすときは速度を戻して確認します。
波形の速度：0は停止、値を上げると速くなる
速度は1秒あたりの波の周期数です。0.5なら1周期に2秒、1.5なら1秒間に1.5周期進みます。0にすると動きは止まりますが、ゆがんだ形は残ります。元の形へ戻す場合は高さを0にするか、エフェクトをOFFにします。
今回は一定速度で使います。逆方向へ動かしたい場合は速度を負の値にする方法があります。速度を途中から変える方法など、詳しい仕様はAdobe公式のWave Warp解説（英語）でも確認できます。
基本の作り方：キーを打たずに波打たせる
- 1280×720・30fps・6秒のコンポジションを作り、Arial Bold・240pxでPASを配置します。今回の文字の位置は［640,438］です。
- 上下に幅900px・高さ4pxの線を置きます。位置は［640,260］と［640,500］。背景は透明のままにします。
- 文字と線をプリコンポーズします。すべての属性を新規コンポジションへ移動し、まとまったレイヤーに「波形ワープ」を追加します。
- 波形の種類を「サイン」、高さ18、幅180、方向90°、速度0.8、固定「なし」、フェーズ0°にします。
- 再生して波が動くことを確認します。ストップウォッチは押す必要がありません。背景の平面は、エフェクトをかけるレイヤーの下に置きます。
| 項目 | 基本例 |
|---|---|
| 波形の種類 | サイン |
| 波形の高さ／幅 | 18／180 |
| 方向／波形の速度 | 90°／0.8 |
| 固定／フェーズ | なし／0° |
| アンチエイリアス | 高（レイヤー画質：最高画質） |
波形の種類は、まずサインから始めると、なめらかな波を確認できます。高さと幅が決まってから別の種類を試すと、形の差を追いやすくなります。
応用1：左端を固定して、旗をはためかせる
基本例から変えるポイントは、固定する端をレイヤーの左端に合わせることです。旗の色面・文字・線をひとつのコンポジションにまとめ、そのレイヤー全体をゆがめます。ポールは別レイヤーです。
| 項目 | 旗の設定 |
|---|---|
| 旗の素材コンポジション | 720×450。旗の色面は720×360で、上下に透明な余白45px |
| 波形の種類／高さ／幅 | サイン／24／260 |
| 方向／波形の速度 | 90°／0.6 |
| 固定／フェーズ | 左エッジ／0° |
| アンチエイリアス | 高 |
- 720×450のコンポジションを用意し、720×360の旗を中央へ置きます。旗の左右には余白を設けず、上下に45pxずつ透明な余白を取ります。
- 旗の中にPASの文字・線・左端の色帯を作ります。配布プロジェクトではArial Bold・155pxで配置しています。
- 旗をメインコンポジションへ入れ、波形ワープを適用します。高さ24・幅260・方向90°・速度0.6に変更し、固定を「左エッジ」にします。
- 旗の左端にポールを置きます。ポールへは波形ワープをかけず、旗の輪郭が留まる位置を確認します。
大きなメインコンポジションの中央に旗を置いてから、その全体へ固定をかけると、旗の左端と固定位置が一致しません。固定の基準は、見えている図形の端ではなく、エフェクトをかけたレイヤーの端です。旗だけのコンポジションを用意すると調整しやすくなります。
この作例は平面を波形ワープでゆがめた2D表現です。布の立体的な折れや光の陰影までは作っていません。
応用2：2段の文字をまとめて波打たせる
基本例から、文字の構成・方向・高さ・幅・速度を変更します。方向を0°にして、2段の文字が横へうねる見た目を作ります。背景はゆがませず、文字をまとめたレイヤーだけに適用しています。
| 項目 | タイポグラフィの設定 |
|---|---|
| 素材 | 1280×720にPASを2段。Arial Bold・260px |
| 波形の種類／高さ／幅 | サイン／26／220 |
| 方向／波形の速度 | 0°／0.4 |
| 固定／フェーズ | なし／0° |
| アンチエイリアス | 高 |
- 透明背景の1280×720のコンポジションにPASを2段配置します。文字の位置は［640,315］と［640,565］です。
- 2段をひとつのレイヤーとしてメインコンポジションへ入れ、波形ワープを適用します。
- 高さ26・幅220・方向0°・速度0.4・固定なしに変更します。下段だけ色を変え、2段の形の違いを見やすくします。
- 再生し、読みにくい場合は高さを下げます。動画では文字のコンポジションを77%表示にしています。
つまずきやすいところ
形は変わったのに動かない
波形の速度が0になっていないか確認します。通常の一定速度なら、速度を0.5や0.8にするだけで動きます。フェーズにキーを追加する前に、まず速度だけで再生してみてください。
上下の端が切れる・旗がポールからずれる
波のゆがみがレイヤーの端まで届くと、端で切れたように見えることがあります。旗の作例では上下に透明な余白45pxを用意しています。固定したい左側には余白を付けず、旗の左端とレイヤーの左端を合わせます。
文字が細かく崩れて読みにくい
最初に高さを下げ、次に幅を広げてみます。同時に変更せず、高さ18・幅180の基本例へ戻してから、一つずつ調整すると違いが分かりやすくなります。
動画の終わりから最初へ戻ると切れる
波形ワープが自動で動くことと、任意の長さでループがつながることは別です。今回の動画は6秒の作例です。ループとして使う場合は、選んだ速度と区間で波の周期が合うかを確認してください。
まずはこの設定から
サイン・高さ18・幅180・方向90°・速度0.8・固定なしから始められます。高さで強さ、幅で波の間隔、方向で角度、速度で周期を調整し、最後に必要な端だけを固定します。
規則的な波よりも不規則なゆらぎを付けたい場合は、タービュレントディスプレイスの解説へ。別レイヤーの模様を使ってゆがめたい場合は、ディスプレイスメントマップの解説も参考になります。AEエフェクト辞典から、ほかの表現も探せます。
作例プロジェクトをダウンロード
基本の適用前後、波の高さ・幅・方向・速度・固定の比較、はためく旗、2段のタイポグラフィを収録しています。ZIPを解凍し、同梱の「はじめに.txt」を読んでから開いてください。
v1.0／ZIP・約160KB。AEPと「はじめに.txt」を収録しています。
確認環境：After Effects 26.5（macOS）／1280×720・30fps・6秒・8bpc。旗の素材コンポジションは720×450です。追加プラグイン・外部素材は不要です。他のAEバージョン・Windows・異なるビット深度では未確認です。
使用フォント：Arial Bold、ヒラギノ角ゴシック W6。フォント本体は同梱していません。未インストールの場合は使用できるフォントへ置き換え、文字幅と位置を調整してください。
利用条件：学習・個人制作での利用と改変が可能です。商用利用は、事前にお問い合わせから個別にご相談ください。
コメント