7日間という限られた時間の中で、動画編集（After Effects、Premiere Pro）の技術を身につけ、最後にオリジナルの動画を制作するという目標設定ができました。これは上長（岩松さん）とも相談して決定したものです。せっかく動画編集の学習をするなら…プロジェクト化しよう！ということで、プロジェクトの大義を言語化して、再現性を高めるため進行そのものを見える化することになりました。以下が背景と目的です。＜Why｜なぜやるのか、背景、課題認識＞ 現状では熟練者が限られているため、依頼と技術が個人に依存している状態である。＜What｜なにをやるのか、あるべき状態＞ 初学者が直面している課題を解決し、経験を共有・可視化して体系化する必要がある。＜How｜どうやるのか、達成方法＞ 技術習得を、ナレッジ共有・蓄積で見える化して、プロジェクトへの対応幅を広げる。今後新たに動画編集を始める方も再現性が高められるように、技術習得の流れを記録します。また、自分自身のスキルを向上させるために、自らの武器を作りたいという思いがありました。以下がプロジェクトの内容です。<ul><li>After Effectsの技術習得</li><li>学習した情報をまとめる</li><li>プロセスを記事にまとめる</li></ul>背景と課題の整理を行い、実行方法と手段を考えました。①現状把握 自分の現状のスキルを明確化し、整理する②情報収集 ヒアリングを行い、勉強のための情報を体系的に整理する ※引き継げるように資料化③実行 技術レベルをカテゴライズ（初級・中級・上級）して課題を設定し、予測した工数感の範囲で実行する ※課題に取り組む中で得た感覚や改善点をまとめる④まとめ 実行した過程と成果を記事にまとめる

プロジェクトについて

<h3 style="text-align: start" id="ha00de4b901">現状把握</h3>まずは自分の状態を知ることから始めました。プロジェクトが始まる前に、休日にAfter Effectsの本を一冊読んで実践していたため、基本的な操作方法や動きのつけ方などは理解できていました。一方で、Premiere Proはyoutubeを少し見ただけで実際に使用したことはない状態でした。<h3 style="text-align: start" id="h976901cc85">情報収集</h3>普段から動画編集の案件に携わっている、2人の先輩デザイナーさんにご協力いただき、ヒアリングを行いました。以下がその内容です。<ul><li>最初何をどのように学習したか└ 本で基本的操作を学んだ └ 調べながら案件をやって学んだ</li><li>普段どのように勉強しているか└ 気になった動画をストック・トレース（広告やwebデザインなど） └ 配布されている実際のプロジェクトファイルを見る</li><li>何で情報収集しているか └ Youtube・X（旧Twiiter）</li><li>どのような案件が多いか └ 動画を繋げて色味などの加工をする └ イラストを動かす　…etc </li></ul>初心者は本を読んで基本操作を学ぶか、自分でネットなどを見て覚えるかだと思います。個人的には、本で基本操作を覚えてYoutubeなどを見て応用していくのがやりやすかったです。また、After EffectsとPremiere Proどちらから始めたかも異なっていました。Premiere Proから始めたデザイナーさんは、Premiere Proで動画の特性を学習してからAfter Effectsを始めたそうです。基礎を身に付けた後の勉強方法も様々で、動画を繋げることやイラストを動かす案件が多いので、まずはそれからやってみるといいかもとアドバイスを頂きました！また、普段から気になった動画をストックしておくといいと教えていただきました。以下、紹介していただいたyoutubeチャンネルです。<ol><li><a href="https://www.youtube.com/c/mooograph" target="_blank" rel="noopener noreferrer nofollow">mooograph</a></li><li><a href="https://www.youtube.com/results?search_query=putti+monkey+wrench" target="_blank" rel="noopener noreferrer nofollow">Putti Monkey Wrench</a> </li></ol>案件に入る際は、素材加工を含む工程の工数感の把握や、動きの認識が合っているか確認することなどが重要とのことでした。実行した作業のリテイクを防ぐためにも報連相や合意形成の大切さを理解することができました。<h3 style="text-align: start" id="ha1056077f4">実行</h3>ヒアリングの内容を踏まえて、初級・中級・上級の3つの課題を設定し、5日間のスケジュールを策定しました。<ul><li>初級……Premiere Proで動画を繋げる、色味加工</li><li>中級……イラスト・写真にアニメーションをつける</li><li>上級……シェイプに複雑なアニメーションをつける</li></ul><h4 style="text-align: start" id="hcb8433d3da">1日目</h4>初級課題として、Premiere Proで動画をつなぎ合わせる作業と色味の調整を行い、MV動画を制作しました。動画のサイズが大きかったため、圧縮や書き出し設定の確認を行いました。制作物の一部を紹介します。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/f9e6fb6de3444fafb43bdbff31cdce55/picture_pc_caf1b4eb5f6cb7cafbdfb602443abefb.gif" alt="" width="632" height="356"></figure>編集したMV動画の一部 2日目中級課題に取り組みました。素材をアニメーション用に調整して、イラストに動きを加えました。イラレのデータのレイヤー分けや調整にも時間がかかりました。基本的な操作しか使っていませんが、リピーターに苦戦しました、、！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ee17c738e8144747800d5b1cbf45bea1/picture_pc_8888bba23e1c210dea11974167a37cbb.gif" alt="" width="800" height="800"></figure>イラストにアニメーション付与3日目・4日目引き続き中級課題に取り組みました。マスクをかけてだんだん線が伸びるアニメーションに挑戦しました。どのプロパティを使えば狙った動きになるか、正確な判断ができていなかったので、想定より時間がかかってしまいました。基本的な動きは少し慣れてきたので、色々作ってみてどんどん慣れていく必要があると感じました！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a0b0c26529ec475dba25f315a4b6666b/picture_pc_29d1d8f0e448e3b467af742d4e4b83fe.gif" alt="" width="654" height="368"></figure>画像にアニメーション付与5日目動画用に素材を加工するのに時間がかかりました。また、変形や3Dなどがまだ身についていないので、勉強が必要だと思いました。５日間模写に集中していたため、オリジナルのものを作るべきだったなと思います。この期間に習得した内容や、案件で頻繁に使うアニメーションについては、より早く作れるように効率的な方法を見つけていきたいです。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/9d682d569ce94ae9ad5773676640e44d/picture_pc_5e17fcade0277f985cabd74c48319c52.gif" alt="" width="716" height="402"></figure>シェイプにアニメーション付与5日間の振り返り動画用に素材を加工するのに時間がかかりました。また、変形や3Dなどがまだ身についていないので、勉強が必要だと思いました。５日間模写に集中していたため、オリジナルのものを作るべきだったなと思います。この期間に習得した内容や、案件で頻繁に使うアニメーションについては、より早く作れるように効率的な方法を見つけていきたいです。

