AI系 B2B サービスの UI/UXデザイナー/エンジニアがハマるところ

TigerSpike さん主催のデザイナー忘年会での発表資料
https://tigerspike.connpass.com/event/105839/

Web UI と Physical UI のデザインでハマったポイントをご紹介

Transcript

1. AIܥ B2B αʔϏεͷ UI/UXσβΠφʔ/ΤϯδχΞ͕ϋϚΔͱ͜Ζ Chief Story Architect Motokazu Nishimura σβΠφʔ๨೥ձ by Tigerspike Tokyo ʙΈΜͳͰޠΔσβΠϯࣦഊஊʙ 11.22
2. https://mtkz.info @motokazu ੢ଜ ݩҰ νʔϑετʔϦʔΞʔΩςΫτ Chief Story Architect (UX designer / engineer) ΋ͱ͔ͣ ʹ͠ΉΒ σβΠϯࢥߟΛ͖͔͚ͬʹɺαʔϏεσβΠϯɺ UXσβΠϯʹ໨֮ΊݚमߨࢣΛߦ͏ͳͲσβΠϯʹ ؔ͢ΔܦݧΛੵΜͩUIσβΠϯ΋͢ΔΤϯδχΞ
3. 2016೥11݄ ૑ۀͷ౦େൃAIϕϯνϟʔ ͢΂ͯͷϏδωεύʔιϯʹ࠷ߴͷΠϯςϯϦδΣϯεΛಧ͚ɺ ҙࢥܾఆͷ࣭Λ޲্ͤ͞Δ͜ͱͰɺاۀͷڝ૪ྗΛߴΊΔ
4. Story Architect ͷ͓࢓ࣄ Art Section Design Section Vision Concept Metaphor Prototype for design Concept (Hypothesis) Ϣʔβʔཧղ(ϖϧιφɺ؍࡯ɺStory as-is, ײ৘, Journey) ΞΠσΞ(ΞΠσΞ,big idea, Mood-board, Story of WOW) System Section Lean Canvas Prototyping & Validation z໰͍z zղܾࡦz z༗ػతͳ࢓૊Έͱͯ͠z Story Architecting Service Blueprint Development Section zܗʹ͢Δz Develop frontend / backend system
5. ΤϯδχΞͱσβΠφʔ ΠϯϑϥʢVM , ίϯςφʣ ϓϥοτϑΥʔϜʢϛυϧ΢ΣΞʣ PaaS ΞϓϦέʔγϣϯαʔόʔαΠυ ΞϓϦέʔγϣϯΫϥΠΞϯταΠυ
 ʢUI logicʣ άϥϑΟοΫσβΠϯ, ελΠϦϯά ʢUI/UX visualʣ αʔϏεσβΠϯ ʙ2015೥͙Β͍ ࠷ۙ ˞೥ʹ͍ͭͯ͸ࢲͷܦݧͱΠϯλʔωοτ৘ใͰ͢ͷͰɺਖ਼֬Ͱ͸͋Γ·ͤΜɻ ࣍ʂ 2017೥ͷࢿྉ
