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 full-size slide

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

    View full-size slide

  3. 本を書きました

    View full-size slide

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

    View full-size slide

  5. 出版までの経歴

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 今は115個

    View full-size slide

  11. 2019.6.8〜6.9 2019.6.22〜6.23 2019.7.27
    1位

    2位

    2位

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

    View full-size slide

  12. 4ヶ月連続達成!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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










    View full-size slide

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

    View full-size slide

  19. 1
    VUIデザインとは

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    話設

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



    の嫌

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. HOW TO
    DESIGN VUI
    3

    View full-size slide

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

    View full-size slide

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

    口調 テンショ

    スタンス

    View full-size slide

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

    口調 テンショ

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














    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. FAILURE
    EXAMPLES
    4

    View full-size slide

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

    長ぇなぁ…
    説明が長い
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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






















    View full-size slide

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

    会話設計
    GOOD VUI DESIGN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide