Illustratorの複合パスのような機能を使うと、After Effectsでもパスの変形アニメーションを作成できます。
シェイプのアニメーションだけでも多彩なモーショングラフィックスを作成できます。
サンプル3の式は、2026年10月16日にAfter Effects 26.5.0で、階層・数値・描画を確かめました。
サンプル1とサンプル2の手順の多くは、AE本体では確かめていません（確かめた範囲は各節に書いています）。
シェイプの結合
種類
After Effectsの「パスの結合」には以下の5種類があります。
- 結合：1つの合成パスにまとめるモード
- 追加：すべての入力パスの領域（輪郭）を合わせた領域を作成するモード
- 型抜き：最上位のパス領域から下位のパス領域を取り除くモード
- 交差：すべての入力パスが重なり合う領域のみを残すモード
- 中マド：入力パスが重なり合っている領域を除外するモード
サンプル1：左右で異なる表現のアニメーション
左側のアニメーション
- 同一シェイプレイヤー内に「移動する側のシェイプ（楕円形）」と「受ける側のシェイプ（長方形）」を作成します。
- 「パスの結合」を追加し、モードを「追加」に設定して2つの形状の輪郭を結合します。
- 2つのシェイプと「パスの結合」をグループ化し、名前を「図形グループ」にします。
- 画面の右半分全体を覆う長方形シェイプを追加します。
- 「パスの結合」を追加し、モードを「型抜き」にして右半分を削ります。
- これらをさらにグループ化し、名前を「アニメーショングループ_左」にします。
右側のアニメーション
- 「アニメーショングループ_左」を複製し、名前を「アニメーショングループ_右」に変更します。
- 「図形グループ」内に「パスのオフセット」を2つ追加し、線の結合を「ラウンド」にして「量」で角の丸みを調整します。
- もう一方の「パスのオフセット」の量は、エクスプレッションで正負逆の同じ値になるよう設定します。
- 「アニメーショングループ_右」直下の「パスの結合」のモードを「交差」に変更し、画面右半分のみを表示します。
-content("アニメーショングループ_右").content("図形グループ").content("パスのオフセット 1").amount正負のパスのオフセットを組み合わせると境界を丸められますが、細い部分や鋭い角の形状が元と完全に一致するとは限りません。
量を0にした形とも比較してください。
コンテンツ（左右のアニメーショングループの親）
- 最上位に「パスの結合」を追加し、モードを「追加」にして左右のアニメーショングループを結合します。
- 「塗り」や「線」は個別ではなく、この親階層にまとめて追加して一括調整します。
参考シーン：https://t.co/TsuSWm99yJ
サンプル2：リピーターを使った繰り返しアニメーション
作成方法
- シェイプツールでベースとなる図形を作成します。
- 作成したシェイプをグループ化し、「図形グループ」とします。
- 横用リピーターを追加し、コピー数5・位置[80,0]・スケール[100,100]・回転0にします。その下へ縦用リピーターを追加し、コピー数3・位置[0,80]・スケール[100,100]・回転0にします。横5×縦3の15個が基本の格子になります。
- グループ内に「塗り」や「線」を追加します。
- 「パスの結合」を追加し、モードを「追加」に設定します。
- 「パスのオフセット」を2つ追加して結合を「ラウンド」にし、一方を正、もう一方を同じ大きさの負の量にして丸みを調整します。細い部分や角が元の形に戻るとは限らないため、量0の形と比較します。
- 「トランスフォームのウィグル」を追加し、サイズがランダムに変動するアニメーションを設定します。
2026年10月16日に、Windows 11 Pro（10.0.26200）のAdobe After Effects 26.5.0（Build 89、日本語表示）で、別の練習コンポ（640×360・25fps・3秒）を使い、基本の格子を試しました。
30×30の白い四角形に、横用リピーター（コピー数5・位置[80,0]）と縦用リピーター（コピー数3・位置[0,80]）を付けると、5列×3行の15個が描画されました。
四角形とリピーターの作成はスクリプトで行い、画面ではコピー数と描画を確認しました。
この確認は格子までで、「パスの結合」「パスのオフセット」「トランスフォームのウィグル」を加えた後の形と動きは確かめていません。
サンプル3：エクスプレッションを使った線アニメーション
作成方法
- ペンツールなどでアニメーションさせるパス（ライン）を作成します。
- 「パスのトリミング」を追加し、「終了点」にキーフレームを打って線が伸びるアニメーションを作成します。
- 開いたパスを使う場合は「線」を追加し、「線幅」を10にします。パスのオフセットは輪郭の位置を変える操作で、線幅の調整とは分けます。
- パス・パスのトリミング・線を「G_01」へまとめ、その親グループを「線群」と命名します。G_01内の演算子名は「パスのトリミング 1」「線 1」に揃えます。
- 「G_01」を複製して「G_02」を作成します。
- レイヤーへスライダー制御を2つ追加し、「遅延（秒）」=0.1、「線幅差」=2と命名します。G_01のトリミング終了点は0秒=0%、1秒=100%の2キーを作り、時間補間をリニアにします。
「G_02」のパスのトリミングの「終了点」にエクスプレッションを追加します。
// G_02以降の「パスのトリミング 1」→「終了点」へ貼付。
var match = thisProperty.propertyGroup(3).name.match(/^G_(\d+)$/);
var id = match ? Math.max(1, Number(match[1])) : 1;
var delay = Math.max(0, effect("遅延（秒）")(1));
var master = thisLayer.content("線群").content("G_01")
.content("パスのトリミング 1").end;
master.valueAtTime(time - delay * (id - 1));
G_02以降の「線 1」の「線幅」には次の式を貼ります。
G_01の線幅は10のままにし、参照元へこの式を貼らないでください。
// G_02以降の「線 1」→「線幅」へ貼付。
var match = thisProperty.propertyGroup(3).name.match(/^G_(\d+)$/);
var id = match ? Math.max(1, Number(match[1])) : 1;
var step = Math.max(0, effect("線幅差")(1));
var master = thisLayer.content("線群").content("G_01")
.content("線 1").strokeWidth;
Math.max(0, master.value - step * (id - 1));
終了点の比較表は、G_01の2キーを時間方向にリニア補間した場合の値です。
イージーイーズなどを使うと、同じ時刻でも終了点の値が変わります。
正規表現で末尾の数字全体を読むため、G_100は100になります。
終了点と線幅の直上は演算子、2つ上はコンテンツ、3つ上はG_02となる階層を前提にしています。
余分なグループを挟むとpropertyGroup(3)の参照先が変わるため、階層を揃えてください。
timeから遅延を引く式なので、遅延（秒）が0.1ならG_02は0.1秒、G_03は0.2秒遅れます。
旧式の加算は同じ値だけ先行する動作でした。
- 「G_03」「G_04」と、線の先端が自然に細くなるまでグループを複製します。
- G_01〜G_05の「線」を各グループ内に置きます。親の線を使うとグループごとの線幅差を付けられません。参照するG_01を残して複製します。
2026年10月16日に、Windows 11 Pro（10.0.26200）のAdobe After Effects 26.5.0（Build 89、日本語表示）で、上の2つの式をそのまま貼って試しました。
練習コンポは640×360・25fps・12秒で、「線群」の中にG_01・G_02・G_03・G_04・G_100の5つのグループを置き、それぞれに横向きの開いたパスを入れました。
G_01の終了点は0秒で0%、1秒で100%のリニア補間の2キー、線幅は10で、スライダーは「遅延（秒）」を0.1、「線幅差」を2にしました。
練習用のパス・グループ・キーフレームの作成と式の貼り付け、値の読み出しはスクリプトで行い、画面では階層と数値の表示を確認しました。
0.4秒（0秒10フレーム）では、G_01〜G_04の終了点が40%・30%・20%・10%、線幅が10・8・6・4になり、4本の線の長さと太さに差が付きました。
終了点の式から見て、1つ上はパスのトリミング、2つ上はコンテンツ、3つ上はそれぞれのG_数字のグループでした。
12の時刻で値を読み出すと、5つのグループすべてで、終了点と線幅は式から計算した値と一致し、式のエラーはありませんでした。
After Effectsの他の操作やテクニックは、まとめ記事から確認できます。
3つの楕円形パスを「パスを結合」でまとめて、「パスのトリミング」で外周を描かせた例の画面です。
シェイプレイヤー「MergedOutline433」のコンテンツには、「楕円形パス 1」から「楕円形パス 3」、「パスを結合 1」、「線 1」、「パスのトリミング 1」が並んでいます。
「パスを結合 1」のモードは「追加」でした。
「パスのトリミング 1」は、開始点が0.0%、オフセットが0x+0.0°、「複数シェイプをトリム」が「同時に」でした。
「終了点」はキーフレームで動かします。
0:00:00:15では40.0%で、外周が途中まで描かれています。
0:00:01:13では「終了点」が100.0%になり、結合した3つの楕円の外周が、一周描かれました。
円が重なる内側の線は、描かれていません。
この画面は、パスの結合とトリミングの組み合わせの例です。
サンプル3のエクスプレッションの結果ではありません。
撮影した画面のフレームレートは25 fpsでした。
入力例・参照エラーの切り分け・戻し方
| 入力 | 期待する数値 |
|---|---|
| G_02 / 遅延0.1 / 線幅差2 | 0.1秒遅れ、線幅8 |
| G_03 / 同じ設定 | 0.2秒遅れ、線幅6 |
| G_100 / 同じ設定 | 9.9秒遅れ、線幅0に制限 |
| グループ名が違う | 番号は1扱い。G_数字の名前へ直す |
式の数値と参照名をローカルで確認しています。
サンプル3の式は、2026年10月16日にAfter Effects 26.5.0で、表の入力を試しました。
| 試したこと | 2026年10月16日の結果 |
|---|---|
| G_02・G_03・G_04を0.4秒で見る | 終了点30%・20%・10%、線幅8・6・4 |
| G_100を9.9秒・10.4秒・10.9秒で見る | 終了点0%・50%・100%、線幅は0で線は描かれない |
| G_02の名前をG_数字ではない名前に変える | 0.4秒で終了点40%・線幅10（G_01と同じ。番号1扱い）、式のエラーなし |
| G_01の名前を変える | G_02の終了点の式が、5行目でG_01を見つけられずエラー |
グループ名の変更と式の貼り直しはスクリプトで行い、エラーは式のエラー情報で確かめました（画面のエラー表示は撮影していません）。
名前と式を元に戻すと、エラーはなくなりました。
G_100は10.4秒（10秒10フレーム）に画面で合わせ、終了点50%と線幅0を確かめました。
サンプル1の左右の演算、5種類のモードの描き分け、正負のパスのオフセット、サンプル2の結合後のオフセットとウィグルは、AE本体での描画を確かめていません。
余分なグループを挟んだ場合や、遅延・線幅差にマイナスの値を入れた場合も確かめていません。
参照エラーの場合は「線群」「G_01」「パスのトリミング 1」「線 1」とエフェクト名を照合し、名前変更より先に入力先と階層を確認します。
パスの結合は同じグループ内で上にあるパスを入力にし、型抜きは最上位のパスから下のパス領域を引きます。
形を反転して抜いてしまう場合は、塗りより上のパス順と型抜き演算子の位置を確認します。
練習前に別名AEPを保存し、戻すときは複製側の式をOFFにしてG_01だけを表示します。
2026年10月16日に、G_02の終了点と線幅の式のスイッチを画面でOFFにすると、G_02の値は式を貼る前の100%・10に戻り、2本目の線が全長で表示されました。
OFFにしたときの値は、この練習で式を貼る前に入っていた値です。
式をOFFにしただけでは、そのグループは非表示になりません。
残りの複製の式をOFFにしてグループを非表示にすると、G_01の線だけが描画されました（この操作はスクリプトで行いました）。
パスの結合は演算子の有効スイッチをOFFにして元のパスと比較します。
パスの結合の有効スイッチをOFFにする戻し方は、確かめていません。
元のグループ構造まで戻す場合は保存したAEPを開き直します。
練習前に保存したAEPを開き直すと、4本の遅延した線に戻り、0.4秒の描画は変更前と全画素が一致しました（開き直しと比較はスクリプトで行いました）。
Adobe：パス演算とリピーター、Adobe：propertyGroupとvalueAtTime。
シェイプを使ったアニメーションの記事は、ほかにもあります。
まとめ
- パスの結合には「結合」「追加」「型抜き」「交差」「中マド」の5種類がある
- パスのオフセットを正負2つ組み合わせて丸みを調整できるが、元の輪郭や細部が完全に戻るとは限らない
- リピーターやトランスフォームのウィグルを併用することで、複雑なモーションを効率的に作成できる
- エクスプレッションでグループ名や数値を参照すれば、複製するだけで連動する制御が可能になる
よくある質問：After Effectsでシェイプのパスの結合を使うとき
「パスの結合」には、どんな種類がありますか？
5種類あります。
結合は1つの合成パスにまとめるモード、追加はすべての入力パスの領域（輪郭）を合わせた領域を作成するモード、型抜きは最上位のパス領域から下位のパス領域を取り除くモード、交差はすべての入力パスが重なり合う領域のみを残すモード、中マドは入力パスが重なり合っている領域を除外するモードです。
パスの結合が、思ったように効かないときは？
パスの結合は、同じグループ内で上にあるパスを入力にします。
型抜きは最上位のパスから下のパス領域を引くため、形を反転して抜いてしまう場合は、塗りより上のパス順と型抜き演算子の位置を確認してください。
パスのオフセットを2つ使うのは、なぜですか？
パスのオフセットを正負2つ組み合わせて丸みを調整します。
元の輪郭や細い部分が完全に戻るとは限らないため、量0の形と比較してください。
もう一方のオフセットの量は、エクスプレッションで正負逆の同じ値になるように設定します。
線の結合を「ラウンド」にして、「量」で角の丸みを調整します。
パスのオフセットと線幅は、同じものですか？
別の操作です。
パスのオフセットは輪郭の位置を変える操作で、線幅の調整とは分けます。
線を少しずつ遅らせて描くには、どうしますか？
G_01を複製してG_02、G_03…を作り、レイヤーのスライダー制御に「遅延（秒）」と「線幅差」を作ります。
G_02以降のパスのトリミングの終了点と線幅にエクスプレッションを貼ると、timeから遅延を引くため、遅延が0.1ならG_02は0.1秒、G_03は0.2秒遅れます。
G_01の線幅は10のままにし、参照元へこの式を貼らないでください。
2026年10月16日にAfter Effects 26.5.0で試すと、0.4秒でG_01〜G_04の終了点は40%・30%・20%・10%、線幅は10・8・6・4でした。
参照エラーが出たときは、何を確認しますか？
「線群」「G_01」「パスのトリミング 1」「線 1」とエフェクト名を照合し、名前変更より先に入力先と階層を確認します。
終了点と線幅の直上は演算子、2つ上はコンテンツ、3つ上はG_02となる階層を前提にしているため、余分なグループを挟むとpropertyGroup(3)の参照先が変わります。
グループ名は「G_数字」の形にしてください。
元の状態に戻すには？
練習前に別名AEPを保存しておき、戻すときは複製側の式をOFFにしてG_01だけを表示します。
パスの結合は演算子の有効スイッチをOFFにして、元のパスと比較します。
元のグループ構造まで戻す場合は、保存したAEPを開き直します。
2026年10月16日の練習では、G_02の2つの式をOFFにすると、式を貼る前の値（終了点100%・線幅10）に戻りました。
パスの結合の有効スイッチをOFFにする戻し方は、確かめていません。
この記事の式や階層は、実機で確認済みですか？
サンプル3の2つの式は、2026年10月16日にWindows 11 ProのAfter Effects 26.5.0で、そのまま貼って確かめました。
G_02〜G_04とG_100の終了点・線幅は式から計算した値と一致し、グループ名が違うと番号1扱いになること、G_01が見つからないと式のエラーになることも確かめました。
練習用の階層とキーフレームの作成、式の貼り付け、値の読み出しはスクリプトで行い、画面では階層と数値の表示、式のOFFを確認しました。
サンプル1の左右の演算、5種類のモードの描き分け、正負のパスのオフセット、サンプル2のオフセットとウィグル、余分なグループを挟んだ場合は確かめていません。
パス演算とリピーター、propertyGroupとvalueAtTimeは、Adobeの公式資料を参照しています。
