Adobe XD に興味がある全ての人に役立つ情報をお伝えする番組「みんなで Adobe XD Trail 2022」。晩秋SP Day 1 は、以下の内容をお伝えしました。
| # | セクション | 内容 | 関連リソース |
|---|---|---|---|
| 1 | はじめの一歩 | 「Lottie アニメーション＆動画」の使い方 | サンプルファイル |
| 2 | 本日のゲスト | AE を使った基本的な Lottie アニメーションの作成方法（出演：池田泰延） | |
| 3 | 達人への道 | XD ふぁんのための Lottie 情報総まとめ（出演：湯口りさ） | セッション資料 |
※サンプルファイルをダウンロードすると実際に手元で試しながら動画をご覧になれます。
各セクションの概要
☆ はじめの一歩 – Lottie アニメーション＆動画
デザインに動きの要素を加えるのに便利な「Lottie アニメーション」と「動画」をテーマに、関連するチュートリアル動画の内容に沿った使い方が紹介されました。番組内で生徒が実演に使用したサンプルファイルは、上のテーブル内のリンクからダウンロードできます。
関連するチュートリアル動画
・Adobe XD での Lottie アニメーションの操作
・Adobe XD でのビデオの操作
☆ 本日のゲスト – AE を使った基本的な Lottie アニメーションの作成方法
MAX セッション「Adobe XDと After Effects で実現！手触り感のあるデザイン制作」の講師である池田泰延さんから、After Effects を使った Lottie アニメーションの作成方法と XD への取り込み方について、実践的なヒントも交えつつ、丁寧な解説がありました。
関連するチュートリアル動画
・外部ツールとの連携 5/5（After Effects）
☆ 達人への道 – XD ふぁんのための Lottie 情報総まとめ
XD でとりあえず Lottie を使ってみたい人のために、簡単な始め方から使う上での注意点まで、知っていると役立つ情報がまとめて紹介されました。
放送中に使われていた資料はこちらに公開されています。
当日の Q&A（Lottie アニメーション＆動画についての質問編）
☆動画は同時に何本まで再生できますか？
現在の制限事項にあたっています、一度に再生できるビデオは 1 つだけになっています。
☆Lottie アニメーションの同時再生に上限はありますでしょうか？
確実な数字は出ていませんが、リピートグリッドで増やしたものを一個ずつ自動再生してもそれなりの数で動いていました。（リピートグリッドに入れた Lottie は一つを除いて停止の設定で配置されますので大量に再生するのは設定も大変）
☆Lottie アニメーションの編集は XD でできますか？
残念ながら、XD ではできません。番組で紹介したように LottieFiles を使用すると簡単な編集が可能です。より細かく編集するには元のアニメーションを作成したファイル（After Effects など）を変更して書き出すようにしてください。
☆いま XD でやりましたが Illustratorでも同様にAE書き出しできますか？
はい！Illustrator の場合はファイルを読み込むことができます。チュートリアル（After Effects で Illustrator のデータを動かす方法）もありますのでこちらも参考に！
☆LottieFiles に公開されているアニメーションは自由に使えますか？
基本自由に使えます。LottieFiles の各アニメーションページの画面下のほうにライセンス表記があります。多くは「Lottie Simple License」なのですが、詳しくは https://lottiefiles.com/page/license の条項を確認するといいでしょう。
☆アニメーションの色の変更はできますか？
LottieFiles のサービスを利用すると簡単に色を変えることができます。もちろん、Lottie アニメーションは原則テキストファイルなので、JSON を直接編集することもできますがなかなか大変です。
☆lottiefiles みたいなサイト日本語対応している所はありますでしょうか。
残念ながら現在のところ日本語対応しているサービスは存在しません。
☆Lottie でラスターイメージは扱えますか？
外部ソースに分離された画像を含む Lottie アニメーションは XD に取り込むことができないので埋め込む必要がありますがラスターイメージも可能なようです。制限はありますので簡単なものでテストしてみるのがおすすめです。
☆Lottie アニメーションには、やはりビットマップよりもベクター画像の方が向いていますか？
JSON で記述するものですし、外部ソースを含む Lottie アニメーションは XD に持ち込めないので、原則はベクター画像のほうがいいですし、そのベクター画像のほうが向いていると思います。
☆XD では、テキストや画像、動画など様々なメディアが追加できると思いますが、アップするファイルの上限などはありますでしょうか・・？また、追加しすぎると重くなったりするのでしょうか・・？
動画と Lottie アニメーションはそれぞれ一つのファイルに対して制限サイズがきまっていますが総計は明言されていません。ファイルを開くときには含んでいるメディアが多いファイルサイズの大きいもののほうが時間がかかりますが、開いてしまえばたいていは軽いです！ XD が重くなるのはメディアの数や重さよりも、パスの数があまりに多いとか、アートボードが非常に縦方向に長い場合のほうが感じやすいと思います。
☆Adobe XD を分かりやすく学べる、おススメの書籍などはありますでしょうか？もしありましたら、教えていただけますと幸いです📚
アドビから公式で配布されているスターターキット（基礎編、中級編）や、Adobe XD Trial には幅広く動画チュートリアルがありますので、最新情報で学習できます！
当日のQ&A（池田泰延さんへの質問編）
☆XD で作ったモーションをエンジニアはどうやって実装しますか？ CSS で再現するのか、Lottie で取り込むのか？
Lottie JSON は再生用 JS ライブラリがあるので、基本はそのまま JSON を取り込めます。
☆フロントエンジニアは、書き出した json ファイルと js があればそのまま組み込める、という認識で合っていますか？
期待されている通り最低限は書き出した json ファイルと一緒に書き出せる Player の js ライブラリがあれば組み込めるようになります。しかし、組み込み方はほかにもあるので相談の上決定したほうがいいです。
☆After Effects 扱えないと Lottie アニメーション作るのは難しいでしょうか。
ほかの手段もありますが、JSON を手書きするのはもっと難しいと思います。最近はAnimate でも作れるような試みが始まっていますが、やはり Lottie アニメーションの公式のお勧めアニメーションツールが After Effects になります。
☆あの地図の上で動いていた（数字かな？)のはどうやって作っているんですか？🤔
実は無理矢理、実現しています。数字自体の演出は Lottie JSON を大量につくって配置して動かしています。
☆XD でローディング画面でローーディングの進行状況を表現することは、できるのでしょうか。
質問ありがとうございます！ なんちゃって Lottie アニメーションか、自動アニメーションを工夫すれば進行状況を表現できると思います。
☆After Effects でイージングを調整するのが大変です。オススメの方法はありますか？
グラフエディターで頑張るのはシンドイですよね。。私はプラグイン（Flow）で楽をしています。
☆先ほど使っていたイージングなどの細かい設定が出来る AE のプラグインの名前を教えてください。
Flow というプラグインになります。すみませんが、有償です･･･
☆おすすめの AE のプラグインはありますか？
Flow （イージングの調整）、Lazy （遅延を挟みながら演出）、Auto Clop （コンポジションのトリミング）がオススメです！
☆After Effects でエフェクトやプリセットを利用して作成した素材は lottie アニメーションで書き出しした際にうまく引き継ぎできない場合はありますでしょうか？
うまく引き継ぎできない場合はあります。エフェクトやビットマップを使うと Lottie JSON の制約で表現できないのです。Lottie の制約は以下のページをご覧くださいませ。
☆Ae からの書き出しの際、自動でテキストのアウトライン化されるときに、後で文字が変更できるように元のファイルを残しておく必要がありますか？
質問ありがとうございます！ After Effects 上のテキストはそのままテキストレイヤーとして残りますので、ご安心を。BodyMovin の書き出し時の Lottie JSON 化に対してのみアウトライン化されます。
☆動画系ファイルによるアニメーションはページのローディングが重くなるイメージがあります。読み込み速度との兼ね合いはどのようにバランスを取っていますか。
Lottie JSON を使う限りはそれほど容量が肥大化しないのでご安心くださいませ。動画（MP4）を使うと容量が大きくなるので、読み込み速度のケアが必要となりますよね。ページ読み込み時には動画を読み込ませず、Lazy Load（ページスクロールに連動して読み込む）を工夫してケアしています。
当日のQ&A（湯口りささんへの質問編）
☆Animate でも Lottie ファイルが作れると話していましたがどうすればいいですか？
LottieFiles の Web サイトから Early Access 版の拡張機能をダウンロードして利用します。Animate の場合はシェイプトゥイーンのみが使えます。Apple Silicon Mac で使用できないなどあるますので注意事項をみてご利用ください
☆XD のおすすめのプラグインがあったら教えていただきたいです。
たくさんプラグインがありますのでかなり用途によると思います。今回のテーマでは番組中紹介した LottieFiles は一番充実しています！それ以外でおすすめなのは以前XDTrail で特集した回とCC道場で紹介したものがあります。放送は結構前ですが、今も便利に使えています。
☆Lottie にアップロードする時のファイルはグループにはできないという事でしょうか？
そのように考えて大丈夫だと思います。LottieFiles としてはグループよりプリコンポーズでコンポーネントにしたうえでのアップロードを期待しているようです。（プリコンポーズでできたコンポジションは LottieFiles で一つのレイヤーとして扱われるが、After Effectsでは当然編集可能）