Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI/UX Design for Mobility
Search
bookslope
June 10, 2020
Design
1
4.4k
UI/UX Design for Mobility
WeWork 主催のオンラインイベント『モビリティにおけるユーザーエクスペリエンス』のプレゼン資料です。
bookslope
June 10, 2020
Tweet
Share
More Decks by bookslope
See All by bookslope
HMI Design in MaaS Era / MaaS 時代の HMI デザイン - UX デザインの重要性
bookslope
0
17k
Understanding UX Design Proces - デザインリテラシーを高める方法
bookslope
0
1.1k
Understanding UX Design Proces - UXデザインプロセスを理解する
bookslope
0
1.1k
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
bookslope
0
1.6k
Future Gazing Careers
bookslope
0
1.7k
What think about MOBILITY
bookslope
0
790
漫画で醸成する3S(嗜好・志向・思考)
bookslope
0
180
TIPS FOR ONLINE SEMINARS - 67WS Online #1
bookslope
0
1.7k
Introducing MaaS x Card
bookslope
3
1.9k
Other Decks in Design
See All in Design
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
120
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
260
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
260
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
600
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
DC Style Redesign
mcduckyart
0
120
harutaka Vision Deck
zenkigenforrecruit
0
130
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
minpaku-community-scrum-patterns
norinity1103
1
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
BBQ
matthewcrist
89
9.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Six Lessons from altMBA
skipperchong
28
3.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
UI/UX DESIGN FOR MOBILITY Mede by Takashi Sakamoto @bookslope
PROFILE ͡Ί·ͯ͠ UI/UX DESIGN FOR MOBILITY εϚʔτϞϏϦςΟࣄۀਪਐࣨࣨ ใઃܭɾ69σβΠϯ͕ઐྖҬ ΦϯϥΠϯίϛϡχςΟӡӦ دߘɾߨԋଟ
ஶ࡞ʰ*"γϯΩϯάʱͳͲ Mede by Takashi Sakamoto @bookslope
LAYER ࠓճͱΓ͋͛Δʮ6*69ʯͱɺϞϏ ϦςΟΛද͢Δࣗಈंͷӡస੮ʹ ΈΒΕΔϢʔβʔΠϯλʔϑΣʔε ʢ).*ʣΛऔΓ্͍͛ͯ·͢ɻ ).*ͱɺ)VNBO.BDIJOF *OUFSGBDFͷུͰɺਓؒͱػցͱͷؒ ͰใͷΓͱΓΛߦ͏ڥքͱ͍͏ ҙຯΛ࣋ͭɻ
UI/UX DESIGN FOR MOBILITY Steering Smartphone Driver & Passenger City
INDEX ͜ͷࢿྉʹؚ·ΕΔͷ UI/UX DESIGN FOR MOBILITY ंͷ).*σβΠϯைྲྀ .BB4ʹ͓͚Δ69σβΠϯ 10$ͷॏཁੑ 01.
02. 03.
ंͷ).*σβΠϯைྲྀ “HMI” DESIGN TREND 01
CASE ʮ$"4&ʯͷਁಁʹΑΓɺӡసखͷૢ ࡞ྖҬʹੜ׆ͷҰ෦ͱͯ͠ීஈར༻͠ ͍ͯΔεϚϗ͕಄͖ͯ͠·ͨ͠ɻ ʮ$"4&ʯͱɺʮ$POOFDUFEʯ ʮ"VUPOPNPVTʯʮ4IBSFEˍ 4FSWJDFʯʮ&MFDUSJDʯͷ಄จࣈΛࣔ ͢ɻ UI/UX DESIGN
FOR MOBILITY
CTRL ɺถւ܉ͷۦஞ؋͜Ε·Ͱ ࠾༻͍ͯͨ͠λονεΫϦʔϯʢιϑ τʣ͔Βैདྷͷεϩοτϧૢ࡞ʢϋʔ υʣʹͨ͠ͱ͍͏ൃදΛͨ͠ɻ һͷޡૢ࡞͕ଟ͍ͷ͕ཧ༝ͩ ͕ɺௐࠪϨϙʔτʹΑΔͱशख़ ܇࿅ෆͱ͍͏ਓؒଆͷͷ΄͏ ͕ු͖ூΓʹͳ͍ͬͯΔɻ UI/UX
DESIGN FOR MOBILITY
By SpaceX Crew Dragon UI/UX DESIGN FOR MOBILITY
Semi Roadstar Model S Model 3 UI/UX DESIGN FOR MOBILITY
By BYTON Menu Menu Meter + Infortainment UI/UX DESIGN FOR
MOBILITY
By NIO Nomi Infortainment Meter UI/UX DESIGN FOR MOBILITY
Infortainment By Polestar2 UI/UX DESIGN FOR MOBILITY Meter
By Polestar Precept UI/UX DESIGN FOR MOBILITY Infortainment Meter
By SONY VISION UI/UX DESIGN FOR MOBILITY Meter + Infortainment
Side Monitor Side Monitor
By The Dyson Battery Electric Vehicle UI/UX DESIGN FOR MOBILITY
Meter + Infortainment Side Monitor HVAC CTRL
TREND ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ ͷτϨϯυͱͯͭ͠ͷைྲྀ͕͋Γ· ͢ɻ UI/UX DESIGN FOR MOBILITY /*0 1PMFTUBS
%ZTPOʜ #:50/ 40/: )0/%"ʜ Meter + Infortainment Infortainment Meter 01. 02. ηύϨʔτܕ ίϯόΠϯܕ
By Apple CarPlay UI/UX DESIGN FOR MOBILITY Apple CarPlay
By Android Auto UI/UX DESIGN FOR MOBILITY Android Auto
Citroen Ami εϚϗΛΠϯϑΥςΠϯϝϯτγες Ϝͱͯͦ͠ͷ··ར༻͢Δίϯηϓτ ͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Meter
Smartphone
Android Automotive OS ͍ΘΏΔंͷ04ʢ$BS04ʣɺ "OESPJE"VUPNPUJWFͱݺΕɺϏϧ υΠϯͷϩʔυϚοϓ͕ܭը͞Ε͍ͯ Δɻ UI/UX DESIGN FOR
MOBILITY 2020 7PMWP$BST 2021 3FOBVMU/JTTBO.JUTVCJTIJ (FOFSBM.PUPST
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
TOYOTA e-Palette τϤλͷʮFύϨοτʯ౦ژ όʔδϣϯͰɺηϯαʔɺΧϝϥɺ -J%"3γεςϜ͕ࡌ͞Ε͓ͯΓɺ ࣗಈӡసΛαϙʔτ͍ͯ͠·͢ɻ UI/UX DESIGN FOR MOBILITY
Ctrl Camera View
Point of View ࣗಈӡసٕज़͕ൃୡ͢Δͱɺ).*ͱ͠ ͯॏཁͳͷɺӡస͢Δӡసखͷࢹ ΑΓɺӡస͍ͯ͠ͳ͍٬ͷࢹ ʹॏ͖Λஔ͘ඞཁ͕͋Γ·͢ɻ UI/UX DESIGN FOR
MOBILITY Passenger Driver
.BB4ʹ͓͚Δ69σβΠϯ UX DESIGN FOR “MaaS “ 02
UI/UX DESIGN FOR MOBILITY
త త త UI/UX DESIGN FOR MOBILITY
By Designing from the Car: Why Context Matter UI/UX DESIGN
FOR MOBILITY
By Google Maps UI/UX DESIGN FOR MOBILITY
By Airbitat Oasis Smart Bus Stop UI/UX DESIGN FOR MOBILITY
By Android Auto UI/UX DESIGN FOR MOBILITY
By Holoride UI/UX DESIGN FOR MOBILITY
By Tesla UI/UX DESIGN FOR MOBILITY
By Waymo UI/UX DESIGN FOR MOBILITY
By Waymo UI/UX DESIGN FOR MOBILITY
By Uber ౸ண࣌ؒ αʔϏε φϏήʔγϣϯ ӡస ंϧʔτ ं࣭྆ ͦͷଞ UI/UX
DESIGN FOR MOBILITY
UI/UX DESIGN FOR MOBILITY By JR౦ຊ
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
MaaS CTRL ʮ.BB4ίϯτϩʔϥʔʯͱɺϢʔ βʔ͚.BB4ΞϓϦͷ͜ͱ͚ͩͰ ͳ͘ɺࣄۀऀ࣏ࣗମ͚ͷσʔλ ՄࢹԽੳɺ੍ޚΛ͢Δ͜ͱΛࢦ ͢ɻ ϢʔβʔͱϞϏϦςΟͷؔΛվળ ͠ɺϢʔβʔͷརศੑΛ͞Βʹ্ ͢Δ͜ͱʹͳΔɻ
UI/UX DESIGN FOR MOBILITY MaaS CTRL
10$ͷॏཁੑ THE IMPORTANCE OF “POC" 03
By NISSAN #TMS2019 UI/UX DESIGN FOR MOBILITY
UX Research σβΠϯϑΣʔζΑΓલͷاըϑΣʔ ζʹ͓͍ͯɺ69ϦαʔνΛ͢Δ͜ͱ Ͱɺاըͷਫ਼Λ্ͤ͞ΔऔΓΈ ʹͭͳ͕Γ·͢ɻ UI/UX DESIGN FOR MOBILITY
σβΠϯ اը ࣮ݧ ։ൃ
By NISSAN Ariya Concept UI/UX DESIGN FOR MOBILITY
By NISSAN IMk Concept UI/UX DESIGN FOR MOBILITY
Ideation νʔϜ͕ڞಉϫʔΫγϣοϓϢʔ βʔௐࠪɺݕূʹࢀՃ͢Δ͜ͱͰɺҙ ࢥͷڞ༗͕͘͢͠ͳΓ·͢ɻ UI/UX DESIGN FOR MOBILITY ϫʔΫγϣοϓ ௐࠪ
ݕূɾ࣮ݧ σβΠϯ اը ࣮ݧ ։ൃ
MaaS x Card σβΠφʔϊϯσβΠφʔ͚ʹ։ ൃͨ͠ϫʔΫγϣοϓσβΠϯπʔ ϧɻ Ҡಈʢओʹެڞަ௨αʔϏεʣʹ· ͭΘΔϢʔβʔମݧΛՄࢹԽͨ͠ ΧʔυͰɺަ௨ࣄۀऀࣗಈंձࣾ ͳͲͷاըσβΠϯʹܞΘΔํʹར
༻ͯ͠Β͏͜ͱͰɺϢʔβʔମݧͷ ্ʹߩݙ͢ΔऔΓΈɻ UI/UX DESIGN FOR MOBILITY
UX ϓϩηεઢܗͰͳ͘ɺαΠΫϧ͢ Λ೦಄ʹஔ͘ͱΘ͔Γ͍͢ɻߟ͑ Δ͖λΠϛϯάͱ͍͏ͷҰ୴ແ ࢹͯ͠औΓΉ͜ͱͰɺઌʹΞτ ϓοτ͕ੜ·ΕΔɻ ΞτϓοτΛઌ಄ʹߟ͑ΔͨΊʹ ɺׂ୲ΑΓઌʹࣗͷମݧ͔ Βߟ͑ΔบΛ͚͓ͭͯ͘͜ͱ͕େ Ͱ͋Δɻ
UI/UX DESIGN FOR MOBILITY اըϑΣʔζʹ͓͚ΔσβΠϯͰ͋Δ ࡞ΔͱݕূৗʹαΠΫϧ͢Δ ϢʔβʔମݧͱࣗͷମݧͰ͋Δ
Carrozzeria Facebook Page / Group #Mobility #MaaS UI/UX DESIGN FOR
MOBILITY
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ THANKS FOR YOUR ATTENTION! FIN Mede by Takashi Sakamoto
@bookslope