モーションデザイン制作はじめ
スポットでの動画制作は以前からたびたびおこなっていましたが、年間を通して制作する機会をいただき先日、本年の案件すべてが完了しました。新しく取り組んだことについてまとめます。
モーションデザイン制作を始めたきっかけ
デザイナーとしてWeb制作をする中で、「動かしたらもっとわかりやすくなりそう」「動くグラフを入れたら注目してもらえそう」「動いていたらよりぴったりイメージに合いそう」と思うことがあります。
基本的にはフロントエンドエンジニアに相談して、CSSやJSで動きを実装してもらいます。
「このサイトのアニメーションはなんでこんなに鮮明で綺麗なんだ？」という気づきから、SVGアニメーションを知り、Lottieを知り、AfterEffectsがわかればデザイナーでもアニメーションが作れる！と思いアニメーション素材の作成に挑戦してみました。2019年初にLottie知ってAfterEffects使ってみたのが、一番最初のモーショングラフィックス制作でした。
Lottieアニメーションとは？- LottieFiles
ループアニメーションで良くて、細かな動きにこだわって作り込みたい、フロントエンジニアのリソースを他案件のために確保したい、というときにデザイナー側で、AfterEffectsを用いて簡単なアニメーション素材を時折作ってきました。
日々、Illustratorでベクターイラスト素材を作成しWebサイトやバナー・資料のデザインに取り入れています。そのためAfterEffectsにベクター素材を取り込むことは容易でした。
また、IllustratorもAfterEffectsもAdobeのソフトということでインターフェースにもなじみがあり、ソフトの操作感に大きく戸惑うこともありませんでした。
上記Webサイトのアニメーション素材作成をきっかけとして、現在ではWeb広告配信用動画・アプリストア掲載用動画・タクシー車内配信用広告動画・量販店の棚前で放映する動画・商業施設内のデジタルサイネージ用動画・プレゼンテーションの補足となる説明動画などいろいろな用途の動画制作にも取り組んでいます。
動画を取り巻くマーケットの変化
YouTubeなどの動画配信サービス、SNSの投稿、公共交通機関や街中のデジタルサイネージ、エレベーター内、美容院の席前、デパートやコンビニのトイレ等の空間、…日常生活の中で動画に触れる時間はここ数年で大きく増加したように思います。
少々古いデータにはなりますが、今年の2月のサイバーエージェントの調査では、今後さらに動画広告の市場規模は拡大していくと予測されています。
2022年の動画広告市場は、昨対比133.2％の5,601億円に到達。 2026年には1兆2,451億円に達する見込み。
サイバーエージェント、2022年国内動画広告の市場調査を実施 | 株式会社サイバーエージェント
動画制作の流れ
- 必要な情報の確認
秒数、サイズ(px)・容量(BM)の規定、納期、どこでどのように使われるものなのかを確認する - テキストベースで構成の確認
- 絵コンテの確認
要素：絵（画像）、セリフ・ナレーション、シーン、動きの説明など - 動画制作
- 確認、納品
ソフトの使い分け
- AfterEffects：文字入れしたり、シェイプアニメーションを作ったりする
- PremierePro：映像と音声を統合する、映像のトーンや色を補正する、音声を編集する
データ制作のルール
下記記事を参考に、データの保管ルールを設定しました。
参考: 動画編集でおすすめのフォルダ構成はこれ！ - DUCKBeSWAN
📁2023XXXX(制作開始日)_XXXX動画(概要)
∟📁00_storyboard
絵コンテのai、pdf
∟📁01_project
AfterEffectsデータ(.aep)、PremiereProデータ(.prproj)
∟📁02_footage
動画素材(.mp4,.mov)、音声素材(.wav)
∟📁03_assets
画像素材(.png,.jpg)、シェイプ素材(.ai,.svg)
∟📁04_render
書き出し後の納品データ(.mp4,.mov)
基本的なルールを知る
いろいろな動画を見て基本的なルールを知り、引き出しを増やすことから始めました。
参考動画を低速再生して1コマずつどこがどう動いているか、分解してよく見て真似して実際につくってみるのがしくみの理解には良いのかなと思いました。あとはそれを伝えたいことに合わせて効果的に組み合わせてみせるスキルが必要だと感じます。
- カメラワーク(ズームイン・アウト、ドリーショット、トラッキング他)
- トランジション
例）
・帯
・円のマスク
・物理的な繋がりの強調(ある1点にクローズアップするとか、逆に引くとか)
動画中の要素と関連づけたり(幾何学図形だったりロゴマークだったりの形)、人物の手や足から次のカットにつなげたり、色を合わせてカットをつなげたり、被写体やカメラの動きに合わせてつなげたりすると、自然で印象的な切り替えができる。 - マスキングとテクスチャリング
- エフェクト
- レイヤーの親子関係(ヌルの役割と活用)
など
動画制作で気をつけていること
伝えたい内容に応じて流れを意識し、動画全体を通して動きに統一感を持たせることを心がけています。
グラフィック・ナレーション・BGMと、組み合わせる要素が静止画のデザインより多いと感じます。
また、動画は印刷物同様「箱の大きさ」が決まっています。印刷物では判型、動画では秒数が箱にあたるなぁと思っています。
人が1秒間に読める文字数の配慮も必要です。それは年代で人それぞれなので、設置場所やターゲットに合わせて作る必要があると思います。
ウェブ上の動画広告は画面サイズが小さく、消音で見ている人が多いので音声なしで伝える工夫が必要です。
また、AIナレーターツール1でナレーションの作成をする機会も多くありますが、いくら伝えたいことが多くても自然に聞こえる速度でのナレーションになるよう気をつけています。(YouTubeなどでたまに見かける早口広告の不快さはいちユーザーとして身を持って感じています。)
参考・アイディアソース
- motiontable
- イージング関数チートシート
- Vook 新・映像制作 用語辞典 | Vook(ヴック)
- Vimeo Interactive Video Experience Platform
- Pinterest - ピンタレスト
- Behance
- YouTube
おわりに
関心を持ってもらえる工夫・今まで使ったことがない見せ方を取り入れて制作するよう、やるからには多少自分に負荷をかけながら取り組んできました。
動画量産ツールというものが世の中にはありますが、ある程度フォーマットが決まっているのでそれを使って作成した動画のクオリティには限りがあるのではないかと思います。(使ってみてから言えよということでもあますが、調べてみた感じだと、そう)
効率や工数削減も大事だけれども、依頼者に寄り添って、ツールを使ってつくったもの以上の価値を提供できるようにスキルを高めたいです。
まだまだわかっていない機能や知らない表現がたくさんあるし、もっと手を動かして勉強したいと思います。もっとできるようになりたいと思っています。
受動的に見る動画が増えていること、街中の風景を作っていること。
体験を阻害する広告にはできるだけ加担したくないと思っています。人のためになる、企業のためになる、社会のためになるものをつくりたいという理想はもっています…(資本主義社会ではなかなか難しいですが)
現状商業色の強い15秒・30秒の動画を作ることが多いので、表現・イメージ寄りの制作もしてみたいです。以前制作チャンスを逃した、イベントの待機時間にループで流れるスクリーンセーバー的なものなど。
しかしながら静止画の制作より眼精疲労がすごい。頭痛が頻発しています。集中して繰り返し確認して凝視する時間が長くなってしまうから。体質的にあまり向いてないというのを感じます。
もともと小中学生の頃、PCやゲームをやると激しい頭痛が起きて横になっていることしかできないということがよくありました。大学でPCを使う機会が必然的に大幅に増えたので徐々に慣れていって今なんとかほぼ一日中PC作業で仕事ができています。
実際の制作物がないと説得力がないので自主制作しようと思ったのですが、ラフだけ書いて記事に間に合わせることができませんでした…
今のこの状態で思うことを残しておきたかったので一旦文章だけ残しておきます。
できあがったら追加します(時期未定)
つい先日「Webデザイナーのためのモーションデザインことはじめ－After Effects（アフターエフェクト）とIllustratorでモーショングラフィックスを創る！」という書籍が発売されたようです。
Webデザイナー向けのこのような内容の書籍って今までなかったと思うので、世の中の流れ的にモーションデザインの需要が高まっているのかもしれません。
Footnotes
-
イントネーションや感情など細かく調整できるので、生身の人間の話し口調とほとんど大差なく作成できるツールがあります。AI生成の音声データには懐疑的でしたが、使えるものもあるなと思いました。 ↩