新卒デザイナーがAdobe After Effectsを使って新しい働き方を考えてみた
2024-03-11 勉強会
2023年春に入社したデザインユニットの小林です。
大学はデザイン学部でしたが学生の頃はプロダクトデザインがメインでした。
入社して約1年、ついこの間までできなかったことができるようになるという「技術って楽しい」真っ只中にいる私ですが、この勢いに任せて個人的にやりたくないジャンルの一つであった「Adobe After Effectsを使った映像制作」をやることにしました。
Webデザインの領域を展開するということでアニメーションも作れたらいいなと思い、今回の勉強会の参加を「できるコトを増やす」ことを目的に取り組みました。
なので、
クオリティは参考にはならないかと思いますが、AE初心者の方の第一歩を一緒に踏み出せたら嬉しいです。
大学はデザイン学部でしたが学生の頃はプロダクトデザインがメインでした。
入社して約1年、ついこの間までできなかったことができるようになるという「技術って楽しい」真っ只中にいる私ですが、この勢いに任せて個人的にやりたくないジャンルの一つであった「Adobe After Effectsを使った映像制作」をやることにしました。
Webデザインの領域を展開するということでアニメーションも作れたらいいなと思い、今回の勉強会の参加を「できるコトを増やす」ことを目的に取り組みました。
なので、
クオリティは参考にはならないかと思いますが、AE初心者の方の第一歩を一緒に踏み出せたら嬉しいです。
After EffectsとPremiereの違い
今回はAE（After Effects）をメインに勉強会で制作しました。
が、
Adobe社が提供する映像作成のソフトはメインで２種類あります。
複雑な効果（エフェクト）やオブジェの作成はAfter Effectsが得意としており、
動画をつないだり長尺の素材の編集や、音声・音楽（オーディオ）の調整はPremiereが得意です。
After Effectsで素材動画をいっぱい作って、Premiereで編集するという使い方が多いですね。ふむふむ。
Adobe社が提供する映像作成のソフトはメインで２種類あります。
複雑な効果（エフェクト）やオブジェの作成はAfter Effectsが得意としており、
動画をつないだり長尺の素材の編集や、音声・音楽（オーディオ）の調整はPremiereが得意です。
After Effectsで素材動画をいっぱい作って、Premiereで編集するという使い方が多いですね。ふむふむ。
モーショングラフィックスとは
モーショングラフィックスとは、動きのない文章や画像、イラストなどの素材に動き（モーション）を与える技術のことです。
静的な描画から動的にすることで色んな情報が伝わりますね！
雰囲気とか勢いとか...！
あ、感情が伝わるからエモーション×グラフィックからきたのかな！？と思いましたが違いましたね。すみません。
なんだかエモーショナルに制作したくなってきたので、今回は「実写×モーショングラフィックス」に挑戦してみました！
静的な描画から動的にすることで色んな情報が伝わりますね！
雰囲気とか勢いとか...！
あ、感情が伝わるからエモーション×グラフィックからきたのかな！？と思いましたが違いましたね。すみません。
なんだかエモーショナルに制作したくなってきたので、今回は「実写×モーショングラフィックス」に挑戦してみました！
VFXとは
モーショングラフィックスは、素材から動きを作るというアニメーションのことですが、実写×モーショングラフィックスを制作する上でVFXという言葉の理解も必要みたいでした（他人事？）。
VFXはVisual Effectsの略で、現実にはない「視覚効果」を与えるための技術です。 ありえない世界を生み出すものですね。
VFXと似たようなもので、「SFX」もあります。SFXはspecial effectsの略で、舞台装置や撮影技術を用いて、撮影段階で現実にはない「特殊効果」を与えます。 特殊メイクとか...
コンピューターで非現実世界を作るのがVFX、アナログな手法で非現実世界を見せるのがSFXという違いなんですね。
VFXはVisual Effectsの略で、現実にはない「視覚効果」を与えるための技術です。 ありえない世界を生み出すものですね。
VFXと似たようなもので、「SFX」もあります。SFXはspecial effectsの略で、舞台装置や撮影技術を用いて、撮影段階で現実にはない「特殊効果」を与えます。 特殊メイクとか...
コンピューターで非現実世界を作るのがVFX、アナログな手法で非現実世界を見せるのがSFXという違いなんですね。
AEを1ミリもわからないまま最低限（※）だけ調べて作成してみました。
※...新規コンポジションって？新規プロジェクトと何が違うの？（後ほどご説明します！）、キーフレームってどうやったらできるの？だけ調べました。
↑私のBefore Effectsがこちら↑
え、なにこれ
…というようなレベルですが、
記事を最後までみていただけますと、クリエイターも夢じゃない！と思えることまちがいなしですので、ぜひ最後までお付き合いください。
AEお勉強1〜画像×モーショングラフィックス〜
AEを使ったアニメーション作成の流れは、
1.After Effectsを起動して、「新規プロジェクト」を選択
2.素材を入れる
3.新規コンポジションを設定する
コンポジションとは、素材ファイルを配置して動画を作るための箱というか枠というか。
この設定の中で動きを作っていきます。
素材を入れたらタイムラインに配置し、動きをつけていきます。
4.レイヤーにエフェクトを追加
コンポジション内にて、画像などの素材は階層（レイヤー）に分かれて動きをつけたり、表現や効果（エフェクト）を変えたりすることができます。
5.レンダリングして完成！
作った動画を書き出します！
1.After Effectsを起動して、「新規プロジェクト」を選択
2.素材を入れる
3.新規コンポジションを設定する
コンポジションとは、素材ファイルを配置して動画を作るための箱というか枠というか。
この設定の中で動きを作っていきます。
素材を入れたらタイムラインに配置し、動きをつけていきます。
4.レイヤーにエフェクトを追加
コンポジション内にて、画像などの素材は階層（レイヤー）に分かれて動きをつけたり、表現や効果（エフェクト）を変えたりすることができます。
5.レンダリングして完成！
作った動画を書き出します！
まずはAEに触れて作成した動画
文字をキーフレームを打って位置を移動させ、
なめらかな動きからちょっとカクカクさせて教育番組っぽい動きをさせてます。
画像のマスクしたものを重ねて、綿棒の後ろをMEN BOWが通ってます。
なめらかな動きからちょっとカクカクさせて教育番組っぽい動きをさせてます。
画像のマスクしたものを重ねて、綿棒の後ろをMEN BOWが通ってます。
AEお勉強2〜映像×モーショングラフィックス〜
AEってめちゃ便利ですね。
3Dカメラの機能で映像をトラッキングして、
ここの視点がいい！と決めたら作った素材が連動します！
3Dカメラの機能で映像をトラッキングして、
ここの視点がいい！と決めたら作った素材が連動します！
現実世界に危険を知らせるモーショングラフィックス
AEお勉強3〜レッツVFX
変化前と変化後が重要な手法です。
切り取る作業が大変すぎます。が、根気強くやるしかない。
切り取る作業が大変すぎます。が、根気強くやるしかない。
マスクでパッと出現させたかった。
マスクの違和感がすごいですが、切り抜いてないところから出てくる感じを掴みました。
第二の本題、新しい働き方改革について
さて、AEに慣れてきたところで今回の発表タイトルにもありました
「新しい働き方の改革」についてお時間いただきますね。
みなさん、
リモートワークと出社して働くの、どちらがいいと思いますか？
それぞれいい面、悪い面がありますが、永遠の賛否両論のテーマですよね。
対面でのコミュニケーションはオンラインよりも空気感とかわかって意思疎通しやすいし、電波が〜と気にすることもないですね。
リモートだったら、場所問わず低コストで、通信環境が良ければ一方的にでも大勢の前でも話せます。
曜日別に分けたハイブリッド型もありますが、それって別に
リモートワークと出社して働くのを切り替えているだけで
テレワークができる状態とは言い難いですよね。
テレワークとは、遠くで働くことなので、自宅が職場から遠い場合はハイブリッド型も難しい。
そこで！私はこの働き方を提案します！！！！！！
「新しい働き方の改革」についてお時間いただきますね。
みなさん、
リモートワークと出社して働くの、どちらがいいと思いますか？
それぞれいい面、悪い面がありますが、永遠の賛否両論のテーマですよね。
対面でのコミュニケーションはオンラインよりも空気感とかわかって意思疎通しやすいし、電波が〜と気にすることもないですね。
リモートだったら、場所問わず低コストで、通信環境が良ければ一方的にでも大勢の前でも話せます。
曜日別に分けたハイブリッド型もありますが、それって別に
リモートワークと出社して働くのを切り替えているだけで
テレワークができる状態とは言い難いですよね。
テレワークとは、遠くで働くことなので、自宅が職場から遠い場合はハイブリッド型も難しい。
そこで！私はこの働き方を提案します！！！！！！
私のAfter Effects〜テレポート勤務のススメ〜
音声は、ひろゆきメーカーでひろゆきに話してもらいました。
https://hiroyuki.coefont.cloud/hiroyuki
実写部分の制作
地獄のはじまり。
がんばれPC、負けるな私。
がんばれPC、負けるな私。
まずは消える被写体をロトブラシツールで切り抜きます。
大雑把に切り抜きたい対象をなぞれば自動的に認識して切り抜いてくれます。
大雑把に切り抜きたい対象をなぞれば自動的に認識して切り抜いてくれます。
ウワ〜〜
パペット位置ペンツールで
被写体の支点を指定して、テレポートさせるために曲げます。
今回は回転させて瞬間移動するので、Cの形にします。自分の体を。
このC型になった素材のレイヤーをいくつか複製し、
トランスフォームの回転でぐわんぐわんに回していきます。
パペット位置ペンツールで
被写体の支点を指定して、テレポートさせるために曲げます。
今回は回転させて瞬間移動するので、Cの形にします。自分の体を。
このC型になった素材のレイヤーをいくつか複製し、
トランスフォームの回転でぐわんぐわんに回していきます。
モーショングラフィックスの制作
色んなものを練習として、勉強として盛り込んでみましたが、
プラグインも使ってしまったところや地道に不透明度やスケールの変動をかけまくったところがあるので、ここでは説明的な制作部分を共有したいと思います。
プラグインも使ってしまったところや地道に不透明度やスケールの変動をかけまくったところがあるので、ここでは説明的な制作部分を共有したいと思います。
動く！数字とグラフ
グラフの数字と連動させることもできます
テキストで何も打たずに「ソーステキスト」を開いて、スライダーの数値と同じ数字をカウントアップ（ダウン）するよう指示できます。
よく見る手書き風テキストアニメーション
動画の最後にあった手書き風の文字、手書きとは？というレベルの細かい作業があってこそのアニメーションです。
細かい作業であるだけで難しくはありません。
動かすテキストを入力し、その上にパスでなぞっている感じです。
細かい作業であるだけで難しくはありません。
動かすテキストを入力し、その上にパスでなぞっている感じです。
文字数が多いと果てしない...
完成を夢見てひたすら調整をします。
そのパスを、要は逆再生させて手書き風に動かしています。
あとは音をつけて、まるでサラサラ書いているように！
そのパスを、要は逆再生させて手書き風に動かしています。
あとは音をつけて、まるでサラサラ書いているように！
動いたあ...
まとめの余談
作品自体は短い時間ですが、構想を考えるのと技術不足のために意外と時間がかかりました。
静的グラフィックじゃできないことができるようになった瞬間はとても痺れました。
今回の勉強会をきっかけに動画以外にも色んなジャンルに触れてみよう、もっとアウトプットしようと思うことができたので、とてもいい機会になりました。
自己満発表になってしまい、申し訳ありません。
より幅広くモノを作れるようになって、少しでもユニットに貢献できたらなあと思うそんな毎日です。
「できない」と思っていたものが「できるかも」に変わるとアイデアも湧いてきます。
そのアイデアの一つがテレポートワークという作品テーマになりました。（笑）
最後まで読んでいただきありがとうございました。
レッツモーフィン(←古い)
静的グラフィックじゃできないことができるようになった瞬間はとても痺れました。
今回の勉強会をきっかけに動画以外にも色んなジャンルに触れてみよう、もっとアウトプットしようと思うことができたので、とてもいい機会になりました。
自己満発表になってしまい、申し訳ありません。
より幅広くモノを作れるようになって、少しでもユニットに貢献できたらなあと思うそんな毎日です。
「できない」と思っていたものが「できるかも」に変わるとアイデアも湧いてきます。
そのアイデアの一つがテレポートワークという作品テーマになりました。（笑）
最後まで読んでいただきありがとうございました。
レッツモーフィン(←古い)