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)ありの「枠」状態にしておきます。

※背景は黒など、変化が見えやすい色にすると確認が楽です。

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

◆キーフレーム設定:

  1. ストップウォッチをクリック
  2. 数値を変更してキーフレームを打つ

◆エクスプレッション(式)設定:

  1. ストップウォッチを「Alt(Win)/Option(Mac)を押しながらクリック」
  2. エクスプレッション(式)を入力

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

【基本】ラフエッジで「輪郭を崩す」

出典:Adobe After Effects(© Adobe Inc.)

シン
シン
まずは周期表のベースになりやすい「ラフ」で、静止状態の見た目(形)を整えます

ラフエッジを使って「ラフ」を作る

✅枠レイヤーを選択 → 「エフェクト」>「スタイライズ」>「ラフエッジ(Roughen Edge)」

エッジの種類:ラフ

縁:20.0/スケール:100/複雑度:4

パラメータはどこを触ればいい?

シン
シン
はじめは「見た目を変化させること」に絞って調整するのがおすすめです
  1. 縁:崩れの量を調整する場所
    →上げるほど「手描き感」が強くなる
  2. スケール粒の大きさを調整する場所
    →下げるほど「大きなうねり」になる
  3. 複雑度:ノイズの情報量を調整する場所
    →細かいギザギザが増えて「汚れた線」に見えやすくなる

(補足)もっとこだわりたい場合に触るパラメータ

サナ
サナ
最初は「縁・スケール・複雑度」だけでいいとして……もっとこだわりたい場合はどこを触ればいいですか?
シン
シン
その場合は、次の4つです。「見た目の質感とクセを微調整」できます
こだわり調整に使う4つ

質感の調整:

  1. エッジのシャープネス:ギザギザの「角の立ち方」を調整する場所
    →上げると輪郭が硬い表現となり、下げると柔らかい表現となる
  2. フラクタルの影響:「ノイズの強さ」を調整する場所
    →上げるほどノイズ感が強く、下げると控えめになる(1.0付近が無難)

 

クセの調整:

  1. 幅または高さを伸縮:ノイズを一定方向に伸縮させ、ノイズに「クセ」を作れる場所
    →「エッジの種類」のフォトコピーとの相性が良い
  2. オフセット(乱流):ノイズの「出現位置」をずらす場所
    →形を変えずに「別のパターン」に調整したいときに便利

注意:最初から全部触ると迷いやすい

  1. 「縁・スケール・複雑度」で見た目を決める
  2. 上記の4つで「質感」を整える

の手順がおすすめです。

 

展開(Evolution)を使ってノイズを動かす

シン
シン
ラフエッジで作った「輪郭ノイズ」に動きを入れたいときは、展開(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(=ランダムな揺れ)を入れることとの違いとは?
サナ
サナ
ちなみに……位置(Position)にwiggle(=ランダムな揺れ)を入れるのと、何が違うんですか?
シン
シン
wiggleはレイヤー全体を揺らすエクスプレッションです。今回は輪郭だけを揺らしたいので、ラフエッジの展開(Evolution)を時間で進める方が狙い通りの動きになりやすいです。

応用:エッジの種類で「質感」を作り分ける

出典:Adobe After Effects(© Adobe Inc.)

 

サナ
サナ
ラフ以外も使うと、見た目が一気に変わりますね!
シン
シン
「エッジの種類」を変えることで「揺れ」だけじゃなく「質感」にも寄せられます。ここでは、「さび&カラー」「フォトコピー」の2つを紹介します。

応用①:さび&カラー(腐食・汚れっぽい質感)

輪郭の揺れはそのままに、エッジに「汚れ」のニュアンスを足したいときに便利です。

エッジの種類:さび&カラー

縁:5.0 / エッジのシャープネス:1.5

スケール:50 / 展開:time*60

応用②:フォトコピー(コピー機っぽいザラつき)

周期表の雰囲気に寄せたい場合は、フォトコピーが相性良いです。特に「伸縮」が効きます。

エッジの種類:フォトコピー

縁:3.0 / スケール:100 / 複雑度:2

幅または高さを伸縮:75.0

 

ここまでのまとめ:ラフエッジを使うポイント

  • ラフエッジは、輪郭(エッジ)だけをノイズで崩し、手描きっぽい揺れや質感表現ができるエフェクトです。
  • 縁の値を強くしすぎないように調整し、スケールや複雑度で形を整えるのが無難な操作です。

使い分け:

  • 輪郭のゆらぎ:展開に「time*○○」を入力して、で強さ調整する
  • 汚れ・腐食っぽい質感:エッジの種類を「さび&カラー」にして調整する
  • コピーっぽい滲み → エッジの種類を「フォトコピー」にして調整する

ラフエッジのトラブル対処法3選

サナ
サナ
つまずきポイントも、先に知っておきたいです。
シン
シン
よくある詰まりどころを3つに絞って、対処法をまとめます。

ケース1:動いているのか分からない

サナ
サナ
式を入れたのに、動いてる感じがしないのですが……
シン
シン
「変化の強さ」か「速さ」が原因です。まずは「縁」と「timeの数値」を確認しましょう

原因:縁が小さい/timeの数値が小さい/スケールが大きくて変化が目立たない

  • 縁を上げる
    →例:3から8へ変更して崩れの量を増やす
  • timeの数値を大きくする
    →例:「time*60」を 「time*120」に変更して変化を見えやすくする

ケース2:ガタガタが汚くて、ただのノイズに見える

サナ
サナ
手描き風……というより、もはやただのノイズだわ
シン
シン
縁が強すぎて枠の輪郭が壊れている複雑度が高すぎて輪郭の情報がうまく反映されていない、のどちらかです。
  • を下げる
    →例:8から4へ変更して崩れの量を減らす
  • 複雑度を下げる
    →例:2から1へ変更して情報量を下げる
  • スケールで粒の大きさを整える
    →例:50〜150に調整する

ケース3:フォトコピーの見た目が「普通のラフ」と変わらない

サナ
サナ
エッジの種類をフォトコピーにしたのに、ラフと大差ない気がないような……
シン
シン
多くは、「伸縮が0のまま」になっていることが原因です
  • 「幅または高さを伸縮」を上げる:
    →例:75まで上げることで「一方向に潰れたにじみ」が出る

「伸縮が0のまま、縁やスケールだけを操作するケース」に多いトラブルです。伸縮が0になっていないか確認してみましょう。

おわりに~ラフエッジを試してみよう~

サナ
サナ
なるほど!輪郭だけ揺らすから、UI(画面の枠や表示パーツ)にも使いやすいんですね。
シン
シン
「枠線が真っすぐすぎて硬い印象」のときに、ラフエッジで少し崩すと雰囲気に合った枠づくりができます

【記事の制作裏話はこちら(note:Hiromuの探求部屋)】

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

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