田口 冬菜
田口 冬菜

necco note

Vook主催「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」に2日間ゲスト講師出演しました。

  • Event
  • Motion Design

2022年4月23日・30日に開催された、Vook主催のウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」にゲスト講師出演しました。

Vook主催ウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」DAY1バナー
1日目「#Ae基礎DAY」(954名の参加申し込み)
Vook主催ウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」DAY2バナー
2日目「#ループアニメーションDAY」(857名の参加申し込み)

イベント概要

日本最大級の動画・映像に特化したメディアを運営するVook(ヴック)さんの主催で、デザイナー視点の「After Effects入門講座」が4月23日・29日に開催されました。

当日はスライドを使ったお話とハンズオンの2部構成。はじめてAfter Effectsを触る方でも一緒に進める内容で、映像講師の山下大輔さんMCのもと行いました。

DAY1「#Ae基礎DAY」の作例
DAY2「#ループアニメーションDAY」の作例

1日目の #Ae基礎DAY は954名、2日目の #ループアニメーションDAY は857名、合計1800名以上の方にお申し込みいただき、当日もたくさんの方がご参加くださいました。

盛り上げていただいた参加者のみなさま、サポートやお声がけをいただいたVookのみなさま、山下さん、本当にありがとうございました!

イベント内容のダイジェスト(DAY1:#Ae基礎DAY)

1日目はスライド全93ページ分のお話と、約1時間のハンズオン。この記事では少しだけスライドをお見せします。

Vook主催ウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」DAY1バナー
動くバナーはVookさんがご用意してくださいました。かわいく作っていただいてありがとうございます!🙏

Ae基礎DAYでは、デザイナーとしてのAfter Effects・モーションの活用法や学び方、モーションを取り入れはじめた理由などをお伝えしました。

After Effectsを使いはじめたきっかけや学び方は、実際に作ったもの、参考にした本などもあわせてご紹介しました。

学び方は過去に「デザイナーがAfter Effectsを学ぶ / 1ヶ月の記録 / 勉強方法とコツ」というnoteを書いていたようですが、今回あらためて整理し、1ヶ月以降の内容もお話ししました。

■ ウェビナーでご紹介した本

ウェブサイトにアニメーションを取り入れるメリットや、ウェブデザイナーがAfter Effectsを制作に取り入れるメリットは、私が実際のお仕事でAeを取り入れてよかったと思うことを中心にお話しました。

アニメーションを取り入れる上で注意していることなどもお話ししました。いいことはたくさんあるけど、考えなきゃいけないことももちろんあります。

DAY1「#Ae基礎DAY」の作例

ハンズオンはAfter Effectsをはじめて使う方でも一緒に動きをつけられるよう、基本のき、素材の準備からはじめました。

Twitterで「#Ae基礎DAY」と検索すると、「はじめてだけどできた!」という参加者さんたちのコメントや動画がくさん見れますので、ぜひのぞいてみてください🙌(私はうれしくてほとんどぜんぶ見てます👀)

素材はunDrawさんのお世話になりました。

動かす練習はしたいけど、素材の準備が…という方は、unDrawさんやIllust ACさんなど、ベクター素材を取り扱っているサービスに頼るのも一つの手です。

また、ハンズオンでは「Lottieアニメーション」に対応したものを作っていたので、実際の実装サンプルページもご用意しました。よければ参考にしてみてください!(あべさん実装ありがとうございます👏)

Lottie Sample

以上!ほんの少しだけ #Ae基礎DAY の内容をお見せするダイジェストでした。

イベント内容のダイジェスト(DAY2:#ループアニメーションDAY)

2日目はスライド全89ページ分のお話と、約45分のハンズオン。(初日が終了20分オーバーだったのでスライド減らしたつもり…が結局20分オーバーでした🙏)

Vook主催ウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」DAY2バナー
DAY2の動くバナーもVookさんがご用意してくださいました。かわいい!ありがとうございます!🙏

ループアニメーションDAYは前回より少し実務向きの内容でした。

まずはループアニメーションについてのお話から。初心者でもループアニメーションを作れるコツ、実際の作成時に考えていることなどをご紹介しました。

実際のプロジェクトで使っている動画を例に、ループアニメーションの実用例もご紹介。ループ前後の処理などについてもお話しました。

https://airbnb.design/lottie/

Lottieアニメーションの基本についてのお話は、以前に書いた記事と同じところが多いので、よければ以下の記事も参考にしてみてください。

#ループアニメーションDAY のハンズオン作例はこちら。グリーンのあしらい以外の部分を視聴者さんと一緒に動かしてみました。

前回は素材の準備から一緒に進めましたが、今回は動きをつけるパートが中心。

参加者の方には事前準備をお願いしていて、当日はAfter Effectsに直行。途中でオブジェクトが逃げ出すハプニングがあり、失敗・修正のリアルな過程までお披露目してしまいましたが楽しかったです。

(山下さんサポート本当に助かりました!ありがとうございます🙇‍♀️)

モーション制作のワークフローは実際の手書きラフ、Figma画面のキャプチャーなどもチラッと公開。

前回ご質問がいくつかあった、エンジニアさんとのやりとりについても要点をしぼってお話させていただきました。

モーションをより軽くてキレイに表示するためには、動画フォーマット形式の選択も重要。各フォーマットについての解説は時間の都合で省略しましたが、プロジェクト事例や自分が試行錯誤する中で見つけたルールのようなものをお話しました。

アニメーションがなんとなくイマイチなときは「ディズニーアニメーションの12の基本原則」を見て修正したりしています。モーション界隈では有名な原則ですが、これからモーショングラフィックスをはじめる方の参考にもなるはずです。

ウェビナー中にご紹介した動画は以下。

最後に愛用しているプラグインなどを少しご紹介し、まとめのお話しをして終了。無事2日間のウェビナーが完結しました🎉 準備とかいろいろあったけど楽しかった〜!

Figmaで作った2日分のスライド

#ハッシュタグのついたツイートまとめ

今回のイベントのハッシュタグ「#Ae基礎DAY」「#ループアニメーションDAY」をつけていただいたツイートを、すべてではありませんがまとめさせていただきました。

たくさんの方がご感想やコメント、ハンズオンを通して作ったアニメーション動画を公開してくださっていて、正直めちゃくちゃ感動しました。

特に動画の投稿はホッとしました。

オンラインでのハンズオンは視聴者さんの反応が見えず、「伝わってるかな?」「全員つまずいちゃったりしてないかな?」「いまの間違ってないかな?」と不安な気持ちが多かったのですが、投稿していただいた動画を見て、心から安心できました。本当にありがとうございます。

おわりに

2日間、もしくはどちらか一方のウェビナーにご参加いただいたみなさま、Vookのみなさま、MCをつとめていただいた山下さん、このたびは本当にありがとうございました!

これまでVookさんのコンテンツを視聴する側だった自分に登壇依頼がきたときは、声をだして驚きました。予想以上のお申し込みの多さにもまた驚きましたが、みなさまのあたたかいサポートのおかげで無事にイベントを終えることができました。はじめてのハンズオンも楽しく、学びが多かったです。

これまでAfter Effectsに触れたことがなかった方も、今回のイベントで「動く楽しさ」「デザイン・イラスト・ウェブとかけあわせる可能性」などを感じていただけていたらうれしいです。

After Effects、モーショングラフィックスはデザイナーと相性がよく、身につけると表現の幅も、仕事の幅も広がります。今回のイベントを機にもっとやってみたいと思われた方は、ぜひつづけて活用してみてください!☺️

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。高校卒業後、4年間医療を学び理学療法士になる。二次救急病院のリハビリテーション科に所属し、急性期および回復期、外来の整形外科、脳血管、呼吸器、心臓疾患など臨床を経験する。臨床6年目で趣味としてデザインを学びはじめたところ、ハマりすぎてデザイナーに転職。半年後に上京、都内のデザイン会社へ就職し、2020年6月からneccoにデザイナーとして参画。人の心を動かすもの、魅せるデザインを日々探究中。仕事や自主制作でモーションデザインも楽しんでいる。最近は3DCGモデリングにもハマっている。好きなものはデザイン、本、アート、お出かけ、インテリア、犬、効率化。じっとしていることが苦手。おもしろそうなことはなんでもやってみる。

SHARE

TwitterFacebook

Other Posts

necco note
Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法のアイキャッチ画像

Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法

necco Corporate Character HakonecoDOWNLOAD

necco Corporate Character HakonecoCONTACT