After Effectsのモーションを整理した「モーション周期表」を再現する過程で学んだ内容を、初心者向けにまとめます。
本記事では、その中でも「パスのウィグル(wiggle path)」に絞って解説します。

※英語表記：Wiggle Path（AEの日本語UIでは「パスのウィグル」）

この記事でできること

✅パスのウィグルの役割がわかる
✅線（パス）が揺れる基本動作を再現できる
✅パスのウィグルの操作での「つまづきポイント」がわかる

Contents
  1. パスのウィグルとは？
  2. パスのウィグルを再現するための下準備
  3. 【基本】パスのウィグルで「揺れる線」を作る
  4. パスのウィグルの「揺れの速さ」をコントロールする
  5. パスのトリミングを使って「描いて→揺れる」動きにする
  6. ここまでのまとめ：パスのウィグルを使うポイント
  7. 「パスのウィグル」のトラブル対処法3選
  8. 終わりに～「パスのウィグル」を試してみよう～

パスのウィグルとは？

サナ
サナ
パスのウィグルって、どんな表現ができるんだろう？
シン
シン
シェイプレイヤーで線の形を決める「パス」をランダムに変形することで、手描きや稲妻みたいな「生きた線」を作れます。出番が多い操作になるので、まずは基本から順にやってみましょう
  • 「整った線」を崩したい場面で使います。（手描き線、電気（稲妻）、波形の輪郭、不安定さやざわつきの演出など）
  • 「パスの変形」にかかわるので、シェイプレイヤーで作った輪郭のパスに使います。
出典：Adobe After Effects（© Adobe Inc.）

 

今回のパスのウィグルで使う項目について

シン
シン
パスのウィグルは、触る項目ごとに「何が変わるか」がだいたい決まっています。ここでは、「どのような機能があるか」をイメージだけつかめれば大丈夫です

揺れの「形」を決める項目

  1. ディテール：線の揺れ方の細かさ（ザラザラ、細かく波打つ感じ）を調整する場所
  2. ポイント（直線的または滑らか）：折れ方の雰囲気（稲妻っぽい、手描きっぽい）を切り替える場所
  3. サイズ：揺れの大きさ（どれくらい形が動くか）を決める場所

揺れの「速さ」を決める項目

  1. ウィグル／秒：揺れの速さを調整する場所（ここで速さを変更した場合、サイズやディテールを操作して調整する場合もある）
  2. 時間的フェーズ：揺れの進み方を決める場所（「time*120」のような式を入れて速さを管理できるため、「速度だけ」を調整したいときに便利）

パスのウィグルを再現するための下準備

シン
シン
作業を始める準備から行いましょう。「シェイプレイヤーで作る」ことと、「線（Stroke）を見やすくする」ことを優先して行います

コンポを作成する

  • 解像度：1920×1080、フレーム30fps
  • 時間：3〜5秒

※ショートカット：Ctrl + N（Mac：⌘ + N）

シェイプレイヤーを作成する

  • 操作手順：「レイヤー」＞「新規」＞「シェイプレイヤー」

※タイムライン上で「右クリック」→「新規」→「シェイプレイヤー」でも作成できます。

線（Stroke）を作る

  • ペンツールで2点クリックして直線を作成する。Shiftで水平固定するとまっすぐな線になる
  • 線だけ使うので、塗り（Fill）は非表示にする
  • 線（Stroke）の太さ：8〜14px

この後の操作で使う前知識

  • キーフレーム設定：
  1. ストップウォッチをクリック
  2. 数値を変更してキーフレームを打つ
  • エクスプレッション（式）設定：
  1. ストップウォッチを「Alt（Win）／Option（Mac）を押しながらクリック」
  2. エクスプレッション（式）を入力

※入力する式は、手順の項目で後ほど紹介します。

 

【基本】パスのウィグルで「揺れる線」を作る

シン
シン
まずは「パスのウィグル」を、シェイプレイヤーの「コンテンツ」に追加します
出典：Adobe After Effects（© Adobe Inc.）

パスのウィグルを追加する

  • シェイプレイヤーを選択
  • 「コンテンツ」→「シェイプ_1」の選択→「追加」→「パスのウィグル」
    →コンテンツ内に「パスのウィグル_1」が表示される

確認ポイント（入れる場所）

  1. タイムラインで対象レイヤーが「シェイプレイヤー」になっているか確認
  2. 「コンテンツのシェイプ_1」の中に「パス_1」「パスのウィグル_1」「線_1」が並ぶ状態になっているか確認
    ※間違いパターン：「シェイプ_1」「パスのトリミング_1」「パスのウィグル_1」の並び

パスのウィグルは「シェイプレイヤーのパス」に対して動きます。
（テキストや画像に直接効かないので、効かせたい場合は「シェイプ化」などの別手順が必要）

パスのウィグルの設定を変更する

シン
シン
まずは見た目（線の形）を整えるために、「ディテール」と「サイズ」、「ポイント」の3つから触ってみましょう。

