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