6. https://mtkz.info
7. Web UI Physical UI
8. Web UI
9. ຖ೔ ਺ेສ݅ͷ WebχϡʔεΛऩू AIΛ༻͍ͯϢʔβʔຖʹ ॏཁͳχϡʔεΛ഑৴ BtoB WebαʔϏε Our product
10. 2018/7 2018/11 C Mobile webվम Top ϖʔδ σβΠϯมߋ ৽ػೳσβΠϯมߋ طଘػೳ࡮৽ ৽ػೳ σβΠϯ UIσβΠϯมߋ UIσβΠϯ௥Ճ νϡʔτϦΞϧ௥Ճ ৽֓೦௥Ճ ৽ػೳ௥Ճ ϞόΠϧUIσβΠϯมߋ slack UIσβΠϯ ϝʔϧσβΠϯ UIσβΠϯมߋ ৽ϓϩμΫτUI ConceptσβΠϯ
11. Ծઆ.1 “UI / UX design / Engineering Ұ؏ͯ͠΍Δͱ࠷େݶͷՁ஋Λಧ͚ΒΕΔ͸ͣ” AI࣌୅ʹ͓͍ͯ͸
12. AI࣌୅ʹ͓͍ͯ͸ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ AI Կ͕ग़ͯ͘Δͷʁʂ ࢖͑Δܗʹͯ͠ʂ Engineering (backend) UI Design Engineering (frontend) ͜Ώͷ࡞ΕΔʁʁ ͍΍ɺɺσʔλݟͯΈͳ͍ͱ… Before ͜͜ͰૉఢϫʔυΛ ݟΕͨΒخ͍͠ʂ UX Design
13. AI࣌୅ʹ͓͍ͯ͸ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ σʔλ AI ԿͰͯ͘Δͷʁʂ After Engineering (backend) UI Design Engineering ͜ͷϫʔυݟΕͨΒخ͍͠ ͜Ώͷ࡞Εͦ͏ͩͳ ͪΐͬͱσʔλഈआ UX Design ͜Ε͕Ͱ͖Δʂ
14. “UI / UX design / Engineering ΛҰ؏ͯ͠΍Ε͹Ձ஋Λߴ଎ʹಧ͚ΒΕΔ͸ͣ” UI / UX design / Engineering  
15. 2weeks 2weeks 2weeks Release Release ։ൃϓϩηεʢͬ͘͟Γʣwith UX design Engineering (backend) Design Business UI UXධՁ UX design UI UXධՁ UI UXධՁ Engineering (frontend) “UI / UX design / Engineering Ұ؏ͯ͠΍Δͱ࠷େݶͷՁ஋Λಧ͚ΒΕΔ͸ͣ” Ձ஋UP!!! Ձ஋UP!!! ཁ݅ ཁ݅ ཁ݅ ϑϨʔϜϫʔΫ!!
16. UI / UX design / Engineering   ࠜͷ෦෼͕දʹग़͖ͯͯ͠·͏ʜ “UI / UX design / Engineering ΛҰ؏ͯ͠΍Ε͹Ձ஋Λߴ଎ʹಧ͚ΒΕΔ͸ͣ”
17. 2weeks 2weeks 2weeks Release Release ։ൃϓϩηεʢͬ͘͟Γʣwith UX design Engineering (backend) Design Business UI UXධՁ?? UX design UI UXධՁ?? UI UXධՁ?? Engineering (frontend) 
    ඈͼӽ͑ͪΌ͏ ମ͸̍ͭͩͬͨ 
    େ֓ɺΤϯδχΞ͸ա৴ ࡞ΔͷʹເதͰߟ͑Δ༨஍ͳ͠ ཁ݅ ཁ݅ ཁ݅ “UI / UX design / Engineering Ұ؏ͯ͠΍Δͱ࠷େݶͷՁ஋Λಧ͚ΒΕΔ͸ͣ” ͦΜͳ୯७͡Όͳ͔ͬ ͨʂ ࣦഊ.1 ϑϨʔϜϫʔΫ!! 
    ఆٛͯ͠Δ༨஍ͳ͠
18. ͤΊͯͪΌΜͱUXଌΕΔΑ͏ʹ͠·͠ΐ͏ʂ
19. 2weeks 2weeks 2weeks Release Release ։ൃϓϩηεʢͬ͘͟Γʣwith UX design Engineering (backend) Design Business UI UXධՁ?? UX design UI UXධՁ?? UI UXධՁ?? Engineering (frontend) 
    ඈͼӽ͑ͪΌ͏ ମ͸̍ͭͩͬͨ 
    େ֓ɺΤϯδχΞ͸ա৴ ࡞ΔͷʹເதͰߟ͑Δ༨஍ͳ͠ ཁ݅ ཁ݅ ཁ݅ “UI / UX design / Engineering Ұ؏ͯ͠΍Δͱ࠷େݶͷՁ஋Λಧ͚ΒΕΔ͸ͣ” ϑϨʔϜϫʔΫ!! ධՁํ๏ఆٛ ա৴͠ͳ͍ 6*
    ʹ
    ॏΈΛ ೖޱ ͔ͬ͠Γ
20. 2weeks 2weeks 2weeks Release Release ։ൃϓϩηεʢͬ͘͟Γʣ Engineering (backend) Design Business UI UXධՁ UX design UXධՁ UXධՁ Engineering (frontend) “UI / UX design / Engineering ΛҰ؏ͯ͠΍ΔͱՁ஋Λߴ଎ʹಧ͚ΒΕΔ” ཁ݅ ཁ݅ ཁ݅ UI UI UXධՁ ج४ UXධՁ ج४ UXධՁ ج४ ϑΣʔζ ͱ εςʔΫϗϧμʔʹ߹ΘͤͯࢥߟνΣϯδ
21. ϑΣʔζ
    ͱ
    εςʔΫϗϧμʔʹ߹ΘͤͯࢥߟνΣϯδ UI / UX design / Engineering “UI / UX design / Engineering ΛҰ؏ͯ͠΍Ε͹Ձ஋Λߴ଎ʹಧ͚ΒΕΔ͸ͣ”
