Understanding UX Design Proces - UXデザインプロセスを理解する

Transcript

1. UNDERSTANDING
   

   UX DESIGN PROCESS
   Mede by Takashi Sakamoto @bookslope
   
   
   69σβΠϯϓϩηεΛཧղ͢Δ
   

   View Slide

2. UNDERSTANDING UX DESIGN PROCESS
   ࡔຊو࢙
   @bookslope
   εϚʔτϞϏϦςΟࣄۀਪਐࣨࣨ௕
   

   ৘ใઃܭɾ69σβΠϯ͕ઐ໳ྖҬ
   ΦϯϥΠϯίϛϡχςΟӡӦ
   

   دߘɾߨԋଟ਺
   

   ஶ࡞ʰ*"γϯΩϯάʱͳͲ
   ౦ژࡏॅͷσβΠφʔͰ͢ɻσδλϧϓϩμΫτʹ͓͚Δʮ৘ใΞʔΩςΫνϟʯ
   ΍ʮ69σβΠϯʯͳͲΛֶͼɺݱࡏ͸ʮϞϏϦςΟʯ΍ʮ.BB4ʯʹ͓͚Δࣄۀ
   ։ൃɾαʔϏε։ൃʹܞΘ͍ͬͯ·͢ɻ
   

   View Slide

3. ೔࢈ࣗಈं υοπ
   2017 2019
   ϦϯΫε ωοτΠϠʔ

   άϧʔϓ
   2000
   2002
   ύΠφοϓϧ

   Χϯύχʔ
   ϰΠϩδοΫ
   1999 1999
   JDS
   1997 2001
   1995
   େࡕ ౦ژ
   2021
   ݱࡏ
   UNDERSTANDING UX DESIGN PROCESS
   Career
   άϥϑΟοΫ
   

   σβΠφʔ
   8FC
   

   σβΠφʔ
   8FC
   

   σΟϨΫλʔ
   σδλϧશൠ
   

   69σβΠφʔ
   ࣗಈं
   

   69σβΠφʔ
   ϞϏϦςΟࣄۀ
   

   ίϯαϧɾऔࡐ
   8FC
   

   σΟϨΫλʔ
   Πϯϋ΢ε
   

   View Slide

4. UNDERSTANDING UX DESIGN PROCESS
   ϙελʔ %51 σεΫτοϓ
   8FC
   εϚϗ
   "QQ
   ࣗಈं
   ).*
   మಓ
   .BB4
   ؍ޫ
   4NBSU$JUZ
   ύοέʔδ
   Designing for …
   

   View Slide

5. ࣄۀ։ൃࢧԉ ϝσΟΞ഑৴ࢧԉ
   .BB4ؔ࿈ࣄۀͷاըɾఏҊ
   84ϑΝγϦςʔγϣϯࢧԉ
   σδλϧϓϩμΫτͷσβΠϯࢧԉ
   χϡʔεαΠτʮϨεϙϯεʯ࿈ࡌத
   औࡐ͔ΒࡱӨɾࣥච
   ηϛφʔɾΠϕϯτͷاըɾߨԋ
   UNDERSTANDING UX DESIGN PROCESS
   

   View Slide

6. Journalist
   ϝσΟΞ഑৴ࢧԉ
   ϞϏϦςΟ࣮ূ࣮ݧͳͲͷऔࡐ
   هऀɾΧϝϥɾϥΠςΟϯάͳͲ
   #MaaSମݧه
   UNDERSTANDING UX DESIGN PROCESS
   by Response.JP
   

   View Slide

7. by NISSAN ARIYA
   UNDERSTANDING UX DESIGN PROCESS
   

   View Slide

8. by Amazon
   2011 2016
   IAγϯΩϯά IA/UXϓϥΫςΟε UX x Biz Book
   UNDERSTANDING UX DESIGN PROCESS
   

   View Slide

