モーションデザインに挑戦！1年間みんなでAfter Effectsを勉強しました。
こんにちは！デザイナーの道合です。
2024年ももう半分終わったなんて信じられませんね...。
夏はこれからなのに、連日の暑さで溶けそうです。
そんな暑さにも負けず、SHIFTBRAINは日々楽しみながらものづくりをしています。
今回は社内勉強会についての紹介です！
Creative部（※通称 クリ部）では、有志のデザイナーでAfter Effectsの勉強会をしています！
2023年4月に始まった通称「AE塾」は、気づけばもう1年。
自由にモーションを作ったり、好きなモーションをシェアしたり、時には実務でつまずいた部分を質問しながら作ったり。楽しみながら続けてきました。今回はそんなAE塾の活動を紹介したいと思います。
▼このnoteを書いたのは...
（Designer / AE塾の先生）
● 活動が始まったきっかけ
社内デザイナーの中で「動かす」ことのニーズが高まってきたことがきっかけでした。
実績広報時に動画で魅力的に見せたい！
提案時に動きのモックを作って見せたい！
自分でモーション素材を作ってWebサイトに入れたい！
このような声がちらほら聞こえてくる中で、私が個人的にAfter Effectsを勉強してたこともあり、クリ部の有志メンバーと週一回、始業前の1時間で勉強会を開催することになりました。
● 学習内容
ほとんどが初心者だったため、まずは基本操作からスタート。After Effectsの画面を開いた瞬間、UIの複雑さに戸惑ったメンバーもいました。みんな最初はそうですよね（笑）。
初めは基本操作からスタート。慣れてきたらそれぞれが動かしてみたいモーションを集めてもらい、それらをトレースしながら学んでいきました。「自分でも作れた！」という体験を通して、自信がつき、モチベーションアップにも繋がったと思います。
ここからは、1年間の学習の中で印象に残っているものをいくつかピックアップしてご紹介したいと思います！
①：引越し動画のトレース
Animated by Koki Michiai
弊社オフィスが引越しした際に作成した、Webサイト内の動画がお題でした。難易度が高そうに見えるモーションも、分解すればシンプルな動きの組み合わせで構成されていることを、トレースしながら学んでいきました。
例えば、こちらのシーン。
分解すると...
文字間がだんだん狭くなる
文字がランダムに点滅する
長方形が右から左に流れて縮み、Eが表示される
Wが上下で分割されていて、左右に動きながら最後に合わさる
このように、どんな動きで構成されているのか分析し、自分たちで動きを再現しながら学んでいきました。
②：メタボールの表現
柔らかく有機的なメタボールの表現に挑戦！
ただ作り方を学ぶのではなく、どういう仕組みや概念でアウトプットが出来上がっているのか、みんなで予想しながら作っていくのも楽しかったです。
メタボール表現を応用して、タイルが埋まっていくようなモーションも作りました。
エフェクトを活用したビジュアル作成は、予想外のものが生まれる楽しさがありますよね。
③：Fake 3D と Lottie
メンバーの興味関心度が高い、3DとLottieに挑戦しました！
Lottieとは？
After Effectsで作ったアニメーションをJSON形式で書き出し、簡単にWebサイトやアプリに実装できるライブラリです。ベクターベースなので解像度を気にせず拡大縮小することができ、GIFやMP4などと比べ、ファイルサイズも小さくできるのが特徴です。また、インタラクションに応じたアニメーションを設定できるので、自由な表現ができます。
After Effectsの3D機能は少し癖があるので、まずはその特徴を学ぶことからスタート。
その後は、アイコンのFake 3D モーションに挑戦！
Lottieでの書き出しも想定しながら作っていきました。
細かい作り方は省きますが、ベジェパスをNullオブジェクトで制御して、奥行きを感じるアニメーションを作っています。作り方を工夫すれば、Lottieでも3D表現ができるので、表現の幅が広がりますね。
● みんなの感想
⚪︎宮本
提案時にさくっとモックを作って、動きのイメージ共有ができるようになったのは一番の収穫でした。とにかく手が早くなった。ワイワイしながらみんなで集まるっていう機会が少なくなっているので、こういう集まりはめちゃめちゃありがたい。いつもありがとう先生。
⚪︎藤吉
この勉強会は社内プロジェクトの中でも、最も楽しい時間のひとつ。毎日やりたいくらい。みっちーは教材作りも丁寧だし僕のような手の遅い生徒にも優しいのです。いつもありがとう先生。
⚪︎石塚
自分は朝が弱いので実は1回しか出れていないのですが、Notionにアーカイブもありそれを見てたりします。1人で見るだけでも同僚のわいわい感が伝わり楽しい！いつもありがとうございます！
⚪︎織田
いつもありがとうございます。とてもわかりやすく丁寧に教えていただき、毎週楽しい時間でした。案件でも活かしていけるように頑張ります！これからもよろしくお願いします！
● おわりに
勉強会って続けるのが大変だと思うんです。
実務が忙しいときは都度スキップしたりしていましたが、それでも1年間参加し続けてくれたメンバーと自分を褒めたいです！（笑）
今年度も引き続きAE塾は続いているので、また活動報告ができたらと思います！
ありがとうございました！
▼ 採用情報
シフトブレインでは、新しい仲間を募集しています。全社フルリモートのため、全国からのご応募をいただけます。
募集の詳細は、Wantedlyにてご覧ください！
▼ SHIFTBRAIN GOODS STORE
Cover image design: Koki Michiai