【AE】モーション周期表のエフェクト「ラフエッジ(Roughen Edges)」を再現する

After Effectsのモーションを整理した「モーション周期表」を再現する過程で学んだ内容を、初心者向けにまとめます。
本記事では、その中でもラフエッジ(Roughen Edges)に絞って解説します。
✅ラフエッジ(Roughen Edges)の役割がわかる
✅輪郭がゆらぐ「位置ノイズ」を再現できる
✅ラフエッジの操作での「つまづきポイント」がわかる
ラフエッジ(Roughen Edges)とは?
- UI枠、手描き風フレーム、紙・コピー・腐食のような質感など、線が「きれいすぎて浮く」場面で、輪郭に「生っぽさ」を足したいときに使います。
- 位置(Position)を揺らすのではなく、輪郭のノイズを動かす点が特徴です。動きは「展開(Evolution)」で作ります。
出典:Adobe After Effects(© Adobe Inc.)ラフエッジを再現するための下準備
1.コンポを作成する
- 解像度:1920 × 1080、フレームレート30fps
- 時間:5〜10秒
※ショートカット:Ctrl + N(Mac:⌘ + N)
2.シェイプレイヤーを作成する
- 操作手順:「レイヤー」>「新規」>「シェイプレイヤー」
※タイムライン上で「右クリック」→「新規」→「シェイプレイヤー」でも作成できます。
3.ラフエッジを適用する図形を作成する
- 今回は四角形を作成:塗り(Fill)なし/線(Stroke)ありの「枠」状態にしておきます。
※背景は黒など、変化が見えやすい色にすると確認が楽です。
この後の操作で使う前知識
◆キーフレーム設定:
- ストップウォッチをクリック
- 数値を変更してキーフレームを打つ
◆エクスプレッション(式)設定:
- ストップウォッチを「Alt(Win)/Option(Mac)を押しながらクリック」
- エクスプレッション(式)を入力
※入力する式は、手順の項目で後ほど紹介します。
【基本】ラフエッジで「輪郭を崩す」
出典:Adobe After Effects(© Adobe Inc.)
ラフエッジを使って「ラフ」を作る
✅枠レイヤーを選択 → 「エフェクト」>「スタイライズ」>「ラフエッジ(Roughen Edge)」
✅エッジの種類:ラフ
✅縁:20.0/スケール:100/複雑度:4
パラメータはどこを触ればいい?
- 縁:崩れの量を調整する場所
→上げるほど「手描き感」が強くなる - スケール:粒の大きさを調整する場所
→下げるほど「大きなうねり」になる - 複雑度:ノイズの情報量を調整する場所
→細かいギザギザが増えて「汚れた線」に見えやすくなる
(補足)もっとこだわりたい場合に触るパラメータ
こだわり調整に使う4つ
質感の調整:
- エッジのシャープネス:ギザギザの「角の立ち方」を調整する場所
→上げると輪郭が硬い表現となり、下げると柔らかい表現となる - フラクタルの影響:「ノイズの強さ」を調整する場所
→上げるほどノイズ感が強く、下げると控えめになる(1.0付近が無難)
クセの調整:
- 幅または高さを伸縮:ノイズを一定方向に伸縮させ、ノイズに「クセ」を作れる場所
→「エッジの種類」のフォトコピーとの相性が良い - オフセット(乱流):ノイズの「出現位置」をずらす場所
→形を変えずに「別のパターン」に調整したいときに便利
注意:最初から全部触ると迷いやすい
- 「縁・スケール・複雑度」で見た目を決める
- 上記の4つで「質感」を整える
の手順がおすすめです。
展開(Evolution)を使ってノイズを動かす
展開に式を入れて輪郭をゆらす
輪郭ノイズの位置が周期的にずれることで、「輪郭がゆらゆら変化する表現」ができます
✅「エフェクトコントロール」→ Rough Edge → 「展開」を開く
✅「展開」のストップウォッチを Alt(Win)/ Option(Mac)+クリック
✅表示された欄にtime*60を貼り付ける
time*60※60を上げるほど速く、下げるほどゆっくり動きます(例:time*20 / time*120)。
出典:Adobe After Effects(© Adobe Inc.)- 迷ったらtime*60の式を当てはめると、変化が分かりやすい
- 揺れが強いと感じたら、まず縁を下げてみる(例:8→4)
- 粗い・散ると感じたら、次にスケール/複雑度を調整する
- 「速さを落としたい」場合:縁ではなくtimeの数値を下げる
(例:time*60 → time*20)
wiggle(=ランダムな揺れ)を入れることとの違いとは?
応用:エッジの種類で「質感」を作り分ける
出典:Adobe After Effects(© Adobe Inc.)
応用①:さび&カラー(腐食・汚れっぽい質感)
輪郭の揺れはそのままに、エッジに「汚れ」のニュアンスを足したいときに便利です。
✅エッジの種類:さび&カラー
✅縁:5.0 / エッジのシャープネス:1.5
✅スケール:50 / 展開:time*60
応用②:フォトコピー(コピー機っぽいザラつき)
周期表の雰囲気に寄せたい場合は、フォトコピーが相性良いです。特に「伸縮」が効きます。
✅エッジの種類:フォトコピー
✅縁:3.0 / スケール:100 / 複雑度:2
✅幅または高さを伸縮:75.0
ここまでのまとめ:ラフエッジを使うポイント
- ラフエッジは、輪郭(エッジ)だけをノイズで崩し、手描きっぽい揺れや質感表現ができるエフェクトです。
- 縁の値を強くしすぎないように調整し、スケールや複雑度で形を整えるのが無難な操作です。
使い分け:
- 輪郭のゆらぎ:展開に「time*○○」を入力して、縁で強さ調整する
- 汚れ・腐食っぽい質感:エッジの種類を「さび&カラー」にして調整する
- コピーっぽい滲み → エッジの種類を「フォトコピー」にして調整する
ラフエッジのトラブル対処法3選
ケース1:動いているのか分からない
原因:縁が小さい/timeの数値が小さい/スケールが大きくて変化が目立たない
- 縁を上げる
→例:3から8へ変更して崩れの量を増やす - timeの数値を大きくする
→例:「time*60」を 「time*120」に変更して変化を見えやすくする
ケース2:ガタガタが汚くて、ただのノイズに見える
- 縁を下げる
→例:8から4へ変更して崩れの量を減らす - 複雑度を下げる
→例:2から1へ変更して情報量を下げる - スケールで粒の大きさを整える
→例:50〜150に調整する
ケース3:フォトコピーの見た目が「普通のラフ」と変わらない
- 「幅または高さを伸縮」を上げる:
→例:75まで上げることで「一方向に潰れたにじみ」が出る
※「伸縮が0のまま、縁やスケールだけを操作するケース」に多いトラブルです。伸縮が0になっていないか確認してみましょう。
おわりに~ラフエッジを試してみよう~
【記事の制作裏話はこちら(note:Hiromuの探求部屋)】
制作中に気づいたポイントや、つまずきやすい部分の補足もまとめています。
時間があるときに、よければ覗いてみてください。









-320x180.png)




