Voiceflowの新機能発表イベント「VFV2」のまとめ、その２です。 今回はDesign and Documentationについて。新機能（現時点でリリースされているものもあれば今後リリースされるものも含みます）についてはNew!をつけています。
Design and Documentation
- 多くのデザイナーにとって、フローチャートやExcelシートなど、ツールが分散していると、クリエイティブなプロセスを遅らせてしまう。
- 車内カスタムアシスタンス、会話のドライブスルー、最新のIVRシステム、モバイル音声バンキング、カスタムなエンドツーエンドのアシスタンスなど、膨大な数のユースケースと可能性があるが、私達はまだ何が可能なのか、を探しているフェーズにいる。
- デザイナーが求めているのは同じもの。
- 魅力的で文脈に沿った会話をデザインできるツール
- より広いチームワークフローを考慮したツール
- 読みやすさと共有性を備えた、文脈に沿ったデザインを考慮したツール
- 新しいデザインとドキュメンテーションの体験を提供する。
会話体験が一般的になるに連れ、ユーザは日常の体験からさらに自然なインタラクションと機能を期待している。
- 自分のデバイスともっと自然に話したい。
- また、インテントの途中で関係のない質問をしても、コンテキストを失うことなく、会話を続けたい。
- 最も重要なのは、様々な会話において、ユーザーは理解されることを望んでいる。
デザイナーが求めているは、ワークフローやクリエイティブな作業は複雑にすることなく、デザインに複雑性を追加できるツール。
- フラットな二次元のデザインや、複数のツールの組み合わせでは実現できない。
- カスタマイズされたデザイン
- レイヤー化されたコンテキストのデザイン
- 複数の環境、複数のチャンネル、マルチモーダルへの対応
- リニアとノン・リニアなフローへの対応
- デザインだけでなく、チームとのコミュニケーションを円滑にする
- Voiceflowは、あらゆるチャネルやマルチモーダルに対応した会話体験のプロトタイプをビジュアルで設計・作成するためのコラボレーションツール。
- 会話AIのためのFigmaのようなもの。Figma とは異なるのは、 Voiceflowでは会話体験をデザインしている裏で実際のコードが生成される。
- これにより、デザイナーと開発者がさらに作業を迅速に進めることができる。
- デザインにおいて、忠実度の高いプロトタイプのJSONファイル、Dialogflowのようなプラットフォーム用の対話モデルのエクスポート、さらにはプロダクションレベルで利用可能なコードベースを、一行のコードを書くことなく、デザイナーが生成することができる。
- Voiceflow Canvas
- 高い忠実性
- マウスとトラックパッドで操作性を変えれる
- 直感的なドラッグアンドドロップ
- キャンバスのカスタマイズ
- ステップをつなげる線を曲線と直線から選択できるNew!
- リアルタイムコラボレーション
- 複数人で同時に編集が可能
- ユーザを招待でき、権限の設定が可能（編集可能 or 閲覧のみ）
- タグ＆コメント
- メンバーをタグ付けしてコメント
- リアルタイムではない、非同期なやり取り向け
- 今回のサンプルのオンライン音声バンキングアプリの完成形
- テンプレートで利用可能になる予定
- これを使ってより進んだ機能を紹介
- フローと再利用可能なコンポーネント
- 「フロー」という再利用可能なコンポーネントを作成可能
- 「フロー」が必要なところで呼び出すだけで使える
- 修復パス
- ハッピーパスから始めて、会話が1回で済むことは稀
- ユーザが意図しない発話そした場合に、そのコンテキストに応じたリプロンプトを作成することが可能。
- ユーザからの発話がない場合にも、リプロンプトの作成が可能。
- 自動ダイアログ
- 必要な情報をユーザに一度に与えずに、情報を取得するための正しいプロンプトを与えて収集できる。
- エンティティ（スロット）を作成して「必須」のフラグを建てるだけ。あとはアシスタントが勝手に収集してくれる。
- ダイアログマネジメントを使えば、面倒なステート管理をせずに、デザインに集中できる。
- どのエンティティを最初に確認するか？の優先度も決めれる。
- Canvas Markup
- 他のデザイナーや開発チーム、外部のステークホルダーと効果的にコミュニケーションができるかどうかが重要。そのため、デザインには機能的に存在するもの以外のより多くの文脈が必要になる。
- キャンバス マークアップ
- 可読性とデザインのドキュメント化ができる。
- ラベル画像やハイパーリンクをキャンバス上のデザインに追加することで、より読みやすく、共有しやすいものにできる。
- ブラウザベースなので、常に最新のデザインにアクセスが可能
- コンテキストのデザイン
- コンテキストのデザインは会話デザインの柱の一つ
- Voiceflowのコンテキストデザインは他のどのプラットフォームよりも最先端
- 4つの会話コンテキスト
- ダイアログコンテキスト
- コンテキストのスイッチ
- ネストされたコンテキスト
- シチュエーショナルなコンテキスト
- ダイアログコンテキスト
- Voiceflowはダイアログコンテキストを可能にする。
- 現在の会話状態＝コンテキストに応じたダイアログのレイヤー化が可能。
- 例：ユーザが「ヘルプ」といった場合
- メインフローにいる場合は一般的なヘルプメッセージを応答
- 支払いフローにいる場合は、支払いに関するヘルプメッセージを応答
- コンテキストのスイッチ
- リニアな一本調子の会話を好む人はいない。
- Voiceflowでは、オープンダイアログとクローズダイアログの両方をデザインすることで、コンテキストの切り替えが可能。
- 例
- アカウントの残高をチェックしている最中に、いつでも利用可能な別のトップレベルのインテントに切り替え。
- ネストされたコンテキスト
- ユーザにコンテキストの切り替えを許可したいけど、目的を達成したら元の会話のコンテキストに戻したい。
- Voiceflowでは「コマンド」を使うことで実現可能。
- 例
- 支払いの最中に、一番近い支店を知りたい
- 一番近い支店を教えたあとで、元の支払いコンテキストに戻って続きを行える
シチュエーショナルなコンテキスト
- ユーザ個別の状況に応じた応答ができる
- 何曜日か？
- 初めての利用か？2回目以降の利用か？
- 言語はなにか？
- Conditionによる条件・ロジックで可能
- 更に進んだ使い方
- カスタムなJavaScriptコード
- APIを使った最新データの取得
- スプレッドシートからのデータの取得
- ユーザ個別の状況に応じた応答ができる
共有ワークスペース
- チームの一員として、多くのプロジェクトを進行するケースも。
- 共有ワークスペースを使えば、すべてのプロジェクトのステータスを一目で確認でき、「カンバンシステム」を組み込んだワークフロー管理が可能。
- ステークホルダーやクライアントを、閲覧・コメントのみのコラボレーターとして招待したり。
- コンポーネントやテンプレートライブラリを共有して、全てのプロジェクト間で一貫したデザイン管理が可能
- 大規模な組織では、複数のチーム用にワークスペースを管理することも可能
- チーム独自のワークフローに合わせた柔軟な設定が可能
- Voiceflowからのエクスポート
- デザインができたら、ステークホルダーへ受け渡してレビューしてもらったり、開発チームに受け渡したり。
- エクスポートにはいくつかのオプションがある。
- PDF/PDF
- キャンバスマークアップも含まれる
- .vfファイル
- プロジェクトの保存・ダウンロード
- JSONファイルになっており、コンテキスト構成やレスポンスなど、全てのデザインが含まれる
- PDF/PDF
まとめ
Design and Documentationにはあまり目新しい機能はなかったように思いますが、デザイナーが音声アプリの設計を効率的に行えるだけでなく、デザインや開発、さらには顧客も含めた、チームでの開発をやりやすくする機能が充実しているのが改めてわかりますね。
次回は「Prototyping and User Testing」です。