9. 69
   γφϦΦ
   ϖϧιφ
   ϢʔβʔମݧΛࢦ͢ɻফඅऀͷମݧͱͯ͠ϚʔέςΟϯάͰ͸$9ͳͲ΋࢖ΘΕΔ͕
   69Ͱ౷Ұ͢Δɻ·ͨͦͷऔΓ૊ΈΛࢦͯ͠69σβΠϯͱݺͿɻ
   ͦͷαʔϏε΍ϓϩμΫτͷ໨తୡ੒·ͰͷεςοϓΛඳ͍ͨ΋ͷΛࢦ͢ɻར༻ঢ়گ
   ΛετʔϦʔʢ෺ޠʣʹͯ͠఻͑Δ৔߹ʹɺίϚອը෩ʹͨ͠΋ͷ͕ଟ͍ɻ
   Ϣʔβʔ૾Λ۩ମԽͨ͠΋ͷɻԾ૝ϢʔβʔͱݺͿ৔߹΋͋Δ͕ɺλʔήοτ૚ͱ͸ҟ
   ͳΓɺಛఆͷਓΛ୊ࡐʹ࢖༻͢Δ͜ͱ͕ଟ͍ɻσϞάϥͷ΄͔Ձ஋؍΍՝୊ͳͲݴٴɻ
   )$% ਓؒத৺ઃܭͷ͜ͱɻਓΛத৺ʹߟ͑ΒΕͨσβΠϯͷऔΓ૊ΈΛࢦ͢ɻԤभͰ͸
   6$%ͱ΋ݺ͹ΕΔ͕)$%Ͱ౷Ұ͢Δɻ
   *" ৘ใઃܭͷ͜ͱɻ৘ใΛ੔ཧ͠Ϣʔβʔʹ෼͔Γ΍͘͢఻͑ΔߦҝɺϢʔβʔ͕৘ใ
   Λ୳͠΍͘͢͢ΔߦҝͳͲΛࢦ͢ɻ
   $+.
   ސ٬ͷߦಈΛδϟʔχʔʢཱྀʣʹݟཱͯͨϑϨʔϜϫʔΫͷ͜ͱɻ঎඼΍αʔϏεΛ
   ೝ஌͠ɺڵຯΛ࣋ͪɺߪೖ΍ਃ͠ࠐΈʹ౸ୡ͢Δ·ͰͷߦಈΛਤࣜԽͨ͠΋ͷɻ
   UNDERSTANDING UX DESIGN PROCESS
   

   View Slide

10. INDEX
    ໨࣍
    ΠϯϏδϒϧόϦϡʔ
    σβΠϯϓϩηε
    σβΠϯύλʔϯ
    01.
    
    
    02.
    
    
    03.
    ྲྀΕΛཧղ͢Δ
    ݟ͑ͳ͍Ձ஋Λ஌Δ
    ൑அྗΛ਎ʹ͚ͭΔ
    

    View Slide

11. ݟ͑ͳ͍Ձ஋Λ஌Δ
    INVISIBLE VALUE
    01
    

    View Slide

12. ͍͍੡඼Ͱ΋ɺ͍͍ମݧͱ͸ݶΒͳ͍ɻ
    Good UI Good UX
    

    View Slide

