AIと人間が協働する接客体験づくり UICrunch#10 AIと人を繋ぐ、UIの可能性

Event URL: https://ui-crunch.connpass.com/event/54732/
Speaker: 池田茉莉花 (@marikajas)
UICrunch#10 AIと人を繋ぐ、UIの可能性にて3番目のスピーカーとして登壇させていただいた時の登壇資料です。

iettyのAIと人が分担したオペレーションフロー事例より新しいチャットボットフローのつくりかた、UIで気をつけていることを紹介しました。

懇親会でいただいた質問などについて補足した記事もあわせてご覧ください
https://www.wantedly.com/companies/ietty/post_articles/62659

Transcript

1. AIͱਓ͕ؒڠಇ͢Δ ઀٬ମݧͮ͘Γ 2017.05.17 UI Crunch #10
2. ࣗݾ঺հ 2 池⽥茉莉花 2015೥3݄ʹઍ༿େֶେֶӃσβΠϯՊֶઐ߈ଔۀ 2015೥4݄ΑΓiettyͰ σβΠφʔɾϑϩϯτΤϯυΤϯδχΞ
3. 3 ietty | νϟοτͰ࿩ͤΔ͓෦԰୳͠ΞϓϦ
4. 1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. νϟοτϘοτͷUIσβΠϯͰ ؾΛ͚͍ͭͯΔ͜ͱ ຊ೔͓࿩͢Δ͜ͱ 4
5. 5 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋
6. 6 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ෆಈ࢈ઐ໳஌ࣝΛ࣋ͬͨΦϖϨʔλʔɾӦۀϚϯʹΑΔ ࣭໰ճ౴ɾ෺݅ఏҊɾ಺ݟҊ಺ɾ෺݅ܖ໿ͳͲ Ҿӽ͠ʹඞཁͳ΍ΓͱΓΛαʔϏε಺Ͱ׬݁Ͱ͖Δ
7. 7 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ΍ΓͱΓ͠΍͍͢νϟοτUIͰ ϞόΠϧɾPCͳͲϚϧνϓϥοτϑΥʔϜͰαʔϏεఏڙ ෆಈ࢈԰Ͱͷ઀٬ͱ͍͏৔ॴͷ੍໿Λͳ͘͢ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ
8. 8 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋ ͜ͷମݧΛਓྗΦϖϨʔγϣϯͰ΍Ζ͏ͱ͢Δͱ 24࣌ؒ365೔ͷஸೡͳ઀٬ରԠ͸ਖ਼௚ݫ͍͠
9. 9 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋ AIʹΑΔ઀٬αϙʔτͰ ʮ͍ͭͰ΋ʯαʔϏεఏڙΛΊ͟͢
10. iettyͷ͘͠Έ 10 ઀٬ͷ޻ఔʹΑͬͯਓ޻஌ೳɺνϟοτηϯλʔɺ ӦۀϚϯ͕෼୲ͯ͠઀٬Λߦ͍ͬͯΔ ⼊居希望者 物件提案 質問回答 物件提案 ⼀次対応 ⼈⼯知能 希望条件 質問 ⾃社営業 業務委託 会社 ietty App チャットセンター 内⾒・契約 サポート
11. 11 αʔϏε಺ͰAI͸ͲͷΑ͏ʹಇ͍͍ͯΔͷ͔ ࣗಈԠ౴ Ϣʔβͷߦಈ΍ൃݴʹରͯ͠ɺࣗಈతʹϝοηʔδΛૹ৴͢Δ ෺݅ͷఏҊ ୯ʹݕࡧ݁ՌΛฦ͚ͩ͢Ͱ͸ͳ͘ɺෆಈ࢈ͷઐ໳Ոͷ஌ݟ΍͜Ε·Ͱͷ ߦಈΛߟྀͯ͠෯޿͍ʮఏҊʯΛߦ͏ ΦϖϨʔλαϙʔτ ϢʔβͷߦಈΛΦϖϨʔλʹ௨஌͠ɺΞΫγϣϯΛଅ͢ AI͸ૉૣ͍൓Ԡɾ໢ཏతͳରԠ͕΋ͱΊΒΕΔ৔໘ͰՔಇத
12. 12 ietty botࣄྫ | ࣗಈఏҊbot ొ࿥௚ޙ&ఆظతʹ෺݅Λ͝ఏҊɻ ֘౰݅਺͕গͳ͍৔߹͸৚݅Λ؇࿨͢Δ͜ͱ΋ɻ
13. 13 ietty botࣄྫ |΋ͬͱݟ͍ͨbot νϟοτͰʮ΋ͬͱݟ͍ͨʯͱ ࿩͔͚͠Δͱ෺݅Λ୳ͯ͠͝ఏҊ
14. 14 ietty botࣄྫ |Ωʔϫʔυbot ಛఆͷΩʔϫʔυͷؚ·ΕΔൃݴ΍ධՁ͕ ߦΘΕͨ৔߹ʹΦϖϨʔλʹνϟοτ௨஌
15. 15 ietty botࣄྫ | ੒໿༧ଌYomi-bot Ϣʔβొ࿥௚ޙͷଐੑͱߦಈ͔Βɺ ͦͷϢʔβͷ੒໿֬཰ΛػցֶशͰ༧ଌ
16. 16 ·ͱΊ | ͳͥAIͷಋೖʹࢸͬͨͷ͔ AIʹΑΔҰ࣍ରԠɾ઀٬αϙʔτͰ ͙͢ʹ൓Ԡ͕ฦͬͯ͘ΔαʔϏεମݧͱ ॏཁͳ৔໘Ͱ৴པͰ͖Δ৘ใΛ΍ΓͱΓͰ͖ΔମݧΛཱ྆͢Δ AIのみで⼀次対応 AI + ⼈間でしっかり対応 ユーザー ⾏動通知 12:34 ݘͷଟ಄ࣂ͍͸͜ͷ෺݅͸ՄೳͰ͔͢
17. 1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. UIσβΠϯͰؾΛ͚͍ͭͯΔ͜ͱ 17
18. 18 AIΛαʔϏεʹಋೖ͢Δϑϩʔ エンジニア リサーチ 企画 フロー組み⽴て スクリプト作成 デザイン 実装 運⽤ スクリプト調整 ٕज़ಛੑΛཧղͨ͠اըɾ࣮૷ΛΤϯδχΞͱ ݱ৔ͷ઀٬Ͱͷମݧ࡞ΓΛෆಈ࢈઀٬νʔϜͱڞ૑͢Δ プロダクトマネージャー(接客チーム責任者） デザイナー
19. 19 AIΛαʔϏεʹಋೖ͢Δͱ͖ͷମݧ࡞Γͷεςοϓ 1. AIͷಛੑΛ஌Δ ͦ΋ͦ΋΍Γ͍ͨ͜ͱ͸AIͰ࣮ݱ͢Δͷ͕ޮՌత͔ɺٕज़ಛੑ͔Βൃ૝͢ΔͨΊΤ ϯδχΞͱڞ༗͢Δ 2. ޮՌతͳAIಋೖγʔϯΛݟۃΊΔ ಛੑʹԠͯ͡ਓؒͱ઀٬γʔϯΛ෼୲͢Δ 3. AIͷ୲౰͢Δγʔϯͷ۩ମԽ ϓϩτλΠϐϯά΍ϥΠςΟϯάͳͲϓϩμΫτϚωʔδϟʔ·ͨ͸σβΠφʔ͕ ϝΠϯʹͳͬͯ୲౰͢ΔϑΣʔζ
20. 20 ·ͣ͸AIͷಛੑΛ஌Δ | AI(νϟοτϘοτ)ͱΦϖϨʔλͷಛੑൺֱ AI(チャットボット) オペレータ(⼈間) ɾ24ʷ365ՔಇͰ͖Δ ɾϢʔβͷΞΫγϣϯʹଈԠͰ͖Δ ɾશͯͷϢʔβΛ໢ཏͰ͖Δ ɾ୯७ͳݕࡧ͸଎͍ ɾӡ༻ίετ͕͍҆ ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ ɾͲΜͳ࣭໰ʹ΋ରԠՄೳ ɾؒҧ͍͕͋ͬͯ΋గਖ਼Ͱ͖Δ ɾपล஌ࣝ·ͰؚΊͨఏҊ͕Ͱ͖Δ ɾೲಘײͷ͋ΔϝοηʔδΛग़ͤΔ ɾରԠͰ͖Δਓ਺/࣌ؒʹݶք͕͋Δ ɾରԠ͕஗ΕΔ͜ͱ͕͋Δ ɾภͬͨఏҊʹͳΔՄೳੑ͕͋Δ ɾҰൠతʹߴίετ ϝ Ϧ ο τ σ ϝ Ϧ ο τ AI͸ʮ଎͞ͱ໢ཏੑʯɺਓؒ͸ʮਂ͞ɺ޿͞ʯͱʮײ৘ʯ͕ڧΈ
21. 21 αʔϏεͷͲͷ෦෼ΛAIԽͰ͖Δ͔ 1 ू٬ 2 ώΞϦϯά 3 ݕࡧ/ఏҊ 4 ࢼ༻/಺ݟ 5 ߪೖ/ܖ໿ 広告 ⾃社メディア ⼝コミ ユーザ判別 希望条件設定 商品提案 評価 フィードバック 商品説明 店舗案内 内⾒ 商品発送 決済 契約 ࣭໰Ԡ౴ どこが効果⾼い？ ⼈⼯知能
22. 22 AIͷಋೖ༰қੑͷࢦඪ ਓ޻஌ೳɾνϟοτϘοτͷϏδωε΁ͷಋೖΛݕ౼͢ΔͨΊͷ4ͭͷࢦඪ • ରԠ͢Δ৔໘(γʔϯ)ͷछྨ͕Ͳͷ ఔ౓͋Δ͔ • ରԠதͷγʔϯΛ൑ఆͰ͖Δ͔ ৔໘ݶఆੑ • γʔϯ୯ҐͰରԠऀͷൃݴύλʔ ϯ͕Ͳͷఔ౓͋Δ͔ • ൃݴͷύλʔϯ(झࢫ)ΛಛఆՄೳ͔ ςʔϚݶఆੑ • ൃݴ಺༰͕աڈͷൃݴʹͲͷఔ౓ ґଘ͢Δ͔ • ࢦࣔޠɺ(ओޠ΍໨తޠͷ)লུ͕Ͳ ͷఔ౓ؚ·ΕΔ͔ ൃݴಠཱੑ • ֤ൃݴύλʔϯʹର͢Δճ౴ύ λʔϯ͕Ͳͷఔ౓࡞੒͠΍͍͔͢ • ٙ໰จʹରͯ͠ͷσʔλͷࣄલऩ ू͕Մೳ͔ ճ౴༰қੑ
23. 23 ςʔϚݶఆੑͱճ౴༰қੑͷؔ܎ 回答が困難 回答が容易 テーマが限定的 テーマが多様 ⼈による対話 チャットボット ⼈⼒/チャットボット併⽤ ॅډͷपล؀ڥ ʹ͍ͭͯ ϖοτͷ ଟ಄ࣂ͍͸Մೳʁ ܖ໿खଓ͖ʹ ͍ͭͯ ಺ݟ೔͸ ͍ͭʹ͢Δʁ ⼈⼒/チャットボット併⽤ Կਓ฻Β͠ͷ ༧ఆʁ 伴ͷ ड͚औΓํ͸ʁ
24. 24 ઀٬γʔϯΛࣗಈରԠ͢ΔνϟοτϘοτΛ૊ΈཱͯΔ プロトタイピングを繰り返し、チャットボットの対応する シーンの流れ・回答の幅について具体化していく フローチャートで条件分岐確認 プロトタイプ確認
25. 25 botͷܭըɾମݧͷσβΠϯ チャットコンポーネントを組み合わせだけでできる AI対応フローはデザイナー不在でも実装可能 汎⽤的な チャットコンポーネント サービス独⾃の チャットコンポーネント ＋ ໔ڐূKQH 
     νϟοτͷจষͰ͢ɻνϟο τͷจষͰ͢ɻ νϟοτͷʂʂʂ จষͰ͢ɻ
26. 26 ΤϯδχΞ͚ͩͰ࡞ͬͨbotࣄྫ ઀٬ࢧԉͷslackbot͸ֆจࣈͳͲΛ׆༻͍ͯ͠Δ Ϣʔβʔͷߦಈݕ஌Ͱૉૣ͘ΦϖϨʔλʔ͕൓ԠͰ͖ΔͷͰ༗༻
27. 27 botͷܭըɾମݧͷσβΠϯ 既存のUIコンポーネントを組み合わせで実現できるUIは デザイナー不在でもAIフロー実装可能 デザイナーはどうするか デザイナーは新規UIコンポーネント設計と演出調整で、 技術・ビジネス視点とユーザー視点のバランスをとった 接客体験を作っていく役割
28. 1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. νϟοτϘοτͷUIσβΠϯͰ ؾΛ͚͍ͭͯΔ͜ͱ
29. 29 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ チャットボット型AIのデメリットには、 ユーザーからの⼊⼒処理の問題が多い νϟοτϘοτܕͷσϝϦοτ
30. 30 νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ 実現したい接客フローに応じて チャットコンポーネントを選択・デザインする際は AIの弱点をUIでカバーするように意識する ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ νϟοτϘοτܕͷσϝϦοτ
31. 31 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ|೔ຊޠͷ༳ΕରԠͷUIΞϓϩʔνྫ 選択ボタンでユーザーも⼿軽な⼊⼒になり 質問返答をトリガーに別のフローを起動できる
32. 32 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ| ೔ຊޠͷ༳ΕରԠͷUIΞϓϩʔνྫ 想定外の回答が来ることが予想される「その他」は 内容を問わず、⼊⼒データの存在チェックを次のトリガーにする
33. 33 2. νϟοτϘοτͷڧΈΛੜ͔͢| ࠶ར༻ՄೳͳUIͰbotͷߴ଎࣮૷ʹͭͳ͛Δ 他のフローでも利⽤可能な汎⽤性⾼いUIに 要素分解してデザイン・設計すると 次回以降はデザイン・フロントエンド実装 コストを減らしてbotフローを実現できる ೔෇Λฉ͖͍ͨ ߋ৽೔ 
    ݟֶ༧ఆ೔ 
    ʜ ෳ਺બ୒Ͱճ౴ͯ͠΋Β͍͍ͨ ؒऔΓ 
    ͩ͜ΘΓͷ৚݅ 
    ʜ ૹ৴͢Δ όεɾτΠϨผ ΦʔτϩοΫ όΠΫஔ͖৔ ಠཱચ໘୆ ϖοτՄ ϑϩʔϦϯά ֊Ҏ্ Թਫચড়ศ࠲ Ҿӽ͠༧ఆ೔Λબ୒͍ͯͩ͘͠͞ ૹ৴ 
34. 34 3. ϥΠςΟϯάͰௐ੔Ͱ͖ΔUIվળ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾϑΥʔϜUIͱൺ΂ɺೖྗॱ൪ͷࣗ༝౓͕ͳ͍ ɾ࣭໰Λ࿈ଓͯ͠ฉ͘ϑϩʔͷ৔߹ɺऴΘΓ͕ݟ͑ʹ͍͘ ϑΥʔϜUIͱൺֱͨ͠ࡍͷνϟοτϘοτܕUIͷσϝϦοτ フィードバックメッセージで ユーザーに語りかけてナビゲーションする
35. 35 3. ϥΠςΟϯάͰௐ੔Ͱ͖ΔUIվળ | ϢʔβʔʹޠΓ͔͚ΔφϏήʔγϣϯ どれぐらいの量があるか メッセージで伝える 途中で不安にならないように 現在位置を伝える 現在位置を伝える際メッセージも合わせて 伝えることで対話しながらのヒアリングの ような演出でより接客らしい体験になる
36. 36 νϟοτϘοτͷUIσβΠϯͰؾΛ͚͍ͭͯΔ͜ͱ·ͱΊ 1. ೖྗUIͰ͸σʔλͷೖΓํ͕ νϟοτϘοτAIͷऑ఺ͱͳ͍ͬͯͳ͍͔ ҙࣝ͢Δ 2. UI͸࠶ར༻Մೳͳঢ়ଶʹ͢Δ 3. ϑΟʔυόοΫϝοηʔδͰϢʔβʔΛ ಓҊ಺͢Δ
37. 37 νϟοτϘοτAIͱਓͷڠಇͰ ৴པͰ͖Δෆಈ࢈ͷ΍ΓͱΓΛ ͍ͭͰ΋Ͱ͖Δੈք΁
38. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ iettyͰ͸Ұॹʹ઀٬ମݧΛͭ͘Δ σβΠφʔɾΤϯδχΞͷ஥ؒΛืू͍ͯ͠·͢ʂ