2019年8月23日 LINE Platform - UI/UX勉強会 #01 - Chat Bot編 のスライドです。チャットボットの本質的な魅力とは「そこに相手がいる感じがすること」。私たちは、そこに「人間らしきもの」の存在を想像する。ユーザーにとって、価値のあるチャットボットのユーザー体験をつくりましょう。

1. チャットボットが⽣み出す
新しいユーザーエクスペリエンス（UX）
HCD-Net認定 ⼈間中⼼設計専⾨家 / IBM Champion
⽻⼭ 祥樹 @storywriter
1
2019年8⽉23⽇（⾦）

2. 2
チャットボットが盛り上がっている。
AIのメディア「AINOW」の記事によると、2019年、
チャットボットサービス企業数が 88社。
すごい。
引⽤：https://ainow.ai/chatbotservicemap2019/

3. 3
チャットボット⾃体は、2000年代もありました。
⼈⼯無脳とか呼ばれてた。酢鶏とかね。
それが、ここ数年、⼀気にヒートアップ。
⼈⼯知能（AI）のチャットボットが
隆盛のキーファクターでした。

4. 4
チャットボットや、AIというと、
どうしても、技術や期待感が先⾏しがち。
でも待って。ユーザーにとって、
そのチャットボットは何が嬉しいの？
ユーザーにとって意味のあるものにしたい。

5. 5
ユーザー体験としてのチャットボットに
⽬を向けてみましょう。

6. ⽻⼭ 祥樹 @storywriter
v HCD-Net認定 ⼈間中⼼設計専⾨家
• 使いやすいプロダクトをつくる専⾨家
v Web業界に20年くらい、Watsonは3年ほど
• IBM Champion for 2018-2019
v 主な実績など
• 2009年 ⽇経パソコン 企業サイトランキング2009
⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位
• 2011年 Webユーザビリティランキング2011 企業サイト編
⽇本の⼤⼿企業150サイト中、第4位
v 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、ライター、NOREN、IBM Watson
6
ユーザー⼼理を
つかむプロです

7. 7
IBM Champion 2018-2019

8. 8
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊
http://amzn.asia/3cgueBZ
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」
コンピュータ・IT 総合 最⾼「9位」

9. 9
現場で使える! Watson開発⼊⾨
Watson API、Watson StudioによるAIアプリ開発⼿法
Amazonで購⼊
https://www.amazon.co.jp/dp/4798158496/

10. 10
チャットボット や AI とのかかわり
UXデザイナー および エンジニア として、
AI をつかったチャットボットの設計をしています。
主に IBM Watson。
リンクスタート！

11. 11
チャットボットというコンセプトは
むかしから、ありました。

12. 12
チューリングテスト（1950）
A B
Bが「⼈間」に
ちがいない！

13. 13
⼈と⾃由に会話する創造物への憧れは、
⼈⼯知能（AI）の歴史そのもの。
チューリングテスト（⼈⼯知能か判定するテスト）も
「会話」を暗黙の前提としている。

14. 14
今⽇、とくにお話したいのは
Knowledge Navigator (1987)
スティーブ・ジョブズを追放したアップル。
ジョン・スカリーが、未来へのビジョンを⽰すために
制作したコンセプトビデオ。

15. 15
Knowledge Navigator
引⽤：https://youtu.be/yc8omdv-tBU

16. 16
Knowledge Navigator
擬⼈化されたインターフェース
先⽣

17. 17
Knowledge Navigator
会話によるインタラクション
読んでいない
新しい⽂献を
出してくれ
専⾨誌から
ですか？
そうだ

18. 18
Knowledge Navigator
気のきいた⼈間のようなふるまい
（たくさんの論⽂から）
先⽣の友⼈のジル⼥史の
論⽂があります
ジル⼥史に
不在通知メッセージ
残しておきました
最新の論⽂
（⽇付を未指定でも
⽂脈から察する）

19. 19
その他、タッチデバイス、ビデオチャット...
1987年の若者たちは熱狂した。
「カッコええぇぇぇぇっ！ これが未来か！」

