皆さんはじめまして！
いつもロジカルブログを読んでくださりありがとうございます！
フロントエンド
エンジニア
いっちー
どうも、最近すっかり冷え込んでおしゃれより防寒を優先してしまいそうないっちーです。
フロントエンド
エンジニア
いっちー
僕は我慢できずちゃっかりコタツdeぬくぬくライフ、解禁しています。
一度入ると出られない魔性の空間。
そこでホットチョコタピオカを味わいながらゆっくりNetflixを見て・・
る場合じゃなぁーーーーーーーーーーーーい！！！！
日々制作に携わる者として、『つくる』側に回らねば！！
ということで早速本題です、実はロジカルスタジオでは先日社内で
After Effects（以下AE）のハンズオン講座が開催されました！
企画・講師を務めてくださったのは弊社ロジカルスタジオのAE鉄人ことノートさんです！
よろしくお願いします！！
ありがたすぎて頭が上がらねぇ！！
フロントエンド
エンジニア
いっちー
今回はロジカル社員たちが悪戦苦闘しつつも1本の動画を作っていく様子をご紹介していこうと思います！
それではいってみましょう！
そもそもAfter Effectsとは
AfterEffects（アフターエフェクツ）とは、Adobeが販売している動画編集ソフトウェアの1つです。
主に素材に動きや効果をつける用途なので、
- モーショングラフィックス
- アニメーション
- 3DCG
- 合成映像
などのコンテンツ制作を得意としています。
他のAdobe映像制作ソフトにPremiere Pro（プレミア プロ）というものがありますが、
こちらはYoutubeのように複数のカットを繋げる作業や、長尺の動画作成を得意としています。
今回の目標
いったいどんな内容なんだ・・・？
フロントエンド
エンジニア
いっちー
フロントエンド
エンジニア
ノート
皆さんには今回、
簡単な動画を作ってもらいながら
動画制作の流れや基本を覚えてもらいます。
お題の完成見本はこんな感じ。
か、可愛い、、、普段ノートさんがつくるスタイリッシュな動画と打って変わってなんてポップなんだ。
フロントエンド
エンジニア
ノート
この手順に沿って一歩ずつ見本に近付けていきましょう。
▷作成フロー
目次
- 『After Effectsを開いて新規作成』
- 『コンポジション「ロージー＆カール」を作成』
- 『画像をプロジェクトに追加』
- 『平面の作成』
- 『動かない画像を配置』
- 『コンポジション「青カール」の作成』
- 『「青カール」を歩かせる』
- 『コンポジション「紫カール」「ピンクカール」の作成』
- 『コンポジション「カールと地球」を作成する』
- 『地球を回す』
- 『「歩くカール(三体)」にループ処理をかける』
- 『キランと光る星(黄色・白)を作成』
- 『流れ星を流す』
- 『「一体ナニモノ！？」のフェードイン作成』
- 『「とゆかいな仲間たち」のフェードイン作成』
- 『「ロージー＆カール」のフェードイン作成』
- 『ロージーを宇宙の彼方に飛ばす』
- 『ロージーを帰還させる』
なんだか不穏なフローが見えたけどいいか・・・
よっしゃやったるで！楽勝楽勝！！
フロントエンド
エンジニア
いっちー
いざハンズオン！！
ゴゴゴゴゴゴゴッ・・・・・
おお・・これが編集画面・・・
既に情報量が多すぎてなにがなんやら・・・・
フロントエンド
エンジニア
ノート
まずはコンポジションを作っていきましょう。
フロントエンド
エンジニア
ノート
次は画像をプロジェクトに追加しましょう。
動画を書き出すときに背景色が透明になってしまうので、
平面も作成してください。
コンポジション？プロジェクト？
平面を作成・・・？？
う、うああああああああああああああああ！！！（爆散）
フロントエンド
エンジニア
いっちー
初めて聞く単語の数々に早速出鼻を挫かれましたが
流石はノートパイセン。すかさず丁寧にレクチャーしてくださいました。
僕含め初心者ばかりなこともあり、
細かい手順書を事前に準備してくださっているものの操作方法を把握するだけで大変・・・！！
迷える子羊たちに救いの手を差し伸べる、仏のようなノートさん。ありがとうございます・・・！！
フロントエンド
エンジニア
ノート
ええやで。
まずはみんな弊社のマスコットコンビのツッコミ担当、カールを歩かせることに挑戦してみます。みんな真剣・・・
ああっ！！カールの手足がありえん動きを・・！
フロントエンド
エンジニア
いっちー
フロントエンド
エンジニア
ノート
アンカーポイントの位置を動きの起点の部分に設定しないと、変なところが起点になって回転してしまうよ。。
なるほど、そういうことか！！
見落としてました・・・！
フロントエンド
エンジニア
いっちー
ワシの身体やで特に気ぃつこてや～！頼むで～！
ごめんねカール 笑
どうやら、
- スケール（大きさ変更）
- 位置
- アンカーポイント（動きの中心点決め）
- 回転
- 不透明度
などのトランスフォーム機能はAE初学者にとってマストの基本知識のようです。
フロントエンド
エンジニア
ノート
トランスフォーム機能はアニメーションの基本になるので、ぜひ最初に覚えてもらいたい機能になります。
フロントエンド
エンジニア
ノート
トランスフォーム機能が理解できたらキーフレームもセットで覚えておきましょう。
これらを押さえておくと簡単な動きならすぐに付けれるようになります。
なるほど、好きなタイミングにこのポツポツ（キーフレーム）を置いて、
その地点ごとの大きさなどを決めておけば
あとは勝手に滑らか～に変化してくれるカラクリのようです。便利。
スケール、不透明度の変化だけでもこんな感じでフェードインやモチっとした表現ができるとは！
確かに必須でありながら、沼要素たっぷりですね。
イージングも気持ちいいアニメーション制作には欠かせない要素です。
以下のようにイージングをかけることで緩急が付きグッと見栄えが良くなります。
だんだん要領をつかんできました！この調子で一気に進めていきます！
そんなこんなで完成
紆余曲折がありながらも
こんな感じでなんとかできあがりました～～！！
どうでしょうか。すごくないですか？
完全再現とはほぼ遠いですが
初心者が短時間でここまでできました！達成感！
心なしかロージーたちがいつもよりあいくるしい。
参加者一同も良い感じに仕上がって嬉しそうです。
年齢差など関係なく気軽に相談し合いながら解決に向かう姿勢も
ロジカルスタジオのええところのひとつだといっちーは思っております。
フロントエンド
エンジニア
ノート
作成した動画を、今回使用した素材だけでアンパンマン映画予告編タイトルみたいにしてみました。
フロントエンド
エンジニア
ノート
このように今回のデータをアレンジしてみたり、他に自分でやってみたいアニメーションがあればぜひ作ってみてください。少しでも動画制作に興味を持っていただけたら嬉しいです。
AEハンズオン講座を終えて
いや～初めてのAEでの動画作成だったので
正直なにがなんだか良くわからない状態で完成までいっちゃいましたが、やはり楽しかったです。
タイミングごとの動きを細かく設定したりするのには少し骨が折れるものの、
その分プレビューで無事動いているのを見たときの気持ちよさと言ったら
コーディングのアニメーションと同じものを感じますね。
自然と笑みがこぼれます。
ノートさん！この度はありがとうございました！
フロントエンド
エンジニア
いっちー
フロントエンド
エンジニア
ノート
こちらこそありがとうございました。 途中で使った「エフェクト」も種類が非常に沢山あって、 使いこなせばもっといろいろなことが簡単にできるし、 アニメーションの幅もグンと広がるのでもっと面白くなると思います。
ノートさん曰く、Web制作でもAfter Effectsは活かせるとのことです。
Webデザインのaiデータやpsdデータをレイヤーに分かれた状態でAEに持ってこれるため、
AEでアニメーションを付けることでデザイン上でのアニメーションのイメージやつきやすくなったり、
フロントの人との認識の一致や指示が容易になったり、
提案の際にイメージが伝わりやすかったりと、
リッチなサイトを作るうえでかなり役立つそうです。
おわりに
ありがとうございました！
おかげでAEの楽しさと便利さを学べた勉強会でした！
VFXやモーショングラフィックス系の映像制作に興味がある人に限らず
フロントエンドエンジニア、デザイナーとして活躍している方などにも
利用してみる価値のあるAfter Effects。
一見とっつきにくそうですが
基本操作を覚えればその先にはワクワクの海が待ち受けています！
これを機にぜひチャレンジしてみてくださいね！
YouTube上でたくさんチュートリアル動画が投稿されているので、
アイデアが浮かばない！操作が分からない！という方も安心して技術を深められる環境が整っているように感じます。
僕も講習後に早速、チュートリアル動画を参考にこんなレトロゲームタイトル画面風の動画を作ってみました！
ロジカルスタジオでは今後もこのように新しいことにどんどん挑戦していきます！
技術系の話題や勉強会以外のイベントも当ブログで発信していますので、ぜひチェックしてみてくださいね！
ここまでご覧くださりありがとうございました！
ロジカルスタジオにも興味が湧いてくださった方はぜひコチラまで！！
お待ちしております～～！▼
