【AE】モーション周期表のLoop実践編｜画面が延々と流れる動きを作る

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

今回のゴールは「画面が延々と流れるループ」を作ること

作業前に準備するもの

サナ

いきなりオフセットをかける前に、何を用意すればいいですか？

シン

ループに向いた素材（背景・模様・テクスチャ）と、それを置くコンポジションを先に用意します。端がつながって見える素材だと、きれいなループにしやすいですよ。

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

新規コンポジションを作成します。練習用なので、次のような設定で問題ありません。

下準備2：ループに向いた素材を用意する

延々と流したい素材を読み込み、タイムラインに配置します。今回は**背景・模様・テクスチャなど、繰り返しに向いた素材**を1つ用意します。

ポイントは、**端と端がつながって見える素材**を使うことです。写真や一枚絵のように端の差が大きい素材だと、流したときに境目が見えやすくなります。

下準備3：オフセットを探す場所を確認する

オフセットは、After Effectsのエフェクトメニューから適用します。

環境によって表示名が英語の場合は、「Distort」内の「Offset」を探してください。なお、ここで使う「オフセット」は**ディストーション系のオフセットエフェクト**で、シェイプレイヤーの「パスのトリミング」のオフセットとは別物です。

実践1：素材にオフセットを適用する

サナ

素材を置いたら、次は何をすればいいですか？

シン

配置した素材レイヤーを選択して、オフセットを適用します。まずは細かい調整より、「中央でシフトを動かすと画面が流れるか」を確認しましょう。

手順1：素材レイヤーを選択する

タイムライン上で、先ほど配置した素材レイヤーを選択します。

ここで別のレイヤーを選んでいると、思った場所にオフセットが適用されません。

手順2：オフセットを適用する

レイヤーを選択した状態で、次の順番でオフセットを適用します。

エフェクト
↓
ディストーション
↓
オフセット

適用できると、エフェクトコントロールパネルにオフセットの設定項目（中央でシフト・元画像とブレンド）が表示されます。

手順3：中央でシフトを動かして表示を確認する

オフセットを適用したら、**中央でシフト**の数値を変えてみて、画面の中身が動くか確認します。一方の端から押し出された映像が、反対側から戻ってくれば成功です。

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

Q&A：中央でシフトを動かしても画面が流れないとき

サナ

中央でシフトを動かしたのに、画面が流れている感じがしません……。

シン

無地に近い素材だと、画面が動いても変化が見えにくいことがあります。模様や柄のある素材で、中央でシフトのXまたはYの数値を大きめに変えて確認してみましょう。

実践2：シフト量を画面サイズに合わせて切れ目をなくす

サナ

画面は流れたんですけど、ループさせるとつなぎ目でガクッと飛んでしまいます……。

シン

切れ目のないループにするコツは、**開始と終了のシフト量の差を、画面の幅（横ループ）か高さ（縦ループ）に一致させる**ことです。ぴったり1画面ぶん動かすと、つながって見えます。

中央でシフト（Shift Center To）：流れる方向と速度を決める項目

中央でシフトは、画面の表示位置をXY座標でずらす項目です。ここにキーフレームを打つと、時間とともに画面が流れます。

**目安：横ループは X を、縦ループは Y を中心に触る**
（基本のLoop再現では、まずこの「中央でシフト」だけにキーフレームを打てばOK）

元画像とブレンド（Blend With Original）：元画像と混ぜる比率

元画像とブレンドは、オフセット後の映像と元の映像をどれくらい混ぜるかを決めます。基本のLoop再現では触らなくて大丈夫です。

**目安：基本は0%のまま**
（混ぜると流れが二重に見えることがあるので、ループを優先するなら触らない）

切れ目をなくすコツ：シフト量＝画面サイズに合わせる

つなぎ目で飛ばないループにするには、**開始から終了までのシフト量の差を、画面の幅または高さに一致させます**。

ちょうど1画面ぶん動かすと、最後のコマと最初のコマがつながり、繰り返しても切れ目が見えにくくなります。

Q&A：素材の端で境目が見えてしまう

サナ

シフト量は合わせたのに、素材の端で線のような境目が見えてしまいます……。

シン

素材そのものの端と端がつながっていないと、シフト量を合わせても境目が出ます。タイル状につながる素材（シームレス素材）にするか、模様で境目が目立たない素材を選びましょう。

実践3：中央でシフトのキーフレームでループさせる

サナ

流す方向と切れ目対策はわかりました。実際に延々と流すには、どう打てばいいですか？

シン

**中央でシフトに2つのキーフレーム**を打ちます。開始と終了で、ちょうど1画面ぶんの差をつけるのがポイントです。あとはそのキーフレーム区間を繰り返せば、延々と流れます。

手順1：中央でシフトにキーフレームを打つ

中央でシフトを開き、開始位置で **ストップウォッチマーク** をクリックしてキーフレームを打ちます。

次に終了位置へ進めて、横ループなら X を「初期値＋画面幅」に変更します。これで、1画面ぶん流れる動きになります。

手順2：流れる速さはキーフレームの間隔で調整する

流れる速さは、2つのキーフレームの間隔で調整できます。間隔を詰めると速く、広げるとゆっくり流れます。

手順3：レーダー風など組み合わせる（任意・応用）

モーション周期表では、Loopは**他のモーションと組み合わせる**使い方も紹介されています。たとえば**Loop＋Orbit**のように、流れる背景の上に円周上を回るパーツを重ねると、レーダー・ソナー風の演出に発展できます。

Q&A：キーフレームを打ったのにループでガクつく

サナ

キーフレームを打ってループさせたら、つなぎ目で一瞬ガクッと飛びます……。

シン

シフト量が画面サイズとぴったり合っていないと、つなぎ目で飛びます。差をちょうど画面幅（または高さ）に合わせ、キーフレームのイージングはリニア（直線）にすると、なめらかにつながります。

完成動作を見てみよう

ここまでの操作で実際にどんな動きになるか、完成動作を確認しておきます。

仕上げ：速度と素材で質感を整える

ループの基本ができたら、最後に質感を整えます。**流れる速度** と **素材のつながり** を調整し、表現に合わせて選びます。

まとめ：Loopは「用意する→流す→サイズを合わせる→仕上げる」の順番で考える

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

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

次に読むおすすめ記事

Loopの基本的な作り方がわかったら、次は関連する表現も確認しておくと、使いどころが広がります。