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.7k
Future Gazing Careers
bookslope
0
1.8k
What think about MOBILITY
bookslope
0
810
漫画で醸成する3S(嗜好・志向・思考)
bookslope
0
180
TIPS FOR ONLINE SEMINARS - 67WS Online #1
bookslope
0
1.7k
Introducing MaaS x Card
bookslope
3
2k
Other Decks in Design
See All in Design
ポートフォリオ_webデザイナー
nami_webdesigner
0
110
NAHO SHIMONO_Portfolio2025
nahohphp
0
890
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
How to get a Tiger to Tulsa
mcduckyart
0
110
harutaka Vision Deck
zenkigenforrecruit
0
150
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
140
minpaku-community-scrum-patterns
norinity1103
1
120
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
420
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
The Golden Whitney
ohtristanart
PRO
0
560
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Tale of Four Properties
chriscoyier
160
23k
Adopting Sorbet at Scale
ufuk
77
9.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Done Done
chrislema
184
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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