![見出し画像](https://assets.st-note.com/production/uploads/images/129516462/rectangle_large_type_2_44485027db7f731b3e0663afd6ebb5c0.png?width=800)
After Effectsを触ったことがないWEBデザイナーが1月に毎日練習した話
こんにちは。現在株式会社クオートワークスでデザイナーをしています、うっちぃ(@Chanblog1993)です。
2024年スタートと同時にAfter Effectsを触り始めました。こちらでは、年明けから約1ヶ月間でどのようにアニメーション制作をやってきたか、振り返りも兼ねて行ったことをまとめてみました。
学習方法や、参考にしたチュートリアル、挑戦する上でおすすめだなと思ったことも書いていくので読んでいただければ嬉しいです・・!
AfterEffectsのモチベーションを上げる
なぜやりたいのかの理由を考えてみる
まず初めにここから始めました。
これまでに強制的な「やらなきゃ〜」でやめてしまったことが多々あり、「やりたい!」という自発的な気持ちを作ることが前向きにやり続けられるなと思ったのでAfter Effectsに対するモチベーションを上げるために、「なんでAfter Effectsをやりたいんだっけ?」を考えてみました。
・おしゃれなテキスト、ラインアニメーション作ってみたい
・デザインの幅を広げたい
・自分が対応できる範囲を増やしたい
・WEBサイトや図解にアニメーション入れてみたい
・お笑い番組で流れるような動きかっこいい楽しそう、やってみたい
始めた理由はこんな感じです。
正直なところ、大元を辿れば業務の中で使用したいがあるんですが、こうやって理由を考えてみるとアニメーションを見ていて楽しそうだったからが自分の中で大きなポイントでした。さらに世界観が伝わりやすい、読み手に伝わりやすい動きのあるサイトが作れるようになれば今の自分よりもうんと、ランクアップできそうな気がして、自己成長のためにもモーションの勉強をしていこうと決意した形です!
憧れる、作りたい動画を見まくる
ほぼ同時進行で、自分が「いづれ作ってみたい!」「みていて楽しい」と思えるようなAfter Effectsで作ったであろう動画を探しにいきました。見てるとモチベーションに繋がったので個人的にはモチベアップにはおすすめの方法です!
よくみていたものはPinterestやYoutube、Twitterですが、Behance↓でもチェックしていました。好きな動画を見てこんなの作りたいとか、わくわくしたきもちを生み出してAfter Effectsに向かう時間をワクワクしたものに変えています。
![](https://assets.st-note.com/img/1706591109497-UXljnLTdYn.png?width=800)
https://www.behance.net/galleries/motion/motion-graphics
他にも、よく見るX(Twitter)ではリスト機能を使い好きなクリエイターさんの動画が簡単に見れるようにして毎日チェックもしていました。
![](https://assets.st-note.com/img/1706788417000-BJEB7RTVCf.png?width=800)
目標を設定する
「続けること」と「モチベーションの維持」を継続するために小さな目標を設定して、やり遂げた時の達成感を少しでも味わえるようにしました🙌
設定した目標はこちらです。
・アフターの基礎理解ができている状況
・毎日1作品投稿する
・オリジナルの簡単なアニメーションが作れるようになる
・udemyの基礎動画を全部やる
・lottieとはを理解する
大事なのは達成できそうな目標よりも少しだけ難易度の高いものを設定するというところです。簡単すぎても達成感がなくなる、難しすぎても挫折してしまうので、自分の中で塩梅のいいところを設定しました。個人個人によって設定する目標は変わってくると思うのですが設定したおかげで毎日少しのやり遂げてる感を感じれています。
今のところ20日連続で続けれているので、甘いかもしれませんがわたし的にはまずまずなところだと思っています…!
初心者向けのチュートリアルで練習
さてやっと本題ですが1月で実践してきたことをお話ししたいと思います。
YouTube
目標が決まってモチベーションが上がった後、最初はyoutubeでPutti Monkey Wrenchさんのチュートリアルをやりました。声が聞き取りやすくて、手取り足取り教えてくれるだけでなく、なんでこうした方がいいのかの理由も教えてくれるので、まさにAfter Effectsを0から始めるにはぴったりのチュートリアルでした。
5つめ pic.twitter.com/eS34AwtMOP
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 11, 2024
Udemy
ただ、youtubeで学習を続けていくデメリットに、動画選びに時間がかかることと体系的に学習しずらい難点がありました。仕事後の夜の時間を動画選びに時間をかけたくないのが本音です👿
また、YouTubeだと断片的にしか学習できなくて、1から一歩ずつ着実に学べるUdemyのkamo(かも)さんの動画を購入し基礎のチュートリアルを進めて行きました。1講座合計16時間の超大作で何章にも分かれていて動画講座が進んでいくので、選ぶ手間がなくなってコツコツ続けられました。購入してよかったです!
難しいチュートリアルはせず、基本的な操作・機能に慣れるまひたすら基礎学習です。
After Effectsすたーと
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) December 28, 2023
とりあえずチュートリアルをやりまくります🏃♀️ pic.twitter.com/pIo8WyqFLn
その7 pic.twitter.com/zZFRV7AU1V
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 13, 2024
After Effectsの基礎本
ちなみに本も買いました✌️
年末年始海外に行っていたので、その時にwifi環境が悪くても読めるようにと思って買ったのですが、私の中では買って正解でした。(ゆれる飛行機の中でガンガンに体を揺らしながら読んだ思い出です。)
こちらも体系的に基礎を0→1で学べて、モーショングラフィックスを学ぶのにぴったりな内容でした。Illustratorの素材を動かしたい時の方法をメインで教えてくれます。少しだけlottieを使ってどうやってwebで表示させればいいのかも書いてありました!
作ってきた作品たち
基礎的な内容に慣れてきたら、YouTubeに戻って少しだけ難易度の高いものに挑戦していきました。最初はチュートリアル通りにやってみて完成したら少しアレンジするを繰り返し行っています。
①トランジション
9こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 15, 2024
トラックマット使い倒してみた。
もう少しトラックマット理解深めなきゃ pic.twitter.com/koRRhLOatN
②波の動き
10こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 16, 2024
波の動き🌊
・エフェクト「ジグザグ」を滑らかに
・モーションスタイルでタイルの中心を調整 pic.twitter.com/JiznIBZsBr
③もくもく
13こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 19, 2024
もくもく
・ディストーション>タービュレントディスプレイスをを複製で2つ作成
・↑の2つオフセットをずらす pic.twitter.com/3zfyhL1m1h
▼参考にしたYouTube
いろんなグラデーション背景の作り方【After Effects】
④円グラフ
15こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 21, 2024
円グラフ
「エフェクト<スライダー制御」と「数字・円」を紐づければ簡単にカウントしてくれる👀 pic.twitter.com/CQi66elhOm
⑤エコー
16こめ pic.twitter.com/szHupxiHXt
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 22, 2024
▼参考にしたYouTube
3 Conceptual Title Minimalism Techniques in After Effects
⑥ペンで描いた風の文字
17こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 23, 2024
・text::ペンツール>エフェクト「stroke」
・Blur Animated
ペン太すぎると隣の文字に一気に反映されるので要注意 pic.twitter.com/vkBEYZhtyS
⑦カラフルなテキストアニメーション
19こめ pic.twitter.com/HCAEsKFmUp
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 25, 2024
⑧モーションMIX
20こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 26, 2024
モーションだらけ pic.twitter.com/MxbXlQN3Ny
21こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 27, 2024
しばらくはシェイプの練習モードに突入#aftereffects pic.twitter.com/hBRrhYT3bE
▼参考にしたYouTube
シェイプエフェクト 【After Effects チュートリアル】
⑨カラフルなうにょうにょ
22こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 28, 2024
5つの終了点とオフセットの掛け合わせ#aftereffects pic.twitter.com/nMGYxmQ4Rc
▼参考にしたYouTube
Easy Colorful Line Animation | After Effects Tutorial
⑩文字が変形する
23こめ pic.twitter.com/qFLS192OpQ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 29, 2024
▼参考にした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のプラグインをいれる通常のフローよりもやや異なるので要注意です!👇の記事で詳しく解決してくれているので気になる場合はお読みください!
25こめ
— うっちぃ| QUOITWORKS Inc. (@Chanblog1993) January 31, 2024
トントゥちゃん
figmaで作ったデザインにプラグイン「AEUX」をかましてAeで動きをつける
参考↓https://t.co/8qTJICh9fjhttps://t.co/B2uwJz9WoZ pic.twitter.com/0q0pqSKSsD
▼他に参考にした記事
https://dev.classmethod.jp/articles/aftereffects_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.では、お仕事のご依頼やご相談、お待ちしております。お問い合わせページからご連絡をお願いいたします✉️
この記事が気に入ったらサポートをしてみませんか?