2019年9月4日『LINE Platform - UI/UX勉強会 #02 - Chat Bot編』の登壇資料になります。普段から心がけている会話デザインの「こだわり」についてお話しました。 https://linedev.connpass.com/event/142962/
LINE Platform - UI/UX勉強会 #02 - Chat Bot編神を細部に宿せ！こだわりから始めるLINE チャットボットのUXデザインテクノロジー開発部福本 晃之
View Slide
● 自己紹介● ZEALSのプロダクト● はじめに● こだわり方● さいごにAgenda
自己紹介
誰だお前
ex.富士通G 法人セールス2019.04 ~ ZEALSRubyPythonJavaScriptProduct ManagerZEALS Engineer & VPoE福本 晃之 [ Teruhisa Fukumoto ]：f-teruhisa：@terry_i_：@teruhisafukumoto：Terry
#line_uiuxTwitter
さらに、
いろんなとこでウロウロしてます
ChatbotLINE Developer CommunityVoice & Chatbot JapanVUILTBlog
チャットボット、それなりに話せます
ZEALSのプロダクト
なにつくってんすか
Demo
● Formの体験をチャット内で完結できる● Pushでユーザーに情報を届けることができる● 使い慣れたチャットのUIで回答できる特徴
従来の広告/LPとの比較(人材業界:CVR)LP広告 Zeals0.8％8~10％約10倍
おかげさまで、色んな方に導入頂いてます
導入企業（一部、全83社）
良い数値を出せる一番の要因
Communication
● 極論、APIで提供される機能はみんな同じ● 体験への期待値が高い（人間と同程度）● 答えがないので、PDCAを回すしかない○ 差がつくのはこの部分なぜコミュニケーションが大事なのか
ZEALS社の体制
会話作成のプロが居ます● 会話作成専門の人がいる○ コミュニケーションデザイナー○ UXライター
会話体験を突き詰める組織構造
結果を出す過程で得た学びの話をします
はじめに
そう、まだ始まってないんだ（ごめん）
ということで、
今日のテーマは、”こだわり”です！！！！！
”こだわり”とは？weblio辞書『こだわ・る』(https://www.weblio.jp/content/%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8B)
なぜ”こだわり”なのか？
”こだわり”の良いところ● （理論上）誰でもできる● いつでも（今日から）できる● どこまででもできる
今日の学びをすぐに活かすことができます
逆に今日話さないこと
今日は話さないこと● HCD的な専門スキルのかしこめな話● カスタマージャーニー的などこかで100回くらい聞いた話● デザインスプリントとかオオゴトになる話
「UXデザイン完全に理解した」ありがち...何も変わらない...
それは嫌なので、
今日から改善できるUXを話していきます！
こだわり方
では本編です
”こだわる”...どうやってやるの？
こだわり方のポイント● 人間と同じことをさせる● タップのしやすさを追求する● 目的を持った A/Bテストで検証をする
①人間と同じことをさせる
まず実例
理念ありor なし◯◯さん、お友だち登録ありがとうございます。メンズスキンケアブランド「☓☓」です。☓☓は「世界一のメンズコスメブランド」を目指すことで世界中の男性に、より充実した瞬間を感じてもらうための活動を続けていきます。早速ですが、冬も近づき、肌トラブルが出てくる季節です。悩みを相談して、対策しませんか？◯◯さん、お友だち登録ありがとうございます冬も近づき、肌トラブルが出てくる季節です。悩みを相談して、対策しませんか？
理念ありor なし返信率13%↑
チャットボットでも挨拶はちゃんとしたほうが良い
さらにもう一発
クイックリプライの or ✅
クイックリプライの or ✅返信率8%↑
感情や気持ちは素直に表現した方が良い
つまり...● ユーザーは、相手が機械か人間か気にしない● そもそも期待値形成が友達とのチャットetc...● だから、人間のコミュニケーションと同じように考えるべき
なるほど
つぎ、
②タップしやすさを追求
スマホの画面は小さい（ちいさい）
Rich Menu or Quick ReplyQuick ReplyRich Menu
その前に...
API SchemeZealsでは、リッチメニューを使って会話を進めることができます画像引用（http://manual-at.line.me/archives/1067959676.html）
タイプ 設定方法 設定変更タイミング 優先順位Messaging APIで設定するユーザー単位のリッチメニューMessaging API 即時 1Messaging APIで設定するデフォルトのリッチメニューMessaging API トーク画面に再入室したとき（反映に時間が掛かる場合も）2LINE@マネージャーで設定するデフォルトのリッチメニューLINE@ トーク画面に再入室したとき 33 Types Rich Menu API引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
3 Types Rich Menu APIタイプ 設定方法 設定変更タイミング 優先順位Messaging APIで設定するユーザー単位のリッチメニューMessaging API 即時 1Messaging APIで設定するデフォルトのリッチメニューMessaging API トーク画面に再入室したとき（反映に時間が掛かる場合も）2LINE@マネージャーで設定するデフォルトのリッチメニューLINE@ トーク画面に再入室したとき 3引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
Templateあらかじめテンプレートをいくつか設定し、それに合わせて画像を作ってもらう引用（https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/）
リッチメニューでの会話イチ押し機能です
お後がよろしいようで
Quick ReplyRich MenuRich Menu or Quick Reply(再掲)
Quick ReplyRich Menu返信率12%↑Rich Menu or Quick Reply
押しやすさ以外にも...● 視認性の高いUI = 返信率の向上● 画像コンテンツ多様 = 強力なブランド訴求● テキスト入力の未使用 = ユーザー体験向上
他にもLINEにはリッチなUIがたくさん
ZEALSはだいたい実装しています
FlexMessage ImageMap
ちなみに、
FlexMessage > Carouselだったりしましたクリック率14%↑
スマホの画面は小さいので、工夫● タップする領域を大きくする● どこをタップすればいいかわかりやすく○ 色を付けて強調する○ テキストで補足
はい次
③目的を持った検証を
ここまでの発表で気づいただろうか...？
ちゃんと数値取ってます
雰囲気でユーザー体験を評価しない推測するな、 計測せよ Rob Pike (Go Developer)
そして、
ZEALSはちゃんと分析してます
Redash(BI)
Redash(BI)● 会話パフォーマンスの可視化● 定時取得によるパフォーマンス推移可視化● 必要なスキルはSQLのみで簡単分析
Sankey chart
● 会話パフォーマンスの可視化● ボトルネックとなる分岐を特定● 分析の自動化 & 工数削減Sankey chart
● FAR[ファーストアクション率](≒返信率)● ブロック率● それぞれ、Push配信が起因か否か指標もたくさんあります（例）
分析するのは当たり前ですが...
ビジネスサイドの人がSQLをガンガン書いてます
Tech BlogZEALS TECH BLOG『Redash v3.0で使える便利機能まとめ』（https://tech.zeals.co.jp/entry/2019/01/31/103241）
BizサイドがSQLを書くメリット● 自分でPDCAが完結するので速度が上がる● 分析結果を重んじて、企画に反映できる○ 「へー、すごい！」で終わらない● 開発者がアプリケーション開発に集中できる
みんなで分析する文化づくりは懇親会で
ここで再掲
● 何でもかんでも仮説検証する○ プッシュ配信/クリエイティブ/会話...● 検証ごとの変数が多すぎる● そもそも計測できないことを追いかけるよくあるやつ
● リスクの大きい仮説から検証を始める○ 「わからない」の優先順位を決める● バッチサイズを可能な限り小さくする● 計測できる施策を立てる○ できないなら、できるように開発しよう解決策
検証したら、結果を共有
会話デザインの仕事はできたばかり
みんなで協力して地位を向上していこう
さいごに
うまいこと行ってる風で話してきましたが
最初からこの方法にたどり着いたわけではありません
がんばりの残滓SQLの残骸謎ドキュメント 謎ルール
それもデザイナーがこだわってくれた結果です
今日話した”こだわり”● 人間と同じことをさせる● タップのしやすさを追求する● 目的を持った A/Bテストで検証をする
そんなに難しくないはず● かしこまった専門スキルは不要● 会社全体でのフレームワーク導入は不要● 大掛かりなユーザーヒアリングも不要
難しいことを考えず”こだわり”からはじめよう
God is in the Details.~ 神は細部に宿る ~ Ludwig Mies Van Der Rohe
● Jonathan Iveはスケルトン iMacを作るとき、スケルトンなものに囲まれて生活した● Apple製品の箱開封専門の部屋がある○ ワクワクする「7秒」で開くように設計神を宿すということ（例:Apple）『アップル、知られざる11の事実』(https://www.teach-me.biz/iphone/news/131226.html)
あとは、デザイナーがそれを実行できる環境を
徹底的にこだわって神を宿す神になろう（？）
まとめ
まとめ● こだわることはいつ、誰にでもできる● 何でもかんでも検証しない（つらい）● みんなで神になろう（なれる）● ZEALSはいいぞ（ステマ）
Thank you!!
teruhisafukumoto
uxaustralia
kaminashi
uxevents
hiromitsuuuuu
machida
y__ri9813
lovchikov
siteengine
48yukyia
okabemy
cyberagentdevelopers
takejune
samanthasiow
chrisshort
ddemaree
akmur
maggiecrowley
62gerente
hannesfritz
davidbonilla
skipperchong
thekraken
lara
eileencodes