13. Service Design
    ϞϊͱαʔϏεͱ͕ผʑͰ͸ͳ͘ɺ
    αʔϏεͷதʹϞϊؚ͕·Ε͓ͯ
    ΓɺҰମԽͯ͠੾Γ཭ͤͳ͍ߏ଄Λ
    αʔϏευϛφϯτϩδοΫͱݺ
    Ϳɻ
    UNDERSTANDING UX DESIGN PROCESS
    Ϟϊ
    αʔϏε
    Ϟϊ αʔϏε
    4%-4FSWJDF%PNJOBOU-PHJD
    (%-(PPET%PNJOBOU-PHJD
    by αʔϏεɾυϛφϯτɾϩδοΫͷൃ૝ͱԠ༻
    

    View Slide

14. σβΠϯͱ͸ɺओޠ͕ࣗ෼Ͱ͸ͳ͍ɻ
    ఻͑Δ ఻ΘΔ
    

    View Slide

15. About Design
    σβΠϯͱ͸ɺ૬ख͕Ͳ͏تΜͰ΋Β
    ͑Δ͔Λߟ͑ɺܭը͢Δ͜ͱʹ΄͔
    ͳΒͳ͍ɻ͔ͩΒͦ͜ɺ૬खΛΑ͘஌
    ΓɺͲ͏تͿ͔Λߟ͑ɺ࣮ߦ͢Δ͜
    ͱ͕େࣄɻ
    UNDERSTANDING UX DESIGN PROCESS
    by ৽ւ੣ @shinkaimakoto
    

    View Slide

16. Cusomer Journey
    ސ٬ͷߦಈΛδϟʔχʔʢཱྀʣʹݟཱ
    ͯͨϑϨʔϜϫʔΫͱͯ͠ɺΧελ
    ϚʔɾδϟʔχʔɾϚοϓΛ࡞੒͢Δ
    ৔߹͕͋Δɻ
    ঎඼΍αʔϏεΛೝ஌͔ΒɺڵຯΛ
    ࣋ͪɺߪೖ΍ਃ͠ࠐΈʹ౸ୡ͢Δ·
    ͰͷߦಈΛਤࣜԽͨ͠΋ͷͰɺސ٬
    ଆʢը໘্෦ʣͱϏδωεఏڙଆ
    ʢը໘Լ෦ʣͱʹ෼͚ɺҰ࿈ͷମݧ
    ʹԿ͕ى͖ɺԿ͕ඞཁ͔Λ၆ᛌͯ͠
    ܭը͢Δɻ
    UNDERSTANDING UX DESIGN PROCESS
    by RaIL Europe Experience Map
    

    View Slide

17. Outcome
    Ұ࿈ͷମݧΛ၆ᛌ͢Δ͜ͱͰɺ͍ͭ
    ͲΜͳͱ͖ʹͦͷσβΠϯʹ৮ΕΔ
    ͨͷ͔ɺ·ͨɺͦͷ੒Ռʹ͸Ͳ͏
    ͍ͬͨ͜ͱ͕ߟ͑ΒΕΔͷ͔Λݟۃ
    ΊΔࢳޱʹͭͳ͕ΔͨΊɺϚʔέ
    ςΟϯάޮՌͱ߹Θͤͯ,1*Խʢ໨ඪ
    Λ਺஋Խʣ͢Δ৔߹͕ଟ͍ɻ
    UNDERSTANDING UX DESIGN PROCESS
    ڵຯ
    ೝ஌ ߦಈ ڞ༗
    "55&/5*0/ */5&3&45 "$5*0/ 4)"3&
    ݕࡧ
    4&"3$)
    Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ
    

    View Slide

18. Outcome
    Ұ࿈ͷମݧΛ၆ᛌ͢Δ͜ͱͰɺ͍ͭ
    ͲΜͳͱ͖ʹͦͷσβΠϯʹ৮ΕΔ
    ͨͷ͔ɺ·ͨɺͦͷ੒Ռʹ͸Ͳ͏
    ͍ͬͨ͜ͱ͕ߟ͑ΒΕΔͷ͔Λݟۃ
    ΊΔࢳޱʹͭͳ͕ΔͨΊɺϚʔέ
    ςΟϯάޮՌͱ߹Θͤͯ,1*Խʢ໨ඪ
    Λ਺஋Խʣ͢Δ৔߹͕ଟ͍ɻ
    UNDERSTANDING UX DESIGN PROCESS
    ڵຯ
    ೝ஌ ໨త ڞ༗
    "55&/5*0/ */5&3&45 0#+&$5*7& 4)"3&
    खஈ
    "$$&44
    Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ
    

    View Slide

19. Outcome
    ͨͱ͑͹ɺཱྀߦ༧໿αΠτͷσβΠϯ
    Ͱ͋Ε͹ɺ࣮ࡍʹཱྀߦʹߦ͘·͑ʹ
    ޱίϛ౳Λݟͯڵຯؔ৺ΛߴΊɺ༧
    ໿͠ʹདྷΒΕ·͢ɻ·ͨɺͦΕ͸༧໿
    ͕໨తͱݴ͏ΑΓɺཱྀߦʹߦͨ͘Ί
    ͷखஈͱͯ͠༧໿Λ͢Δͱ͍͏͜ͱ
    ʹͳΓ·͢ɻ
    UNDERSTANDING UX DESIGN PROCESS
    ޱίϛ
    ϝσΟΞͰ஌Δ ཱྀߦʹߦ͘ ϨϏϡʔ
    ཱྀߦ༧໿
    αΠτ
    ڵຯ
    ೝ஌ ڞ༗
    "55&/5*0/ */5&3&45 4)"3&
    ໨త
    0#+&$5*7&
    खஈ
    "$$&44
    Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ
    

    View Slide

20. INVISIBLE VALUE
    σβΠϯϓϩηεͱ͸ɺσβΠϯͷ࡞
    ੒ʢΞ΢τϓοτʣ͚ͩΛࢦ͢ͷͰ͸
    ͳ͘ɺࣄલௐࠪ΍ઃܭஈ֊ΛܦͯΞ
    ΢τϓοτ͢Δ·ͰͷҰ࿈ͷྲྀΕؚ͕
    ·Ε͍ͯΔɻͦͷϓϩμΫτ΍αʔϏ
    ε͕࢖ΘΕΔঢ়گΛཧղ͔ͯ͠Βσβ
    ΠϯΛਐΊΔඞཁ͕͋Δɻ
    ϞϊͱαʔϏε͸੾Γ཭ͤͳ͍
    σβΠϯ͸ɺࣗ෼͕ओޠͰ͸ͳ͍
    Ұ࿈ͷମݧΛ၆ᛌͯ͠ݟΔํ๏Λ஌Δ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

21. ྲྀΕΛཧղ͢Δ
    DESIGN PROCESS
    02
    

    View Slide

22. 5 LAYERS
    ++(ͷʮ69Λߏ੒͢Δͭͷஈ֊ʯͰ
    ߟ͑Δͱɺ༏ΕͨσβΠφʔ͸͜ΕΒ
    ͷ޻ఔ͢΂ͯΛ͍ͯ͠Δ͜ͱ͕Θ͔
    Δɻ
    σβΠϯ࡞ۀͱ͸ද૚෦෼͚ͩΛࢦ
    ͢͜ͱͰ͸ͳ͍ɻ
    ཁ݅
    ߏ଄
    ࠎ֨
    ද૚
    ઓུ
    ίϯςπɾػೳ
    ৘ใΞʔΩςΫνϟ
    ΠϯλϥΫγϣϯσβΠϯ
    ϏδϡΞϧσβΠϯ
    χʔζɾ໨త
    UNDERSTANDING UX DESIGN PROCESS
    By Jesse James Garrett “Elements of User Experience”
    

    View Slide

23. Design Outputs
    σβΠϯͷ޻ఔʹ͸ɺ࡞ۀ࣌ؒʢΞ
    065165ʣͷ΄͔ʹɺೝࣝ͢Δ
    */165ͱɺࢥߟ͢Δ5)*/,ؚ͕·Ε
    Δ͜ͱΛ๨Ε͕ͪɻ
    */165ʹ͸ɺࣄલௐؚ͕ࠪ·Εɺ
    5)*/,ʹ͸ɺͲͷΑ͏ʹσβΠϯ͢
    Δͷ͔ͱ͍ͬͨܭըؚ͕·ΕΔɻ
    
    23
    σβΠϯͷ࡞੒
    5)*/,
    065165
    */165
    ઃܭ
    ௐࠪ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

