UI/UX Design for Mobility

WeWork 主催のオンラインイベント『モビリティにおけるユーザーエクスペリエンス』のプレゼン資料です。

Transcript

1. UI/UX DESIGN FOR MOBILITY Mede by Takashi Sakamoto @bookslope
2. PROFILE ͸͡Ί·ͯ͠ UI/UX DESIGN FOR MOBILITY εϚʔτϞϏϦςΟࣄۀਪਐࣨ
   ࣨ௕
 ৘ใઃܭɾ69σβΠϯ͕ઐ໳ྖҬ
   ΦϯϥΠϯίϛϡχςΟӡӦ
 دߘɾߨԋଟ਺
 ஶ࡞ʰ*"γϯΩϯάʱͳͲ Mede by Takashi Sakamoto @bookslope
3. LAYER ࠓճͱΓ͋͛Δʮ6*69ʯͱ͸ɺϞϏ ϦςΟΛ୅ද͢Δࣗಈंͷӡస੮ʹ ΈΒΕΔϢʔβʔΠϯλʔϑΣʔε ʢ).*ʣΛऔΓ্͍͛ͯ·͢ɻ
 
 ).*ͱ͸ɺ)VNBO.BDIJOF
   *OUFSGBDFͷུͰɺਓؒͱػցͱͷؒ Ͱ৘ใͷ΍ΓͱΓΛߦ͏ڥքͱ͍͏ ҙຯΛ࣋ͭɻ UI/UX DESIGN FOR MOBILITY Steering Smartphone Driver & Passenger City
4. INDEX ͜ͷࢿྉʹؚ·ΕΔ΋ͷ UI/UX DESIGN FOR MOBILITY ंͷ).*σβΠϯைྲྀ
   .BB4ʹ͓͚Δ69σβΠϯ
   10$ͷॏཁੑ 01. 02. 03.
5. ंͷ).*σβΠϯைྲྀ “HMI” DESIGN TREND 01
6. CASE ʮ$"4&ʯͷਁಁʹΑΓɺӡసखͷૢ ࡞ྖҬʹੜ׆ͷҰ෦ͱͯ͠ීஈར༻͠ ͍ͯΔεϚϗ͕୆಄͖ͯ͠·ͨ͠ɻ
   ʮ$"4&ʯͱ͸ɺʮ$POOFDUFEʯ ʮ"VUPOPNPVTʯʮ4IBSFEˍ 4FSWJDFʯʮ&MFDUSJDʯͷ಄จࣈΛࣔ ͢ɻ UI/UX DESIGN FOR MOBILITY
7. CTRL ೥ɺถւ܉ͷۦஞ؋͸͜Ε·Ͱ ࠾༻͍ͯͨ͠λονεΫϦʔϯʢιϑ τʣ͔Βैདྷͷεϩοτϧૢ࡞ʢϋʔ υʣʹ໭ͨ͠ͱ͍͏ൃදΛͨ͠ɻ
   ৐૊һͷޡૢ࡞͕ଟ͍ͷ͕ཧ༝ͩ ͕ɺௐࠪϨϙʔτʹΑΔͱशख़౓΍ ܇࿅ෆ଍ͱ͍͏ਓؒଆͷ໰୊ͷ΄͏ ͕ු͖ூΓʹͳ͍ͬͯΔɻ UI/UX DESIGN FOR MOBILITY
8. By SpaceX Crew Dragon UI/UX DESIGN FOR MOBILITY
9. Semi Roadstar Model S Model 3 UI/UX DESIGN FOR MOBILITY
10. By BYTON Menu Menu Meter + Infortainment UI/UX DESIGN FOR MOBILITY
11. By NIO Nomi Infortainment Meter UI/UX DESIGN FOR MOBILITY
12. Infortainment By Polestar2 UI/UX DESIGN FOR MOBILITY Meter
13. By Polestar Precept UI/UX DESIGN FOR MOBILITY Infortainment Meter
14. By SONY VISION UI/UX DESIGN FOR MOBILITY Meter + Infortainment Side Monitor Side Monitor
15. By The Dyson Battery Electric Vehicle UI/UX DESIGN FOR MOBILITY Meter + Infortainment Side Monitor HVAC CTRL
16. TREND ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ ͷτϨϯυͱͯͭ͠ͷைྲྀ͕͋Γ· ͢ɻ UI/UX DESIGN FOR MOBILITY /*0
    1PMFTUBS
    %ZTPOʜ #:50/
    40/:
    )0/%"ʜ Meter + Infortainment Infortainment Meter 01. 02. ηύϨʔτܕ ίϯόΠϯܕ
17. By Apple CarPlay UI/UX DESIGN FOR MOBILITY Apple CarPlay
18. By Android Auto UI/UX DESIGN FOR MOBILITY Android Auto
19. Citroen Ami εϚϗΛΠϯϑΥςΠϯϝϯτγες Ϝͱͯͦ͠ͷ··ར༻͢Δίϯηϓτ ΋͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Meter Smartphone
20. Android Automotive OS ͍ΘΏΔंͷ04ʢ$BS
    04ʣ͸ɺ "OESPJE
    "VUPNPUJWF
    ͱݺ͹ΕɺϏϧ υΠϯͷϩʔυϚοϓ͕ܭը͞Ε͍ͯ Δɻ UI/UX DESIGN FOR MOBILITY 2020 7PMWP
    $BST 2021 3FOBVMU
    
    /JTTBO
    
    .JUTVCJTIJ (FOFSBM
    .PUPST
    
21. UI/UX DESIGN FOR MOBILITY Automotive High-Tech New System Legacy System Android Auto CarPlay Tesla Polestar2 Bentz Porsche NISSAN BYTON SONY Waymo Citroen Ami
22. TOYOTA e-Palette τϤλͷʮFύϨοτʯ౦ژ όʔδϣϯͰ͸ɺηϯαʔɺΧϝϥɺ -J%"3γεςϜ͕౥ࡌ͞Ε͓ͯΓɺ௿ ଎ࣗಈӡసΛαϙʔτ͍ͯ͠·͢ɻ UI/UX DESIGN FOR MOBILITY Ctrl Camera View
23. Point of View ࣗಈӡసٕज़͕ൃୡ͢Δͱɺ).*ͱ͠ ͯॏཁͳͷ͸ɺӡస͢Δӡసखͷࢹ ఺ΑΓ΋ɺӡస͍ͯ͠ͳ͍৐٬ͷࢹ ఺ʹॏ͖Λஔ͘ඞཁ͕͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Passenger Driver
24. .BB4ʹ͓͚Δ69σβΠϯ UX DESIGN FOR “MaaS “ 02
25. UI/UX DESIGN FOR MOBILITY
26. ໨త ໨త ໨త UI/UX DESIGN FOR MOBILITY
27. By Designing from the Car: Why Context Matter UI/UX DESIGN FOR MOBILITY
28. By Google Maps UI/UX DESIGN FOR MOBILITY
29. By Airbitat Oasis Smart Bus Stop UI/UX DESIGN FOR MOBILITY
30. By Android Auto UI/UX DESIGN FOR MOBILITY
31. By Holoride UI/UX DESIGN FOR MOBILITY
32. By Tesla UI/UX DESIGN FOR MOBILITY
33. By Waymo UI/UX DESIGN FOR MOBILITY
34. By Waymo UI/UX DESIGN FOR MOBILITY
35. By Uber ౸ண࣌ؒ
    αʔϏε
    φϏήʔγϣϯ
    ӡస
    ৐ंϧʔτ
    ं྆඼࣭
    ͦͷଞ UI/UX DESIGN FOR MOBILITY
36. UI/UX DESIGN FOR MOBILITY By JR౦೔ຊ
37. UI/UX DESIGN FOR MOBILITY Horai EMot my route LUUP aimo WHILL docomo bike share Multimodal Single-mode JR East JR East WILLERS Whim ANA Uber Special Public
38. MaaS CTRL ʮ.BB4ίϯτϩʔϥʔʯͱ͸ɺϢʔ βʔ޲͚.BB4ΞϓϦͷ͜ͱ͚ͩͰ͸ ͳ͘ɺࣄۀऀ΍࣏ࣗମ޲͚ͷσʔλ ՄࢹԽ΍෼ੳɺ੍ޚΛ͢Δ͜ͱΛࢦ ͢ɻ
    ϢʔβʔͱϞϏϦςΟͷؔ܎Λվળ ͠ɺϢʔβʔͷརศੑΛ͞Βʹ޲্ ͢Δ͜ͱʹͳΔɻ UI/UX DESIGN FOR MOBILITY MaaS CTRL
39. 10$ͷॏཁੑ THE IMPORTANCE OF “POC" 03
40. By NISSAN #TMS2019 UI/UX DESIGN FOR MOBILITY
41. UX Research σβΠϯϑΣʔζΑΓલͷاըϑΣʔ ζʹ͓͍ͯɺ69ϦαʔνΛ͢Δ͜ͱ Ͱɺاըͷਫ਼౓Λ޲্ͤ͞ΔऔΓ૊Έ ʹͭͳ͕Γ·͢ɻ UI/UX DESIGN FOR MOBILITY σβΠϯ اը ࣮ݧ ։ൃ
42. By NISSAN Ariya Concept UI/UX DESIGN FOR MOBILITY
43. By NISSAN IMk Concept UI/UX DESIGN FOR MOBILITY
44. Ideation νʔϜ͕ڞಉϫʔΫγϣοϓ΍Ϣʔ βʔௐࠪɺݕূʹࢀՃ͢Δ͜ͱͰɺҙ ࢥͷڞ༗͕͠΍͘͢ͳΓ·͢ɻ UI/UX DESIGN FOR MOBILITY ϫʔΫγϣοϓ ௐࠪ ݕূɾ࣮ݧ σβΠϯ اը ࣮ݧ ։ൃ
45. MaaS x Card σβΠφʔ΍ϊϯσβΠφʔ޲͚ʹ։ ൃͨ͠ϫʔΫγϣοϓσβΠϯπʔ ϧɻ
    Ҡಈʢओʹެڞަ௨αʔϏεʣʹ· ͭΘΔϢʔβʔମݧΛՄࢹԽͨ͠ ΧʔυͰɺަ௨ࣄۀऀ΍ࣗಈंձࣾ ͳͲͷاը΍σβΠϯʹܞΘΔํʹར ༻ͯ͠΋Β͏͜ͱͰɺϢʔβʔମݧͷ ޲্ʹߩݙ͢ΔऔΓ૊Έɻ UI/UX DESIGN FOR MOBILITY
46. UX ϓϩηε͸ઢܗͰ͸ͳ͘ɺαΠΫϧ͢ Λ೦಄ʹஔ͘ͱΘ͔Γ΍͍͢ɻߟ͑ Δ΂͖λΠϛϯάͱ͍͏ͷ͸Ұ୴ແ ࢹͯ͠औΓ૊Ή͜ͱͰɺઌʹΞ΢τ ϓοτ͕ੜ·ΕΔɻ
    Ξ΢τϓοτΛઌ಄ʹߟ͑ΔͨΊʹ ͸ɺ໾ׂ෼୲ΑΓઌʹࣗ਎ͷମݧ͔ Βߟ͑ΔบΛ͚͓ͭͯ͘͜ͱ͕େ੾ Ͱ͋Δɻ UI/UX DESIGN FOR MOBILITY اըϑΣʔζʹ͓͚ΔσβΠϯͰ͋Δ
    ࡞Δͱݕূ͸ৗʹαΠΫϧ͢Δ
    Ϣʔβʔମݧͱ͸ࣗ਎ͷମݧͰ͋Δ
47. Carrozzeria Facebook Page / Group #Mobility #MaaS UI/UX DESIGN FOR MOBILITY
48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ THANKS FOR YOUR ATTENTION! FIN Mede by Takashi Sakamoto @bookslope