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

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

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

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

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

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

  4. プロパティインスペクターに表示されたインタラクションパネルで、次のオプションを設定します。

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

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

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

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

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

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

  2. プロパティインスペクターに表示されたインタラクションパネルで、次のオプションを設定します。

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

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

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

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

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

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

    注意:

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

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

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

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

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

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

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

    注意:

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

通知を使用して音声インタラクションをトラブルシューティングする

デスクトップまたは Web でのプロトタイプのプレビュー中に、音声によって開始される操作をトラブルシューティングできるようになりました。デザインスペックをレビューする関係者もまた、この機能を使用して、Adobe XD でのプロトタイプの操作方法について理解を深めることができます。

プレビュー中にプロトタイプと対話する前に、「プレビューを表示」メニュー項目がオンであることを確認します。このメニュー項目は Adobe XD を起動したときに、デフォルトでオンになっています。

通知を表示
音声プロトタイプの通知を表示

Adobe XD に音声入力した各コマンドは、現在のアートボードにあるすべての音声トリガーに対して照合されます。一致する音声トリガーが見つからない場合は、次の通知が届きます。「一致した結果が見つかりませんでした : {音声入力したコマンド}」。Adobe XD が認識した内容を目視確認すると、一致した結果が見つからない理由を個々の音声入力について解明できます。

一致した結果が見つからない理由はいくつかあります。入力した音声コマンドが、アートボード上のインタラクションで使用されていないこともあれば、音声認識サービスが予期しない結果を返している可能性もあります。

例えば、インタラクションに「2 ドル」というフレーズが音声コマンドとして追加されているが、音声入力時に、音声認識サービスが返しているのは「$ 2.00」という結果である場合があります。通知を目で見て確認することで、単語ではなく数字を使用するようにインタラクションを変更すればよいことがわかります。

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

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