質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。
最終更新日 :
2022年2月16日
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
Adobe XD で Lottie を読み込んで使用して、表現豊かなアニメーションをデザインする方法を説明します。
Lottie とは、Adobe After Effects から JSON ファイルで書き出すことができる軽量なアニメーション形式です。Lottie ファイルは、アニメーション GIF や PNG などの形式に比べてサイズが小さくなります。開発者は、コードで Lottie ファイルを再利用できます。
XD では、Lottie ファイルを読み込み、Lottie 再生を制御することができます。Lottie 再生を設定してプロトタイプを接続したら、共有する前にレビューすることができます。
お勧めの記事
Lottie ファイルの読み込み
Lottie ファイルを XD に読み込むには、ファイルをアートボードにドラッグします。または、ファイル／読み込みを選択します。
読み込みが完了すると、Lottie の最初のフレームがカンバスに表示されます。Lottie の最初のフレームが空白の場合、カンバスに空白のフレームが表示されます。このような場合は、レイヤーパネルを使用して Lottie を見つけることができます。
デザインモードで Lottie を選択すると、左上隅に再生アイコン が表示されます。
再生オプションおよび関連するインタラクション
デザインモードで Lottie の再生オプションを設定すると、関連するインタラクションがプロトタイプモードで自動的に設定されます。
「自動再生する」を選択すると、時間トリガーが、ディレイを 0 秒として自動設定されます。
「タップで再生」を選択すると、タップトリガーが、再生/一時停止の切り替えをデフォルトのアクションとして自動設定されます。
「再生不可」を選択すると、プロトタイプモードではインタラクションが設定されません。
Lottie 再生のカスタマイズ
Lottie 再生をカスタマイズするには、プロパティインスペクターの「アニメーション」セクションで、「再生を編集」を選択します。
「再生を編集」を選択すると、自動的にプロトタイプモードに切り替わります。
プロトタイプモードで、必要に応じて次のカスタマイズを行います。
トリガーとして、時間（ディレイを 0 秒より大きくする）、キー／ゲームパッド、または音声のいずれかを選択します。
タップトリガーの Lottie 再生アクションを、再生/一時停止の切り替えから再生または一時停止に変更します。
Lottie 再生とその他のインタラクションを使用する
Lottie の再生オプションを設定したら、その他のインタラクションとの接続を確認します。
- Lottie の再生終了インタラクションを設定して、再生後にアクションをトリガーします。
- 複数（最大 20）の Lottie アニメーションを同時に再生します。
- Lottie アニメーションとビデオを同時に再生します。
XD でのプロトタイプ作成について詳しくは、インタラクティブなプロトタイプの作成を参照してください。
プロトタイプ作成の例
Lottie の再生オプションを設定し、それをその他のインタラクションと接続する方法を習得しました。ここで、いくつか例を試してみましょう。
サンプルファイルを使用して、Lottie アニメーションでプロトタイプの作成を練習します。
Lottie を使用してロード画面をアニメーション化する方法を説明します。
Ex 1-artboard 1
- デザインモードで、plant-loading.json を読み込んで、アートボードに配置します。「自動再生する」に設定します。
- プロトタイプモードで、Lottie を Ex 1-artboard 2 に接続し、アクションタイプをトランジションとして再生終了トリガーに設定します。
インタラクションの接続が完了したら、プロトタイプをプレビューしてインタラクションを確認します。
メニュー項目を選択されたときにアニメーション化する方法を説明します。
Ex 2-artboard 1
- デザインモードで、プラント 1（スペアミント）とプラント 2（サンセビリア）のファイルを読み込み、それぞれのコンテナに配置します。これらを「再生不可」に設定します。
- プロトタイプモードで以下を行います。
- プラント 1 とそのコンテナを Ex 2-artboard 2 に接続します。
- プラント 2 とそのコンテナを Ex 2-artboard 3 に接続します。
アクションタイプを「トランジション」として、タップトリガーに設定します。
Ex 2-artboard 2
デザインモードで、プラント 1 のコピーを作成し、アートボードに配置します。「自動再生する」に設定します。
Ex 2-artboard 3
デザインモードで、プラント 2 のコピーを作成し、アートボードに配置します。「自動再生する」に設定します。
インタラクションの接続が完了したら、プロトタイプをプレビューしてインタラクションを確認します。
ビデオ、Lottie アニメーション、コンポーネントの状態を含むその他の例を御覧ください。
プロトタイプのプレビューと共有
プロトタイプを接続したら、次のいずれかの方法を使用してプレビューできます。
デザインを関係者と共有する準備ができたら、適切なアクセス権を設定して、プロトタイプまたはデザインスペックのリンクを公開して共有します。
詳細情報
この 2 分間のビデオを見て、XD で Lottie を操作する際のプロ向けのヒントを学びましょう。
- XD にインポートできるのは 15 MB 未満の Lottie ファイルのみです。1 つの XD ドキュメントに含めることができる Lottie ファイルの数に制限はありません。
- ビデオが自動再生するように設定されている場合、Lottie は自動再生されません。
- 他のプロトタイプトリガーが開始された場合、Lottie は停止します。
- Lottie アニメーションでデスクトップフォントを使用している場合、そのフォントは web 再生では表示されません。
- リピートグリッド内の Lottie をオーバーライドすることはできません。
- 画像などの外部リソースを参照する Lottie アニメーションを読み込むことはできません。
- Lottie JSON 以外の JSON ファイルを読み込むことはできません。
関連リソース
ご質問または共有するアイデアがある場合
