UI/UX Design for Mobility

UI/UX Design for Mobility

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

Ed946da673ee07c8b3b41b7aa8268e13?s=128

Takashi Sakamoto

June 10, 2020
Tweet

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ʢ$BS04ʣ͸ɺ "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