リクルート プロダクトデザイン室
エンジニアもデザイナーもうれしい!After EffectsとLottieを使ったマイクロインタラクションのデザインと実装 @AdobeMAX
見出し画像

エンジニアもデザイナーもうれしい!After EffectsとLottieを使ったマイクロインタラクションのデザインと実装 @AdobeMAX

リクルート プロダクトデザイン室

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

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

当日の資料

アーカイブ動画

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

当日の様子

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

画像1

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

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

【補足】
SVGデータの為、拡大縮小も自在です。エンジニア側ではサイズの他、再生時間やループの有無、制御タイミングや逆再生などの調整ができるので、実装時にコミュニケーションを取ります。
🙋参加者
「AFからのアニメ素材つかえそうです。軽いのがすごい。👍」
💁大窪
「そうなんです!驚くほど軽いのでぜひ、試してみてください😊」

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

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

終わりに

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


みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!

プロダクトデザイン室では、一緒に働く仲間を募集しています。

リクルート プロダクトデザイン室
株式会社リクルート プロダクトデザイン室の公式noteです。社員のインタビューや各職種・事業の業務について紹介しています。