グラデーションワイプは、白黒の模様を使って、文字や映像が消える順番を決めるエフェクトです。横へ流れるワイプだけでなく、インクが広がるような登場や、粒状に切り替わる場面転換にも使えます。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
まずは完成形：黒い側から文字が消える
左が黒、右が白のグラデーションを参照し、「変換終了」を0%から100%へ動かしています。右の文字は、黒に対応する左側から透明になります。比較画面の背景・見出し・外枠は説明用です。
エフェクトの場所と今回の条件
エフェクト → トランジション → グラデーションワイプにあります。英語名はGradient Wipeです。
| 項目 | 今回の条件 |
|---|---|
| 確認環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| コンポジション | 1280×720／30fps／6秒 |
| 素材 | PASの文字・線・平面。外部素材と追加プラグインは不使用 |
| 参照するマップ | 素材と同じ1280×720。模様はプリコンポジションの中で作成 |
仕組み：白黒は「透明になる順番」
反転OFFで「変換終了」を0%→100%へ増やすと、マップの暗い部分から、対応する場所が透明になります。逆に100%→0%へ減らすと、明るい部分から現れます。下に別の映像があれば、透明になった場所からその映像が見えます。
マップそのものを完成画面へ重ねる必要はありません。今回のプロジェクトでは「GRADIENT_MAP」の目のスイッチをOFFにし、ワイプの参照先として使っています。
主要パラメータを比較する
変換終了：どこまで透明にするか
0%は全体が見える状態、100%は全体が透明な状態です。50%は変換の途中を示します。どんな模様でも面積の半分が消える、という意味ではありません。白黒の分布によって残る場所と広さが変わります。
変換の柔らかさ：境界をどれだけぼかすか
0%では境界がはっきりし、値を上げると半透明の範囲が広がります。くっきり切り替えたいときは低め、なじませたいときは少しずつ上げて調整します。
グラデーションを反転：消える順番を逆にする
「グラデーションを反転」をONにすると、同じマップでも影響する順番が逆になります。黒から消える基本動作を確認してから切り替えると、違いをつかみやすくなります。
基本の作り方：左から右へ消す
- 1280×720・30fps・6秒のコンポジションを作り、PASの文字と線を配置します。文字と線をプリコンポーズし、素材側のコンポジションにまとめます。
- 同じサイズ・長さの別コンポジションを作り、全面の平面へ「描画 → グラデーション」を適用します。左を黒、右を白にします。
- 素材とマップを同じメインコンポジションへ入れます。素材側へ「グラデーションワイプ」を適用し、「グラデーションレイヤー」にマップを指定します。今回の名称はGRADIENT_MAPです。
- マップの表示をOFFにします。参照方法は「ソース」、グラデーション置換は「グラデーションを伸縮させフィットさせる」、反転はOFFにします。
- 「変換終了」にキーフレームを作り、1秒で0%、4秒で100%にします。今回はリニア補間です。背景は素材の下へ置きます。
| 項目 | 基本例の設定 |
|---|---|
| 変換終了 | 1秒：0% → 4秒：100% |
| 変換の柔らかさ | 0% |
| グラデーションレイヤー | GRADIENT_MAP（参照方法：ソース） |
| グラデーション置換 | グラデーションを伸縮させフィットさせる |
| グラデーションを反転 | OFF |
平面へ直接描画した模様を参照する場合は、その模様を作るエフェクトごとプリコンポーズするのが今回の手順です。外側からプリコンポジションの「ソース」を参照すれば、中で作った白黒の見た目を使えます。
応用1：インクが広がるようなタイトルの登場
基本例から変えるのは、マップを「白い中心・黒い周辺」にすることと、変換終了を100%→0%へ動かすことです。文字と紺色の背景をまとめて現すため、タイトルカード全体をプリコンポーズしています。
| 項目 | 応用1の設定 |
|---|---|
| マップのグラデーション | 放射状／中心［640,360］が白／終点［1220,360］が黒 |
| マップのゆがみ | タービュレントディスプレイス：量120／サイズ100／複雑度2 |
| 変換終了 | 0.8秒（24フレーム）：100% → 4.6秒（4秒18フレーム）：0% |
| 変換の柔らかさ | 12% |
| 反転・マップの動き | 反転OFF／展開0°の静止マップ |
- 基本例の直線グラデーションを放射状へ変更し、開始色を白、終了色を黒にします。
- マップ内でグラデーションの後へタービュレントディスプレイスを追加し、輪郭にゆがみを作ります。今回は展開を動かしていません。
- PASの文字・線・紺色の平面をプリコンポーズし、そのレイヤーにワイプを適用します。下にはクリーム色の平面を置きます。
- 変換終了を100%→0%、柔らかさを12%へ変更します。白い中心から現れ、ゆがんだ境界が外側へ広がります。
これはインクの液体シミュレーションではなく、白黒マップの濃淡を使った登場表現です。まず柔らかさを0%にして形を確認し、その後12%へ戻すと、輪郭となじみ方を分けて調整できます。
応用2：粒状に切り替わる場面転換
基本例のマップを、細かいフラクタルノイズへ置き換えます。上の場面が透明になる場所から、下の場面が現れる構成です。二つの場面は、どちらもPASの文字を使っています。
| 項目 | 応用2の設定 |
|---|---|
| フラクタルの種類／ノイズの種類 | 基本／ソフトリニア |
| コントラスト／明るさ | 180／0 |
| トランスフォーム → スケール | 12（縦横比を固定） |
| 複雑度／展開 | 2／0°（静止） |
| 変換終了 | 1秒：0% → 4.5秒（4秒15フレーム）：100% |
| 変換の柔らかさ／反転 | 4%／OFF |
- 同サイズのマップ用コンポジションの平面へフラクタルノイズを適用します。スケールを12へ下げ、細かな模様にします。
- 場面Aと場面Bをそれぞれプリコンポーズします。メイン側でAを上、Bを下へ重ねます。
- Aへグラデーションワイプを適用し、ノイズのマップを参照させます。マップの表示はOFFです。
- 変換終了を0%→100%へ動かし、柔らかさを4%にします。フラクタルノイズ自体の展開は固定しています。
粒を大きくしたいときはマップのスケールを上げます。いきなりノイズの展開も動かすと違いを追いにくいため、まず静止マップで粒の大きさと切り替わる速度を決めるのがおすすめです。
マップだけを変えるとどうなる？
直線なら一方向、放射状なら中心と外側、ノイズなら点在する場所の順に切り替わります。応用1と2の完成動画は素材構成・時間・柔らかさも変えているため、この比較画像でマップ自体の違いを確認してください。
つまずきやすいところ
文字が消えず、白黒の画面が見えてしまう
マップを完成画面に表示したままにしていないか確認します。今回の構成ではマップの目のスイッチをOFFにし、素材レイヤーの「グラデーションレイヤー」へ正しく指定します。
模様を変えても結果が変わらない
参照先が素材自身や別の平面になっていないか確認します。模様を作った平面をエフェクトごとプリコンポーズし、そのコンポジションを参照してください。名前だけでなく、実際の参照先を確認するのがポイントです。
登場させたいのに消えてしまう
基本の0%→100%は消す方向です。登場なら100%→0%から試します。さらに反転を同時に変更すると順番が分かりにくくなるので、一つずつ切り替えて確認してください。
50%なのに、ほとんど全部見える・消える
変換終了は面積の割合ではありません。マップに明るい部分が多いか、暗い部分が多いかで見え方が変わります。ノイズの明るさやコントラストを調整し、0%・50%・100%の各状態で確認します。
まずはこの設定から
左が黒・右が白の直線グラデーション、柔らかさ0%、反転OFFで、変換終了を0%→100%へ動かすところから始められます。動きが分かったら、柔らかさを20%にする、マップを放射状へ変える、ノイズへ変える、の順で試すと違いが追いやすくなります。
実機で確認したのはAE 26.5・8bpc・同サイズの静止マップを使う上記3作例です。16／32bpc、異なるサイズのマップ、マップ自体のアニメーション、実写素材、シームレスなループは検証していません。
関連解説・公式資料
模様の輪郭をゆがめる方法はタービュレントディスプレイスの解説へ。粒や濃淡の作り方はフラクタルノイズの解説も参考になります。
AEエフェクト辞典 ／ Adobe公式：Gradient Wipe effect（英語）
作例プロジェクトをダウンロード
この記事の基本例、変換終了・柔らかさ・反転・マップの比較、インク風の登場、粒状の場面転換を収録しています。ZIPを解凍し、同梱の「はじめに.txt」を読んでから開いてください。
内容・確認環境：AEPと「はじめに.txt」／After Effects 26.5（macOS）／1280×720・30fps・6秒・8bpc。追加プラグイン・外部素材は不要です。他のAEバージョンやWindowsでは未検証です。
使用フォント：Arial Bold、ヒラギノ角ゴシック W6。フォント本体は同梱していません。未インストールの場合は使用できるフォントへ置き換え、文字幅や位置を調整してください。
利用条件：学習・個人制作での利用と改変が可能です。商用利用は、事前にお問い合わせから個別にご相談ください。
コメント