24. Double Diamond
    μϒϧμΠϠϞϯυ͸ɺ೥ʹӳ
    ࠃσβΠϯڠٞձͰॳΊͯಋೖ͞Ε
    ͨɺͭͷμΠϠϞϯυΛඳ͘Α͏ʹ
    ൃࢄͱऩଋΛߦ͏՝୊ղܾํ๏ͷͻ
    ͱͭɻ
    ਖ਼͍͠໰୊Λݟ͚ͭΔ ਖ਼͍͠ղܾΛݟ͚ͭΔ
    ୳ࡧ ఆٛ ల։ ఏڙ
    %*4$07&3 %&'*/& %&7&-01 %&-*7&3
    ൃࢄ ऩଋ ऩଋ
    ൃࢄ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

25. UX Research
    σβΠϯ޻ఔΑΓલͷஈ֊ʹ͓͍ͯɺ
    Ќ൛ϓϩτλΠϐϯάͰɺ࣮ࡍʹυ
    ϥΠόʔΛ؍࡯͢Δ69ϦαʔνΛ࣮
    ࢪͨ͠ྫʢ6CFSʣ
    σβΠϯ
    اը ࣮ݧ
    ։ൃ
    By Grace Vorreuter and new driver research participant in car testing in San Francisco
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

26. HCD Process
    *40ʢ+*4;ʣΠϯλϥ
    ΫςΟϒγεςϜͷਓؒத৺ઃܭϓϩ
    ηεΛࢦ͢ɻ
    )$%ͷਐΊํͷجຊ͸ɺ੡඼ͷߏ૝
    ஈ֊͔Βର৅ϢʔβʔͱͦͷཁٻΛ໌
    ֬ʹͯ͠ɺཁٻʹ߹ͬͨ΋ͷΛઃܭ
    ͠ɺຬ଍౓߹͍ΛධՁ͢Δ͜ͱͰ͢ɻ
    Ϣʔβʔͷཁٻ͕ຬͨ͞ΕΔ·Ͱɺ͜
    ΕΛ܁Γฦ͠·͢ɻ
    )$%ϓϩηε
    σβΠϯͷ࡞੒
    ཁٻࣄ߲ͷ໌֬Խ
    ධՁ
    ˞)$%)VNBO$FOUFSFE%FTJHOͷུশ
    ར༻ঢ়گͷཧղ
    )$%ͷඞཁੑͷಛఆ
    
    26
    1
    2
    3
    4
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

