音声コマンドと音声再生を使用したデザインとプロトタイプの作成方法を学習します。

Adobe XD は、使用が簡単なソリューションを提供し、音声コマンドを使用してアートボード間の対話をトリガーすることができます。クリックタップトリガーとして使用する場合と同様に、発話を使用してプロトタイプのインタラクションおよび音声再生をトリガーアクションとしてトリガーすることができます。例えば、モバイルアプリケーション内で音声検索を統合する場合は、音声コマンド音声再生を使用してアートボード間を自動的に切り替えることができます。

プロトタイプに音声コマンドを追加する

  1. XD で、プロトタイプモードに切り替えます。

  2. カンバス上のすべてのアートボードを選択して、ワイヤーを表示します。

  3. ワイヤーをクリックし、ソースアートボードからデスティネーションアートボードにドラッグします。最初のエレメントをワイヤで接続すると、そのエレメントのアートボードがホームアートボードとして設定されます。

  4. トリガーヘッドアップディスプレイでは、以下のオプションを設定して音声プロトタイプのインタラクションをトリガーします。

    • トリガー:「音声」に設定します。
    • コマンド音声コマンドをテキストとして入力します。
    • アクション:「トランジション」に設定します。
    • デスティネーション:デスティネーションのアートボードを設定します。
    • アニメーション:使用可能なオプションに基づいてアニメーションを設定します。
    • イージング:使用可能なオプションに基づいてイージングを設定します。
    • デュレーション:間隔を単位で設定します。
    音声トリガーを設定する
    音声トリガーを設定する

    A. トリガーを「音声」に設定 B. 音声コマンドをテキストとして入力する 
  5. 変更をプレビューするには、デスクトッププレビューアイコン  を選択します。

  6. 次のアートボードへのトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。 

    音声コマンドによるトランジションのプレビュー
    音声コマンドによるトランジションのプレビュー

音声入力に音声再生を追加する

  1. ワイヤーをクリックし、デスティネーションアートボードからソースアートボードにドラッグします。

  2. 「トリガー」ヘッドアップディスプレイで、以下のオプションを設定します。

    • トリガー:「時間」に設定します。
    • 遅延時間:トランジションの遅延時間を単位で設定します。
    • アクション:アクションを「音声再生」に設定します。
    • 音声:対応する音声応答を追加します。
    音声再生の使用
    音声再生の使用

    A. トリガーを「時間」に設定 B. 遅延時間を秒単位で設定 C. アクションを「音声再生」に設定 D. 音声応答を追加 
  3. 変更をプレビューするには、デスクトッププレビューアイコン  を選択します。

  4. 次のアートボードへのトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。 

    音声再生のプレビュー
    音声再生のプレビュー

プロトタイプにナレーションを追加する

  1. プロトタイプモードで、フローの開始点が設定されるホーム画面を選択し、 デスクトッププレビューボタンをクリックします。

    注意:

    MAC ユーザーは、プレビュー記録を開始する前にマイクを有効にすることができます。Windows ユーザーは、Gamecenter の OS レベルのコントロール経由でこれを有効にできます。

  2. 記録ボタンの横にあるドロップダウン矢印を選択して、マイクを有効にするオプションを選択します。記録時は、インターフェイス上で点滅する赤いアイコンに注意してください。

  3. 記録を mp4 として保存して、関係者と共有したり、ソーシャルメディアに投稿したりすることができます。 

Web 上でプロトタイプまたはデザインスペックリンクを共有してレビューする

  1. デスクトップアプリケーションで、右上の共有アイコンをクリックして、「プレビューのための共有」(プロトタイプの場合)または「開発のための共有(デザインスペックの場合)を選択します。

  2. プロトタイプをプレビューするとき:

    • デスクトップまたはノートパソコン:スペースバーを押し続けます。
    • Adobe XD モバイルアプリケーション(#iOS /#Android):画面上の任意の場所で長押しのジェスチャーを使用します。画面上に指を置き(動かさずに)、指を戻す前に音声コマンドを使用します。
    • スマートフォンのモバイルブラウザー:画面の右下隅にあるマイクアイコンを押し続けます。
  3. デザインスペックをプレビューするとき、開発者は音声コマンドと音声再生をテキストとして読み取るか表示することができます。 

    注意:

    デザインスペックでは音声インタラクションはサポートされていません。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー