人々がデジタル製品をタッチ、押下、ジェスチャーだけで操作していた時代は、もうとうに過ぎ去りました。触覚フィードバック、センサー、オーディオ & ビデオ、テキスト入力、カメラなどの技術によって、製品とやり取りする体験は、すでにより豊かで、より没入感のあるものになっています。
私たちの日常生活に入り込んできている別の技術が音声技術です。Google Assistant はすでに 10 億台以上のデバイスで利用でき、Facebook も独自の音声アシスタントを開発中です。デジタル製品全体で音声の重要性が増している中でも、私たちは day 1 から続けてきた道を歩み続けます。それは、デザイナーが最大限の表現力でアイデアを自由に形にできるようにすることです。
今日まで、コードを書いたりエンジニアに頼み込んだりせずに、すでにかなりリアルなプロトタイプへ音声を簡単に追加する方法はありませんでした。まったく新しい ProtoPie 5.1 なら、ついにインタラクションデザインと会話設計を組み合わせることができます。
音声プロトタイピング
ProtoPie 5.1 で、あなたのインタラクションに声を与えましょう。
あなたのインタラクションに声を。
とても簡単です。これまでインタラクションを作ってきたのと同じ方法で、プロトタイプに音声を追加できます。そのため、使える新しいトリガーを 1 つと、新しいレスポンスを 2 つ追加しました。
プロトタイプは、あなたの発話を聞き取り、テキストに変換し、レスポンスを起動できます。これを音声認識と呼びます。逆に、テキスト読み上げもあります。プロトタイプはテキストを声に出して読み上げることで、レスポンスとして「話す」ことができます。
詳しく見る 音声プロトタイピングについて。
音声認識
音声認識には 2 つのインタラクション要素があります。
聞き取りレスポンス
音声コマンドトリガー
デフォルトでは、プロトタイプは音声を拾いません。聞き取りレスポンスを使うと、プロトタイプが音声の聞き取りを開始します。プロトタイプの音声の聞き取りを停止するには、同じレスポンスを使うだけです。
聞き取りレスポンスを使って、プロトタイプに音声を聞き取らせましょう。
音声コマンドトリガーを使うと、実際に入力される音声に基づいてレスポンスが起動するインタラクションを作成できます。
音声コマンドトリガーは、誰かが話している最中に動作させることも、話し終わった後に動作させることもできます。必要に応じて、ここからが本当に楽しいところですが、コマンドとして含めるフレーズと除外するフレーズを指定できます。
音声コマンドトリガーを使って、入力される音声に基づいてレスポンスを起動しましょう。
上の例では、楕円をタップするとプロトタイプが聞き取りを開始します。誰かが話している最中に「ProtoPie」または「Prototyping Tool」と言うと、ProtoPie ロゴの不透明度が変わります。
音声認識のインタラクションは、以下で動作します:
ProtoPie Studio のプレビューウィンドウ
ProtoPie Player
ProtoPie Cloud（デスクトップの Google Chrome および Android）
詳しく見る ProtoPie での音声認識について。
テキスト読み上げ
ProtoPie 5.1 で導入した、もう 1 つのインタラクション要素があります。
読み上げレスポンス
テキストを声に出して読み上げることで、プロトタイプを「話す」ようにできます。
下の例では、ProtoPie ロゴをタップすると、プロトタイプは「ProtoPie は、プロトタイプを作成し、完成させるための最も直感的なツールです。」というテキストを声に出して読み上げ、「話す」ようになります。
Text to Speech レスポンスを使ってテキストを音声に変換し、プロトタイプを「話す」ようにします。
テキスト読み上げのインタラクションは、以下で動作します:
ProtoPie Studio のプレビューウィンドウ
ProtoPie Player
詳しく見る ProtoPie でのテキスト読み上げについて。
例
新しい音声プロトタイピング機能でどれほどのことができるのか、いくつかのサンプルプロトタイプを見て、きっと驚くはずです。
自分だけの音声アシスタントをプロトタイプ化して、すぐに試してみましょう。
このサンプルプロトタイプを試してみる ProtoPie Player で。
あるいは、さらに一歩進めてみましょう。実際のリモコンを使いながら、スマート TV アプリ向けの音声検索をプロトタイピングすることは可能でしょうか？ 答えははいです。以下をご覧ください。
Tony Kim と私は、音声向けのプロトタイピング—インタラクションと会話設計の融合。 で、さらに興味深い音声プロトタイピングの例を紹介しました。
ワークショップ
ProtoPie の講師 Leah が、このワークショップで最初の音声インタラクションを始める方法を紹介しました。
複数行テキスト入力
すでに ProtoPie の入力レイヤーで、1 行テキストを入力できました。これからは、1 行テキストと複数行テキスト入力の両方ができます。
いつものように、入力レイヤーは物理キーボードでも、iOS、iPadOS、Android のネイティブキーボードでも動作します。
Writty に着想を得た、複数行入力レイヤーを使うシンプルなテキストライタープロトタイプです。このサンプルプロトタイプを試してみてください。
テキストレイヤーを自動的にリサイズ
これまで、テキストレイヤーのサイズは常に固定でした。ProtoPie 5.1 では、テキストレイヤーは幅または高さに応じて自動的にリサイズでき、固定サイズにすることもできます。
もう、テキストレイヤーを手作業で面倒にリサイズする必要はありません :)
Text レイヤーのプロパティパネルで、3 つのテキストサイズ変更オプションを見つけてください。
Option/Alt + ドラッグでレイヤーを複製
どのデザインツールを使っていても、レイヤーを複製するための生産性を高める Option/Alt + ドラッグのショートカットには慣れているはずです。今では、ProtoPie でもいつもの方法で素早くレイヤーを複製できます。
ProtoPie でレイヤーの複製をもっと速くできるようになるのは、時間の問題でした。
その他の機能と改善点
コンポーネントとシーンを複数選択
SVG レイヤーを貼り付けたときの密度調整
macOS でファイアウォールウィンドウが繰り返し表示される問題を修正
