マニュアル キャンセル

Lottie アニメーションの操作

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトのストローク、塗り、ドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

Adobe XD で Lottie を読み込んで使用して、表現豊かなアニメーションをデザインする方法を説明します。

Lottie とは、Adobe After Effects から JSON ファイルで書き出すことができる軽量なアニメーション形式です。Lottie ファイルは、アニメーション GIF や PNG などの形式に比べてサイズが小さくなります。開発者は、コードで Lottie ファイルを再利用できます。

Lottie の読み込みと再生オプションの設定
Lottie の読み込みと再生オプションの設定

XD では、Lottie ファイルを読み込み、Lottie 再生を制御することができます。Lottie 再生を設定してプロトタイプを接続したら、共有する前にレビューすることができます。

お勧めの記事

Lottie ファイルの読み込み

Lottie ファイルを XD に読み込むには、ファイルをアートボードにドラッグします。または、ファイル読み込みを選択します。

読み込みが完了すると、Lottie の最初のフレームがカンバスに表示されます。Lottie の最初のフレームが空白の場合、カンバスに空白のフレームが表示されます。このような場合は、レイヤーパネルを使用して Lottie を見つけることができます。 

デザインモードで Lottie を選択すると、左上隅に再生アイコン が表示されます。

再生オプションの設定

Lottie の再生オプションの設定
Lottie の再生オプションの設定

Lottie ファイルを XD に読み込んだら、再生するタイミングを制御します。再生オプションを設定するには、次の手順に従います。

  1. デザインモードで、キャンバス上の Lottie アセットを選択します。
  2. プロパティインスペクターの「アニメーション」セクションで、次のいずれかのプリセットを選択します。
  3. Lottie をループ再生する場合は、「ループ再生」ボタン をクリックします。

再生オプションおよび関連するインタラクション

デザインモードで Lottie の再生オプションを設定すると、関連するインタラクションがプロトタイプモードで自動的に設定されます。

自動再生する

自動再生する」を選択すると、時間トリガーが、ディレイを 0 秒として自動設定されます。

自動再生する - デザインモード

自動再生する - プロトタイプモード

タップで再生

タップで再生」を選択すると、タップトリガーが、再生/一時停止の切り替えをデフォルトのアクションとして自動設定されます。

タップで再生 - デザインモード

タップで再生 - プロトタイプモード

再生不可

再生不可」を選択すると、プロトタイプモードではインタラクションが設定されません。

Lottie 再生のカスタマイズ

「再生を編集」を選択して再生をカスタマイズする
「再生を編集」を選択して再生をカスタマイズする

Lottie 再生をカスタマイズするには、プロパティインスペクターの「アニメーション」セクションで、「再生を編集」を選択します。

再生を編集」を選択すると、自動的にプロトタイプモードに切り替わります。

プロトタイプモードで、必要に応じて次のカスタマイズを行います。

トリガーとして、時間ディレイを 0 秒より大きくする)、キー/ゲームパッド、または音声のいずれかを選択します。

時間トリガーを選択し、ディレイを 0 秒より大きく設定して再生をカスタマイズする
時間トリガーを選択し、ディレイを 0 秒より大きく設定する

タップトリガーの Lottie 再生アクションを、再生/一時停止の切り替えから再生または一時停止に変更します。

タップトリガーを選択し、アクションを再生または一時停止に設定して再生をカスタマイズする
タップトリガーを選択し、アクションを再生または一時停止に設定する

Lottie 再生とその他のインタラクションを使用する

アートボードに移行する再生終了トリガーを設定した Lottie
アートボードにトランジションする再生終了トリガーを設定した Lottie

Lottie の再生オプションを設定したら、その他のインタラクションとの接続を確認します。

  • Lottie の再生終了インタラクションを設定して、再生後にアクションをトリガーします。
  • 複数(最大 20)の Lottie アニメーションを同時に再生します。
  • Lottie アニメーションとビデオを同時に再生します。

XD でのプロトタイプ作成について詳しくは、インタラクティブなプロトタイプの作成を参照してください。

プロトタイプ作成の例

Lottie の再生オプションを設定し、それをその他のインタラクションと接続する方法を習得しました。ここで、いくつか例を試してみましょう。

サンプルファイルのダウンロード

サンプルファイルを使用して、Lottie アニメーションでプロトタイプの作成を練習します。

例 1:ロード画面のアニメーション化

Lottie を使用してロード画面をアニメーション化する方法を説明します。

Ex 1-artboard 1

  1. デザインモードで、plant-loading.json を読み込んで、アートボードに配置します。「自動再生する」に設定します。
  2. プロトタイプモードで、Lottie を Ex 1-artboard 2 に接続し、アクションタイプをトランジションとして再生終了トリガーに設定します。

インタラクションの接続が完了したら、プロトタイプをプレビューしてインタラクションを確認します。

例 2:メニュー選択のアニメーション化

メニュー項目を選択されたときにアニメーション化する方法を説明します。

Ex 2-artboard 1

  1. デザインモードで、プラント 1(スペアミント)とプラント 2(サンセビリア)のファイルを読み込み、それぞれのコンテナに配置します。これらを「再生不可」に設定します。
  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 ファイルを読み込むことはできません。

関連リソース

ご質問または共有するアイデアがある場合

コミュニティで質問する

質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン