こんにちは！アドベントカレンダー19日目は八田誠太朗が担当します。
neccoでは、実績公開をするときにダイジェスト動画を制作しています。
去年までは、ディレクターの田口さんが制作してくれていたのですが、今年の6月から自分が引き継ぎ、制作を担当しています。ディレクター、デザイナーのみなさんにたくさんレビューをしてもらい、今年はなんとか4つの実績動画を公開できました。
まだまだ勉強中の身ですが、動画制作で快適に作業するために行なっていることを紹介します。
実績動画の作り方は、ディレクターの田口さんが別の記事でまとめていますので、こちらをご覧ください！
1. 動画を作り始める前にファイル整理
動画制作では実に多くの素材を扱います。作業を進めていくと、画像や動画素材でファイルの容量がどんどん大きくなります。一つのカットを様々なパターンで検証すると、その分使用する素材がどんどん増えてしまうことも。
素材の場所がわからなくならないように、まずはファイル作成と整理を行います。
ファイルの整理について
neccoでは、
- project（After Effectsのプロジェクトファイル）
- reference（画像や動画などの使用素材）
- render（書き出した動画の保存）
といった形でファイルを分けており、そこから自分はreferenceで細かく分類を行います。
- 画像
- 動画
- SVG
実績動画ではサイトなどを録画した素材も使用するため、動画とは別に「キャプチャ」ファイルを用意することが多いです。
特に素材数が増えがちな画像ファイルは使用するシーンごとに分けています。そうすることで欲しい素材を直ぐ見つけて取り出しやすいようにしています。
また、After EffectsでもIllustratorのようにファイルに対して素材を探す仕組みです。他のファイルに移動するとリンクが切れて動画や画像素材が映らなくなってしまうこともあります。素材が増えた際に、都度ファイルの整理を行なったりするので、「どんな素材をどこに収納するのか」をはっきりさせることを意識しています。
プロジェクト内のファイル整理について
After Effects内でもファイル整理は欠かせません。直接作業に関わる場所でもあるため、より入念に整理を行います。
- メインコンポジション（最終的に書き出す映像）
- パーツコンポジション（カットごとに作成したコンポジションなど）
- 素材ファイル
普段はこのようにファイルを分けています。
最後のパーツコンポジションは最終的に書き出す動画を構成するコンポジションを入れたフォルダになります。
自分はシーンごとにコンポジションを分けて制作を行うため、それらを行き来しながら動画を制作しています。
After Effectsでは素材だけでなく、実際に作業を行う場所であるコンポジションも一緒にファイルに存在します。素材を探す時と、手を加えたいコンポジションを探す時でかなり迷ってしまうので、しっかり分けておくことで探す時間を省くことができます。
ファイルの命名も工夫すると検索機能でのデータ探しが容易に。
どんなシーンのコンポジションか、どんな素材が入っているのかなどなど、わかりやすいデータ名を付けることも心がけています。
2. ヌルオブジェクトの活用
実績紹介動画では画像に動画、時には実際にデザインで使用したSVGデータなどを取り入れて制作を行います。
一度に多くの素材を動かすことも珍しくなく、それら全てに動きをつけるとなると膨大な作業量になります。おまけに調整、修正も一苦労。
そんな時に役立つのが「ヌルオブジェクト」です。
ヌルオブジェクト（Null Object）について
画面上には表示されない透明なオブジェクト。他のオブジェクトと同じように位置やスケールなどの情報を持っており、移動やスケール変化などのアニメーションをつけることが可能。
After Effectsにはオブジェクト同士に親子関係をつけることができますが、その機能によって存分に力を発揮するオブジェクトになります。
親子関係、あまり馴染みのない機能だと思うので簡単に説明します。
こちらの動画のように、別々のオブジェクトをむすびつけて動きを連動させることができます。
「子」となるオブジェクト（青）を「親」となるオブジェクト（赤）に結びつけて「親」の動きに合わせて「子」も動かせるようになります。
この親の役割をヌルは担ってくれます。
ヌルは透明なため、映像上で全く邪魔をすることがなく、複数のオブジェクトをまとめ上げる親に最適です。
- 複数のものを一気に動かしたい
- 他のものと連動した動きが作りたい
- 手を加えるキーフレームを減らしたい
こういった時はヌルを活用してみるといいかもしれません。
動画制作を行う時は自分もヌルを多用しています。特に多いのが上記の動画のような場面です。
ここで上へと流れていく動画たちはキャプチャ動画とそれを角丸で切り抜いたマスクで構成されています。
このシーンではそれが5つ同時に動いています。レイヤー数としては合計10個になります。
- キャプチャ動画とマスクをまとめるヌル
- ５つの動画をまとめるヌル
ここではこの二つで動きを制御しています。
2で全体を上へ移動させつつ、1で細かな位置調整とサイズ変更を行なっています。
動かすレイヤー数は6個。ヌルを使用すると作業量をかなり少なくできます。
また、実は1だけでもこの動きは作れます。
ただ、ヌルに対するアニメーションが複雑になるためこのように分けています。
全体の動きと個々の動きを分けて考えることができるため、こちらの方がシンプルな操作でアニメーションをさせることができると思います。
3. タイムラインの整理
After Effectsで動画を作っていく上で最も触れている時間が長い「タイムラインパネル」
ここの使い方、整理の仕方が制作時間にかなり影響します。
レイヤーは長さを最低限にし、色分けを行う
作業中に意識していることとして、可能な限りレイヤーは動画に映る最低限の秒数だけにしています。
動画ではレイヤーの重なりに加えて時間の前後もあるため、ものの重なり方がかなり激しいです。
時々、意図しないタイミングでオブジェクトが写っていたり、アニメーションがずれていることがよくあります。
レイヤーの長さを最低限にするのは、見やすさだけでなくこのような意図しない事態を防ぐためでもあります。オブジェクトがどのくらいの長さ映っているか、重なりの中で、どのあたりにあるかなどを分かりやすくするために行っています。
また、レイヤーは要素の種類や塊ごとに色分けを行っています。シェイプレイヤーは青、画像は薄紫、コンポジションは黄色といった感じで自分は分けています。
動画ではテキスト、画像などレイヤーごとに明確な種類分けができます。合わせて色で分けることでより見やすいタイムラインパネルにすることができます。
必ず下から順に積み上げてつくる
先ほどのレイヤー調整に加え、下から階段上にレイヤーを並べていくことも心がけています。
こうすることでシーンに何が使われているかわかりやすくできます。
また、事前にレイヤーをシーンの秒数で揃えているため、始まりと終わりがわかりやすく、タイミングの調整もやりやすくなります。
それと、基本的には動画内で1秒の時に出ているオブジェクトが2秒の時に出ているオブジェクトの上に重なることはありません。
なので、時間が進むごとにレイヤーを重ねていく方が自然に動画を作ることができます。
シャイレイヤー（ShyLayer）を活用する
After Effectsには「シャイレイヤー（ShyLayers）」という機能があります。
シャイレイヤーとそうでないレイヤーを設定することができ、ボタン一つでパネルの中を見たいレイヤーだけにすることができる便利な機能です。
もう動かすことのないテキストや画像などはシャイレイヤーにして、ヌルなど、アニメーションを加えていくレイヤーだけを見えるようにすると、とてもすっきりしたタイムラインパネルで制作を進めることができます。
おわりに
2025年は本当に動画制作の年でした。実績公開だけでなく、お仕事でも動画やアニメーションの制作を行うこともありました。そのどれもが全く違うイメージを持つため、その分いろんなモーションや動画の構成を行うことができました。
可愛いもの、かっこいいもの、高級感のあるものなどなど多種多様なものを作らせていただきましたが、それぞれに合わせて新しい表現や機能を試してみたり、動かし方を工夫してみたりと常に挑戦でした。やるたびに自分の変化を感じていたと思います。
まだまだ公開できていない実績の動画や、ウェブで使用するアニメーション、その他新しい動画制作など、来年からもどんどん頑張っていきます！！
最後に、制作を担当した実績動画と実績詳細ページを紹介します！よかったらこちらもご覧ください！！
積水ハウスの賃貸住宅「シャーメゾン」ブランド・物件検索サイト
マンガアプリ「マガポケ」10周年記念特設サイト
アパレルのエコデザインサービス「FiTO（フィト）」ブランドサイト
「秋田COI-NEXT ソウゾウの森プロジェクト」ウェブサイト
neccoアドベントカレンダー2025のお知らせ
以上、アドベントカレンダー19日目の記事でした！
アドベントカレンダーも残り少し！引き続きneccoメンバーの伝えたいことや振り返り、学んだことなどをブログとして投稿していきます。
明日もお楽しみに〜👋
