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

by Marika Ikeda

Slide 1

Slide 1 text

AIͱਓ͕ؒڠಇ͢Δ ઀٬ମݧͮ͘Γ 2017.05.17 UI Crunch #10

Slide 2

Slide 2 text

ࣗݾ঺հ 2 池⽥茉莉花 2015೥3݄ʹઍ༿େֶେֶӃσβΠϯՊֶઐ߈ଔۀ 2015೥4݄ΑΓiettyͰ σβΠφʔɾϑϩϯτΤϯυΤϯδχΞ

Slide 3

Slide 3 text

3 ietty | νϟοτͰ࿩ͤΔ͓෦԰୳͠ΞϓϦ

Slide 4

Slide 4 text

1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. νϟοτϘοτͷUIσβΠϯͰ ؾΛ͚͍ͭͯΔ͜ͱ ຊ೔͓࿩͢Δ͜ͱ 4

Slide 5

Slide 5 text

5 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋

Slide 6

Slide 6 text

6 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ෆಈ࢈ઐ໳஌ࣝΛ࣋ͬͨΦϖϨʔλʔɾӦۀϚϯʹΑΔ ࣭໰ճ౴ɾ෺݅ఏҊɾ಺ݟҊ಺ɾ෺݅ܖ໿ͳͲ Ҿӽ͠ʹඞཁͳ΍ΓͱΓΛαʔϏε಺Ͱ׬݁Ͱ͖Δ

Slide 7

Slide 7 text

7 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ΍ΓͱΓ͠΍͍͢νϟοτUIͰ ϞόΠϧɾPCͳͲϚϧνϓϥοτϑΥʔϜͰαʔϏεఏڙ ෆಈ࢈԰Ͱͷ઀٬ͱ͍͏৔ॴͷ੍໿Λͳ͘͢ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ

Slide 8

Slide 8 text

8 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋ ͜ͷମݧΛਓྗΦϖϨʔγϣϯͰ΍Ζ͏ͱ͢Δͱ 24࣌ؒ365೔ͷஸೡͳ઀٬ରԠ͸ਖ਼௚ݫ͍͠

Slide 9

Slide 9 text

9 ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ | େ੾ʹ͍ͨ͠Ϣʔβʔମݧ ৴པͰ͖Δ ෆಈ࢈ͷϓϩͱ ΍ΓͱΓ ৔ॴΛ໰Θͣ खܰʹͰ͖Δ ͍ͭͰ΋ AIʹΑΔ઀٬αϙʔτͰ ʮ͍ͭͰ΋ʯαʔϏεఏڙΛΊ͟͢

Slide 10

Slide 10 text

iettyͷ͘͠Έ 10 ઀٬ͷ޻ఔʹΑͬͯਓ޻஌ೳɺνϟοτηϯλʔɺ ӦۀϚϯ͕෼୲ͯ͠઀٬Λߦ͍ͬͯΔ ⼊居希望者物件提案質問回答物件提案⼀次対応⼈⼯知能希望条件質問⾃社営業業務委託会社 ietty App チャットセンター内⾒・契約サポート

Slide 11

Slide 11 text

11 αʔϏε಺ͰAI͸ͲͷΑ͏ʹಇ͍͍ͯΔͷ͔ ࣗಈԠ౴ Ϣʔβͷߦಈ΍ൃݴʹରͯ͠ɺࣗಈతʹϝοηʔδΛૹ৴͢Δ ෺݅ͷఏҊ ୯ʹݕࡧ݁ՌΛฦ͚ͩ͢Ͱ͸ͳ͘ɺෆಈ࢈ͷઐ໳Ոͷ஌ݟ΍͜Ε·Ͱͷ ߦಈΛߟྀͯ͠෯޿͍ʮఏҊʯΛߦ͏ ΦϖϨʔλαϙʔτ ϢʔβͷߦಈΛΦϖϨʔλʹ௨஌͠ɺΞΫγϣϯΛଅ͢ AI͸ૉૣ͍൓Ԡɾ໢ཏతͳରԠ͕΋ͱΊΒΕΔ৔໘ͰՔಇத

Slide 12

Slide 12 text

12 ietty botࣄྫ | ࣗಈఏҊbot ొ࿥௚ޙ&ఆظతʹ෺݅Λ͝ఏҊɻ ֘౰݅਺͕গͳ͍৔߹͸৚݅Λ؇࿨͢Δ͜ͱ΋ɻ

Slide 13

Slide 13 text

13 ietty botࣄྫ |΋ͬͱݟ͍ͨbot νϟοτͰʮ΋ͬͱݟ͍ͨʯͱ ࿩͔͚͠Δͱ෺݅Λ୳ͯ͠͝ఏҊ

