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

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

はじめに

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

再生オプションの設定

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

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

タップで再生

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

自動再生する

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

再生不可

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

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

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

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

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

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

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

• 自動アニメーションと 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 でビデオを操作する際のプロ向けののヒントを学びましょう。

関連リソース

• インタラクティブプロトタイプの作成
  
• 音声コマンドや音声再生を使用したプロトタイプの作成
  
• Lottie アニメーションを操作

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