27. Usage Condition
    ར༻ঢ়گͷཧղʕʕͨͱ͑͹ɺ࡭ࢠ
    ͷσβΠϯΛ͢Δ৔߹ɺͲ͜ʹஔ͔
    ΕΔ༧ఆ͔ ୭޲͚ͷ΋ͷ͔ͳͲɺࣄ
    લʹ֬ೝ͓ͯ͘͜͠ͱͰ੒Ռʹͭͳ
    ͕Γ΍͍͢σβΠϯʹ͢Δ͜ͱ͕Ͱ
    ͖·͢ɻ
    λΠτϧ͕ಡΊΔΑ͏ٯ͞·ʹஔ͔Ε͍ͯΔ༷ࢠ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

28. Usage Condition
    ར༻ঢ়گͷཧղʕʕͨͱ͑͹ɺ࡭ࢠ
    ͷσβΠϯΛ͢Δ৔߹ɺͲ͜ʹஔ͔
    ΕΔ༧ఆ͔ ୭޲͚ͷ΋ͷ͔ͳͲɺࣄ
    લʹ֬ೝ͓ͯ͘͜͠ͱͰ੒Ռʹͭͳ
    ͕Γ΍͍͢σβΠϯʹ͢Δ͜ͱ͕Ͱ
    ͖·͢ɻ
    Ӻߏ಺
    ॅ୐৘ใࢽ
    ୅உੑ
    λΠτϧ͕ಡΊΔΑ͏ٯ͞·ʹஔ͔Ε͍ͯΔ༷ࢠ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

29. IA
    ॻ੶ʮ৘ใΞʔΩςΫνϟʯͰ͸ɺ
    ྑ͍৘ใΞʔΩςΫνϟ͸ʮϢʔ
    βʔʯʮίϯςϯπʯʮίϯςΩετʯ
    ͷͭΛόϥϯεΑ͘ߟྀ͍ͯ͠Δ
    ΋ͷͱ͍ͯ͠·͢ɻϢʔβʔͷཱ৔΍
    จ຺Λߟྀͯ͠ίϯςϯπΛఏࣔ͢
    Δ͔Βͦ͜ɺ͸͡Ίͯ৘ใ͸׆͖ͨ΋
    ͷʹͳΓ·͢ɻ
    ୭ʹ
    USER
    ͲͷΑ͏ʹ
    CONTEXT
    ԿΛ
    CONTENT
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

30. Design Thinking
    ʮσβΠϯࢥߟʯͱ͸ɺσβΠφʔ΍
    ΫϦΤΠλʔ͕ۀ຿Ͱ࢖͏ࢥߟϓϩη
    εΛ׆༻͠ɺલྫͷͳ͍՝୊΍ະ஌
    ͷ໰୊ʹରͯ͠࠷దͳղܾΛਤΔͨ
    Ίͷࢥߟ๏ͩɻ
    ໰୊ఏٞ
    ڞײ
    ࢼ࡞
    ςετ
    &.1"5):
    %&'*/&
    130505:1&
    5&45
    ऩଋ ൃࢄ
    ૑଄
    *%&"5&
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

31. UNDERSTANDING UX DESIGN PROCESS
    By Designing from the Car: Why Context Matter
    

    View Slide

32. DESIGN PROCESS
    σβΠϯϓϩηεͱ͸ɺσβΠϯͷ࡞
    ੒ʢΞ΢τϓοτʣ͚ͩΛࢦ͢ͷͰ͸
    ͳ͘ɺࣄલௐࠪ΍ઃܭஈ֊ΛܦͯΞ
    ΢τϓοτ͢Δ·ͰͷҰ࿈ͷྲྀΕؚ͕
    ·Ε͍ͯΔɻͦͷϓϩμΫτ΍αʔϏ
    ε͕࢖ΘΕΔঢ়گΛཧղ͔ͯ͠Βσβ
    ΠϯΛਐΊΔඞཁ͕͋Δɻ
    σβΠϯ࡞੒͚͕ͩσβΠϯͰ͸ͳ͍
    Ξ΢τϓοτલͷ޻ఔʢௐࠪͳͲʣ͕ॏཁ
    ར༻ঢ়گΛཧղ͔ͯ͠ΒਐΊΔ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

33. ൑அྗΛ਎ʹ͚ͭΔ
    DESIGN PATTERNS
    03
    

    View Slide

