Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

会話型UI事始め

418 views

Published on

DeNA TechCon 2018の登壇資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

会話型UI事始め

  1. 1. 会話型UI事始め ゲーム・エンターテインメント事業本部 オープンプラットフォーム事業部システム開発部オープングループ 池内 弘樹
  2. 2. ⾃⼰紹介 -池内 弘樹 •tom (@Kender_09) •17新卒 •webエンジニア - Go, Vue - AndAppのAPIからフロント担当 2
  3. 3. 今⽇話すこと -対話型UIについて •Dialogflowを使ってみた紹介 •基本的にGoogleアシスタント向けアプリを 開発するためのガイドラインからの紹介 3
  4. 4. 2017年様々なスマートスピーカーの登場
  5. 5. 会話型UI 誰でも使い⽅を知っている ↓ つまり直感的! 会話の基本的な仕組みを理解し、 ⽇常的に利⽤されている⾔語の⼒をそのまま利⽤ できる状態を⽬指す 5
  6. 6. Dialogflow -Dialogflowとは •機械学習をして⾔語を解析(NLU)してくれるプラットフォーム。 •Google Assistant, Slackといったプラットフォームに対応可能。 •14以上の⾔語に対応している。もちろん⽇本語対応。 •Standard Editionは無料で利⽤可能! 6
  7. 7. 良い会話とは 良い会話の要素 • 交互に話す(Turn-taking) • 脈絡(Threading) • 固有効率性(Leveraging the inherent efficiency of language) • 変化するユーザ⾏動の予測 (Anticipating variable user behavior) 7 良い会話の根底(Griceʼs Maxim) • The maxim of quantity • The maxim of quality • The maxim of relation • The maxim of manner 必要なだけの正確な情報であり、それらは関連性 をもち、曖昧さを持たず明確である必要がある。
  8. 8. 会話の6つのステップ -会話の基本的な仕組みを、6つの簡単なステップに分解 1. 共通の場を設定しチャンネルを開く - AがBにメッセージを送る。 2. 関与を約束する - BがAとの会話にコミットする。 3. 意味を構築する - AとBは⼀連の作り上げられたアイデアと(暗黙的な)⽂脈を結 びつけていく。 4. 発展 - AまたはB(もしくはその両⽅)が何かを学んだり得たりする。 5. 合意に収束 - 合意に達する。そうでなければ互いに現状の修復に動く。 6. ⾏動または相互に作⽤する - 結果として⾏動が続いたり、何らかの無意識な ⽬標に達成する可能性がある。 8
  9. 9. 良い会話型UIを作るには -適切なユースケースの選択 •思いつきで答えらること •迅速に利⽤でき、その上説得⼒のある有益なアクションであること -ペルソナの作成 •回答するキャラクターに⼈格を与える -ダイアログ(会話)を書く •最も簡単な⽅法でアクションを達成するハッピーパスから、会話の可能性を書いていく -テストする •開発に関与していない⼈に使ってもらう 9
  10. 10. ユースケース -AndAppでの⼀例 1. ユーザが困った問題を、迅速に解決へ導く。 2. 思いついた要望を最⼩限のコストで⾏える。 10
  11. 11. ペルソナ -AndAppキャラクター •名前: 安藤さん - ギークな猫 - 新しい物好き - 効率主義 - 堅苦しくない落ち着いた⼝調 11
  12. 12. ダイアログ -ハッピーパス 12 安藤さん 困っていることがあったらと助けてと声をかけて。 1: 共通の場を設定 利⽤者 あんどうさん助けて。 安藤さん どうしたの。何があったか教えてよ。 2, 3: 関与を約束 + 意味を構築 利⽤者 起動できなくなった。 安藤さん 起動しないのは何かのゲーム、それともクライアント? 4: 発展 利⽤者 ○○だよ。 安藤さん ○○なら、△△を⾒てみてよ。解決したかな? 5, 6: 合意に収束 + ⾏動利⽤者 解決した。 安藤さん よかったよ。またね。
  13. 13. 構築 - エージェント -Dialogflowエージェントを作成 •IntentsとEntitiesを登録していき、エージェントのアクションを作成 13
  14. 14. 構築 - フルフィルメント -フルフィルメント - 最終的なアクションを決定する ロジック - 基本的にDialogflowから context(⽂脈)やparameter(⽂ 脈上登場した重要な値)を受け 取り、最終的なアクションを決 定する 14
  15. 15. 構築例 15 Slackから使える + ブラウザで使うことを想定した簡単な実装
  16. 16. 実際の画⾯ 16
  17. 17. まとめ -良い会話はとても魅⼒的なUI -実装は複雑ではない •脚本作りといった設計が肝 •どうエージェントを育てていくか -使ってみる障壁がない •お⾦かからずできちゃう -より詳しいことは •Googleアシスタント向けアプリを開発するためのガイドライン • https://developers.google.com/actions/extending-the-assistant 17
  18. 18. 何か質問ありましたらスピーカーラウンジで!

×