モーションデザインに挑戦！1年間みんなでAfter Effectsを勉強しました。

2024年6月27日 15:02

こんにちは！デザイナーの道合です。

2024年ももう半分終わったなんて信じられませんね...。
夏はこれからなのに、連日の暑さで溶けそうです。
そんな暑さにも負けず、SHIFTBRAINは日々楽しみながらものづくりをしています。

今回は社内勉強会についての紹介です！
Creative部（※通称クリ部）では、有志のデザイナーでAfter Effectsの勉強会をしています！

2023年4月に始まった通称「AE塾」は、気づけばもう1年。
自由にモーションを作ったり、好きなモーションをシェアしたり、時には実務でつまずいた部分を質問しながら作ったり。楽しみながら続けてきました。今回はそんなAE塾の活動を紹介したいと思います。

▼このnoteを書いたのは...

● 活動が始まったきっかけ

社内デザイナーの中で「動かす」ことのニーズが高まってきたことがきっかけでした。

実績広報時に動画で魅力的に見せたい！
提案時に動きのモックを作って見せたい！
自分でモーション素材を作って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などと比べ、ファイルサイズも小さくできるのが特徴です。また、インタラクションに応じたアニメーションを設定できるので、自由な表現ができます。

Lottieアニメーションとは？- LottieFiles

After Effectsの3D機能は少し癖があるので、まずはその特徴を学ぶことからスタート。