【AE】モーション周期表のWiggle実践編｜wiggleの使い方と揺れの作り方

※Wiggleの考え方から確認したい方は、理解編をご参照ください。

今回のゴールは「シェイプやテキストに自然な揺れをつける」こと

作業前に準備するもの

サナ

実践する前に準備することはありますか？

シン

揺らしたいレイヤーのプロパティにwiggle式を入れる操作になるので、先に「揺らす対象」を1つ作っておきましょう。

シェイプでもテキストでも大丈夫ですよ。

下準備1：コンポジションを作成する

新規コンポジションを作成します。

設定例を用意していますが、練習用なので設定が異なっていても問題ありません。

下準備2：揺らす対象のレイヤーを作る

wiggleで揺らす対象を1つ用意します。今回は分かりやすいように、シェイプの正円かテキストのどちらかを作ります。

画面中央に置いておくと、揺れの量が左右上下どちらにも見やすくなります。

実践編1：位置にwiggleを適用する

サナ

揺らす対象は作りました。ここからどのように操作すればよいでしょうか？

シン

まずは位置（Position）にwiggle式を入れてみましょう。

最初は細かい調整より、「揺れているか」を確認するところから始めましょう。

手順1：位置プロパティを開く

タイムラインで対象レイヤーを選択し、Pキーを押して位置プロパティを表示します。

手順2：ストップウォッチをAlt＋クリックする

位置の左にあるストップウォッチマークを、Altキー（Mac：Optionキー）を押しながらクリックします。

これで式の入力欄が開き、ストップウォッチが青く点灯します（エクスプレッションON）。

手順3：wiggle式を入力する

入力欄に、「wiggle(2, 30)」を入力します。

入力できたら、入力欄の外をクリックするか、テンキーのEnterで確定しましょう。

手順4：プレビューで揺れを確認する

プレビューを再生して、対象がランダムに揺れているか確認します。

この段階では揺れ方が理想通りでなくても問題ありません。大事なのは次の3点です。

Q&A：式を入れても揺れない場合

サナ

式を入れたのに、止まったまま動きません……。

シン

ストップウォッチが青く点灯しているか、もしくはプレビューを再生しているかを確認しましょう。

Q&A：式の入力でエラーが出る場合

サナ

「wiggle(2, 30)」 を入れたら赤い警告が出ました。

シン

まずは、スペルと記号を確認してみましょう。

実践編2：freq・ampで揺れ方を整える

サナ

揺れは出たんですけど、揺れ方に違和感があります。

シン

freq（速さ）とamp（大きさ）の2つを別々に調整してみましょう。速さと大きさを分けて考えるのがコツです。

freq：「揺れの速さ」を決める数字

freqは、式「wiggle(freq, amp)」の1つ目の数字で、1秒間に何回揺れるかを決めます。

値を上げると小刻みでせわしない揺れに、下げるとゆっくりした揺れになります。

目安：freq = 2〜3（手持ちカメラ風に見せやすい揺れ。10を超えると震え・ブレに寄りやすく、1を下回るとゆっくりした揺れに見えやすくなります）

amp：「揺れの大きさ」を決める数字

ampは、式「wiggle(freq, amp)」の2つ目に入る数字で、どれくらいの幅で揺れるかを決める場所です。

位置に入れた場合、ampの単位はピクセル（px）です。

目安：amp = 10〜30（1920×1080では自然な揺れに見せやすい範囲。100を超えると大きく動きすぎる場合があり、5を下回ると素材によっては気づきにくくなります）

Q&A：揺れが大きすぎて画面酔いしそうな場合

サナ

揺れが激しすぎて、見ていて疲れる動きになってしまいました……。

シン

先にamp（大きさ）を下げて、それでも気になるならfreq（速さ）を下げるのがおすすめです。自分も最初は大きくしすぎて、酔いそうな揺れを作ってしまいました。

実践編3：縦だけ揺らす・ちらつき・質感で広げる

サナ

ここまできたら、もう少し演出っぽい揺れも作りたいですね。

シン

では、「縦だけ揺らす」「不透明度でちらつかせる」「octavesで質感を足す」の3つを試してみましょう。どれも式を少し変えるだけで再現できます。

応用1：縦（または横）だけ揺らす

位置に「wiggle(2, 30)」を入れると、縦にも横にも揺れます。

縦だけ揺らしたいときは、次のように書きます。

w = wiggle(2, 30);
[value[0], w]

これは「横（X）は元の位置のまま、縦（Y）だけwiggleで揺らす」という意味です。

横だけ揺らしたいときは [w[0], value]にします。

応用2：不透明度でちらつき・明滅を作る

wiggleは位置だけでなく、不透明度（Opacity）にも入れられます。

Tキーで不透明度を開き、ストップウォッチをAlt＋クリックして、次の式を入れます。

wiggle(10, 40)

不透明度は通常0〜100％で扱われるため、元の不透明度を中心に値が揺れ、ライトのちらつき・明滅のような表現を作れます。

値がはみ出すのを避けたい場合は、「clamp()」で0〜100に収める方法もあります。

応用3：octavesで揺れの質感を足す

揺れに細かいギザギザ感を足したいときは、3つ目の数字（octaves）を入れます。

wiggle(2, 30, 3)

octavesを増やすと、大きな揺れの上に細かい揺れが重なり、揺れのディテールが増えます。省略時は1で、まずはこのままでも十分です。

Q&A：縦だけ揺らす式で想定外の動きになる場合

サナ

2行の式を入れたら横にも揺れ始めてしまって、思った動きに調整できません。

シン

1行目のセミコロンと角カッコを確認しましょう。

配列の書き方が影響していることがありますよ。

仕上げ：複数レイヤーの個体差とモーションブラー

同じwiggle式を入れたレイヤーを複製（Ctrl/Cmd＋D）すると、条件によっては揺れ方が似て見えることがあります。レイヤーごとに違う揺れを明示的に出したいときは、wiggleの前に1行足します。

seedRandom(index, true);
wiggle(2, 30)

「index」はレイヤー番号なので、レイヤーごとに異なるシードを与えられます。

wiggle自体は時間に沿って揺れ続けますが、レイヤーごとの揺れの出方を安定して分けたいときに使えます。

さらに、揺れをなめらかに見せたい場合は、レイヤーのモーションブラースイッチをオンにし、コンポジション側のモーションブラーも有効にします。

速い揺れがブレて、映像になじみやすくなります。

まとめ：Wiggleは「対象 → 位置に式 → freq/amp → 応用」の順番で考える

うまくいかないときの3チェック

ここまでの手順通りに進めても、思った通りに動かない場合は、以下の3点を順番に確認してください。

次に読むおすすめ記事

Wiggleの基本的な作り方がわかったら、次は関連する表現も確認しておきましょう。