20. 20
コレ本当に、そんなに、いいか？

21. 21
いま⾒ると、このビデオは、
チャットボットの利点と、そして⽋点を
集約した映像になっている。

22. 22
たとえば、この仕組みだと、ユーザーはあらかじめ、
このシステムで何ができて、何ができないか、
正確に知らないと、すごく使いづらい。
⾳声⼊⼒では、複雑な⼊⼒はとてもややこしい。
⽋点はいくつも挙げられる。

23. 23
それでも、ワクワクする⾃分がいる。

24. 24
このワクワクは何だろう？
チャットボットのユーザー体験の核にあるもの。

25. 25
チャットボットのユーザー体験の核を探るには
どうすればいいか？

26. 26
チャットボットで「なくてもよい」ものを
⼀枚ずつ剥がしていって、最後に残るだろう本質を探る。

27. 27
典型的なトーク
探しづらい資料
パッと⾒つける
ことができます
24時間365⽇
対応できます
トーク1

28. 28
理由を剥がす
探しづらいウェブサイトなら、
チャットボットを⼊れるより、
ウェブサイトの構造を⾒直すことに投資したほうが
いいんじゃないの？
ウェブサイトだって24時間365⽇だし。

29. 29
Buffalo
引⽤：http://buffalo.jp/support_s/faq.html
FAQサイト改善で
コールセンターの
⼊電削減

30. 30
Buffalo
アンケートの結果から、コールセンタへのお問い合わせを
する8割の顧客が最初にWebサイトを閲覧していることが
わかり、FAQを顧客に使いやすいように改善し、電話量を4
割削減するすることに成功。
引⽤：
コンタクトセンタにおける社員満⾜度と顧客満⾜度の関係性について, ⽥⼝ 浩, 2018, デジタルプラクティス

31. 31
典型的なトーク
⾃然な会話で
検索をすることが
できます
トーク2

32. 32
理由を剥がす
⾃然⽂で検索できる検索エンジンもあるし。
みんなGoogleでキーワード検索に慣れているから、
キーワード検索のほうがいいんじゃない？
使いやすさの専⾨家 ドナルド・ノーマン も
「標準化をする」=「世の中の⼀般的なUIと同じにする」
を挙げている。
引⽤：
誰のためのデザイン？ 増補・改訂版 ―認知科学者のデザイン原論, D.A.ノーマン, 2015, pp.214

33. 33
チャットボットに⼊⼒されるテキスト
じっさいユーザーテストしてみると、チャットボットを
キーワード検索エンジンのように使うユーザーが
相当数いる。
住所 住所 地図
⾃然⽂⼊⼒なのに・・・

34. 34
チャットボットは検索ではGoogleにかなわない
「りんな」にかかわっていた⽅と意⾒交換。完全に同意。
「検索能⼒ではGoogleにかなわない」
「『チャットボットである価値』を⽣かすべき」

35. 35
典型的なトーク
機械が
苦⼿な⼈でも
操作できます
トーク3

36. 36
理由を剥がす
機械が苦⼿だったら、ますます、
ウェブに⼀般的にあるフォーム形式のほうが
⾒知っていて、わかりやすいのでは？
とくにウェブのフォームは今や洗練されてきている。

37. 37
ロフトワーク
引⽤：https://loftwork.com/form/jp/contact.html
「必須」
の明⽰
例⽂
の明⽰ 進捗がわかる
ナビゲーション
蓄積されたノウハウから
洗練されたフォーム

38. 38
典型的なトーク
チャットボットが
回答してくれるので
⼈⼿がかかりません
トーク4

39. 39
アスクル（マナミさん）：
引⽤：https://lohaco.jp/support/index.html

40. 40
アスクル（マナミさん）
LOHACO の全お問い合わせの1/3をカバー。
6.5⼈分の省⼈化。
コールセンター問い合わせの効率化で有名な事例。
引⽤：https://www.askul.co.jp/kaisya/news/archive.html?year=2015
=