プロセス

<h3 style="text-align: start" id="he1a5ee2ae8">課題設定</h3>5日間の技術習得期間が終了し、最終課題は弊社が近日中に公開予定のインバウンドサイトのローディング動画制作に挑戦することになりました。よく上長に、先を見て自分が取り組んでいることが次に何に繋がるか、考えながら行動しようと言われています。現在デザインを作成中の案件であり、完成品の質次第で実際に使ってもらえる可能性もあるため、このテーマに絞りました。以下が最終課題の内容です。<h4 id="habda85c819">＜最終課題テーマ＞</h4>インバウンド（自社サイト）のローディング画面作成<h4 id="h6a39179490">＜理由＞</h4><ul><li>進行中の案件なので、ディレクターさん・担当デザイナーさんと一緒に進めることができるため</li><li>実際に使用できることを目標にして、素材連携と進捗共有、イメージの擦り合わせができるため</li><li>エムハンドの他サイトと対比しながら制作することで、価値を向上させることができるため</li></ul><h4 id="ha94153a347">＜今後の流れ＞</h4><ol><li>プランニングとプロトタイプを作成を行う</li><li>担当ディレクターさん・デザイナーさんに報告</li><li>担当デザイナーさんに相談しながら進める</li></ol><h4 id="he9bf434b0c">＜作業工数＞</h4>2日工数｜以下内訳 ・初稿　１日 ・修正　0.5日 ・ブラッシュアップ　0.5日<h3 style="text-align: start" id="h6326892129">プランニング</h3>テーマが決まったので、具体的にどのような動きにするか考えました。 なかなかアイデアが浮かばず、時間がかかってしまいました。最初のプランニングがしっかりできていないと、制作中に迷ってしまうことや軸がぶれてしまうことがあります。上長に相談したところ、上位概念の部分から考える必要があると助言されました。技術を活かすための思考回路こそが重要であると学びがありました。頂いたアドバイスを元に、方向性や動きのイメージをブラッシュアップしました。<h4 id="ha53d4600a3">＜コンセプト＞</h4>対極な力の調和<h4 id="h8f0d3a26c9">＜具体的なイメージ＞</h4>社内外の人が見るサイト→内と外（対極）の力が混ざり合うイメージ 対極な色が混ざり合って本質を創る<h4 id="h3a03fb1fa1">＜工数（時間）＞</h4>3秒<h4 id="h442298c92f">＜カラー設計＞</h4>四季の色（自社コーポレートサイトに使われている）<h4 id="h0f542af63f">＜ポイント＞</h4>サイトに使われているあしらいや色を使用する 自社サイトの印象を崩さないような動きにするその後、ラフを描いて提出し、担当のTOPデザイナーさんに提案しました。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/4bebddc577ba4d9494c2e1b7caa6d51c/1692587925791-FJwf4PXOrL.jpg" alt="" width="800" height="1068"></figure>動きのイメージ<h3 style="text-align: start" id="hb0e94b53e7">制作開始</h3>プランニングの承認を得た後、After Effectsで制作を始めました。エムハンドのサイトとしてのイメージを崩さないよう、サイトに使われている要素を取り入れました。トラックマットやノイズ、エフェクトのメッシュワープなど初めての動きに挑戦しました。初稿を提出し、上長と担当デザイナーさんからFBを頂きました。<h4 id="h7479605681">岩松さん</h4>冒頭の混ざり感が、柄がちかちか変わっただけに見えるので調整する └スピード感を変えるorその部分だけ別動画をインサートする　など 大枠は問題ないので細かいところをブラッシュアップする<h4 id="h6f26d7d0ea">担当デザイナーさん</h4>混ざり合う要素や一緒にねじれるイメージがわかるようにする ロゴのサイズをもう少し小さくする FBをもとに、色が混ざり合うことが伝わるよう、色味やねじれ具合を調整しました。こちらが完成した動画です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e6ad15d7c56e4fb993df436167ef1afb/picture_pc_38aff80082d7855cd6b440c806954af3.gif" alt="" width="800" height="449"></figure>完成したローディングこちらのローディングは、現在制作中のインバウンドサイトで使用されます。どのサイトで使われるかお楽しみに！

