$30 off During Our Annual Pro Sale. View Details »

Understanding UX Design Proces - デザインリテラシーを高める方法

bookslope
October 29, 2022

Understanding UX Design Proces - デザインリテラシーを高める方法

2022年10月29日に、青森商工会議所で開催されたセミナー・イベント「Web活用トレンドDX(デラックス)」で講演したスライド。

bookslope

October 29, 2022
Tweet

More Decks by bookslope

Other Decks in Design

Transcript

  1. UNDERSTANDING

    UX DESIGN PROCESS
    Mede by Takashi Sakamoto @bookslope


    69σβΠϯϓϩηεΛཧղ͢Δ
    Photo by Keith Hardy on Unsplash

    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


    Photo by Keith Hardy on Unsplash

    View Slide