necco note
田口 冬菜
necco note
Vook主催「そのイラスト、動かしてみない？ WebデザイナーのためのAfter Effects入門」に2日間ゲスト講師出演しました。
- Event
- Motion Design
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。
2022年4月23日・30日に開催された、Vook主催のウェビナー「そのイラスト、動かしてみない？ WebデザイナーのためのAfter Effects入門」にゲスト講師出演しました。
イベント概要
日本最大級の動画・映像に特化したメディアを運営するVook（ヴック）さんの主催で、デザイナー視点の「After Effects入門講座」が4月23日・29日に開催されました。
- 【無料開催】そのイラスト、動かしてみない？WebデザイナーのためのAfter Effects入門 #Ae基礎DAY
- 【無料開催】そのイラスト、動かしてみない？WebデザイナーのためのAfter Effects入門 #ループアニメーションDAY
当日はスライドを使ったお話とハンズオンの2部構成。はじめてAfter Effectsを触る方でも一緒に進める内容で、映像講師の山下大輔さんMCのもと行いました。
1日目の #Ae基礎DAY は954名、2日目の #ループアニメーションDAY は857名、合計1800名以上の方にお申し込みいただき、当日もたくさんの方がご参加くださいました。
盛り上げていただいた参加者のみなさま、サポートやお声がけをいただいたVookのみなさま、山下さん、本当にありがとうございました！
イベント内容のダイジェスト（DAY1：#Ae基礎DAY）
1日目はスライド全93ページ分のお話と、約1時間のハンズオン。この記事では少しだけスライドをお見せします。
Ae基礎DAYでは、デザイナーとしてのAfter Effects・モーションの活用法や学び方、モーションを取り入れはじめた理由などをお伝えしました。
After Effectsを使いはじめたきっかけや学び方は、実際に作ったもの、参考にした本などもあわせてご紹介しました。
学び方は過去に「デザイナーがAfter Effectsを学ぶ / 1ヶ月の記録 / 勉強方法とコツ」というnoteを書いていたようですが、今回あらためて整理し、1ヶ月以降の内容もお話ししました。
■ ウェビナーでご紹介した本
ウェブサイトにアニメーションを取り入れるメリットや、ウェブデザイナーがAfter Effectsを制作に取り入れるメリットは、私が実際のお仕事でAeを取り入れてよかったと思うことを中心にお話しました。
アニメーションを取り入れる上で注意していることなどもお話ししました。いいことはたくさんあるけど、考えなきゃいけないことももちろんあります。
ハンズオンはAfter Effectsをはじめて使う方でも一緒に動きをつけられるよう、基本のき、素材の準備からはじめました。
Twitterで「#Ae基礎DAY」と検索すると、「はじめてだけどできた！」という参加者さんたちのコメントや動画がくさん見れますので、ぜひのぞいてみてください🙌（私はうれしくてほとんどぜんぶ見てます👀）
素材はunDrawさんのお世話になりました。
動かす練習はしたいけど、素材の準備が…という方は、unDrawさんやIllust ACさんなど、ベクター素材を取り扱っているサービスに頼るのも一つの手です。
また、ハンズオンでは「Lottieアニメーション」に対応したものを作っていたので、実際の実装サンプルページもご用意しました。よければ参考にしてみてください！（あべさん実装ありがとうございます👏）
Lottie Sample （公開は終了しました）
以上！ほんの少しだけ #Ae基礎DAY の内容をお見せするダイジェストでした。
イベント内容のダイジェスト（DAY2：#ループアニメーションDAY）
2日目はスライド全89ページ分のお話と、約45分のハンズオン。（初日が終了20分オーバーだったのでスライド減らしたつもり…が結局20分オーバーでした🙏）
ループアニメーションDAYは前回より少し実務向きの内容でした。
まずはループアニメーションについてのお話から。初心者でもループアニメーションを作れるコツ、実際の作成時に考えていることなどをご紹介しました。
実際のプロジェクトで使っている動画を例に、ループアニメーションの実用例もご紹介。ループ前後の処理などについてもお話しました。
Lottieアニメーションの基本についてのお話は、以前に書いた記事と同じところが多いので、よければ以下の記事も参考にしてみてください。
#ループアニメーションDAY のハンズオン作例はこちら。グリーンのあしらい以外の部分を視聴者さんと一緒に動かしてみました。
前回は素材の準備から一緒に進めましたが、今回は動きをつけるパートが中心。
参加者の方には事前準備をお願いしていて、当日はAfter Effectsに直行。途中でオブジェクトが逃げ出すハプニングがあり、失敗・修正のリアルな過程までお披露目してしまいましたが楽しかったです。
（山下さんサポート本当に助かりました！ありがとうございます🙇♀️）
モーション制作のワークフローは実際の手書きラフ、Figma画面のキャプチャーなどもチラッと公開。
前回ご質問がいくつかあった、エンジニアさんとのやりとりについても要点をしぼってお話させていただきました。
モーションをより軽くてキレイに表示するためには、動画フォーマット形式の選択も重要。各フォーマットについての解説は時間の都合で省略しましたが、プロジェクト事例や自分が試行錯誤する中で見つけたルールのようなものをお話しました。
アニメーションがなんとなくイマイチなときは「ディズニーアニメーションの12の基本原則」を見て修正したりしています。モーション界隈では有名な原則ですが、これからモーショングラフィックスをはじめる方の参考にもなるはずです。
ウェビナー中にご紹介した動画は以下。
最後に愛用しているプラグインなどを少しご紹介し、まとめのお話しをして終了。無事2日間のウェビナーが完結しました🎉 準備とかいろいろあったけど楽しかった〜！
#ハッシュタグのついたツイートまとめ
今回のイベントのハッシュタグ「#Ae基礎DAY」「#ループアニメーションDAY」をつけていただいたツイートを、すべてではありませんがまとめさせていただきました。
たくさんの方がご感想やコメント、ハンズオンを通して作ったアニメーション動画を公開してくださっていて、正直めちゃくちゃ感動しました。
特に動画の投稿はホッとしました。
オンラインでのハンズオンは視聴者さんの反応が見えず、「伝わってるかな？」「全員つまずいちゃったりしてないかな？」「いまの間違ってないかな？」と不安な気持ちが多かったのですが、投稿していただいた動画を見て、心から安心できました。本当にありがとうございます。
おわりに
2日間、もしくはどちらか一方のウェビナーにご参加いただいたみなさま、Vookのみなさま、MCをつとめていただいた山下さん、このたびは本当にありがとうございました！
これまでVookさんのコンテンツを視聴する側だった自分に登壇依頼がきたときは、声をだして驚きました。予想以上のお申し込みの多さにもまた驚きましたが、みなさまのあたたかいサポートのおかげで無事にイベントを終えることができました。はじめてのハンズオンも楽しく、学びが多かったです。
これまでAfter Effectsに触れたことがなかった方も、今回のイベントで「動く楽しさ」「デザイン・イラスト・ウェブとかけあわせる可能性」などを感じていただけていたらうれしいです。
After Effects、モーショングラフィックスはデザイナーと相性がよく、身につけると表現の幅も、仕事の幅も広がります。今回のイベントを機にもっとやってみたいと思われた方は、ぜひつづけて活用してみてください！☺️
追記：アーカイブ動画配信がはじまりました
2日間のアーカイブ動画がVookさんのサイトで見れるようになりました！
無料の会員登録をすればいつでも動画を見直せます。今回イベントに参加されなかった方、あとで知って興味を持っていただけた方も、よければ見てみてください。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年8月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
