マニュアル キャンセル

ビデオを使用したプロトタイプの作成

Adobe XD でビデオを使用して、インタラクティブエクスペリエンスのプロトタイプを作成する方法を説明します。

プリセットまたはカスタムのビデオ再生オプションを選択し、他のインタラクションがビデオに対してどのように機能するかを定義することができます。ビデオの再生オプションとインタラクションを調べるときは、ビデオを含む現実的なプロトタイプ作成の例をいくつか確認してください。

はじめに

ビデオを読み込んで設定を調整する方法について説明します。

再生オプションの設定

ビデオの再生オプションの設定
ビデオの再生オプションの設定

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

  1. デザインモードで、カンバス上のビデオを選択します。
  2. プロパティインスペクターの「ビデオ」セクションで、次のいずれかのプリセットを選択します。

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

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

タップで再生

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

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

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

自動再生する

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

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

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

再生不可

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

ビデオ再生のカスタマイズ

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

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

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

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

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

時間トリガーを選択し、ディレイを 0 秒より大きく設定する
時間トリガーを選択し、ディレイを 0 秒より大きく設定する

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

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

ドラッグトリガーで再生するようにビデオを設定することはできません。

ビデオ再生と他のインタラクションの併用

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

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

  • ビデオの再生終了インタラクションを設定して、再生後にアクションをトリガーします。
  • ビデオと複数の Lottie ファイルを同時に再生します。

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

インタラクションとビデオ再生の動作について

ビデオの再生が、他のオブジェクトに設定したインタラクションに基づいて、停止または継続されます。

  • 自動アニメーションと Lottie 再生以外のアクションがトリガーされると、ビデオ再生が停止します。
  • 他のオブジェクトにマウスポインターを重ねたとき、またはタップしたときにビデオの再生を継続する場合は、自動アニメーションをホバーおよびタップのトリガーアクションとして使用します。

ビデオと時間のトリガー

任意の指定したアートボードの場合:

  • 時間遅延に基づいて、複数の時間トリガーを順番に設定できます。
  • ビデオと複数の Lottie アニメーションを設定して、同じ時間遅延後に一緒に再生することができます。自動的に一緒に再生するように設定することもできます(時間遅延は 0 秒に設定されています)。
  • アートボード、ビデオ、および Lottie で時間トリガーに同じ遅延時間を設定する場合、優先順位はアートボード、ビデオ、Lottie の順になります。

プロトタイプ作成の例

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

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

サンプルファイルを使用して、ビデオでプロトタイプの作成を練習します。

例 1:ビデオの最大化ボタンのプロトタイプ作成

ビデオの最大化ボタンのプロトタイプを作成する方法を説明します。

Ex 1-artboard 1

  1. デザインモードで、説明 1 ビデオを読み込んで、アートボードに配置します。「タップで再生」に設定します。
  2. ビデオの右下隅に最大化アイコン(アートボードの右側のアイコンセクションに表示)を配置します。 
  3. プロトタイプモードで、最大化アイコンを Ex 1-artboard 2 に接続し、アクションタイプを自動アニメーションとしてタップトリガーに設定します。

Ex 1-artboard 2

  1. デザインモードで、説明 1 ビデオを読み込んで、アートボードに配置します(フルスクリーンビデオ)。「タップで再生」に設定します。
  2. ビデオの右下隅に最小化アイコン(アイコンセクションに表示)を配置します。 
  3. プロトタイプモードで、最小化アイコンを Ex 1-artboard 1 に接続し、アクションタイプを自動アニメーションとしてタップトリガーに設定します。

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

例 2:プロトタイプの再生

XD でビデオを連続して再生する方法を説明します。

Ex 2-artboard 1

  1. デザインモードで、紹介ビデオを読み込んで、「概要」セクションに配置します。「再生不可」に設定します。
  2. 説明 1 と説明 2 のビデオを読み込んで、「説明」セクションに配置します。これらを「再生不可」に設定します。
  3. すべてのビデオに再生ボタン(「アイコン」セクションに表示)のコピーを配置します。
  4. プロトタイプモードで以下を行います。
  • 紹介ビデオの再生ボタンを Ex 2-artboard 2 に接続します。
  • 説明 1 ビデオの再生ボタンを Ex 2-artboard 3 に接続します。
  • 説明 2 ビデオの再生ボタンを Ex 2-artboard 4 に接続します。 

アクションタイプを「トランジション」として、これらすべてをタップトリガーに設定します。

Ex 2-artboard 2

  1. デザインモードで、紹介ビデオを読み込んで、「説明」セクションの上に配置します。「自動再生する」に設定します。
  2. プロトタイプモードで、ビデオを Ex 2-artboard 3 に接続し、アクションタイプをトランジションとして再生終了トリガーに設定します。

Ex 2-artboard 3

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

Ex 2-artboard 4

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

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

その他の例

ビデオ、Lottie アニメーション、コンポーネントの状態を含むその他の例を御覧ください。

詳細情報

この 2 分間のビデオを見て、XD でビデオを操作する際のプロ向けののヒントを学びましょう。

関連リソース

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

コミュニティで質問する

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

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

新規ユーザーの場合