Adobe XDの現場の今 vol.2
〜動画とLottieを学ぶ、XD最新アップデート〜
動画やLottieを利用する、少し先行くプロトタイプの表現方法を紹介します。
書籍『豊富な作例で学ぶ Adobe XD Webデザイン入門』の著者二人が、動画やLottieを活用して表現力の高いプロトタイプを操作しながら解説します。
- 「アップデートが頻繁にあって、今なにができるかわからない」
- 「Lottieは知ってるけど、さわったことがない」
- 「動画をプロトタイプに組み込む必要あるの？」
初めてLottieにさわる方でも安心できるように、簡単なモーショングラフィックスの作成方法から紹介します。動画やLottieを活用したいけど何から始めれば良いかわからない全てのXDユーザーが学びを得られます。
Lottieとは
Lottieとは、json形式のファイルとして書き出したベクターアニメーションを、Webやアプリ上でネイティブにレンダリングすることができるアニメーションライブラリです。
動画をプロトタイプに組み込む必要あるの？
動画をプロトタイプに組み込むことで、デザイナーが考える動画やアニメーションを使った表現方法を、見た目やわかりやすさ、使いやすさ、といった観点で、より実装に近い形で評価することができます。動画を組み込んだデザインを評価した結果、「やはりこれはない方が良いね」という結論になったとしても、それを事前に確認できた、ということが最大のメリットになります。
【前半】書籍とデモによるアップデート内容の徹底解説
書籍の重版に伴って追加修正されたアップデート内容と、書籍には含まれない動画とLottieへの対応について基礎から解説します。
書籍と合わせて、よりXDを使いこなし、デザインやプロトタイピングに活用するための学びを得ることができます。
- ライブラリの共有についての変更点
- XDからBehanceに公開しよう
- 動画の扱い方と注意事項
- Lottieの導入方法
【後半】プロトタイプの表現力を上げる動画とLotteiの活用法
前半で紹介した動画とLottieを使って、プロトタイプの表現力を上げるヒントを紹介します。
例えば、書籍の中で紹介したテクニックを動画やLottieで再現すると、どんなメリットがあるのかなどです。
単純に動画やLottieを再生するだけでなく、一歩踏み込んだ表現も紹介します。
- 通常再生以外の動画の使い方
- 通常再生以外のLottieの使い方
- 動画とLottieを組み合わせた使い方
参加者特典
- Lottieのサンプル制作に使ったファイル一式
出演
『豊富な作例で学ぶ Adobe XD Webデザイン入門』の著者のお二人にお話しいただきます。
- 佐々木 雄平さん（by）
- 池原 健治さん