Slide 14

Slide 14 text

14 ietty botࣄྫ |Ωʔϫʔυbot ಛఆͷΩʔϫʔυͷؚ·ΕΔൃݴ΍ධՁ͕ ߦΘΕͨ৔߹ʹΦϖϨʔλʹνϟοτ௨஌

Slide 15

Slide 15 text

15 ietty botࣄྫ | ੒໿༧ଌYomi-bot Ϣʔβొ࿥௚ޙͷଐੑͱߦಈ͔Βɺ ͦͷϢʔβͷ੒໿֬཰ΛػցֶशͰ༧ଌ

Slide 16

Slide 16 text

16 ·ͱΊ | ͳͥAIͷಋೖʹࢸͬͨͷ͔ AIʹΑΔҰ࣍ରԠɾ઀٬αϙʔτͰ ͙͢ʹ൓Ԡ͕ฦͬͯ͘ΔαʔϏεମݧͱ ॏཁͳ৔໘Ͱ৴པͰ͖Δ৘ใΛ΍ΓͱΓͰ͖ΔମݧΛཱ྆͢Δ AIのみで⼀次対応 AI + ⼈間でしっかり対応ユーザー⾏動通知 12:34 ݘͷଟ಄ࣂ͍͸͜ͷ෺݅͸ՄೳͰ͔͢

Slide 17

Slide 17 text

1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. UIσβΠϯͰؾΛ͚͍ͭͯΔ͜ͱ 17

Slide 18

Slide 18 text