34. UNDERSTANDING UX DESIGN PROCESS
    Design Literacy
    σβΠϯϦςϥγʔͱ͸ɺओʹσβΠ
    ϯͷ଄ܗཧ࿦ɺ੍࡞ͷϓϩηεɺྺ
    ࢙ɾจԽʹର͢Δ஌ࣝͳͲΛࢦ͢ઐ
    ໳༻ޠɻ
    

    ۙ೥͸ɺސ٬ମݧʹ͓͍ͯσβΠϯ͕
    ॏཁࢹ͞Ε͍ͯΔྲྀΕΛड͚ɺσβΠ
    ϯϦςϥγʔΛϕʔεʹͨ͠൑அྗ͕
    ٻΊΒΕ͍ͯ·͢ɻ
    σβΠφʔ͚ͩͰ͸ͳ͘ɺσβΠϯʹ
    ؔΘΔਓ͕࣋ͭ΂͖εΩϧͱ͍͑·
    ͢ɻ
    σβΠϯʹ͓͚Δ൑அྗ
    ͨͩͷࢥ͍͜Έ
    σβΠϯϦςϥγʔ
    ೝ஌όΠΞε
    

    View Slide

35. UNDERSTANDING UX DESIGN PROCESS
    Mind Control
    ϚΠϯυίϯτϩʔϧͱ͸ɺૢ࡞ऀ͔
    ΒͷӨڹ΍ڧ੍Λؾ͔ͮΕͳ͍͏ͪ
    ʹɺଞऀͷਫ਼ਆաఔ΍ߦಈɺਫ਼ਆঢ়
    ଶΛૢ࡞ͯ͠ɺૢ࡞ऀͷ౎߹ʹ߹Θͤ
    ͨಛఆͷҙࢥܾఆɾߦಈ΁ͱ༠ಋ͢
    Δ͜ͱɾٕज़ɾ֓೦Ͱ͋Δɻ΢ΟΩ
    ϖσΟΞ
    Credit: ASSOCIATED PRESS
    

    View Slide

36. Horai EMot my route
    LUUP aimo
    WHILL docomo bike share
    Multimodal
    Single-mode
    JR East
    JR East
    WILLERS
    Whim
    ANA
    Uber
    Special Public
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

37. Mobbin
    UNDERSTANDING UX DESIGN PROCESS
    By Mobbin
    

    View Slide

38. UNDERSTANDING UX DESIGN PROCESS
    Dark Pattern
    By Amazon
    

    View Slide

39. Semi
    Roadstar
    Model S
    Model 3
    By Tesla
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

