見出し画像

After Effectsを触ったことがないWEBデザイナーが1月に毎日練習した話

こんにちは。現在株式会社クオートワークスでデザイナーをしています、うっちぃ(@Chanblog1993)です。
2024年スタートと同時にAfter Effectsを触り始めました。こちらでは、年明けから約1ヶ月間でどのようにアニメーション制作をやってきたか、振り返りも兼ねて行ったことをまとめてみました。
学習方法や、参考にしたチュートリアル、挑戦する上でおすすめだなと思ったことも書いていくので読んでいただければ嬉しいです・・!



AfterEffectsのモチベーションを上げる

なぜやりたいのかの理由を考えてみる

まず初めにここから始めました。
これまでに強制的な「やらなきゃ〜」でやめてしまったことが多々あり、「やりたい!」という自発的な気持ちを作ることが前向きにやり続けられるなと思ったのでAfter Effectsに対するモチベーションを上げるために、「なんでAfter Effectsをやりたいんだっけ?」を考えてみました。

・おしゃれなテキスト、ラインアニメーション作ってみたい
・デザインの幅を広げたい
・自分が対応できる範囲を増やしたい
・WEBサイトや図解にアニメーション入れてみたい
・お笑い番組で流れるような動きかっこいい楽しそう、やってみたい

始めた理由はこんな感じです。
正直なところ、大元を辿れば業務の中で使用したいがあるんですが、こうやって理由を考えてみるとアニメーションを見ていて楽しそうだったからが自分の中で大きなポイントでした。さらに世界観が伝わりやすい、読み手に伝わりやすい動きのあるサイトが作れるようになれば今の自分よりもうんと、ランクアップできそうな気がして、自己成長のためにもモーションの勉強をしていこうと決意した形です!


憧れる、作りたい動画を見まくる

ほぼ同時進行で、自分が「いづれ作ってみたい!」「みていて楽しい」と思えるようなAfter Effectsで作ったであろう動画を探しにいきました。見てるとモチベーションに繋がったので個人的にはモチベアップにはおすすめの方法です!
よくみていたものはPinterestやYoutube、Twitterですが、Behance↓でもチェックしていました。好きな動画を見てこんなの作りたいとか、わくわくしたきもちを生み出してAfter Effectsに向かう時間をワクワクしたものに変えています。

Behance
https://www.behance.net/galleries/motion/motion-graphics


他にも、よく見るX(Twitter)ではリスト機能を使い好きなクリエイターさんの動画が簡単に見れるようにして毎日チェックもしていました。

「motion」のリストを作成しました


目標を設定する

「続けること」と「モチベーションの維持」を継続するために小さな目標を設定して、やり遂げた時の達成感を少しでも味わえるようにしました🙌
設定した目標はこちらです。

・アフターの基礎理解ができている状況
・毎日1作品投稿する
・オリジナルの簡単なアニメーションが作れるようになる
・udemyの基礎動画を全部やる
・lottieとはを理解する

大事なのは達成できそうな目標よりも少しだけ難易度の高いものを設定するというところです。簡単すぎても達成感がなくなる、難しすぎても挫折してしまうので、自分の中で塩梅のいいところを設定しました。個人個人によって設定する目標は変わってくると思うのですが設定したおかげで毎日少しのやり遂げてる感を感じれています。
今のところ20日連続で続けれているので、甘いかもしれませんがわたし的にはまずまずなところだと思っています…!


初心者向けのチュートリアルで練習

さてやっと本題ですが1月で実践してきたことをお話ししたいと思います。

YouTube

目標が決まってモチベーションが上がった後、最初はyoutubeでPutti Monkey Wrenchさんのチュートリアルをやりました。声が聞き取りやすくて、手取り足取り教えてくれるだけでなく、なんでこうした方がいいのかの理由も教えてくれるので、まさにAfter Effectsを0から始めるにはぴったりのチュートリアルでした。


Udemy

ただ、youtubeで学習を続けていくデメリットに、動画選びに時間がかかることと体系的に学習しずらい難点がありました。仕事後の夜の時間を動画選びに時間をかけたくないのが本音です👿 
また、YouTubeだと断片的にしか学習できなくて、1から一歩ずつ着実に学べるUdemyのkamo(かも)さんの動画を購入し基礎のチュートリアルを進めて行きました。1講座合計16時間の超大作で何章にも分かれていて動画講座が進んでいくので、選ぶ手間がなくなってコツコツ続けられました。購入してよかったです!

難しいチュートリアルはせず、基本的な操作・機能に慣れるまひたすら基礎学習です。


After Effectsの基礎本

