こんにちは、プロダクトデザイナーの高橋と大窪です。

10/22(木)に、「Airメイト」のプロダクトデザインを担当していた大窪がAdobeMAXのセッションにスピーカーとして参加しました！
アプリやWebのデザイナーを対象に、 マイクロインタラクションをプロダクトに実装するテクニックを紹介しました。
After EffectsとLottieを使うと、デザイナーが作ったアニメーションを、表現豊かかつ軽量に、そしてエンジニアの工数もあまりかけずに、プロダクトに実装することができます。

当日の資料

アーカイブ動画

アーカイブ動画はこちらからご覧いただけます。

当日の様子

当日は事前収録した内容を放送する形だったのですが、リアルタイムで視聴いただいた方とチャットでやりとりできました😊

チャットでいただいたコメントをいくつか紹介したいと思います！

🙋参加者
「大きさはどのように調整すればいいでしょうか？ 例えば最初32x32で作成をしてもエンジニア側で大きく小さくできますか？」
💁大窪
「はい、サイズもエンジニア側で調整できますよ」

【補足】
SVGデータの為、拡大縮小も自在です。エンジニア側ではサイズの他、再生時間やループの有無、制御タイミングや逆再生などの調整ができるので、実装時にコミュニケーションを取ります。

🙋参加者
「AFからのアニメ素材つかえそうです。軽いのがすごい。👍」
💁大窪
「そうなんです！驚くほど軽いのでぜひ、試してみてください😊」

【補足】
Lottieはアニメーションをjsonデータで扱うので、mp4やmov形式の動画ファイルと比べてかなり軽量になります。

その他にも「Lottieについて知らなかったのでとっても面白かったです！ありがとうございました！！」「もう終わりですかー？もっと見たかった！」など温かいコメントをいただきました😊
ありがとうございました！

終わりに

今回の登壇内容は、以下の記事にありますので、ぜひこちらもご覧ください！