41. 41
アスクル（マナミさん）
引⽤：https://www.askul.co.jp/kaisya/news/archive.html?year=2015

42. 42
アスクル（マナミさん）
急拡⼤する LOHACO の問い合わせ増加を抑制した
と⾒ることもできるが、
別の視点で⾒ると：

43. 43
アスクル（マナミさん）
引⽤：https://www.askul.co.jp/kaisya/news/archive.html?year=2015
メール+電話の
問い合わせ数は減ってない

44. 44
アスクル（マナミさん）
引⽤：https://www.askul.co.jp/kaisya/news/archive.html?year=2015
チャットボット運⽤の仕事が
新しく増えた、とも⾒える？

45. 45
アスクル（マナミさん）
つまり仕事は減っていなくて、
チャットボットを管理する仕事が増えるだけなのでは？

46. 46
チャットボットの導⼊で増える仕事もある
チャットボットの導⼊で、⾒落としがちですが、
「チャットボットを継続的に運⽤・管理・報告する」
という新しい仕事が、じっさいに発⽣する。

47. 47
アスクル（マナミさん）
ちょっと意地悪な⾒⽅をしましたが、
アスクルの事例は、とても良いものです。
学ぶべき点がたくさんあります。

48. 48
典型的なトーク
放っておけば
勝⼿に賢くなります
トーク5

49. 49
理由を剥がす
放っておけば勝⼿に賢くなるなど、都合のいい話はない。
さまざまな会話が⼊⼒されるため、
精度の低下につながるデータや、なかには攻撃コードも。
⼈によるメンテナンスは必須。

50. 50
典型的なトーク
すぐ始められます
トーク6

51. 51
理由を剥がす
チャットボット を動かすには、最低限、
「こういう質問に、こう回答する」
というリストが必要。
社内に、そのデータはまとまっているか？
No 質問 回答
1 本体前面の赤いランプが点いている 本体背面の電源スイッチを入れ直してください
2 電源ランプが点かない コンセントが刺さっているか確認してください
3 本体前面のランプが点滅する サポートセンターにお電話ください

52. 52
チャットボットの⽴ち上げに必要な作業もある
「チャットボットのシナリオ（質問, 回答, 教師データ）」
「データを社内から集めて、シナリオにする」
をつくる必要がある。

53. 53
典型的なトーク
アンケートが
会話形式で
⼊⼒しやすいです
トーク7

54. 54
レストラン予約システム
会話形式 フォーム形式

55. 55
レストラン予約システム
会話形式 フォーム形式
ステップ数が多く
時間がかかる
全体像が⾒えない
必要な項⽬が⼀望
スムーズに⼊⼒

56. 56
ドミノピザ
引⽤：LINE ドミノピザ 公式アカウント
LINEの注⽂を廃⽌
複雑だったので
英断だと思う
やらない勇気
⼤切

57. 57
チャットボットでなくてよいものを、剥がしてきた。
それでもまだ、
チャットボットでなければならないものは？

58. 58
たとえばゲーム

59. 59
どこでもいっしょ
マリコの夢って
何ニャ？
たまのこし
マリコの夢は
「たまのこし」なのニャ
ロマンチックだニャ

60. 60
どこでもいっしょ
これは、チャットボットでなければ成り⽴たない。
「会話を楽しむ」ことは、他のもので代替できない。

61. 61
チャットボットの本質は
「会話する」ことの付近にありそう。

62. 62
ここで Knowledge Navigator に、⽴ち返って考える。

63. 63
Knowledge Navigator
擬⼈化されたインターフェース
先⽣

64. 64
Knowledge Navigator
会話によるインタラクション
読んでいない
新しい⽂献を
出してくれ
専⾨誌から
ですか？
そうだ

65. 65
Knowledge Navigator
気のきいた⼈間のようなふるまい
（たくさんの論⽂から）
先⽣の友⼈のジル⼥史の
論⽂があります
ジル⼥史に
不在通知メッセージ
残しておきました
最新の論⽂
（⽇付を未指定でも
⽂脈から察する）

