Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20191112_VUI開発で最も大切なデザインのお話

yuka matsuba
November 12, 2019

 20191112_VUI開発で最も大切なデザインのお話

2019年11月12日
#スマートスピーカーを遊びたおす会

yuka matsuba

November 12, 2019
Tweet

More Decks by yuka matsuba

Other Decks in Design

Transcript

  1. VUI開発で最も大切な
    デザインのお話 松葉 有香

    View Slide

  2. 松葉 有香
    まつば ゆか
    某SIer勤務のシステムエンジニア
    → UXデザイナー
    @a093_jp
    #アカペラ #HADO #Alexa #Clova
    #Lambda #Node.js
    #スキル開発100チャレンジ
    #イラスト

    View Slide

  3. 本を書きました

    View Slide

  4. 【加藤家の食卓】サークルページ
    https://techbookfest.org/event/tbf07/circle/5730552053235712

    View Slide

  5. View Slide

  6. 出版までの経歴

    View Slide

  7. ※ スキル=VUIにおけるアプリケーション
    #スキル開発100チャレンジ
    2017.12

    View Slide

  8. Why?
    出展:ロボットスタート(https://robotstart.info/2018/12/04/japanese-alexa-skill-2000.html)
    2018年12月4日
    日本国内のスキル数
    2000突破

    View Slide

  9. Why?
    2000分の100
    って、5%?
    作れたら、すごくね?
    (´-`).。oO

    View Slide

  10. View Slide

  11. #スキル開発100チャレンジ ※ スキル=VUIにおけるアプリケーション
    2017.12

    View Slide

  12. 今は115個

    View Slide

  13. 2019.6.8〜6.9 2019.6.22〜6.23 2019.7.27
    1位

    2位

    2位

    Alexaスキルアワード2019 ハッカソン
    すごろく脱出ゲーム お姫さまの国 うん◯出た

    View Slide

  14. 4ヶ月連続達成!

    View Slide

  15. これらの経験を通して
    気づいたこと

    View Slide

  16. ユーザーに 愛 されるため
    に大切な要素
    GOOD VUI DESIGN

    View Slide

  17. ユーザーに 愛 されるため
    に大切な要素
    便利 心地よい 面白い

    View Slide

  18. ユーザーに 愛 されるため
    に大切な要素
    if(心地よい && (便利 || 面白い))

    View Slide

  19. ユーザーに 愛 されるため
    に大切な要素
    if(心地よい && (便利 || 面白い))










    View Slide

  20. View Slide

  21. GOOD VUI DESIGN
    VUIデザインとは
    なぜよいVUIデザインが大切なのか
    HOW TO DESIGN VUI
    FAILURE EXAMPLES
    1.
    2.
    3.
    4.

    View Slide

  22. 1
    VUIデザインとは

    View Slide

  23. UI DESIGN
    どのように操作すればどのように動くかを定義すること
    VUI DESIGN?

    View Slide

  24. おすすめのレシピを
    教えて

    和洋中どれがいいで
    すか?
    和かな ♪
    和のレシピですね。
    それなら…
    VUI DESIGN?
    VUI DESIGN
    どのように発話すればどのように応答するかを定義すること

    View Slide

  25. おすすめのレシピを
    教えて

    和洋中どれがいいで
    すか?
    和かな ♪
    和のレシピですね。
    それなら…
    VUI DESIGN?
    VUI DESIGN
    どのように発話すればどのように応答するかを定義すること
    ユーザーにどう言わせるのか
    それに対してどう答えるのか

    View Slide

  26. おすすめのレシピを
    教えて

    和洋中どれがいいで
    すか?
    和かな ♪
    和のレシピですね。
    それなら…
    VUI DESIGN?
    VUI DESIGN
    どのように発話すればどのように応答するかを定義すること
    ユーザーにどう言わせるのか
    それに対してどう答えるのか

    話設

    View Slide

  27. なぜ
    よいVUIデザイン
    が大切なのか
    2

    View Slide

  28. VUI の特徴
    学習することなく自然に操れる 手や目が拘束されない
    ×

    View Slide

  29. VUI の特徴
    学習することなく自然に操れる
    × これをいかに実現するかが
    よいVUIデザイン
    になるか否かの分かれ道
    会話設計に依存

    View Slide

  30. よい VUI DESIGN ができないと…
    負の体験が蓄積 VUIが衰退
    使ってもらえない

    View Slide

  31. よい VUI DESIGN ができないと…
    負の体験が蓄積 VUIが衰退
    使ってもらえない



    の嫌

    View Slide

  32. スマートスピーカーを愛する私たちのために
    これから愛して欲しい人たちのために
    私たちは
    よいVUIデザイン
    を考えなければいけない

    View Slide

  33. if(心地よい && (便利 || 面白い))
    だからよいVUIデザインが大切

    View Slide

  34. HOW TO
    DESIGN VUI
    3

    View Slide

  35. HOW TO DESIGN VUI
    ユーザーに与える体験を定義する
    ユーザーペルソナを決める

    View Slide

  36. ターゲットに適した話し方を考える
    SLOWLY EASILY BRIEFLY
    アシスタントの役割を決める
    GAME
    MASTER
    BUDDY ENEMY NARRATOR
    アシスタントの性格を決める
    HOW TO DESIGN VUI
    セリフを考える(会話設計)

    口調 テンショ

    スタンス

    View Slide

  37. アシスタントの役割を決める
    GAME
    MASTER
    BUDDY ENEMY NARRATOR
    アシスタントの性格を決める
    HOW TO DESIGN VUI
    セリフを考える(会話設計)

    口調 テンショ

    スタンス
    HOW
    ターゲットに適した話し方を考える
    SLOWLY EASILY BRIEFLY
    VUIデ














    View Slide

  38. 難しいのはやったことがないから
    そして一見難しく見えないから
    会話なんて
    誰でもできるじゃーん

    View Slide

  39. そして本当は難しくない
    だってみんな
    心地よさは判断できるはず
    気持ちわるいよー!

    View Slide

  40. FAILURE
    EXAMPLES
    SUCCESSFUL
    EXAMPLES
    ひとつひとつの会話に
    真剣に向き合うことが大切

    View Slide

  41. FAILURE
    EXAMPLES
    4

    View Slide

  42. FAILURE EXAMPLES
    〇〇スキルへようこそ。このスキルで
    は、〇〇ができます。〇〇をするため
    には、まず、〇〇と言ってください。す
    ると、〇〇となりますので、そうしたら

    長ぇなぁ…
    説明が長い
    1

    View Slide

  43. FAILURE EXAMPLES
    長ぇなぁ…
    説明が長い
    1
    起動回数に応じて説明を変える
    〇〇スキルへようこそ。このスキルで
    は、〇〇ができます。〇〇をするため
    には、まず、〇〇と言ってください。す
    ると、〇〇となりますので、そうしたら

    View Slide

  44. 〇〇〇スキルへようこそ。
    このスキルでは、〇〇ができます。
    どうしますか?
    FAILURE EXAMPLES
    サポート不足
    何言えば
    いいの…?
    2

    View Slide

  45. FAILURE EXAMPLES
    サポート不足
    何言えば
    いいの…?
    2
    ロールプレイで試してみる
    〇〇〇スキルへようこそ。
    このスキルでは、〇〇ができます。
    どうしますか?

    View Slide

  46. 〇〇スキルへようこそこのスキルでは
    〇〇ができます早速始めますか?
    FAILURE EXAMPLES
    間がない
    聞き取り
    づらい…
    3

    View Slide

  47. FAILURE EXAMPLES
    間がない
    聞き取り
    づらい…
    3
    心地よい間の長さを探る
    〇〇スキルへようこそこのスキルでは
    〇〇ができます早速始めますか?

    View Slide

  48. FAILURE EXAMPLES
    正確に聞き取りにくい
    海岸? 開眼?
    4
    カイガンでカイガンしました

    View Slide

  49. FAILURE EXAMPLES
    正確に聞き取りにくい
    海岸? 開眼?
    4
    カイガンでカイガンしました

    海辺で開眼しました
    なるべく訓読みを使う

    View Slide

  50. 〇〇は1番、△△は2番は、□□は3
    番、◇◇は4番、▼▼は5番、
    ΔΔは6番、どれにしますか?
    FAILURE EXAMPLES
    大量の情報を与える
    どれだっけ…
    5

    View Slide

  51. 〇〇は1番、△△は2番は、□□は3
    番、◇◇は4番、▼▼は5番、
    ΔΔは6番、どれにしますか?
    FAILURE EXAMPLES
    大量の情報を与える
    どれだっけ…
    5
    メイン機能のみ伝えてヘルプに移譲・スキル分割

    View Slide

  52. FAILURE EXAMPLES
    どこのイベントが知りたいですか?
    大量の情報を聞く
    長ぇなぁ…
    どんなジャンルがいいですか?
    いつのイベントが知りたいですか?
    6

    View Slide

  53. FAILURE EXAMPLES
    どこのイベントが知りたいですか?
    大量の情報を聞く
    長ぇなぁ…
    どんなジャンルがいいですか?
    いつのイベントが知りたいですか?
    6
    スキル分割・VUI化しない

    View Slide

  54. 今日もついたち
    頑張っていきましょう!
    FAILURE EXAMPLES
    発話が間違っている
    7

    View Slide

  55. FAILURE EXAMPLES
    発話が間違っている
    ついたち…?
    いちにち!?
    7
    今日もついたち
    頑張っていきましょう!

    View Slide

  56. FAILURE EXAMPLES
    発話が間違っている
    ついたち…?
    いちにち!?
    7
    読みに注意
    今日もついたち
    頑張っていきましょう!
    イントネーション
    の調整も!

    View Slide

  57. FAILURE EXAMPLES
    1
    2
    3
    4
    5
    6
    7
    説明が長い
    サポート不足
    間がない
    正確に聞き取りにくい
    大量の情報を与える
    大量の情報を聞く
    発話が間違っている

    View Slide

  58. FAILURE EXAMPLES
    1
    2
    3
    4
    5
    6
    7
    説明が長い
    サポート不足
    間がない
    正確に聞き取りにくい
    大量の情報を与える
    大量の情報を聞く
    発話が間違っている






















    View Slide

  59. SUMMARY

    View Slide

  60. SUMMARY
    負の体験が蓄積 VUIが衰退
    心地よい &&(便利 || 面白い)

    会話設計
    GOOD VUI DESIGN

    View Slide

  61. SUMMARY
    FAILURE
    EXAMPLES
    SUCCESSFUL
    EXAMPLES
    ひとつひとつの会話に
    真剣に向き合って心地よさを判断

    View Slide

  62. SUMMARY
    FAILURE EXAMPLES
    ユーザーにとって便利な・心地よい・面白い
    VUIデザインを目指しましょう!
    に陥らないように
    1
    2
    3
    4
    5
    6
    7
    説明が長い
    サポート不足
    間がない
    発話が間違っている
    大量の情報を与える
    大量の情報を聞く
    正確に聞き取りにくい

    View Slide

  63. @a093_jp
    Thank you ♪
    BOOTH, Kindleで販売中
    http://a093.jp/goods/
    技術書博覧会
    もでます

    View Slide

  64. View Slide