40. LAYOUT PATTERN
    ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ
    ͷτϨϯυͱͯͭ͠ͷϨΠΞ΢τύ
    λʔϯ͕͋Γ·͢ɻ
    /*0 1PMFTUBS %ZTPOʜ
    #:50/ 40/: )0/%"ʜ
    Meter + Infortainment
    Infortainment
    Meter
    ηύϨʔτܕ
    ίϯόΠϯܕ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

41. Infortainment
    UI/UX DESIGN FOR MOBILITY
    Meter
    UNDERSTANDING UX DESIGN PROCESS
    By Polestar2
    

    View Slide

42. UNDERSTANDING UX DESIGN PROCESS
    By Android Auto
    

    View Slide

43. Meter + Infortainment
    Side Monitor
    Side Monitor
    UNDERSTANDING UX DESIGN PROCESS
    By SONY VISION
    

    View Slide

44. UNDERSTANDING UX DESIGN PROCESS
    By Apple CarPlay
    

    View Slide

45. DESIGN PATTERNS
    σβΠϯύλʔϯ͸Ͳ͜ʹͰ΋ଘࡏ͢
    Δ͕ɺݟա͢͝ͱ͙͢ʹݹष͍஌ࣝ
    ʹมΘͬͯ͠·͏ɻৗʹΞοϓσʔτ
    ͢Δ஌ࣝͷҰͭͱͯ͠ɺ·ͨσβΠϯ
    Ϧςϥγʔͱͯ͠਎ʹ͚ͭΔΑ͏৺͕
    ͚Δɻ
    σβΠϯͷ൑அྗσβΠϯϦςϥγʔ
    ύλʔϯΛ஌ࣝͱͯ͠਎ʹ͚ͭΔ
    ύλʔϯ͸มԽ͠Ξοϓσʔτ͞ΕΔ
    UNDERSTANDING UX DESIGN PROCESS
    

    View Slide

46. SUMMARY
    ࣭͝໰΍͝ҙݟͳͲ͍͟͝·͔͢
    ΋͋͠Ε͹ɺͥͻΞϯέʔτͷ΄͏
    ʹ΋͝هೖ͍ͩ͘͞ɻ
    ΠϯϏδϒϧόϦϡʔ
    σβΠϯϓϩηε
    σβΠϯύλʔϯ
    ྲྀΕΛཧղ͢Δ
    ݟ͑ͳ͍Ձ஋Λ஌Δ
    ൑அྗΛ਎ʹ͚ͭΔ
    

    View Slide

47. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    THANKS FOR YOUR ATTENTION!
    FIN
    Mede by Takashi Sakamoto @bookslope
    
    
    

    View Slide

48. UNDERSTANDING UX DESIGN PROCESS
    ͜ͷϛχϫʔΫΛ͓ࢼ͍ͩ͘͠͞ɻ
    LET’S TRY with WORK SHEETS
    MINI WORK
    Mede by Takashi Sakamoto @bookslope
    
    
    

    View Slide

49. ͍͍੡඼Ͱ΋ɺ͍͍ମݧͱ͸ݶΒͳ͍ɻ
    Good UI Good UX
    A B
    Work Sheet #1
    ݟ͑ͳ͍Ձ஋Λ஌ΔͨΊʹ஌͓ͬͯ
    ͍ͯ΄͍͜͠ͱΛͭ͋͛·ͨ͠ɻ
    UNDERSTANDING UX DESIGN PROCESS
    σβΠϯͱ͸ɺओޠ͕ࣗ෼Ͱ͸ͳ͍ɻ
    ఻͑Δ ఻ΘΔ
    C D
    

    View Slide

50. Work Sheet #2
    *40ʢ+*4;ʣΠϯλϥ
    ΫςΟϒγεςϜͷਓؒத৺ઃܭϓϩ
    ηεΛࢦ͢ɻ
    )$%ͷਐΊํͷجຊ͸ɺ੡඼ͷߏ૝
    ஈ֊͔Βର৅ϢʔβʔͱͦͷཁٻΛ໌
    ֬ʹͯ͠ɺཁٻʹ߹ͬͨ΋ͷΛઃܭ
    ͠ɺຬ଍౓߹͍ΛධՁ͢Δ͜ͱͰ͢ɻ
    Ϣʔβʔͷཁٻ͕ຬͨ͞ΕΔ·Ͱɺ͜
    ΕΛ܁Γฦ͠·͢ɻ
    )$%ϓϩηε
    σβΠϯͷ࡞੒
    ཁٻࣄ߲ͷ໌֬Խ
    ධՁ
    ˞)$%)VNBO$FOUFSFE%FTJHOͷུশ
    ར༻ঢ়گͷཧղ
    )$%ͷඞཁੑͷಛఆ
    
    3
    UNDERSTANDING UX DESIGN PROCESS
    1
    2
    3
    4
    E
    

    View Slide

51. Work Sheet #3
    ʮ৘ใΞʔΩςΫνϟʯͰ͸ɺྑ͍
    ৘ใΞʔΩςΫνϟ͸ʮɹɹɹʯ
    ʮɹɹɹʯʮɹɹɹʯͷͭΛόϥ
    ϯεΑ͘ߟྀ͍ͯ͠Δ΋ͷͱ͍ͯ͠·
    ͢ɻϢʔβʔͷཱ৔΍จ຺Λߟྀͯ͠
    ίϯςϯπΛఏࣔ͢Δ͔Βͦ͜ɺ͸͡
    Ίͯ৘ใ͸׆͖ͨ΋ͷʹͳΓ·͢ɻ
    UNDERSTANDING UX DESIGN PROCESS
    H
    G
    F
    F
    G H
    

    View Slide

52. UNDERSTANDING UX DESIGN PROCESS
    Work Sheet #4
    ͨͱ͑͹ɺ͋ͳ͕ͨؔΘΒΕ͍ͯΔ
    σβΠϯର৅෺Λʮɹɹɹʯʹهೖ
    ͍͖ͨͩɺʮɹɹɹʯΛߟ͑ͯΈΔ͜
    ͱͰɺͳʹΛߟྀ͢Ε͹Α͍͔ͷࢳ
    ޱ͕ݟ͔ͭΔ͸ͣͰ͢ɻͦͷຊདྷͷ໨
    తʹͭͳ͕ΔͨΊͷσβΠϯΛ͍ͯ͠
    Δ͜ͱΛ๨Εͯ͸͍͚·ͤΜɻ
    ڵຯ
    ೝ஌ ڞ༗
    "55&/5*0/ */5&3&45 4)"3&
    ໨త
    0#+&$5*7&
    खஈ
    "$$&44
    ޱίϛ
    ϝσΟΞͰ஌Δ ϨϏϡʔ
    I
    J
    J
    I
    ͋ͳͨͷ
    σβΠϯ
    ର৅෺
    Ͳ͏͍͏ߦಈΛͱ͔ͬͨ
    Ͳ͔͜ΒΞΫηε͔ͨ͠
    

    View Slide