66. 66
私たちは、そこに
「⼈間らしきもの」の存在を想像する。

67. 67
「それは⽣命を模倣するというイマジネーションだ」
Cathy Pearl
Designing Voice User Interfaces, 2018

68. 68
りんな
引⽤：https://www.rinna.jp/
⼥⼦⾼⽣キャラで⼤⼈気
登録ユーザー数は763万⼈
（2019年3⽉）
「共感エンジン」により
会話が⻑く続く

69. 69
アスクル（マナミさん）
引⽤：https://lohaco.jp/support/index.html
キャラクターが
なかったときは
利⽤率が低かったが
「マナミさん」にして
利⽤が定着

70. 70
チャットボットの本質的な魅⼒
つまり、チャットボットの本質的な魅⼒とは
「そこに相⼿がいる感じがすること」

71. 71
チャットボットの本質的な魅⼒
「そこに相⼿がいる感じがすること」
これを⽣かすことが、ユーザーにとって、
価値のあるチャットボットのユーザー体験になる。

72. 72
会話を盛り上げるための演出テクニック
「そこに相⼿がいる感じがすること」
をより演出することで、ユーザー体験が深まる。

73. 73
キャラクター設定をする
キャラクターに設定を与えることで、より深みが出る。
親しみのあるコミュニケーションになる。
また、会話設計をするときに、
会話のトーン＆マナーの指針にもなる。
（語調や反応の仕⽅、あえて回答しない質問など）
演出1

74. 74
アスクル（マナミさん）
引⽤：https://lohaco.jp/support/
家族は
夫、⻑男（3歳）
⻑⼥（1歳）、
⽝、猫
⽝の名前はチョコ
芝⽝のオス

75. 75
レオパレス21：
引⽤：https://vir.leopalace21.com/chat
キャラクターを前⾯に
明らかな存在感

76. 76
オウム返し
ユーザーの発⾔をそのまま繰り返す。
⾃分が⼊⼒した⾔葉を返されることで、
コミュニケーションしている感じが⽣まれる。
演出2

77. 77
ユニ・チャーム
おむつの選び⽅を
教えてほしい
何を選んだらよいか
分からないのですね
（オウム返し）
引⽤：http://www.unicharm.co.jp/lifree/adult/choose/navi/index.html

78. 78
雑談に応じる
雑談（チャットボットの本来の⽬的以外の会話）にも
回答することで、⼈肌感のあるコミュニケーションになり
キャラクターへの親しみが増す。
逆に雑談ができないと、ただのシステムのように⾒える。
チャットボットのユーザー体験を⼤きく左右する要素。
演出3

79. 79
リクルートジョブズ（パン⽥⼀郎）：
引⽤：リクルートジョブズ パン⽥⼀郎 公式アカウント
さまざまな雑談に
答えてくれる
出⾝は東京の
下野動物園
年齢は
⼤学3年⽣

80. 80
アスクル（マナミさん）
引⽤：https://lohaco.jp/support/
マナミさんの
雑談⼒は神

81. 81
横浜市（イーオ）
引⽤：http://www.city.yokohama.lg.jp/shigen/sub-shimin/dashikata/
「旦那」→
「本当に‼︎
『⼈間は判断⼒の⽋如によって結婚し、
忍耐⼒の⽋如によって離婚し、
記憶⼒の⽋如によって再婚する』
ってアルマン・サラクルーの作品で
⾔っていたよ。忍耐⼒を鍛えてみたら、
どうかな。」
「⼈⽣」→
「本当に捨てちゃうの?
『同じこと考えても
朝の3時と翌⽇の3時とじゃ
答えがちがってくるね…』
とスヌーピーが⾔っていたよ。
今⽇は寝て、明⽇もう⼀度
考えてみようか。」
ごみ分別のチャットボット

82. 82
ビジュアルをともなう感情表現をする
スタンプや画像を送ったり、
キャラクターの表情や⾝動きを、
こまかくアニメーションさせることで、
「⽣きている感じ」が⾼まり、親しみが増す。
演出4

