文字やロゴの輪郭に沿って、光のラインを走らせたい。そんなときに使えるのがベガス（Vegas）です。輪郭をいくつかの区間に分け、線の長さや太さを調整できます。今回は四角形で基本を押さえ、ネオン風文字とロゴのアクセントへ展開します。
この記事で使用したAEプロジェクトの内容と利用条件は、記事の最後の配布欄にまとめています。
完成例：図形の輪郭を、線が走る
右側は、線分数4・長さ0.5・幹の幅6に設定しました。動かしているのはベガスの「回転」です。図形そのものの位置や回転にはキーを入れていません。
エフェクトの場所と、輪郭の準備
エフェクト → 描画 → ベガスにあります。「エフェクト＆プリセット」で「ベガス」または「Vegas」を検索しても追加できます。
| 項目 | この作例の条件 |
|---|---|
| 制作環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| 表示用コンポジション | 1280×720／30fps／6秒 |
| 基本の素材 | 透明背景の720×450に、白い450×230の四角形を中央配置 |
| 適用先 | 素材コンポジションを入れたプリコンポーズレイヤー |
| 輪郭の基準 | 線：イメージの輪郭／チャンネル：アルファ |
| 動画内の表示 | 基本の素材を75%に縮小して左右に表示 |
背景まで一緒にまとめると、アルファの輪郭が画面の外周になってしまいます。輪郭を取りたい図形・文字だけを透明背景にまとめ、表示用の背景は別レイヤーにします。以降の「幹の幅」は縮小前の素材に対する数値です。
線分数・長さ・幹の幅・回転を比較する
線分数：輪郭をいくつに分けるか
1なら輪郭に大きな線が1本、4なら4本、12なら細かな線が並びます。長さ0.5を保つと、区間が増えるほど1本は短くなります。落ち着いたアクセントなら少なめ、電飾のような細かな点滅感なら多めから試せます。
線分数は輪郭ごとの設定です。複数の文字を1本の線で順番に描く指定ではありません。今回の作例は「短い輪郭」を「少ないセグメント」にして、文字の小さな内側輪郭が線で埋まりすぎるのを抑えています。
長さ：各区間のどこまで描くか
長さ0.2は短い光、0.5は線と隙間を見分けやすい状態です。1.0にすると各区間いっぱいに線が伸びます。この作例では輪郭がつながり、回転しても変化が見えにくくなります。動きを見せたいときは、まず0.3〜0.6で隙間を残してみてください。
幹の幅：線の太さを変える
日本語UIでは、線の太さが「幹の幅」と表示されます。2pxは繊細、6pxは見やすい線、12pxは太いアクセントになります。縮小表示では細い線が見えづらくなるため、最終的な表示サイズでも確認します。
回転：輪郭の上で線の位置を送る
回転を変えると、線が輪郭の上を進みます。レイヤーの「トランスフォーム → 回転」とは別の項目です。一定速度で走らせる場合は、ベガスの回転に2点のキーを入れ、リニア補間にします。
基本例の作り方
- 720×450・30fpsのコンポジションを作り、450×230の白い四角形を中央に置きます。周囲は透明のままにします。
- そのコンポジションを別のコンポジションへ入れ、まとまったレイヤーに「ベガス」を適用します。入力レイヤーは「なし」のままで、適用レイヤー自身を使います。
- 線を「イメージの輪郭」、チャンネルを「アルファ」、レンダリングを「すべての輪郭」、短い輪郭を「少ないセグメント」にします。
- 線分数4・長さ0.5・セグメント配置「均一」・描画モード「透明」・幹の幅6・硬さ1にします。開始点・中間点・終了点の不透明度も、すべて1にします。
- 「回転」のストップウォッチをONにして、0秒を0x+0°、6秒を1x+0°にします。キーはリニア補間です。背景を別レイヤーとして下へ置き、再生します。
| 項目 | 基本例の値 |
|---|---|
| しきい値／プレブラー／許容量 | 127／0／0.5 |
| 線分数／長さ／セグメント配置 | 4／0.5／均一 |
| 描画モード／カラー | 透明／#54d8ef |
| 幹の幅／硬さ | 6／1 |
| 開始点・中間点・終了点の不透明度 | すべて1（中間点の位置0.5） |
| ランダムフェーズ | OFF |
| 回転のキー | 0秒：0° → 6秒：360°（1回転）／リニア補間 |
6秒のキーはコンポジションの終点に置いています。キーを置きにくい場合は、一時的にデュレーションを7秒へ伸ばし、設定後に6秒へ戻すと操作しやすくなります。
応用1：ネオン風の文字を作る
基本例の四角形を「PAS」の文字に変え、暗い輪郭と、動く明るい輪郭の2層にします。明るい層にグローを追加すると、途切れた線が走っていても文字の形を読み取りやすくなります。
| 項目 | ネオン文字の設定 |
|---|---|
| 文字の素材 | 透明背景1000×430／PAS／Arial Bold・285px |
| 明るい輪郭 | 線分数3／長さ0.6／幹の幅5／#54d8ef |
| 回転 | 0秒0° → 6秒360°／リニア補間 |
| 暗い輪郭 | 線分数1／長さ1／幹の幅3／#1e6571／回転キーなし |
| 追加エフェクト | 明るい層へグロー／半径25／強度0.8（その他は初期値） |
| 表示用コンポジション内 | 素材を95%表示 |
- 透明背景1000×430に、Arial Bold・285pxのPASを中央配置します。この素材を別のコンポジションへ入れ、基本と同じ輪郭設定でベガスを適用します。
- レイヤーを2枚に分けます。下は暗い輪郭用にして、線分数1・長さ1・幹の幅3・色#1e6571へ変更し、回転のキーを外します。
- 上は動く光にして、線分数3・長さ0.6・幹の幅5・色#54d8efに変更します。回転の2点のキーは基本例と同じです。
- 上のレイヤーで、ベガスの後に「グロー」を追加します。グロー半径25・強度0.8にし、別レイヤーの暗い背景と合わせて確認します。
グローを強くしすぎると、文字の中の隙間まで光で埋まります。先にベガスだけで線の形を整えてから、発光の量を足すと調整しやすくなります。
応用2：ロゴの輪郭にアクセントを添える
文字と3本の棒を組み合わせたシンプルなPASロゴです。基本例から線分数を1、長さを0.25へ減らし、短いアクセントにします。元のロゴを薄く背面に残すと、線が途切れている間も全体の形が伝わります。
| 項目 | ロゴの設定 |
|---|---|
| ロゴ素材 | 透明背景1000×430／PASはArial Bold・260px／3本の棒を追加 |
| 走る線 | 線分数1／長さ0.25／幹の幅7／#f1b36b |
| 回転 | 0秒0° → 6秒360°／リニア補間 |
| 背面の元ロゴ | ベガスなし／レイヤーの不透明度12% |
| 表示用コンポジション内 | 素材を96%表示 |
- 文字と図形を、透明背景の同じコンポジションへまとめます。今回の3本の棒は幅34px、高さ120・190・260pxです。
- 素材を別のコンポジションへ入れ、レイヤーを2枚にします。下の元ロゴはエフェクトをかけず、不透明度12%にします。
- 上にベガスを適用し、アルファ・すべての輪郭・透明の基本設定を保って、線分数1・長さ0.25・幹の幅7・色#f1b36bへ変更します。
- 回転を基本と同じ2点のキーで動かします。実際のロゴへ置き換えたときは、細かなパーツが線で埋まらないか確認します。
この例は、ロゴの各パーツの輪郭が同時に動きます。文字を左から右へ一筆書きする順番は指定していません。決めた1本の道筋を走らせたい場合は、「線：マスク/パス」で用意したパスを使う方法もあります。輪郭とパスの指定はAdobe公式のベガスの説明でも確認できます。
うまくいかないときの確認ポイント
線が画面の外周に出てしまう
背景も含めてプリコンポーズしていないか確認します。アルファを基準にする場合は、図形や文字の周囲に透明な領域が必要です。背景の平面は別に置きます。
輪郭は出るのに、動かない
ベガスは、この設定では回転にキーを入れて動かします。レイヤー自体の回転と取り違えていないか、0秒と6秒で値が変わっているかを確認します。長さ1で線がつながっている場合は、0.5程度へ下げて隙間を戻します。
線がぼやける・途中が消える
まず硬さを1、開始点・中間点・終了点の不透明度をすべて1にして確認します。初期値のままでは線の先端へ向かって透明になるので、今回のような均一な線とは見た目が変わります。
文字の内側だけ、線が細かくなりすぎる
「短い輪郭」を「少ないセグメント」にし、線分数も下げてみます。小さな穴や細かなロゴパーツには、外周と同じ本数を詰め込まないほうが形を追いやすくなります。
最初は線分数4・長さ0.5・幹の幅6・硬さ1で、回転だけを動かしてみると違いをつかみやすくなります。今回の検証は、透明背景の図形・文字を使った8bpcの作例です。写真からの輪郭抽出や、別バージョンでの表示は同じ条件として扱っていません。
次に試す表現
文字の面にハイライトを走らせたいときは、CC Light Sweepの解説も参考になります。ベガスは輪郭をたどる線、CC Light Sweepは文字の面を横切る光として使い分けられます。ほかの表現はAEエフェクト辞典の「描画」から探せます。
作例プロジェクトの配布
基本の適用前後、4種類の比較、ネオン文字、ロゴの輪郭アニメーションをまとめた編集可能なAEプロジェクトです。
| 項目 | 内容 |
|---|---|
| 版番号／容量 | v1.0／約144KB（147,785バイト） |
| 内容 | pas-vegas.aep／はじめに.txt |
| 確認環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| 追加プラグイン・外部素材 | 不要。AE標準のベガスとグローを使用 |
| 使用フォント | Arial Bold／ヒラギノ角ゴシック W6。フォント本体は同梱していません |
| 利用条件 | 学習・個人制作での利用と改変は可。商用利用は個別相談 |
フォントがない環境では、お手持ちの書体へ置き換えて、文字幅と輪郭を調整してください。古いAEバージョンでの互換性は未検証です。商用利用の相談はPASのお問い合わせからお願いします。
コメント