ロゴを線で描く。地図にルートを伸ばす。そんな「パスに沿って描かれていく動き」を作れるのが、描画カテゴリーの「線」（Stroke）です。マスクで道筋を用意し、「終了」の値を動かすと、線が端から現れます。
今回は曲線の基本例から始めて、手描き風のPASロゴと、架空の地図のルート表示へ展開します。線の太さ・硬さ・元画像との重なり方も、同じパスで比較します。
この記事の作例プロジェクトと利用条件は、記事の最後の配布欄にまとめています。
完成例：終了を動かすと、線が描かれる
右側は、平面そのものを縮めたり、位置を動かしたりしていません。マスクの形は固定したまま、「終了」で描画する範囲を変えています。最初と最後は少し止め、途中の描画はリニアにしました。
「線」はマスクの道筋を描くエフェクト
追加する場所は［エフェクト］→［描画］→［線］です。今回は平面レイヤーに開いたマスクを作り、マスクモードを「なし」にしています。これで元の平面をマスクで切り抜かず、パスだけを「線」に渡せます。
シェイプレイヤーの「線」や、ブラシツールの描画とは別の機能です。また、文字や画像の中心線を自動で見つける機能ではありません。今回のPASロゴも、描きたい順にマスクを手で作っています。
| 項目 | 今回の条件 |
|---|---|
| AE | After Effects 26.5（macOS）／8bpc |
| コンポジション | 1280×720／30fps／6秒 |
| 基本素材 | コンポジションと同じサイズの白い平面＋開いたマスク1本 |
| 平面の変形 | 位置［640, 360］／スケール100%／回転0° |
| マスクモード | なし |
| ペイントスタイル | 透明 |
パスのトリミングとの使い分け
線が端から描かれる動きは、シェイプレイヤーの「パスのトリミング」でも作れます。選ぶポイントは、線そのものを作るのか、元の画像を描いた範囲で見せるのか、そして今あるパスがマスクかシェイプかです。
| 判断ポイント | 「線」エフェクト | パスのトリミング |
|---|---|---|
| 使うパス | 適用したレイヤー上のマスク | シェイプレイヤー内のパス |
| 描画範囲の動かし方 | 開始・終了で調整 | 開始・終了・オフセットで調整 |
| 見た目の調整 | ブラシのサイズ・硬さ・間隔など | シェイプの線側で太さ・線端・角・破線・グラデーションなどを設定 |
| 元画像の描き出し | 「元のイメージを表示」で、描いた範囲の元画像を見せる | シェイプの描画をトラックマットなどと組み合わせる |
新しく線画ロゴ・囲み線・地図ルートを作るなら、まずパスのトリミングを検討します。シェイプの線の見た目を調整しながら、描き出しの動きを組めるためです。今回のPASロゴや地図ルートも、この方法で同様の動きを作れます。本記事では「線」の仕組みを確認するため、マスクと「線」を使っています。
既存のロゴ画像や筆文字をなぞって表示するなら、「線」の「元のイメージを表示」が便利です。画像の描きたい部分を通るマスクを作り、ブラシサイズがその部分を覆うように調整して、終了を動かします。画像の中心線や筆順を自動で解析する機能ではありません。
すでにマスクがあるレイヤーへ描き足したい場合や、ブラシの硬さで柔らかい輪郭を作りたい場合も「線」が候補になります。パスのトリミングはシェイプ内の［追加］から使う機能で、マスクへそのまま追加するものではありません。
機能の参照：Adobe公式ヘルプ：シェイプの線の設定・パスのトリミング。
まずはこの設定から
| 設定 | 基本例の値 | 役割 |
|---|---|---|
| パス | ROUTE（マスク1） | 線を描く道筋 |
| すべてのマスク | オフ | 基本例は指定した1本だけを使う |
| カラー | #31b9b0 | 青緑の線 |
| ブラシのサイズ | 18 | 線の太さ |
| ブラシの硬さ | 90% | 輪郭をはっきりさせる |
| 不透明度 | 100% | 線の濃さ |
| 開始 | 0% | 線の始点側を固定 |
| 終了 | 0% → 100% | 線が現れる範囲 |
| 間隔 | 5% | ブラシの間隔 |
| ペイントスタイル | 透明 | 元の白い平面を表示せず、線だけを見せる |
数値はエフェクトコントロールに表示される値です。下の実画面は2.5秒地点なので、終了が50%になっています。
比較：「終了」「サイズ」「硬さ」を一つずつ変える
終了：線をどこまで描くか
「終了」が25%ならパスの途中まで、100%なら最後まで線が見えます。逆に「開始」を増やすと、始点側から線が消えていきます。まずは開始を0%に固定し、終了だけを動かすと仕組みを追いやすいです。
ブラシのサイズ：同じパスの太さを変える
パス自体の形は変わりません。小さな画面で細い線が見えづらいときは、サイズを上げて確認します。太くしすぎると文字の内側や近くの線がつながるため、完成時の大きさで読みやすさを見てください。
ブラシの硬さ：線の輪郭を変える
今回のロゴやルートは輪郭を読み取りやすくするため90%を使いました。柔らかくにじむ線が欲しい場合は、硬さを下げた見え方も試せます。
ペイントスタイル：白い平面が残るときに確認する
| ペイントスタイル | 今回の比較で見えるもの |
|---|---|
| 元のイメージ | 元画像と、設定したカラーの線 |
| 透明 | 設定したカラーの線だけ |
| 元のイメージを表示 | 元画像が線の形を通して見える |
線だけを別の背景に重ねたいなら「透明」から始めます。「元のイメージを表示」は、描いた範囲で元画像を見せたい場合の選択肢です。今回の基本例は白い平面なので、そこに設定すると元画像の白が見えることになります。
作り方：曲線を0%から100%まで描く
- 1280×720・30fps・6秒のコンポジションを作ります。背景用の平面と、線を描くためのコンポジションサイズの平面を分けて用意します。
- 線用の平面を選び、ペンツールで開いたマスクを描きます。カーブは頂点をドラッグしてハンドルを出します。最後の点を始点につなげず、選択ツールへ切り替えます。
- タイムラインでマスクを開き、マスクモードを「なし」に変更します。［描画］→［線］を追加し、「パス」にそのマスクを指定します。
- サイズ18・硬さ90%・開始0%・間隔5%・ペイントスタイル「透明」にします。カラーは青緑（#31b9b0）。
- 0.5秒（0:00:00:15）へ移動し、「終了」を0%にしてストップウォッチをオン。4.5秒（0:00:04:15）で100%を入力します。補間はリニアのままにします。
- 再生して道筋と太さを確認します。描く方向を変えたい場合は、パスの頂点の順序も確認してください。
終了をリニアにしても、パスの形やカーブによって見た目の進み方は変わります。狙うテンポがある場合は、まず描き始め・描き終わりの時刻を決めて調整します。
応用1：PASを手描き風の線で描く
基本の曲線を、文字の中心を通るパスへ置き換えた作例です。PとSは曲線、Aは折れ線と横棒に分けています。線の交差や戻りが目立つときは、マスクを分けると順番を調整しやすくなります。
| 項目 | PASロゴの設定 |
|---|---|
| マスク | 01_P／02_A／03_A_BAR／04_Sの4本。すべて「なし」 |
| すべてのマスク | オン |
| 線(連続) | オン |
| サイズ・硬さ・間隔 | 18／90%／5% |
| ペイントスタイル | 透明 |
| 終了 | 0.5秒で0% → 4.5秒で100%（リニア） |
- 基本例の平面を複製し、元の曲線マスクを削除します。背景と線用平面の役割は分けたままにします。
- P、Aの斜線、Aの横棒、Sの4本をペンツールで描きます。各マスクを「なし」にして、描きたい順に並べて名前を付けます。
- 「すべてのマスク」と「線(連続)」をオンにします。基本例の終了キーを残して再生し、文字の形と描画順を確認します。
既存の太いロゴ画像を少しずつ見せたい場合は、画像を覆うように別途パスとブラシサイズを調整する方法もあります。今回は画像の描画順を自動解析するものではなく、線だけで構成したPASを扱っています。
応用2：架空の地図にルートを伸ばす
道順の説明やアクセス案内に使える組み方です。地図の上にルート用の平面を重ね、「透明」で線だけを表示します。開始と目的地の丸・文字も別レイヤーにしてあります。
| 項目 | ルート表示の設定 |
|---|---|
| マスク | 曲がり角を頂点にした開いたマスク1本／モード「なし」 |
| サイズ・硬さ・間隔 | 10／90%／5% |
| カラー | #ef704e（オレンジ） |
| 開始・終了 | 開始0%／終了0.5秒で0% → 4.5秒で100% |
| ペイントスタイル | 透明 |
- 地図を下に配置し、その上にコンポジションサイズのルート用平面を置きます。配布作例の地図はAE内の平面で組んだ架空のものです。
- ルート用平面に、STARTからGOALへ向かう開いたマスクを描きます。曲がり角をクリックして頂点にし、マスクモードは「なし」にします。
- 基本例からサイズを10、カラーを#ef704eへ変更します。終了のキーは同じ時刻に置き、線が道路に沿って現れることを確認します。
つまずきやすいところ
線を追加しても平面のまま
ペイントスタイルが「元のイメージ」だと、元の平面が残ります。線だけを見せたい場合は「透明」にします。あわせて、パスが「なし」になっていないか、別レイヤーのマスクを想定していないかも確認してください。マスクは「線」を適用したレイヤー上に用意します。
マスクで背景が切り抜かれる
マスクモードを「加算」のままにしている可能性があります。今回の作例では「なし」にして、マスクを線の道筋として使っています。シェイプができてしまう場合は、ペンツールを使う前に対象の平面レイヤーを選択します。
複数の文字が同時に描かれる
「すべてのマスク」に加えて「線(連続)」を確認します。描く順序を変えたいときは、マスクの並びと各パスの向きも見直します。途中で大きく飛ぶ場合は、離れた線を別マスクへ分けてみてください。
始点から描くつもりなのに、別の場所から始まる
パスを描いた順序や、閉じたパスの最初の頂点が影響します。まずは開いたマスク1本で、開始0%・終了0→100%の動きを確認してから、複雑な形へ広げると整理しやすいです。
まずは「マスク1本・終了0→100%」から
開いたマスクを作る → モードを「なし」 → ペイントスタイルを「透明」 → 終了を動かす。この順番を押さえると、文字・図形・地図のルートに展開できます。最初はサイズ18・硬さ90%・間隔5%を出発点にしてみてください。
仕様の参照：Adobe公式ヘルプ：Generate effects — Stroke。作例と設定はAfter Effects 26.5の8bpcで確認しています。
作例プロジェクトと利用条件
基本例・4種類の比較・PASロゴ・架空の地図ルートを、編集可能なAEプロジェクトにまとめました。ZIPを解凍して「はじめに.txt」を読み、使いたいコンポジションを開いてください。
確認環境：After Effects 26.5（macOS）／8bpc／1280×720・30fps・6秒。追加プラグイン・外部素材は不要です。他のバージョンやWindowsでは未検証です。
使用フォント：Hiragino Sans W6、Arial Bold。フォント本体は同梱していません。使用できるフォントへ置き換えた場合は、ラベルの位置や改行を確認してください。
利用条件：学習・個人制作での利用と改変が可能です。商用利用は、事前にお問い合わせから個別にご相談ください。
コメント