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.6k
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.2k
Understanding UX Design Proces - UXデザインプロセスを理解する
bookslope
0
1.2k
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
bookslope
0
1.8k
Future Gazing Careers
bookslope
0
1.9k
What think about MOBILITY
bookslope
0
930
漫画で醸成する3S(嗜好・志向・思考)
bookslope
0
180
TIPS FOR ONLINE SEMINARS - 67WS Online #1
bookslope
0
1.8k
Introducing MaaS x Card
bookslope
3
2.1k
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
310
UXデザインはなぜ定着しないのか?
designstudiopartners
0
1k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
What makes a great Director?
_limex_
0
270
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
mento Design Team Portfolio
mento0fficial
1
850
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
260
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
570
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
23k
Music & Morning Musume
bryan
46
6.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Gamification - CAS2011
davidbonilla
81
5.5k
Facilitating Awesome Meetings
lara
56
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
A designer walks into a library…
pauljervisheath
209
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
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