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

Bfc42a2fb137897db919bac632c83085?s=47 Teruhisa Fukumoto
September 04, 2019

神を細部に宿せ! こだわりから始める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/

Bfc42a2fb137897db919bac632c83085?s=128

Teruhisa Fukumoto

September 04, 2019
Tweet

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. なにつくってんすか

  13. None
  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. 徹底的にこだわって 神を宿す神になろう(?)

  110. None
  111. お後がよろしいようで

  112. まとめ

  113. まとめ • こだわることはいつ、誰にでもできる • 何でもかんでも検証しない(つらい) • みんなで神になろう(なれる) • ZEALSはいいぞ(ステマ)

  114. None
  115. Thank you!!