ちなみに本も買いました✌️
年末年始海外に行っていたので、その時にwifi環境が悪くても読めるようにと思って買ったのですが、私の中では買って正解でした。(ゆれる飛行機の中でガンガンに体を揺らしながら読んだ思い出です。)
こちらも体系的に基礎を0→1で学べて、モーショングラフィックスを学ぶのにぴったりな内容でした。Illustratorの素材を動かしたい時の方法をメインで教えてくれます。少しだけlottieを使ってどうやってwebで表示させればいいのかも書いてありました!


作ってきた作品たち

基礎的な内容に慣れてきたら、YouTubeに戻って少しだけ難易度の高いものに挑戦していきました。最初はチュートリアル通りにやってみて完成したら少しアレンジするを繰り返し行っています。

①トランジション


②波の動き


③もくもく

▼参考にしたYouTube
いろんなグラデーション背景の作り方【After Effects】


④円グラフ

5 Infographic Edits You Should Know in After Effects


⑤エコー

▼参考にしたYouTube
3 Conceptual Title Minimalism Techniques in After Effects


⑥ペンで描いた風の文字


⑦カラフルなテキストアニメーション


⑧モーションMIX

▼参考にしたYouTube
シェイプエフェクト 【After Effects チュートリアル】


⑨カラフルなうにょうにょ

▼参考にしたYouTube
Easy Colorful Line Animation | After Effects Tutorial


⑩文字が変形する

▼参考にしたYouTube
How to Make Kinetic Warp Text Animation in After Effects


figmaで作ったものをAeで動かす

また、figmaで作成したデザインをAfter Effectsで動かすこともしてみました。
figmaのデータをAfter Effectsで動かすにはプラグイン「AEUX」のダウンロードが必要で、「AEUX」をダウンロードしてから、figmaとAfter Effects両方にかまして、After Effectsで動きをつけている流れになります。
figmaのプラグインをいれる通常のフローよりもやや異なるので要注意です!👇の記事で詳しく解決してくれているので気になる場合はお読みください!

▼他に参考にした記事
https://dev.classmethod.jp/articles/aftereffects_lottie/…

IllustratorやFigmaでたこ焼きを描いて、After EffectsとLottieを利用して動かしてみる



よく使うショートカット

不透明度:T
ペンツール:G
アンカーポイントをセンターにする:Command option fn ←
オブジェクト自体をセンターにする:Command  fn ←
コンポジション設定:Command K
新規平面レイヤー作成:Command Y
1フレームずつ進める:Command  ←(→)
ワークエリア(再生エリア):前 B  /  後ろN
※全体を再生するには重たい時に使用
グラフエディターでキーフレーム削除:ctrl click
エクスプレッション:alt ⏰
キーフレーム速度:alt キーフレームダブルクリック

ショートカット本当に大事。特にアンカーポイントとオブジェクトをセンターにするショートカットはいつも助けられています。(ありがとう….!)こちらは随時更新していきます….!


学習時間

続けることが一番大事なので、毎日のコンディションに合わせて、調子いい時は長めの凝ったチュートリアルを、疲れている時は短いの選んだりしてとにかく続けることをメインにした結果、1月はトータルの学習時間はこんな感じになりました。

・お正月(1/4〜8)1日約5時間くらい=40時間
・通常期間(1/9〜)毎日就業後の3時間くらい&週末=80時間


まとめ

以上が1月に取り組んできた内容です!
After Effectsを闇雲に始めてしまうと、機能が色々ありすぎて挑戦する範囲が広くなってしまうので最初に何をゴールにしたらいいのか設定したことがよかったかなと思います。

▼After Effectsを触ったことがない人におすすめしたいこと
・なんでやるのか理由を明確にする
・目標を設定する
・ゴールを設定する
・モチベーションを上げるための工夫をしてみる

また、設定した目標を振り返ってみました。なんとかクリアしたんじゃないかと思っています!

目標の振り返り
・アフターの基礎理解ができている状況・・◯
・毎日1作品投稿する・・◎  
・オリジナルの簡単なアニメーションが作れるようになる・・△
・udemyの基礎動画を全部やる・・◯
・lottieとはを理解する・・△

ただ基礎はなんとなく理解してるけどまだ言葉で説明できる状況ではなさそうなので、次は基礎の定着と、もう少し実用的で難易度の高いものに挑戦していけたらと思っています。とにかく地道に練習していきます!
これからはじめる誰かにとって何か参考になれば嬉しい限りです。
ここまで読んでいただきありがとうございました🙇‍♀️



現在QUOITWORKS Inc.では、お仕事のご依頼やご相談、お待ちしております。お問い合わせページからご連絡をお願いいたします✉️


この記事が参加している募集

今月の振り返り

この記事が気に入ったらサポートをしてみませんか?