最終課題

以上がこのプロジェクトのプロセスです。初めての挑戦で、技術的な面やコンセプトなどで悩むことがありました。しかし、上長や先輩デザイナーさんの協力のおかげで、7日間を有意義に使うことができました。このような時間を与えていただき感謝しています。最終課題の際にアイデアが浮かばない苦悩もありました。今後は普段から良いなと思ったアニメーションをストックし、「こういうことを伝えたいから、この動きを取り入れよう」とすぐに思い浮かぶようにしたいです。技術を活かすためには「点と点を結んでいく瞬発性」が重要だと、いつも上長が伝えてくれています。デザインと同様に、サイトや広告などの動きを意識して見ようと思います。そして、制作時は浮かんだアイデアをつなぎ合わせ、徐々に固めていくことを意識して行いたいです。また、課題を進めていく中で、多様なアニメーションを作れるようになれば、サイト制作時に表現の幅を広げることができると感じました。まだできないことが多いので、これからも技術向上に努めたいです。そして、今週末にAfter Effectsの配信イベントである「<a href="https://twitter.com/swwwitch/status/1691435780743516160" target="_blank" rel="noopener noreferrer nofollow">朝までアフター</a>」が開催されるそうです！以前朝までイラレに参加したことがあるため、今回のイベントもとても楽しみです！私も参加させていただき、さらに知識を深めていきたいです！<hr><h3 style="text-align: start" id="h44cc09ce2d">＜おまけ＞</h3>記事のタイトル案も考えました！<h4 id="hf6358d73f7">初稿</h4><ul><li>初めての動画制作の過程と学び</li><li>新卒デザイナーが動画制作にチャレンジ</li><li>7日間で動画編集に挑戦しました</li></ul>記事のタイトルは、より多くの方に見ていただくために、キーワードの選び方が重要だとFBを頂きました。検索にヒットしやすいキーワードを組み合わせることが大切だとわかりました。前回の記事作成時も教えていただいたのにすっかり抜け落ちていました、、 調べてみて、今回は「新卒デザイナー」や「After Effects」が検索にヒットしやすいと考えました。「After Effects」は、英語と日本語どちらの表記が多く見られるかということも調べ、次の案を考えました。<ul><li>新卒デザイナーがAfter Effectsに挑戦</li><li>新卒デザイナーのAfter Effects挑戦記録</li><li>新卒デザイナーがAfter Effectsに挑戦した7日間</li><li>新卒デザイナーが7日間でAfter Effectsに挑戦</li><li>新卒デザイナーが初めてAfter Effectsをやってみて</li><li>After Effects初心者の新卒デザイナーが行ったこと</li><li>新卒デザイナーとAfter Effectsの7日間</li></ul>初めての挑戦の中で再現性を出すというプロジェクトだったので、上長と相談して「新卒デザイナーとAfter Effectsの7日間」に決まりました！タイトルを決めるのも意識することが多く、とても難しかったです、、書いた記事がよりたくさんの方の目に留まるように考えることが大切だとわかりました。最後までお読みいただきありがとうございました。 writer – Sato　<a href="https://twitter.com/nrikautsa" target="_blank" rel="noopener noreferrer nofollow">@nrikautsa</a>

新卒デザイナーとAfter Effectsの7日間

プロジェクトについて

プロセス

最終課題

振り返り

Related Blogs

デザイナーのためのデザイン論／思考と手段を支える「概念と構造」

Webデザインの引き出しを増やす！国内外アワード系ギャラリーサイト27選

地方からでも大丈夫！デザイナーのフルリモートライフ

CI・VI・BIのそれぞれの役割

新卒デザイナーとAfter Effectsの7日間

プロジェクトについて

プロセス

最終課題

振り返り

Related Blogs

デザイナーのためのデザイン論／思考と手段を支える「概念と構造」

Webデザインの引き出しを増やす！ 国内外アワード系ギャラリーサイト27選

地方からでも大丈夫！デザイナーのフルリモートライフ

CI・VI・BIのそれぞれの役割

Webデザインの引き出しを増やす！国内外アワード系ギャラリーサイト27選