Adobe XDをもっと使いこなすヒント! 第16回 音声UIを体験する

UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、音声トリガーの使い方に関連する2つのツイートと関連動画を取り上げます。

Tip 1. 音声をトリガーに遷移を開始する

Adobe XDに音声UIのプロトタイプを作成する機能が搭載されました。

音声で遷移を開始するために必要な設定は、遷移のトリガーに「Voice」を指定し、コマンドに “開けゴマ” のようなキーフレーズを設定するだけです(注:執筆時点では英語のみ対応です)。
あとはプレビュー画面を起動して、指定したテキストをはっきりと口にすれば、遷移先のアートボードに画面が遷移します。可能であれば、上のビデオはサウンド付きで見てください。

音声トリガーを使用する際は、スペースキーを押した状態で話しかけます。

Tip 2. 音声入力に応答するメッセージを再生する

音声UIであれば、音声で指示した後の応答も、音声を使って語られるのが普通です。これを再現するため、アクションに「Speech Playback」が追加されました。このアクションは「音声」欄に記述されたテキストを読み上げます。

「Speech Playback」アクションを起動するために、遷移先のアートボードのトリガーに「時間」を設定し、ディレイを「0秒」にすれば、遷移の0秒後、すなわち遷移直後に、応答テキストが自動的に再生されます。上のビデオでその様子を確認できます。

おまけ. これから使えるようになる機能

現時点では、音声UIプロトタイプに関連する機能はこれだけです。とても簡単に使えるのでぜひ試してみてください。今後の追加機能に関しては、「Adobe XDの音声プロトタイピングのご紹介」によると、以下の2つが具体的に言及されています。

  • 追加の言語サポート(そのうち日本語もサポートされることでしょう)
  • 新しい音声ペルソナ(応答の音声の選択肢が増えるようです)

さらに、MAX 2018の基調講演では、アマゾンとの協業によりAlexaとの連携を実現する予定であることが発表されました。

下のビデオでは、XDで作成したプロトタイプがEcho Showの画面上(!)で動作して、Alexaとやりとりできる(!!)様子を見ることができます。エンジニアに頼らずここまでできるのだとすれば、音声UIのデザインは、デザイナーにとってずっと身近なものになりそうです。

Alexaとの連携は、来年のどこかのタイミングで利用可能になる予定だそうです。それまでにVoice UI Kitを使って腕を磨いておきましょう!


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.11.8

Products Featured

  • Adobe XD

Tags

タグはありません