Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BotにおけるUI/UX設計ノウハウ
Search
Niishi Kubo
August 03, 2018
Design
5
2k
BotにおけるUI/UX設計ノウハウ
2018/08/03【大阪】Bot Developers Meetup - LINE Bot開発者の勉強会
https://line.connpass.com/event/95135/
Niishi Kubo
August 03, 2018
Tweet
Share
More Decks by Niishi Kubo
See All by Niishi Kubo
【ライブコーディング】 GitLab Duoで体感する『未来の開発体験』 - エージェントからAIコードレビューまで - #gitlab
n11sh1
0
45
GitLab Mobile DevOps と SaaS runners on macOS (Beta) の紹介
n11sh1
1
540
【B-5】農家と流通業者のタッチポイントにLINE Botを導入した話/LINE Bot case studies touch points of farmers and distributors
n11sh1
0
2.2k
自社オンプレのGitLabアップデートの歴史/GitLab's Update History On-premises
n11sh1
2
1.1k
Design Forms of Bot
n11sh1
0
75
What's Hackenduro
n11sh1
0
60
Hackenduro2018 Blockchain team
n11sh1
0
55
Cryptocurrency and Blockchain
n11sh1
2
240
STAR MTGS@Startup Weekend Osaka
n11sh1
0
87
Other Decks in Design
See All in Design
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
650
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.7k
Liquid GlassとApp Intents
touyou
0
370
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
840
「UXとUIの違い」v2
shirasu3
0
250
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
Installing and Running decksh/pdfdeck
ajstarks
1
860
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
380
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
A Tale of Four Properties
chriscoyier
160
23k
Site-Speed That Sticks
csswizardry
11
880
Typedesign – Prime Four
hannesfritz
42
2.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Visualization
eitanlees
148
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Six Lessons from altMBA
skipperchong
28
4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Transcript
Bot ʹ͓͚Δ UI/UX ઃܭϊϋ
• Bot ։ൃ࣮ • UI/UX ઃܭϊϋ • ͳͥઃܭ͕ඞཁͳͷ͔ʁ • ͲͷΑ͏ʹઃܭ͢Δ͔ʁ
• Ͳ͏ͬͯϓϩτλΠϓΛ࡞Δ͔ʁ • ใऩू TIPS ΞδΣϯμ
• ߹ಉձࣾWVVUʢ͏ʔͿʣ • ৽نࣄۀͷ্ཱͪ͛ • גࣜձࣾZYYXʢ͡ʔ͘͢ʣ • WebγεςϜ/ΞϓϦͷडୗ։ൃ • גࣜձࣾࡔϊ్த
• ژͷࡊͷྲྀ௨ձࣾ • ੜଉ • େࡕɺژɺ౦ژ • ΤϯδχΞാग़ͰɺࠓϏδωεدΓͷࣄ ͯ͠Δਓ ࣗݾհ @n11sh1
• ϓϥοτϑΥʔϜ • LINE • త • Ո͕Էઌͷྲྀ௨ۀऀʹग़ՙใΛڞ༗ ͢ΔͨΊʢि1ճʣ •
ػೳ • ग़ՙใͷొʢex. τϚτ10kgΛ݄,ਫ, ۚʹग़ՙͰ͖Δʣ • גࣜձࣾࡔϊ్தʹͯՔಇத ࡊग़ՙใڞ༗ Bot
• ϓϥοτϑΥʔϜ • Slack • త • *OnboardingͰ໎ࢠʹͳΓ͕ͪ ͳͷͰɺϦʔυΛͭ͘Δ •
ػೳ • ৽نϝϯόʔʹɺඞਢใˍ λεΫͷ௨ • طଘϝϯόʔʹɺؔ࿈͢Δα ϒλεΫͷ௨ Welcome Bot * Onboarding ৫ͷҰһαʔϏεͷϢʔβʔͱͯ͠৽͘͠Ճೖͨ͠ ϝϯόʔʹख΄Ͳ͖Λߦ͍ɺ׳Εͤ͞Δϓϩηεͷ͜ͱ
ίΠϯૹۚ גՁ ͦͷଞ
͖ΐ͏͢༰ UI/UX ઃܭϊϋ ॻ੶ ࣮ମݧ
ͳͥઃܭ͕ඞཁͳͷ͔ʁ “transparent” user experience ҹʹΒͳ͍ ͬͯΒ͑ͳ͍ * Amir, Shevat. :
“Designing Bots: Creating Conversational Experiences”, 2017, No.673 ex. ϒϩοΫ͞ΕΔެࣜLINEΞΧϯτ
ͲͷΑ͏ʹઃܭ͢Δ͔ʁ શମ૾Λଊ͑Δ ࡉ෦ʹΛ͚Δ • ϓϥοτϑΥʔϜͷಛʢར༻Ϣʔ βʔ, ఏڙAPI ͳͲʣ • తˍػೳͷ໌֬Խ
• ϩΰ໊শ • ϢʔβʔͱBotͷձϑϩʔ • ίϯςϯπʢςΩετ, ը૾, ಈը, Ի, Ґஔใ, Ϙλϯʣ • AIʢࣗવݴޠॲཧʣͷಋೖɹͳͲ
ࡊग़ՙใڞ༗ Bot • ϓϥοτϑΥʔϜ • LINE • త • Ո͕Էઌͷྲྀ௨ۀऀʹग़ՙใΛڞ༗
͢ΔͨΊʢि1ճʣ • ػೳ • ग़ՙใͷొʢex. τϚτ10kgΛ݄,ਫ, ۚʹग़ՙՄೳͰ͢ɻʣ • גࣜձࣾࡔϊ్தʹͯՔಇத
Welcome Bot * Onboarding ৫ͷҰһαʔϏεͷϢʔβʔͱͯ͠৽͘͠Ճೖͨ͠ ϝϯόʔʹख΄Ͳ͖Λߦ͍ɺ׳Εͤ͞Δϓϩηεͷ͜ͱ • ϓϥοτϑΥʔϜ • Slack
• త • *OnboardingͰ໎ࢠʹͳΓ͕ͪ ͳͷͰɺϦʔυΛͭ͘Δ • ػೳ • ৽نϝϯόʔʹɺඞਢใˍ λεΫͷ௨ • طଘϝϯόʔʹɺؔ࿈͢Δα ϒλεΫͷ௨
ઃܭ͢Δ ̑ষҎ߱ʹॻ͍ͯ͋Δ͔ΒಡΜͰʂ ͩͱऴΘͬͯ͠·͏ͷͰ…
ઃܭ͢Δ 1. Branding, personality, and human involvement 2. AI 3.
The Conversation 4. Rich interactions 5. Context and memory 6. Discovery and installation 7. Engagement methods 8. Monetization * Amir, Shevat. : “Designing Bots: Creating Conversational Experiences”, 2017, No.673
ձͷछྨ λεΫओಋͷձ τϐοΫओಋͷձ • ͠ΓͱΓͳͲҙਤͷͳ͍ձ͕ϝΠϯ • ਖ਼֬ੑෆཁɺΉ͠Ζ༧֎ͷฦ͕ ٻΊΒΕΔ • ϧʔϧԽͮ͠Β͘AIͳͲ͕ඞཁ
• C͚ίϯςϯπ͕ଟ͍ • ୡঢ়گͷ֬ೝ, डऔ࣌ͷมߋ, ࠶ ୡґཔ • ਖ਼֬ੑ͕ٻΊΒΕΔ • ձΛϧʔϧԽͰ͖ΕAIͳͲෆཁ • B͚, C͚ͲͪΒ
Onboarding ͲͪΒ͕ ͍͍ͨʁ
Onboarding Ͳ͏ΞΫγϣϯͯ͠ྑ͍ͷ͔͔Βͳ͍ ʮ࠶ୡґཔʯͱςΩετೖྗʁ ͱΓ͋͑ͣԡͨ͠Β࣍ਐΊͦ͏ ࣍ճΞΫηε࣌͑Δ
Onboarding νϡʔτϦΞϧಈըϦϯΫΛఴ LINEΞϓϦͰYouTube࠶ੜ
ϧʔϧϕʔεͷձ STEP1 ૹΓঢ়൪߸Λ͖͘ STEP2 رୡ࣌Λ͖͘ STEP3 ࠷ऴ֬ೝ STEP4 มߋྃ
ϧʔϧϕʔεͷձ STEP3 ࠷ऴ֬ೝ STEP4 มߋྃ • ૹΓঢ়൪߸ͱرୡ࣌Λಉ࣌ʹೖྗ͞ΕͨΒʁ • ୡ࣌ʹʮຊʯʮʯͱೖྗ͞ΕͨΒʁ •
ૹΓঢ়൪߸ͱرୡ࣌Λٯʹೖྗ͞ΕͨΒʁ STEP1 ૹΓঢ়൪߸Λ͖͘ STEP2 رୡ࣌Λ͖͘
ࣗવݴޠཧղͱձͷཧ ࣗવݴޠཧղʢNatural Language Understandingʣ Ϣʔβʔೖྗ͔ΒҙਤʢIntentʣͱΩʔϫʔυʢEntityʣΛநग़͢Δɻ ex. Intentɿ࠶ୡґཔ EntityɿૹΓঢ়൪߸, رୡ࣌ʢຊʹ8݄3ɺʹᶃ18࣌ʙ20࣌ᶄ19࣌ʙ21࣌ʣ ձͷཧʢConversation
Managementʣ நग़ͨ͠Entity͕λεΫྃͷ݅Λຬ͍ͨͯ͠Δ͔Ͳ͏͔ɻ ex. رୡ͔࣌͠Ϣʔβʔೖྗ͞Ε͍ͯͳ͍߹ɺૹΓঢ়൪߸ͷೖྗΛଅ͢ɻ
վྑޙͷձ
Dialogflow https://dialogflow.com
ͦͷଞ Watson Assistant https://www.ibm.com/watson/jp-ja/developercloud/conversation.html LUIS https://www.luis.ai Amazon Lex https://aws.amazon.com/jp/lex/
LINE Bot Designer https://developers.line.me/ja/services/bot-designer/
Flex Message Simulator https://developers.line.me/console/fx/
Botsociety https://botsociety.io
Cacoo https://cacoo.com
ใऩू TIPS Chatbots Magazine https://chatbotsmagazine.com UX Collective - Bots https://uxdesign.cc/tagged/bots
The UX of Chatbots http://uxofchatbots.com BotList https://botlist.co botwiki https://botwiki.org
·ͱΊ • ҹʹΔˍͬͯΒ͏ͨΊʹઃܭ͢Δ • શମ૾Λଊ͑Δ • దͳϓϥοτϑΥʔϜΛબ͢Δ • తˍػೳΛ໌֬ʹ͢Δ •
ࡉ෦ʹΛ͚Δ • Onboarding͕ॏཁ • ϦονίϯςϯπͰϢʔβʔΤϯήʔδϦϯάΛߴΊΔ • AIʢࣗવݴޠॲཧʣMUSTͰͳ͍͕ɺUXͷ্ʹܨ͕Δ • Bot༻ϓϩτλΠϐϯάπʔϧͰ։ൃޮUPʂ
Thank U