83. 83
ジャパンネット銀⾏
引⽤：LINE ジャパンネット銀⾏ 公式アカウント
画像を送ることで
スタンプ的な感情表現

84. 84
三井住友銀⾏
引⽤：http://www.smbc.co.jp/
こまかいアニメーションで
親しみを出している

85. 85
回答まで⼀息いれる（考えている間）
あえてms（ミリ秒）で回答せず、
回答まで⼀息いれることで、「考えている間」を演出する。
⼈間とのチャットではmsで回答されることはない。
あまりに回答が早いと、
システムと会話している気持ちになるため。
「会話⼊⼒中」のアニメーションを挟むのも効果的。
演出5

86. 86
リクルートジョブズ（パン⽥⼀郎）
引⽤：リクルートジョブズ パン⽥⼀郎 公式アカウント
パン⽥⼀郎は
回答まで0.6秒ほど
あえて
遅延を⼊れている

87. 87
回答まで⼀息いれる（考えている間）
似た効果として、回答に「うーん」「えー」「！」など、
相槌を⼊れる、という⽅法もある。

88. 88
マイクロソフト（りんな）
引⽤：LINE りんな 公式アカウント
好きな⾳楽は
うーん、
特定の好きな⼈は
いないかな？
backnumberとかたまに
ワンオクとか聴くかな〜

89. 89
⾃ら話しかけてくるチャットボット
既存のチャットボットで
「⾃らどんどん話しかけてくる」というのは少ない。
（有⼈チャットや、LINEの⼀⻫配信はある）
ロボットが前に⽴つだけで話しかけてくるのに対照的。
こんにちは・・・
演出6

90. 90
過剰な期待感との向き合いかた
「擬⼈化されている」というその特性ゆえに
チャットボットは過剰な期待を抱かれやすい。

91. 91
擬⼈化されたものへの過剰な期待感
擬⼈化されたものに接したユーザーは、
「『⼈間のように、どんな⾔葉でも』理解してくれる」
と期待してしまう。（そしてその期待は裏切られる）

92. 92
りんな
引⽤：LINE りんな公式アカウント
擬⼈化ゆえに
会話が成り⽴たなかったときの
ガッカリ感がすごい
「こんにちは」
「え？同時通訳？」

93. 93
過剰な期待は⼤きな落胆につながる
ユーザーは「AIという何か素晴らしいもの」が
助けてくれると期待している。
過剰な期待は、⼤きな落胆につながる。
過剰な期待 ⼤きな落胆

94. 94
事前期待が⾼すぎる事例
ニュースなどで、AIへの期待値が
刷り込まれた⼈。
⾔葉を理解すると思ってる。
AIって
すごいんだって！？

95. 95
事前期待が⾼すぎる事例
現在の AI は何も知らない。
⾔葉も理解しない。
ガッカリされる。
かぁ〜っ！
何にも知らねえじゃ
ねえか

96. 96
幅広いトレーニングデータをつくる
考え得るかぎりのさまざまな質問に答えられるように
⼤量のトレーニングデータをつくる。
ポイント：
1⼈でつくらない。いろんな⼈の視点でつくる。
トレーニングデータ作成のマニュアルは充実させる。
対策

97. 97
前提をユーザーと共有する
よくある質問を最初に並べることで、
そのチャットボットが何の質問に答えられるか、
ユーザーに伝えることができる。
対策

98. 98
ジャパンネット銀⾏
引⽤：LINE ジャパンネット銀⾏ 公式アカウント
よくある質問を
最初に表⽰する

99. 99
アスクル（マナミさん）
引⽤：https://lohaco.jp/support/
よくある質問を
最初に表⽰する

100. 100
まとめ

101. 101
まとめ
1. チャットボットの本質的な魅⼒は
「そこに相⼿がいる感じがすること」
2. より演出することでユーザー体験を深められる。
3. 期待値のコントロールをする。

102. 102
ありがとうございました。
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください！

103. ⽻⼭のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類