22. “UI / UX design / Engineering ΛҰ؏ͯ͠΍ΔͱՁ஋Λߴ଎ʹಧ͚ΒΕΔ͸ͣ” ʢਓ਺͕গͳ͚Ε͹ʣଟ෼ɺͦ͏ɻ ΤϯδχΞ͸ա৴͠·͢ɻ ͳͷͰ ΤϯδχΞͷؾ࣋ͪΛ ͪΐͬͱ௒͑Δ͙Β͍ͷUIνϟϨϯδΛ͍͋͛ͯͩ͘͞ ڭ܇.1
23. AIײ͕ͳ͍ʂAIײཉ͍͠ʂ
24. ͲɺυϢίτʁʂ
25. ৴པײ ର࿩ײ ੒௕͍ͯ͠Δײ ؼଐײ AIΒ͠͞ ͳͥɺͦΕ͕ఏࣔΕ͍ͯΔͷ͔Λཪ෇͚Λ͚ͭͯࣔ͢͜ͱ "৴པ" ͸ਓ͕༩͑ΒΕΔ࠷΋Ձ஋ͷ͋Δ΋ͷ͔΋͠Εͳ͍ɻ AI͸ͦͷ৴པΛ ༩͑Δ͜ͱ͕Մೳ͔ʁ Կ͔ૢ࡞ɾࢦ͍ࣔͯ͠Δײ͕࢒Δ͜ͱͰɺؔΘ͍ͬͯΔͱ͍͏ ҙ͕ࣝੜ·ΕΔ Ͳ͏ղऍ͞Ε͍ͯΔ͔Λࣔ͢͜ͱ͕ɺԿ͔Λཧղͯ͘͠Ε͍ͯΔɻ ͱ͍͏ײ֮ʹͳΔ ૬ख͕ҭ͍ͬͯΔͱࢥ͑ͳ͚Ε͹ର࿩͢Δ͜ͱ΋͍ͨ͠ͱࢥ͑ͳ͍ ࣗݾؼଐײɻ 200msͷϨεϙϯεΛ࡞ΔɺAI͸ݡ͍ͱࢥ͍ͬͯΔͷͩΖ͏ɻ ͱͨ͠Βɺͦͷ200msΛຒΊΔ΋ͷ͕ඞཁͩɻ ࢹ֮తʹ଴ͨ͞Εͳ͍Α͏ʹɻ
26. ৘ใऔΓಀ͞ͳ͍৴པ ੜ͖͍ͯΔײ͡ AIͷଘࡏΛ఻͑Δදݱ σʔλ͕ग़Δ·ͰΘ͔Βͳ͍೉͠͞
27. “ఆੑతͳײ֮Λ௥͍ଓ͚ͯΑ͘Θ͔Βͳ͘ͳͬͨ…” ࣦഊ.2
28. ৘ใऔΓಀ͞ͳ͍৴པ ੜ͖͍ͯΔײ͡ AIͷଘࡏΛ఻͑Δදݱ ఻ΘΒͳ͍… ϒϥ΢βґଘ… Ͱ΋ɺ ͪΐͬͱɺAIײͰͨͶʂͱ͍͏ײ૝΋…
29. ҙຯ΋ͳ͘ಈ͘΋ͷ͸࡟আର৅Ͱ͢ ϒϥ΢βʹΑͬͯ͸ɺॏ͘ͳͬͯදࣔମݧ͕ྑ͘ͳ͍ͷͰఫڈ ڭ܇.2
30. Physical UI
31. ௫΋͏ΑɻӢ
32. ӢΛ௫Έ͔ͨͬͨ ͜Ͳ΋ͨͪʹɺӢΛ௫·͍ͤͯ͋͛ͨʂ
33. “ࢠͲ΋ͨͪ͸௫Έ·ͤΜʂ” ࣦഊ.3
34. ࢠͲ΋͸ جຊతʹୟ͘ ୟ͚Δͷʹม͑ͨ
35. ࣦഊ.3 ໨ઢΑΓ্ʹ͋Δͱ ݟ޲͖΋͠ͳ͍ Ѳͬͯ΋ɺୟ͍ͯ΋OKͩͱͯ͠΋ɺ ݟ޲͖΋͞Εͳ͚Ε͹ ແ͍ͷͱಉ͡
36. “ͲΜͳʹখ͞ͳ Physical ͳ UI Ͱ͋ͬͯ΋ ؀ڥͷ͜ͱ΋Ұॹʹߟ͑Δ” ڭ܇.3
37. Ͳ͏ͯ͠΋ݴ͍͍ͨ..
38. ελʔτΞοϓ͋Δ͋ΔͰɺϝϯόʔ͕গͳ͍ͷͰσβΠϯͱ෇͘΋ͷશ෦΍Δ ίʔϙϨʔτ ΞΠσϯςΟςΟͷ ϒϥϯσΟϯάσβΠϯ Ϗδϣϯɾϛογϣϯ γϯϘϧϚʔΫ ձࣾϩΰλΠϓʢӳจɺ࿨จʣ ࢦఆॻମ ϒϥϯυΧϥʔ ϒϥϯυεςʔτϝϯτ τϨʔυΩϟϥΫλʔ ޿ࠂɺϊϕϧςΟάοζ ΦϑΟεσβΠϯ αΠτ ໊ࢗ ύϫʔϙΠϯτςϯϓϨʔτ …
39. ʮฐࣾͷӳޠදه͸ɺఆ׺্͸ ΧϯϚ ͳ͠Ͱ͢ʔʯ ਖ਼͘͠ͳ͍ ਖ਼͍͠ ࣦഊ.x
40. “ఆ׺஫ҙʂ” ڭ܇.x
41. σβΠφʔืूதʂ