18 AIΛαʔϏεʹಋೖ͢Δϑϩʔ エンジニアリサーチ企画フロー組み⽴てスクリプト作成デザイン実装運⽤スクリプト調整 ٕज़ಛੑΛཧղͨ͠اըɾ࣮૷ΛΤϯδχΞͱ ݱ৔ͷ઀٬Ͱͷମݧ࡞ΓΛෆಈ࢈઀٬νʔϜͱڞ૑͢Δ プロダクトマネージャー(接客チーム責任者）デザイナー

Slide 19

Slide 19 text

19 AIΛαʔϏεʹಋೖ͢Δͱ͖ͷମݧ࡞Γͷεςοϓ 1. AIͷಛੑΛ஌Δ ͦ΋ͦ΋΍Γ͍ͨ͜ͱ͸AIͰ࣮ݱ͢Δͷ͕ޮՌత͔ɺٕज़ಛੑ͔Βൃ૝͢ΔͨΊΤ ϯδχΞͱڞ༗͢Δ 2. ޮՌతͳAIಋೖγʔϯΛݟۃΊΔ ಛੑʹԠͯ͡ਓؒͱ઀٬γʔϯΛ෼୲͢Δ 3. AIͷ୲౰͢Δγʔϯͷ۩ମԽ ϓϩτλΠϐϯά΍ϥΠςΟϯάͳͲϓϩμΫτϚωʔδϟʔ·ͨ͸σβΠφʔ͕ ϝΠϯʹͳͬͯ୲౰͢ΔϑΣʔζ

Slide 20

Slide 20 text

20 ·ͣ͸AIͷಛੑΛ஌Δ | AI(νϟοτϘοτ)ͱΦϖϨʔλͷಛੑൺֱ AI(チャットボット) オペレータ(⼈間) ɾ24ʷ365ՔಇͰ͖Δ ɾϢʔβͷΞΫγϣϯʹଈԠͰ͖Δ ɾશͯͷϢʔβΛ໢ཏͰ͖Δ ɾ୯७ͳݕࡧ͸଎͍ ɾӡ༻ίετ͕͍҆ ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ ɾͲΜͳ࣭໰ʹ΋ରԠՄೳ ɾؒҧ͍͕͋ͬͯ΋గਖ਼Ͱ͖Δ ɾपล஌ࣝ·ͰؚΊͨఏҊ͕Ͱ͖Δ ɾೲಘײͷ͋ΔϝοηʔδΛग़ͤΔ ɾରԠͰ͖Δਓ਺/࣌ؒʹݶք͕͋Δ ɾରԠ͕஗ΕΔ͜ͱ͕͋Δ ɾภͬͨఏҊʹͳΔՄೳੑ͕͋Δ ɾҰൠతʹߴίετ ϝ Ϧ ο τ σ ϝ Ϧ ο τ AI͸ʮ଎͞ͱ໢ཏੑʯɺਓؒ͸ʮਂ͞ɺ޿͞ʯͱʮײ৘ʯ͕ڧΈ

Slide 21

Slide 21 text

21 αʔϏεͷͲͷ෦෼ΛAIԽͰ͖Δ͔ 1 ू٬ 2 ώΞϦϯά 3 ݕࡧ/ఏҊ 4 ࢼ༻/಺ݟ 5 ߪೖ/ܖ໿ 広告⾃社メディア⼝コミユーザ判別希望条件設定商品提案評価フィードバック商品説明店舗案内内⾒商品発送決済契約 ࣭໰Ԡ౴ どこが効果⾼い？⼈⼯知能

Slide 22

Slide 22 text

22 AIͷಋೖ༰қੑͷࢦඪ ਓ޻஌ೳɾνϟοτϘοτͷϏδωε΁ͷಋೖΛݕ౼͢ΔͨΊͷ4ͭͷࢦඪ • ରԠ͢Δ৔໘(γʔϯ)ͷछྨ͕Ͳͷ ఔ౓͋Δ͔ • ରԠதͷγʔϯΛ൑ఆͰ͖Δ͔ ৔໘ݶఆੑ • γʔϯ୯ҐͰରԠऀͷൃݴύλʔ ϯ͕Ͳͷఔ౓͋Δ͔ • ൃݴͷύλʔϯ(झࢫ)ΛಛఆՄೳ͔ ςʔϚݶఆੑ • ൃݴ಺༰͕աڈͷൃݴʹͲͷఔ౓ ґଘ͢Δ͔ • ࢦࣔޠɺ(ओޠ΍໨తޠͷ)লུ͕Ͳ ͷఔ౓ؚ·ΕΔ͔ ൃݴಠཱੑ • ֤ൃݴύλʔϯʹର͢Δճ౴ύ λʔϯ͕Ͳͷఔ౓࡞੒͠΍͍͔͢ • ٙ໰จʹରͯ͠ͷσʔλͷࣄલऩ ू͕Մೳ͔ ճ౴༰қੑ

Slide 23

Slide 23 text

23 ςʔϚݶఆੑͱճ౴༰қੑͷؔ܎ 回答が困難回答が容易テーマが限定的テーマが多様⼈による対話チャットボット⼈⼒/チャットボット併⽤ ॅډͷपล؀ڥ ʹ͍ͭͯ ϖοτͷ ଟ಄ࣂ͍͸Մೳʁ ܖ໿खଓ͖ʹ ͍ͭͯ ಺ݟ೔͸ ͍ͭʹ͢Δʁ ⼈⼒/チャットボット併⽤ Կਓ฻Β͠ͷ ༧ఆʁ 伴ͷ ड͚औΓํ͸ʁ

Slide 24

Slide 24 text

24 ઀٬γʔϯΛࣗಈରԠ͢ΔνϟοτϘοτΛ૊ΈཱͯΔ プロトタイピングを繰り返し、チャットボットの対応するシーンの流れ・回答の幅について具体化していくフローチャートで条件分岐確認プロトタイプ確認

Slide 25

Slide 25 text

25 botͷܭըɾମݧͷσβΠϯ チャットコンポーネントを組み合わせだけでできる AI対応フローはデザイナー不在でも実装可能汎⽤的なチャットコンポーネントサービス独⾃のチャットコンポーネント＋ ໔ڐূKQH νϟοτͷจষͰ͢ɻνϟο τͷจষͰ͢ɻ νϟοτͷʂʂʂ จষͰ͢ɻ

Slide 26

Slide 26 text

26 ΤϯδχΞ͚ͩͰ࡞ͬͨbotࣄྫ ઀٬ࢧԉͷslackbot͸ֆจࣈͳͲΛ׆༻͍ͯ͠Δ Ϣʔβʔͷߦಈݕ஌Ͱૉૣ͘ΦϖϨʔλʔ͕൓ԠͰ͖ΔͷͰ༗༻

Slide 27

Slide 27 text

27 botͷܭըɾମݧͷσβΠϯ 既存のUIコンポーネントを組み合わせで実現できるUIはデザイナー不在でもAIフロー実装可能デザイナーはどうするかデザイナーは新規UIコンポーネント設計と演出調整で、技術・ビジネス視点とユーザー視点のバランスをとった接客体験を作っていく役割

Slide 28

Slide 28 text

1. ͳͥɺAIͷಋೖʹࢸͬͨͷ͔ 2. ઀٬ମݧͷσβΠϯϑϩʔ 3. νϟοτϘοτͷUIσβΠϯͰ ؾΛ͚͍ͭͯΔ͜ͱ

Slide 29

Slide 29 text

29 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ チャットボット型AIのデメリットには、ユーザーからの⼊⼒処理の問題が多い νϟοτϘοτܕͷσϝϦοτ

Slide 30

Slide 30 text

30 νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ 実現したい接客フローに応じてチャットコンポーネントを選択・デザインする際は AIの弱点をUIでカバーするように意識する ɾ૝ఆ֎ͷ࣭໰ʹ͸ճ౴Ͱ͖ͳ͍ ɾ೔ຊޠͷ༳ΕʹରԠ͖͠Εͳ͍ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾ࿈ଓ͢Δʮର࿩ʯ͸ࠔ೉ νϟοτϘοτܕͷσϝϦοτ

Slide 31

Slide 31 text

31 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ|೔ຊޠͷ༳ΕରԠͷUIΞϓϩʔνྫ 選択ボタンでユーザーも⼿軽な⼊⼒になり質問返答をトリガーに別のフローを起動できる

Slide 32

Slide 32 text

32 1. νϟοτϘοτͷٕज़తऑ఺ΛUIͰΧόʔ͢Δ| ೔ຊޠͷ༳ΕରԠͷUIΞϓϩʔνྫ 想定外の回答が来ることが予想される「その他」は内容を問わず、⼊⼒データの存在チェックを次のトリガーにする

Slide 33

Slide 33 text

33 2. νϟοτϘοτͷڧΈΛੜ͔͢| ࠶ར༻ՄೳͳUIͰbotͷߴ଎࣮૷ʹͭͳ͛Δ 他のフローでも利⽤可能な汎⽤性⾼いUIに要素分解してデザイン・設計すると次回以降はデザイン・フロントエンド実装コストを減らしてbotフローを実現できる ೔෇Λฉ͖͍ͨ ߋ৽೔ ݟֶ༧ఆ೔ ʜ ෳ਺બ୒Ͱճ౴ͯ͠΋Β͍͍ͨ ؒऔΓ ͩ͜ΘΓͷ৚݅ ʜ ૹ৴͢Δ όεɾτΠϨผ ΦʔτϩοΫ όΠΫஔ͖৔ ಠཱચ໘୆ ϖοτՄ ϑϩʔϦϯά ֊Ҏ্ Թਫચড়ศ࠲ Ҿӽ͠༧ఆ೔Λબ୒͍ͯͩ͘͠͞ ૹ৴

Slide 34

Slide 34 text

34 3. ϥΠςΟϯάͰௐ੔Ͱ͖ΔUIվળ ɾԠ౴Λؒҧ͑ͨ৔߹ʹగਖ਼ࠔ೉ ɾϑΥʔϜUIͱൺ΂ɺೖྗॱ൪ͷࣗ༝౓͕ͳ͍ ɾ࣭໰Λ࿈ଓͯ͠ฉ͘ϑϩʔͷ৔߹ɺऴΘΓ͕ݟ͑ʹ͍͘ ϑΥʔϜUIͱൺֱͨ͠ࡍͷνϟοτϘοτܕUIͷσϝϦοτ フィードバックメッセージでユーザーに語りかけてナビゲーションする

Slide 35

Slide 35 text

35 3. ϥΠςΟϯάͰௐ੔Ͱ͖ΔUIվળ | ϢʔβʔʹޠΓ͔͚ΔφϏήʔγϣϯ どれぐらいの量があるかメッセージで伝える途中で不安にならないように現在位置を伝える現在位置を伝える際メッセージも合わせて伝えることで対話しながらのヒアリングのような演出でより接客らしい体験になる

Slide 36

Slide 36 text

36 νϟοτϘοτͷUIσβΠϯͰؾΛ͚͍ͭͯΔ͜ͱ·ͱΊ 1. ೖྗUIͰ͸σʔλͷೖΓํ͕ νϟοτϘοτAIͷऑ఺ͱͳ͍ͬͯͳ͍͔ ҙࣝ͢Δ 2. UI͸࠶ར༻Մೳͳঢ়ଶʹ͢Δ 3. ϑΟʔυόοΫϝοηʔδͰϢʔβʔΛ ಓҊ಺͢Δ

Slide 37

Slide 37 text

37 νϟοτϘοτAIͱਓͷڠಇͰ ৴པͰ͖Δෆಈ࢈ͷ΍ΓͱΓΛ ͍ͭͰ΋Ͱ͖Δੈք΁

Slide 38

Slide 38 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ iettyͰ͸Ұॹʹ઀٬ମݧΛͭ͘Δ σβΠφʔɾΤϯδχΞͷ஥ؒΛืू͍ͯ͠·͢ʂ