下の画像は、ディテールとポイント、サイズを変えると「線の形」がどのように変わるかをまとめたものです。

出典：Adobe After Effects（© Adobe Inc.）

パスのウィグルの設定例

  • ディテール：70
  • ポイント：直線的に
  • サイズ：0→30（キーフレームを使って、時間経過に合わせて揺れを作る）

サイズの変更で「揺れ」を立ち上げるまでの手順

  1. 「パスのウィグル」内の「サイズ」のストップウォッチをクリック
  2. 開始フレーム：サイズを0にしてキーフレームを打つ（揺れ無しの状態）
  3. 10〜20フレーム後：サイズを30に調整する（揺れが出る状態）
  4. プレビューして「揺れが見える」ことを確認する
  • 「サイズを上げすぎる」もしくは「ディテールとサイズを同時に大きくする」と、形や動きが崩れやすくなる
    →片方ずつ調整して、形や動きが崩れないようにしましょう。サイズは30前後、ディテールは70前後を基準に、片方ずつ調整しましょう。
  • 「線幅」や「レイヤーのスケール」で「揺れて見える量」が変化する（線幅8〜14px・スケール100%での操作をおすすめします）

イージーイーズで揺れの立ち上がりをなめらかにする

サナ
サナ
揺れ始めがちょっとカクッとして見えますね……
シン
シン
イージーイーズ（F9）を試してみましょう。「サイズ0と30の2点」にかけることで、開始地点と終了地点の動きがなめらかになります
  • 「サイズ」のキーフレーム（サイズ0と30の2点）を選択する
  • イージーイーズ（F9）を設定する

※さらに滑らかにしたい場合は、グラフエディターでカーブを少し強める

パスのウィグルの「揺れの速さ」をコントロールする

サナ
サナ
揺れは出せたけど、「速さ」ってどこで調整するんだろう？
シン
シン
「ウィグル／秒」で揺れの速さも調整できます。

場所：「コンテンツ」＞「シェイプ_1」＞「パスのウィグル_1」＞「ウィグル／秒」

揺れの速さは「動きが決まった段階」で調整する

シン
シン
「サイズ（強さ）」などで動きを作った後に「ウィグル／秒（速さ）」で調節することが狙った動きに近づけるコツです。実際に調整手順を体験してみましょう。

「ウィグル／秒」で揺れの速さを調整する

  1. サイズ：30に設定（目安：20～40）
  2. ディテール：70に設定
  3. ポイント：「直線的に」（もしくは「滑らかに」）
  4. ウィグル／秒：2.0に設定（調整範囲は「1.0〜3.0」がおすすめ）
  5. 揺れがイメージより「細かく震える状態」なら、「ウィグル／秒」もしくは「ディテール」を下げる
  6. 揺れがイメージより「緩やかな状態」なら、「ウィグル／秒」もしくは「ディテール」を上げる
  7. 必要に応じて「ディテール」や「ポイント」で質感を微調整する

速さを最後に調整した方が良い理由

サナ
サナ
「速さ」を先に調整するのはダメですか？
シン
シン
速さを先に調整すると、印象に違和感を覚えたときに「何が原因なのか」を特定しづらくなります。特別な理由がなければ、速さは最後に調整するのがベストです。
  • 先にウィグル／秒を上げると、違和感の原因が「ディテール」なのか「速さ」なのかが見分けにくくなる
  • 先に形（サイズ・ディテール・ポイント）を決めておけば、残りは「速い」「遅い」の調整を考えるだけになる

（応用）「時間的フェーズ管理」にエクスプレッションを入れて「揺れの速さ」を自動化する

サナ
サナ
もし尺の長さが変わったら、「全部の設定を調整し直す必要がある」ってことですよね
シン
シン
そうですね。特に「揺れの速さ」を後から調節する可能性があれば、「時間的フェーズ」を式で動かすようにしておくと一括で調整できるようになります

ウィグル／秒だけでも十分作れますが、制作が進むと次のような状況が出てきます。

  • 尺が伸びた、もしくは短くなったことで、テンポを調整したい場合
  • サイズやディテールはそのままで、速さだけ変えたい場合
  • 「速さ」を複数カットで統一したい場合

その解決方法として、ウィグル／秒を「0」にして、「揺れの進行」を時間的フェーズで管理する方法です。

この操作によって、ウィグル／秒による揺れが消えるため、「time*〇（＝係数）」だけで速度を調整できるようになります。

揺れの強さ（＝サイズ）と、動きの進み方（＝時間）を別々に管理することで、尺変更の微調整を「係数の変更」のみに限定できます。

揺れの速さを時間的フェーズで管理するメリット

  • 揺れの速さを一元管理できる：time*〇の係数（120など）を変えるだけで、揺れの進み方をまとめて調整できる
  • 揺れの強さと分離できる：サイズ（強さ）を触らずに、速度側だけを調整できる

  • 速さを調整する場所が明確になる：time*〇は他の設定でも「速度調整」で登場することが多いので、迷いが減らせる

