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
950
漫画で醸成する3S(嗜好・志向・思考)
bookslope
0
190
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
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
150
minpaku-community-scrum-patterns
norinity1103
1
470
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
mount_company_profile
mount_inc
0
310
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.6k
「UXとUIの違い」v2
shirasu3
0
250
mento Design Team Portfolio
mento0fficial
1
910
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
980
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
株式会社バクタム 会社説明資料
bactum
0
360
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Navigating Team Friction
lara
190
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Facilitating Awesome Meetings
lara
56
6.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
4 Signs Your Business is Dying
shpigford
185
22k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
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