1
/
5

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上でたくさんチュートリアル動画が投稿されているので、

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

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

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

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


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

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

お待ちしております~~!▼

Webアシスタントディレクター
求ム、原石。アルバイトからのWebアシスタントディレクターをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
2 Likes
2 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more