モーションタイルは、1枚の素材を繰り返して並べるエフェクトです。ロゴを敷き詰めた背景や反転模様を作れるほか、素材を動かす際に画面端を補う用途にも使えます。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
モーションタイルはどこにある？
適用場所はエフェクト → スタイライズ → モーションタイル。今回の作例はAfter Effects 26.5、8bpc、1280×720px、30fps、6秒です。素材は320×240pxのプリコンポーズを使い、折りたたみ変換はOFFにしています。
まず押さえたい、タイルと出力範囲の違い
タイルの幅・高さは「繰り返す1枚の大きさ」、出力幅・高さは「描画する範囲」です。どちらも入力レイヤーの寸法を100%として扱います。出力を広げても、タイル自体が大きくなるわけではありません。
| 項目 | 役割 | 今回の素材での例 |
|---|---|---|
| タイルの幅・高さ | 素材を縮めて繰り返す単位を決める | 幅50%なら1枚の横幅は160px |
| 出力幅・高さ | 繰り返した結果を描く範囲を決める | 出力幅400%なら描画幅は1280px |
| タイルの中心 | 繰り返し模様の位置を動かす | 素材内の中心は[160,120] |
| ミラーエッジ | 隣接するタイルを反転させる | 文字も反転するため、ロゴ背景ではOFF |
| フェーズ／水平フェーズシフト | 交互の列・行のずれと、その方向を変える | 0°から90°へ変えて見え方を比較 |
基本例：小さく並べて、横へ流す
- 320×240pxのコンポを作り、背景・PAS文字・矢印・丸を配置します。隙間を空けたいときは、この素材内に余白を設けます。
- 1280×720pxの親コンポへ素材コンポを配置し、モーションタイルを適用します。適用前後の比較では、同じ素材をもう1枚置いています。
- タイルの幅・高さを50%、出力幅・高さを175%に設定。ミラーエッジはOFF、フェーズ0°、水平フェーズシフトOFFにします。
- タイルの中心を0秒[160,120]、6秒[320,120]でキーフレーム設定。補間はリニアにし、一定速度で右へ流します。
この例の描画範囲は560×420pxです。タイルの中心を動かすと、中の模様がスクロールします。親コンポを埋めたい場合は、次の応用例のように出力範囲を広げます。
パラメータを比較する
タイルの幅・高さ：模様の密度と縦横比
出力幅・高さ：絵のサイズを保って範囲を広げる
素材が小さい場合、出力100%のままでは親コンポを埋められません。必要な比率は親コンポの幅÷素材の幅×100、高さも同様です。今回は1280÷320×100＝400%、720÷240×100＝300%になります。これはレイヤーのスケール100%・回転0°で中央に置く場合の目安です。
ミラーエッジ：模様をつなぐ／文字は反転する
フェーズ0°でミラーエッジをONにすると、隣のタイルが鏡像になります。幾何学模様には便利ですが、文字を読ませたいロゴ背景には向きません。また、反転で境界を合わせても、自然な模様になるとは限らないため素材を見ながら判断します。
フェーズと水平フェーズシフト：並び方を変える
フェーズはレイヤー全体の回転ではなく、交互の列・行をずらす設定です。中心のアニメーションと組み合わせれば、模様の流れ方にも変化を付けられます。
応用1：PASロゴが流れ続ける背景
| 項目 | 設定 |
|---|---|
| 素材／親コンポ | 320×240px／1280×720px |
| タイルの幅・高さ | 100%／100% |
| 出力幅・高さ | 400%／300% |
| ミラー／フェーズ／水平シフト | OFF／0°／OFF |
| タイルの中心 | 0秒[160,120] → 6秒[480,120]、リニア |
| レイヤーの変形 | 位置[640,360]・スケール100%・回転0° |
- 基本例と同じPAS素材を親コンポの中央へ置き、タイルの幅・高さを100%へ戻します。
- 出力幅400%・出力高さ300%にして、画面全体へ並べます。文字を正しく読めるようにミラーエッジはOFFにします。
- タイルの中心の最後のキーを[480,120]へ変更。6秒で素材1枚の幅320pxを移動させます。
- 0秒と6秒で模様が同じ配置へ戻る周期にしています。6秒のキーは終了境界に置き、書き出すフレームは0〜5秒29フレームです。
タイルの中心は素材内の座標なので、親コンポが1280×720pxでも開始点は[160,120]です。今回の動画プレーヤーは自動ループ設定ではありません。
応用2：反転を活かした万華鏡風の模様
| 項目 | 設定 |
|---|---|
| 素材 | 320×240pxの三角・丸・帯 |
| タイルの幅・高さ | 100%／100% |
| 出力幅・高さ | 400%／300% |
| ミラー／フェーズ／水平シフト | ON／0°／OFF |
| タイルの中心 | 0秒[160,120] → 6秒[800,600]、リニア |
| レイヤーの変形 | 位置[640,360]・スケール100%・回転0° |
- 320×240pxの新しい素材コンポを作り、斜めの三角や丸を配置します。文字を使わず、反転しても成立する形にします。
- 親コンポへ配置してモーションタイルを適用。出力400%・300%、タイル100%・100%、ミラーON、フェーズ0°にします。
- タイルの中心を[160,120]から[800,600]へリニアで動かします。横640px・縦480pxと、反転を含む2タイル分を移動させています。
つまずきやすいところ
透明な隙間も一緒に繰り返される
プリコンポ内の透明部分もタイルの一部です。絵だけを詰めたいなら素材コンポの寸法を見直し、余白をデザインに使うならそのまま残します。素材の背景を不透明にするだけでは、不要な余白そのものはなくなりません。
出力を広げても、画面外は書き出されない
出力幅・高さを上げても、最終コンポの外側は映りません。レイヤーの移動・回転を加える場合は、動いた後も画面を覆う範囲が必要です。端を補う用途ではタイル100%・ミラーON・フェーズ0°から始め、動きに応じて出力だけを必要量に広げます。元の映像に存在しない部分を反転して補うため、人物や文字が映る素材では反復が目立つことがあります。
出力範囲を必要以上に大きくしない
大きい出力は処理負荷や必要メモリを増やします。まず画面を埋める値を計算し、動きに必要な余裕だけを追加します。また、素材を後から拡大すると元画像の解像度が不足するため、見せたい大きさに合う素材を用意します。
CC RepeTileとの使い分け
今回のように、タイルの大きさ・中心位置・交互のずれを調整したいならモーションタイルが分かりやすい選択です。上下左右を個別に拡張したいときや、繰り返し方を選びたいときは、CC RepeTileの解説も参考になります。
設定の意味はAdobe公式のモーションタイル解説も参照できます。他のエフェクトはAEエフェクト辞典から探せます。
作例プロジェクトをダウンロード
モーションタイル 作例プロジェクト v1.0（ZIP・約169KB）
基本例、比較6種類、ロゴ背景、反転模様の編集可能なAEPと「はじめに.txt」を収録しています。After Effects 26.5／8bpcで作成。外部画像・動画素材や追加プラグインは不要です。使用フォントはヒラギノ角ゴシックとArial。フォント本体は含まず、環境にない場合は置き換えてください。
学習・個人制作での利用と改変は可能です。商用利用は個別にご相談ください。
コメント