【AE】モーション周期表のTiler実践編｜タイル状に複製するモーションを作る

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

今回のゴールは「タイル状に並べて動かす」こと

作業前に準備するもの

サナ

いきなりCC Tilerをかける前に、何を用意すればいいですか？

シン

タイル化したい素材を1枚と、それを置くコンポジションを先に用意します。CC Tilerは1枚から自動で増やすので、素材は1つで大丈夫ですよ。

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

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

下準備2：タイル化する素材を用意する

タイル状に並べたい素材を読み込み、タイムラインに配置します。今回は**写真・図形・テキスト・ロゴなど**を1つ用意します。

ポイントは、**輪郭がはっきりした素材**を使うことです。タイル状に並んだとき・動いたときの変化が分かりやすくなります。

下準備3：エフェクトを探す場所を確認する

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

環境によって表示名が英語の場合は、「Distort」内の「CC Tiler」を探してください。なお、CC系エフェクト（Cycore製）は、日本語UIでも**名前やパラメータが英語のまま**表示されることがあります。

実践1：素材にCC Tilerを適用する

サナ

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

シン

配置した素材レイヤーを選択して、CC Tilerを適用します。まずは細かい調整より、「タイル状に並んでいるか」を確認しましょう。

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

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

ここで別のレイヤーを選んでいると、思った場所にタイルが作られません。

手順2：CC Tilerを適用する

レイヤーを選択した状態で、次の順番でCC Tilerを適用します。

エフェクト
↓
ディストーション
↓
CC Tiler

適用できると、エフェクトコントロールパネルにCC Tilerの設定項目（Scale・Center・Blend w. Original）が表示されます。

手順3：プレビューで表示を確認する

CC Tilerを適用したら、プレビュー画面で素材がタイル状に並んでいるか確認します。

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

Q&A：タイルにならず1枚のまま表示されるとき

サナ

適用したのに、タイルにならず1枚のまま画面いっぱいに表示されています……。

シン

スケール（Scale）が100%のままだと、タイル1枚が画面いっぱいになって並んで見えません。スケールを下げると、1枚が小さくなってタイルの数が増えます。

実践2：スケール・中心位置・ブレンドでタイルを整える

サナ

タイルにはなったんですけど、数や位置を思った感じにするにはどこを触ればいいですか？

シン

まず**スケール・中心位置・ブレンド**の3つを押さえます。スケールでタイルの数、中心位置で基準の位置、ブレンドで元レイヤーとの混ざり具合を整えると、かなり近づきます。

スケール（Scale）：タイルの数を決める項目

スケールは、タイル1枚あたりの大きさを決めます。数値を下げるとタイル1枚が小さくなり、画面内のタイルの数が増えます。

**目安：スケール = 50前後から調整**
（100のままだと1枚のままで並ばず、極端に小さくすると細かすぎて何の素材か分かりにくくなる）

中心位置（Center）：タイルの基準位置を決める項目

中心位置は、タイルの並びの基準となる位置です。数値を変えるとタイル全体がずれて配置されます。あとでこの項目にキーフレームを打つと、タイル全体を動かせます。

**目安：まずは初期値のまま。動かしたくなったら実践3で触る**
（位置をずらすと継ぎ目の見え方も変わるので、スケールと合わせて確認する）

ブレンド（Blend w. Original）：元レイヤーと混ぜる比率

ブレンドは、タイル化したものと元のレイヤーをどれくらい混ぜるかを決めます。0%ならタイルだけ、数値を上げると元のレイヤーが透けて見えます。

**目安：基本は0%（タイルのみ）、元を少し見せたいときだけ上げる**
（上げすぎるとタイルと元が二重に見えて、ぼやけた印象になりやすい）

Q&A：タイルの継ぎ目が目立ってガタガタに見える

サナ

タイルは並んだんですけど、つなぎ目がガタガタして揃って見えません……。

シン

素材の端に余白や半端な部分があると、継ぎ目が目立ちやすくなります。素材の縦横比やスケールの数値を調整して、タイルがきれいに割り切れる大きさに近づけると揃って見えます。

実践3：中心位置のキーフレームでタイルを動かす

サナ

タイルの並びは整いました。でも、止まっていて動きがありません。

シン

**中心位置（Center）にキーフレーム**を打つと、タイル全体が流れるように動きます。開始位置と終了位置で数値を変えるのがポイントです。

手順1：中心位置にキーフレームを打つ

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

次に時間を進めて、中心位置の数値を変更します。これで、タイル全体が流れるように動く動きになります。

中心位置を動かすほど、タイル全体がスクロールするように流れていきます。

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

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

手順3：回転や揺れを足してUI風にする（任意・応用）

モーション周期表では、Tilerは**他のモーションと組み合わせる**使い方も紹介されています。たとえば**Tiler＋WiggleRotate**のように、タイル背景の上に回転や揺れのパーツを重ねると、ナビ・ポータル風のUI演出に発展できます。

Q&A：キーフレームを打ったのにタイルが動かない

サナ

中心位置にキーフレームを打ったのに、再生してもタイルが動きません……。

シン

2つのキーフレームの数値が同じになっていることが多いです。開始と終了で中心位置の値に差がついているか確認しましょう。

完成動作を見てみよう

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

仕上げ：ブレンドと組み合わせで質感を整える

タイルの基本ができたら、最後に質感を整えます。**ブレンド** で元レイヤーの見せ方を調整し、表現に合わせて選びます。

まとめ：Tilerは「並べる→数を整える→動かす→組み合わせる」の順番で考える

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

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

次に読むおすすめ記事

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