時間的フェーズで「揺れの進行」を自動化する

  1. 速さの調整に影響を出さないために、パスのウィグル内の「ウィグル／秒」を0にする

    ※「ウィグル／秒」を0にしない場合でも動きますが、速度管理が二重になり、調整が難しくなります。

  2. 「時間的フェーズ」のストップウォッチを「Alt（Win）/Option（Mac）」＋「クリック」する

  3. 「time*〇;」の式を入力する

このままコピペして下さい（コピーすると自動で半角になります）
time*120;

※「時間的フェーズ」に入れる式です。
timeは「秒」を表し、動きの1周期は360（°）で計算されています。120はスピード係数なので、遅くしたい場合は「60」、速くしたい場合は「240」のように調整します。

パスのトリミングを使って「描いて→揺れる」動きにする

サナ
サナ
線を描いてから揺れる感じにしたいのだけど、どうしたらいいんだろう？
シン
シン
「パスのトリミング」を使うと、「線が伸びてから揺れる」演出もできます
  • 「コンテンツ」＞「追加」＞「パスのトリミング」を入れる
  • 「終了点」に0%と100%のキーフレームを打つ
    →例：0秒時点と2秒時点でそれぞれ0％と100％のキーフレームを打つ
  • 揺れ開始は「パスのウィグルのサイズ」で調整する
  • 揺れない時間を作るために、キーフレームを「サイズ＝0」の状態で2か所指定して、それらより後ろの位置にサイズが「30」になるようにキーフレームを打つ

順番の考え方（混乱しやすいポイント）

  1. 線が「描かれる」動きは「パスのトリミング」で調整する
  2. 線が「揺れる」動きは「パスのウィグルのサイズ」で調整する
  3. この2つの開始タイミングが同じなら「揺れながら描かれるアニメーション」になります。
  4. この２つの開始タイミングをずらすなら「描いてた後に揺れ始めるアニメーション」になります
出典：Adobe After Effects（© Adobe Inc.）
シン
シン
「パスのトリミング」はこちらでも解説しています

【AE】モーション周期表「Tip Shape」をパスのトリミングで再現する

ここまでのまとめ：パスのウィグルを使うポイント

  • パスのウィグルは、「線（パス）の形を揺らして動きを作る機能」
  • パスのウィグルの基本の流れを固めることがコツ
    ①ディテールとポイント、サイズを調整して、動きの土台を作る→②「ウィグル／秒」もしくは「時間的フェーズ」で速さを調整する

「パスのウィグル」のトラブル対処法3選

サナ
サナ
つまずきポイントも、先に知っておきたいです。
シン
シン
3つに絞って、対処法をまとめます。

ケース1：パスのウィグルを入れたのに「何も起きない」

サナ
サナ
パスのウィグルを追加したはずなのに、線が揺れません
シン
シン
その原因は、「サイズなどが小さすぎて変化が見えない」か「パスのウィグル」を「シェイプレイヤーのコンテンツ」に入れていない場合が多いです
  • パスのウィグルが「コンテンツ」＞「シェイプ_1」を選択してから「追加」
    →「シェイプ_1」と同じ列に「パスのウィグル」が入っていることを確認してください
  • 「線幅」や「揺れる強さ」を調整する（例：サイズを30にする、線幅を8〜14pxにする、線の不透明度が0％になっていないか確認する）

ケース2：揺れが「荒れすぎて」線が崩れる

サナ
サナ
揺らしたら、線がぐちゃぐちゃに崩れてしまいました…
シン
シン
「サイズ」と「ディテール」の上げすぎで、揺れる線の形や動作が崩れる場合があります
  • ✅サイズ30、ディテール70に戻して、再度調整する
  • ✅動きを稲妻寄りにしたいなら「ディテール」調整前に、ポイントが「直線的」になっているか確認する
  • ✅上げるときは「サイズ」か「ディテール」のどちらか片方を少しずつ上げて確認する

ケース3：動きが速すぎる、逆に遅すぎる

サナ
サナ
速度の調整がうまくいきません。どこを触ればいいですか？
シン
シン
「ウィグル／秒」で調整する方法が簡単です。ただ、尺の長さを変更する前提があれば、「時間的フェーズ」を使った方法で調整してみましょう
  • 「ウィグル／秒」で速さを調整する（1.0〜3.0が目安）
  • 尺変更が多くて管理が大変なら、「ウィグル／秒」を0にして「時間的フェーズ」にエクスプレッション（time*〇;）を入れる

終わりに～「パスのウィグル」を試してみよう～

サナ
サナ
パスのウィグルを使えると、線の動きをより細かく表現できそうですね。早速使ってみます
シン
シン
「綺麗すぎる図形の線」の動きに一工夫加えたいときは、ぜひ今回の「パスのウィグル」を使ってみてくださいね

【記事の制作裏話はこちら（note：Hiromuの探求部屋）】

制作中に気づいたポイントや、つまずきやすい部分の補足もまとめています。

時間があるときに、よければ覗いてみてください。