53. ͍͍੡඼Ͱ΋ɺ͍͍ମݧͱ͸ݶΒͳ͍ɻ
    Good UI Good UX
    A B
    Work Sheet #1 Answer
    ݟ͑ͳ͍Ձ஋Λ஌ΔͨΊʹ஌͓ͬͯ
    ͍ͯ΄͍͜͠ͱΛͭ͋͛·ͨ͠ɻ
    UNDERSTANDING UX DESIGN PROCESS
    σβΠϯͱ͸ɺओޠ͕ࣗ෼Ͱ͸ͳ͍ɻ
    ఻͑Δ ఻ΘΔ
    C D
    

    View Slide

54. Work Sheet #2 Answer
    *40ʢ+*4;ʣΠϯλϥ
    ΫςΟϒγεςϜͷਓؒத৺ઃܭϓϩ
    ηεΛࢦ͢ɻ
    )$%ͷਐΊํͷجຊ͸ɺ੡඼ͷߏ૝
    ஈ֊͔Βର৅ϢʔβʔͱͦͷཁٻΛ໌
    ֬ʹͯ͠ɺཁٻʹ߹ͬͨ΋ͷΛઃܭ
    ͠ɺຬ଍౓߹͍ΛධՁ͢Δ͜ͱͰ͢ɻ
    Ϣʔβʔͷཁٻ͕ຬͨ͞ΕΔ·Ͱɺ͜
    ΕΛ܁Γฦ͠·͢ɻ
    )$%ϓϩηε
    σβΠϯͷ࡞੒
    ཁٻࣄ߲ͷ໌֬Խ
    ධՁ
    ˞)$%)VNBO$FOUFSFE%FTJHOͷུশ
    ར༻ঢ়گͷཧղ
    )$%ͷඞཁੑͷಛఆ
    
    7
    UNDERSTANDING UX DESIGN PROCESS
    1
    2
    3
    4
    ར༻ঢ়گͷཧղ
    E
    

    View Slide

55. Work Sheet #3 Answer
    ʮ৘ใΞʔΩςΫνϟʯͰ͸ɺྑ͍
    ৘ใΞʔΩςΫνϟ͸ʮɹɹɹʯ
    ʮɹɹɹʯʮɹɹɹʯͷͭΛόϥ
    ϯεΑ͘ߟྀ͍ͯ͠Δ΋ͷͱ͍ͯ͠·
    ͢ɻϢʔβʔͷཱ৔΍จ຺Λߟྀͯ͠
    ίϯςϯπΛఏࣔ͢Δ͔Βͦ͜ɺ͸͡
    Ίͯ৘ใ͸׆͖ͨ΋ͷʹͳΓ·͢ɻ
    UNDERSTANDING UX DESIGN PROCESS
    ୭ʹ
    USER
    ͲͷΑ͏ʹ
    CONTEXT
    ԿΛ
    CONTENT
    H
    G
    F
    F
    G H
    

    View Slide

56. UNDERSTANDING UX DESIGN PROCESS
    Work Sheet #4 Answer
    ͨͱ͑͹ɺ͋ͳ͕ͨؔΘΒΕ͍ͯΔ
    σβΠϯର৅෺Λʮɹɹɹʯʹهೖ
    ͍͖ͨͩɺʮɹɹɹʯΛߟ͑ͯΈΔ͜
    ͱͰɺͳʹΛߟྀ͢Ε͹Α͍͔ͷࢳ
    ޱ͕ݟ͔ͭΔ͸ͣͰ͢ɻͦͷຊདྷͷ໨
    తʹͭͳ͕ΔͨΊͷσβΠϯΛ͍ͯ͠
    Δ͜ͱΛ๨Εͯ͸͍͚·ͤΜɻ
    ڵຯ
    ೝ஌ ڞ༗
    "55&/5*0/ */5&3&45 4)"3&
    ग़͔͚Δ
    ं
    ໨త
    0#+&$5*7&
    खஈ
    "$$&44
    ޱίϛ
    ϝσΟΞͰ஌Δ ϨϏϡʔ
    Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ
    ͋ͳͨͷ
    σβΠϯ
    ର৅෺
    I
    J
    J
    I
    

    View Slide