Output Study! 〜ちょっと変わった勉強会～「#9 After Effectsでロージー &カールの動画を作成してみよう! ハンズオン講座」

僕は我慢できずちゃっかりコタツdeぬくぬくライフ、解禁しています。

一度入ると出られない魔性の空間。

そこでホットチョコタピオカを味わいながらゆっくりNetflixを見て・・

る場合じゃなぁーーーーーーーーーーーーい！！！！

日々制作に携わる者として、『つくる』側に回らねば！！

ということで、実はロジカルスタジオでは先日社内で

After Effects（以下AE）のハンズオン講座が開催されました！

企画・講師を務めてくださったのは弊社ロジカルスタジオのAE鉄人ことノートさんです！

よろしくお願いします！！

というわけで今回はロジカル社員たちが悪戦苦闘しつつも1本の動画を作っていく様子をご紹介していこうと思います！

それではいってみましょう！

そもそもAfter Effectsとは

AfterEffects（アフターエフェクツ）とは、Adobeが販売している動画編集ソフトウェアの1つです。
主に素材に動きや効果をつける用途なので、

• モーショングラフィックス
• アニメーション
• 3DCG
• 合成映像

などのコンテンツ制作を得意としています。

他のAdobe映像制作ソフトにPremiere Pro（プレミア プロ）というものがありますが、
こちらはYoutubeのように複数のカットを繋げる作業や、長尺の動画作成を得意としています。

今回の目標

か、可愛い、、、普段ノテさんがつくるスタイリッシュな動画と打って変わってなんてポップなんだ。

▷作成フロー

目次

1. 『After Effectsを開いて新規作成』
2. 『コンポジション「ロージー＆カール」を作成』
3. 『画像をプロジェクトに追加』
4. 『平面の作成』
5. 『動かない画像を配置』
6. 『コンポジション「青カール」の作成』
7. 『「青カール」を歩かせる』
8. 『コンポジション「紫カール」「ピンクカール」の作成』
9. 『コンポジション「カールと地球」を作成する』
10. 『地球を回す』
11. 『「歩くカール(三体)」にループ処理をかける』
12. 『キランと光る星(黄色・白)を作成』
13. 『流れ星を流す』
14. 『「一体ナニモノ！？」のフェードイン作成』
15. 『「とゆかいな仲間たち」のフェードイン作成』
16. 『「ロージー＆カール」のフェードイン作成』
17. 『ロージーを宇宙の彼方に飛ばす』
18. 『ロージーを帰還させる』

いざハンズオン！！

ゴゴゴゴゴゴゴッ・・・・・

おお・・これが編集画面・・・

既に情報量が多すぎてなにがなんやら・・・・

ノート：まずはコンポジションを作っていきましょう。

ノート：次は画像をプロジェクトに追加しましょう。動画を書き出すときに背景色が透明になってしまうので、平面も作成してください。

いっちー：コンポジション？プロジェクト？平面を作成・・・？？う、うああああああああああ！！！（爆散）

初めて聞く単語の数々に早速出鼻を挫かれましたが
流石はノートパイセン。すかさず丁寧にレクチャーしてくださいました。

僕含め初心者ばかりなこともあり、

細かい手順書を事前に準備してくださっているものの操作方法を把握するだけで大変・・・！！

迷える子羊たちに救いの手を差し伸べる、仏のようなノートさん。ありがとうございます・・・！！

まずはみんな弊社のマスコットコンビのツッコミ担当、カールを歩かせることに挑戦してみます。みんな真剣・・・

いっちー：ああっ！！カールの手足がありえん動きを・・・！

ノート：アンカーポイントの位置を動きの起点の部分に設定しないと、変なところが起点になって回転してしまうよ。。

いっちー：なるほど、そういうことか！！見落としてました・・・！

カール：ワシの身体やで特に気ぃつこてや〜！頼むで〜！

ごめんねカール 笑

どうやら、

• スケール（大きさ変更）
• 位置
• アンカーポイント（動きの中心点決め）
• 回転
• 不透明度

などのトランスフォーム機能はAE初学者にとってマストの基本知識のようです。

なるほど、好きなタイミングにこのポツポツ（キーフレーム）を置いて、

その地点ごとの大きさなどを決めておけば

あとは勝手に滑らか～に変化してくれるカラクリのようです。便利。

スケール、不透明度の変化だけでもこんな感じでフェードインやモチっとした表現ができるとは！

確かに必須でありながら、沼要素たっぷりですね。

イージングも気持ちいいアニメーション制作には欠かせない要素です。

以下のようにイージングをかけることで緩急が付きグッと見栄えが良くなります。

だんだん要領をつかんできました！この調子で一気に進めていきます！

そんなこんなで完成

紆余曲折がありながらも

こんな感じでなんとかできあがりました～～！！

どうでしょうか。すごくないですか？

完全再現とはほぼ遠いですが

初心者が短時間でここまでできました！達成感！

心なしかロージーたちがいつもよりあいくるしい。

参加者一同も良い感じに仕上がって嬉しそうです。

年齢差など関係なく気軽に相談し合いながら解決に向かう姿勢も

ロジカルスタジオのええところのひとつだといっちーは思っております。

ノート：作成した動画を、今回使用した素材だけでアンパンマン映画予告編タイトルみたいにしてみました。

ノート：このように今回のデータをアレンジしてみたり、他に自分でやってみたいアニメーションがあればぜひ作ってみてください。少しでも動画制作に興味を持っていただけたら嬉しいです。

AEハンズオン講座を終えて

いや～初めてのAEでの動画作成だったので

正直なにがなんだか良くわからない状態で完成までいっちゃいましたが、やはり楽しかったです。

タイミングごとの動きを細かく設定したりするのには少し骨が折れるものの、

その分プレビューで無事動いているのを見たときの気持ちよさと言ったら

コーディングのアニメーションと同じものを感じますね。

自然と笑みがこぼれます。

ノートさん曰く、Web制作でもAfter Effectsは活かせるとのことです。

Webデザインのaiデータやpsdデータをレイヤーに分かれた状態でAEに持ってこれるため、

AEでアニメーションを付けることでデザイン上でのアニメーションのイメージやつきやすくなったり、

フロントの人との認識の一致や指示が容易になったり、

提案の際にイメージが伝わりやすかったりと、

リッチなサイトを作るうえでかなり役立つそうです。

おわりに

ありがとうございました！

おかげでAEの楽しさと便利さを学べた勉強会でした！

VFXやモーショングラフィックス系の映像制作に興味がある人に限らず

フロントエンドエンジニア、デザイナーとして活躍している方などにも

利用してみる価値のあるAfter Effects。

一見とっつきにくそうですが

基本操作を覚えればその先にはワクワクの海が待ち受けています！

これを機にぜひチャレンジしてみてくださいね！

YouTube上でたくさんチュートリアル動画が投稿されているので、

アイデアが浮かばない！操作が分からない！という方も安心して技術を深められる環境が整っているように感じます。

僕も講習後に早速、チュートリアル動画を参考にこんなレトロゲームタイトル画面風の動画を作ってみました！

ロジカルスタジオでは今後もこのように新しいことにどんどん挑戦していきます！

技術系の話題や勉強会以外のイベントも当ブログで発信していますので、ぜひチェックしてみてくださいね！

ここまでご覧くださりありがとうございました！

ロジカルスタジオにも興味が湧いてくださった方はぜひコチラまで！！

お待ちしております～～！▼