Motion Design Festivalに参加してみました！「#007 グラフアニメーション」の制作プロセス
こんにちは！おかゆです。
7月27日(月)まで開催中のMotion Design Festivalに参加し、初心者ながらもAfter Effectsの勉強に日々奮闘中です！
今回はCocoda!の運営の方から制作のプロセスを公開していただけないか、というご依頼を受け、モーションデザインの制作プロセスを自分なりにまとめてみました。
Motion Design Festival詳細は、Cocoda!の公式noteを出されているのでこちらのリンクをどうぞ！
今回つくったもの
主な制作プロセス
①参考動画を探して軸を決める
先にデザインイメージを決めてからアニメーションを作る、が一般的な制作手順かもしれませんが、今回は作りたいアニメーション・動きを先に決めてから要素の肉付けを行なっていきます。
というわけで、まずはYouTubeでAfter Effectsを使ったグラフアニメーションの解説動画をピックアップして見ていき、参考になりそうなものを探します。
今回は、以下のインフォグラフィックアニメーションの解説動画がとても素敵だったので、こちらを参考に「円グラフ」と「カウントアップする数字」のアニメーションを軸として作成することにしました。(単純に作成手順を学びたかったため)
②アニメーションのテーマを決めてイメージを膨らませる
さて、次はどのようなテーマのグラフアニメーションにするかということですが、今回は「コーヒー」をテーマにしました。
グラフに肉付けできそうなものならなんでも良かったのですが、私自身がコーヒーが大好きだからそうしようという、なんともゆるい理由のためです。
そして事前に作ると決めていた「円グラフ」と「数字のカウントアップ」のアニメーションには、それぞれ「コーヒーが好きか」と「消費量ランキング」の役割を割り当てることにしました。
これで頭の中で大体のイメージは見えてきました。このままデザイン制作の作業に移ります。
③Illustratorでデザイン素材を作っていく
「コーヒーっぽく主線は真っ黒ではなくて茶色っぽくしようかな」
「グラフだし見やすさ重視で単純なデザインにしようかな」
など、色々と考えながら黙々とデザインに起こしていきます。
デザインを作っている途中で、「カップにコーヒーを注ぐ様をグラフに見立てたら面白いのでは？」と思いつきました。
そこで、消費量ランキングのところにコーヒーカップのグラフを追加してみることに。
こちらが最終デザインです。
(データの数字自体は、【コーヒー アンケート】などで検索して出てきたデータをザックリ大まかに改変しています。)
私の場合はラフなどは特に作成しません。
Aeでモーションを作るときもそうなのですが、思いつくままにその場その場で要素を追加したり省いたりして作業を進めていきます。
④After Effectsでアニメーションを作っていく
基本的には①の項目でご紹介したmooographさんの解説動画を参考に大体のアニメーションを作ることができました。
また、前の③の項目で唐突に追加したコーヒーグラフのアニメーションを作るにあたっては、以下の動画を追加で参考にしました。
動画でいう人型のところをマグカップに、水のところをコーヒーにアレンジしています。
モーションの入りのタイミングは大きい要素をまとめてインさせ、細々した要素は後追いさせるようにしてみました。最後はすべてまとめてスッと終わるようにしています。
＼ 完 成 ／
使用フォント(フリー)：コーポレート・ロゴ(ラウンド)
制作のまとめ
学びたいんだけど中々モチベーションが湧かないし、本業も忙しいし…とずっと後回しにしてきたAfter Effects。
そんな時にたまたま出会ったのがCocoda!、そしてMotion Design Festivalでした。
そこからのモチベーションの上がり方といったら凄まじく、我ながらまるで人が変わったように勉強勉強の日々を送ることができています。
素敵な場、そしてイベントを提供・企画してくださりありがとうございます！
まだまだモーションひよっこですので、もっともっとAeと仲良くなれるよう、Cocoda!を通じながらもスキルアップしていきたいと思います！
参考にしたYouTubeチャンネル
いただいたサポートは、夫のビール代になります。