神を細部に宿せ！ こだわりから始めるLINE チャットボットのUXデザイン/God is in the Details at chatbot.

2019年9月4日『LINE Platform - UI/UX勉強会 #02 - Chat Bot編』の登壇資料になります。普段から心がけている会話デザインの「こだわり」についてお話しました。
https://linedev.connpass.com/event/142962/

Transcript

1. LINE Platform - UI/UX勉強会 #02 - Chat Bot編 神を細部に宿せ！ こだわりから始めるLINE チャットボットのUXデザイン テクノロジー開発部 福本 晃之
2. • 自己紹介 • ZEALSのプロダクト • はじめに • こだわり方 • さいごに Agenda
3. 自己紹介
4. 誰だお前
5. ex.富士通G 法人セールス 2019.04 ~ ZEALS Ruby Python JavaScript Product Manager ZEALS Engineer & VPoE 福本 晃之 [ Teruhisa Fukumoto ] ：f-teruhisa ：@terry_i_ ：@teruhisafukumoto ：Terry
6. #line_uiux Twitter
7. さらに、
8. いろんなとこで ウロウロしてます
9. Chatbot LINE Developer Community Voice & Chatbot Japan VUILT Blog
10. チャットボット、 それなりに話せます
11. ZEALSのプロダクト
12. なにつくってんすか
14. Demo
15. • Formの体験をチャット内で完結できる • Pushでユーザーに情報を届けることができる • 使い慣れたチャットのUIで回答できる 特徴
16. 従来の広告/LPとの比較(人材業界:CVR) LP広告 Zeals 0.8％ 8~10％ 約 10倍
17. おかげさまで、 色んな方に導入頂いてます
18. 導入企業（一部、全83社）
19. 良い数値を出せる 一番の要因
20. Communication
21. • 極論、APIで提供される機能はみんな同じ • 体験への期待値が高い（人間と同程度） • 答えがないので、PDCAを回すしかない ◦ 差がつくのはこの部分 なぜコミュニケーションが大事なのか
22. ZEALS社の体制
23. 会話作成のプロが居ます • 会話作成専門の人がいる ◦ コミュニケーションデザイナー ◦ UXライター
24. 会話体験を突き詰める組織構造
25. 結果を出す過程で 得た学びの話をします
26. はじめに
27. そう、まだ始まってないんだ （ごめん）
28. ということで、
29. 今日のテーマは、 ”こだわり”です！！！！！
30. ”こだわり”とは？ weblio辞書『こだわ・る』 (https://www.weblio.jp/content/%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8B)
31. ”こだわり”とは？ weblio辞書『こだわ・る』 (https://www.weblio.jp/content/%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8B)
32. なぜ”こだわり”なのか？
33. ”こだわり”の良いところ • （理論上）誰でもできる • いつでも（今日から）できる • どこまででもできる
34. 今日の学びをすぐに 活かすことができます
35. 逆に今日話さないこと
36. 今日は話さないこと • HCD的な専門スキルのかしこめな話 • カスタマージャーニー的な どこかで100回くらい聞いた話 • デザインスプリントとかオオゴトになる話
37. 「UXデザイン完全に理解した」 ありがち... 何も変わらない...
38. それは嫌なので、
39. 今日から改善できるUXを 話していきます！
40. こだわり方
41. では本編です
42. ”こだわる”... どうやってやるの？
43. こだわり方のポイント • 人間と同じことをさせる • タップのしやすさを追求する • 目的を持った A/Bテストで検証をする
44. ①人間と同じことをさせる
45. まず実例
46. 理念ありor なし ◯◯さん、お友だち登録ありがとうございま す。 メンズスキンケアブランド「☓☓」です。 ☓☓は「世界一のメンズコスメブランド」を 目指すことで世界中の男性に、より充実した 瞬間を感じてもらうための活動を続けていき ます。 早速ですが、冬も近づき、肌トラブルが出て くる季節です。 悩みを相談して、対策しませんか？ ◯◯さん、お友だち登録ありがとうござい ます 冬も近づき、肌トラブルが出てくる季節で す。 悩みを相談して、対策しませんか？
47. 理念ありor なし 返信率 13%↑
48. チャットボットでも挨拶は ちゃんとしたほうが良い
49. さらにもう一発
50. クイックリプライの or ✅
51. クイックリプライの or ✅ 返信率 8%↑
52. 感情や気持ちは 素直に表現した方が良い
53. つまり... • ユーザーは、相手が機械か人間か気にしない • そもそも期待値形成が友達とのチャットetc... • だから、人間のコミュニケーションと同じ ように考えるべき
54. なるほど
55. つぎ、
56. ②タップしやすさを追求
57. スマホの画面は小さい （ちいさい）
58. Rich Menu or Quick Reply Quick Reply Rich Menu
59. その前に...
60. API Scheme Zealsでは、リッチメニューを使って 会話を進めることができます 画像引用（http://manual-at.line.me/archives/1067959676.html）
61. タイプ 設定方法 設定変更タイミング 優先順位 Messaging APIで設定する ユーザー単位のリッチメニュー Messaging API 即時 1 Messaging APIで設定する デフォルトのリッチメニュー Messaging API トーク画面に再入室したとき （反映に時間が掛かる場合も） 2 LINE@マネージャーで設定する デフォルトのリッチメニュー LINE@ トーク画面に再入室したとき 3 3 Types Rich Menu API 引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
62. 3 Types Rich Menu API タイプ 設定方法 設定変更タイミング 優先順位 Messaging APIで設定する ユーザー単位のリッチメニュー Messaging API 即時 1 Messaging APIで設定する デフォルトのリッチメニュー Messaging API トーク画面に再入室したとき （反映に時間が掛かる場合も） 2 LINE@マネージャーで設定する デフォルトのリッチメニュー LINE@ トーク画面に再入室したとき 3 引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
63. Template あらかじめテンプレートをいくつか設定し、 それに合わせて画像を作ってもらう 引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
64. リッチメニューでの会話 イチ押し機能です
65. お後がよろしいようで
66. Quick Reply Rich Menu Rich Menu or Quick Reply(再掲)
67. Quick Reply Rich Menu 返信率 12%↑ Rich Menu or Quick Reply
68. 押しやすさ以外にも... • 視認性の高いUI = 返信率の向上 • 画像コンテンツ多様 = 強力なブランド訴求 • テキスト入力の未使用 = ユーザー体験向上
69. 他にもLINEには リッチなUIがたくさん
70. ZEALSはだいたい 実装しています
71. FlexMessage ImageMap
72. ちなみに、
73. FlexMessage > Carouselだったりしました クリック率 14%↑
74. スマホの画面は小さいので、工夫 • タップする領域を大きくする • どこをタップすればいいかわかりやすく ◦ 色を付けて強調する ◦ テキストで補足
75. はい次
76. ③目的を持った検証を
77. ここまでの発表で 気づいただろうか...？
78. ちゃんと数値取ってます
79. 雰囲気でユーザー体験を評価しない 推測するな、
 計測せよ
 Rob Pike (Go Developer)
80. そして、
81. ZEALSは ちゃんと分析してます
82. Redash(BI)
83. Redash(BI) • 会話パフォーマンスの可視化 • 定時取得によるパフォーマンス推移可視化 • 必要なスキルはSQLのみで簡単分析
84. Sankey chart
85. • 会話パフォーマンスの可視化 • ボトルネックとなる分岐を特定 • 分析の自動化 & 工数削減 Sankey chart
86. • FAR[ファーストアクション率](≒返信率) • ブロック率 • それぞれ、Push配信が起因か否か 指標もたくさんあります（例）
87. 分析するのは 当たり前ですが...
88. ビジネスサイドの人が SQLをガンガン書いてます
89. Tech Blog ZEALS TECH BLOG『Redash v3.0で使える便利機能まとめ』（https://tech.zeals.co.jp/entry/2019/01/31/103241）
90. BizサイドがSQLを書くメリット • 自分でPDCAが完結するので速度が上がる • 分析結果を重んじて、企画に反映できる ◦ 「へー、すごい！」で終わらない • 開発者がアプリケーション開発に集中できる
91. みんなで分析する 文化づくりは懇親会で
92. ここで再掲
93. • 何でもかんでも仮説検証する ◦ プッシュ配信/クリエイティブ/会話... • 検証ごとの変数が多すぎる • そもそも計測できないことを追いかける よくあるやつ
94. • リスクの大きい仮説から検証を始める ◦ 「わからない」の優先順位を決める • バッチサイズを可能な限り小さくする • 計測できる施策を立てる ◦ できないなら、できるように開発しよう 解決策
95. 検証したら、結果を共有
96. 会話デザインの仕事は できたばかり
97. みんなで協力して 地位を向上していこう
98. さいごに
99. うまいこと行ってる風で 話してきましたが
100. 最初からこの方法に たどり着いたわけでは ありません
101. がんばりの残滓 SQLの残骸 謎ドキュメント 謎ルール
102. それもデザイナーが こだわってくれた結果です
103. 今日話した”こだわり” • 人間と同じことをさせる • タップのしやすさを追求する • 目的を持った A/Bテストで検証をする
104. そんなに難しくないはず • かしこまった専門スキルは不要 • 会社全体でのフレームワーク導入は不要 • 大掛かりなユーザーヒアリングも不要
105. 難しいことを考えず ”こだわり”からはじめよう
106. God is in the Details. ~ 神は細部に宿る ~
 Ludwig Mies Van Der Rohe 

107. • Jonathan Iveはスケルトン iMacを作るとき、 スケルトンなものに囲まれて生活した • Apple製品の箱開封専門の部屋がある ◦ ワクワクする「7秒」で開くように設計 神を宿すということ（例:Apple） 『アップル、知られざる11の事実』(https://www.teach-me.biz/iphone/news/131226.html)
108. あとは、デザイナーが それを実行できる環境を
109. 徹底的にこだわって 神を宿す神になろう（？）
111. お後がよろしいようで
112. まとめ
113. まとめ • こだわることはいつ、誰にでもできる • 何でもかんでも検証しない（つらい） • みんなで神になろう（なれる） • ZEALSはいいぞ（ステマ）
115. Thank you!!