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
Sustinable Frontend Design
Search
Kazuki YAMASHITA
March 18, 2017
Design
8
1.6k
Sustinable Frontend Design
UI デザインから考える「持続可能なデザイン」
FRONTEND CONFERENCE 2017, 18th Mar 2017
Designed by IMPATH
Kazuki YAMASHITA
March 18, 2017
Tweet
Share
More Decks by Kazuki YAMASHITA
See All by Kazuki YAMASHITA
What Was UX Design All About?
ykazu
2
820
Core skills of the Design for Front-end
ykazu
17
50k
Primer of Information Architecture 2018
ykazu
5
540
Think of the User Experience not UX
ykazu
6
1.2k
Primer of Information Architecture 2016
ykazu
5
2k
Think Design for Future.
ykazu
5
1.3k
Other Decks in Design
See All in Design
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
太田博三(@usagisan2020)
otanet
0
230
発表資料テンプレート / My slide template
thatblue
0
220
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
600
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
580
OLTA株式会社/デザイン紹介資料
taxy
0
120
マンガで分かるサービスデザインガイドライン
senryakuka
1
660
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Invisible Side of Design
smashingmag
299
50k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
How to train your dragon (web standard)
notwaldorf
91
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
How GitHub (no longer) Works
holman
314
140k
Transcript
FRONTEND CONFERENCE 2017 18th Mar. 2017 ࣋ଓՄೳͳσβΠϯ
ࢁ Լ Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫ τ @yamashitakazuki
6*ͱ69Λઐ ϑϩϯτΤϯυΞϓϦ։ൃ 6*վળɺ ใઃܭɺ ΠϯλϥΫγϣϯσβΠϯ
https://speakerdeck.com/ykazu ࡢͷεϥΠ υͰ͢
Question
None
Which is your best?
None
None
None
14mm 154°C 3’36” ࠷ߴͷτʔετͷম͖ํ - Scientists create perfect toast 2003
by Vogel
FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ σβΠϯΛ͢Δɺ ϑϩϯτΤϯυʹܞΘΔࢲͨͪ·ΔͰτʔετͷম͖ՃݮΛܾΊΔΑ͏ͳͷͰ͢
ج४Λ࣋ͭ͜ͱ ͦΕͧΕ ʮྑ͍ʯ ͱࢥ͏ॠؒɺ օ͞Μͷ಄ʹ͋Δ ʮج४ʯ ʹΑܾͬͯΊΒΕ·͢
14mm 154°C 3’36” σʔλ
14mm 154°C 3’36” σʔλͰͳ͘ηΦϦʔ σβΠϯଟܾಋ͔ΕͨσʔλʹΑܾͬͯΊΔͷͰͳ͘ ʮηΦϦʔʯ ͕લఏͱͳΓ·͢
Design UI σβΠϯͱ͍͏େ͖ͳྖҬͷதʹ͋Δ6*Ұ෦Ͱɺ σβΠφʔɺ ϑϩϯτΤϯυΤϯδχΞʹؔΘΔ͜ͱ
Ϋʔϧͳ Ϣʔβʔ͕૿͑Δ $73͕ߴ͘ͳΔ ྲྀߦΞϓϦͷ λ οϓ͞ΕΔ UI ͜͏͍͏6*Λࢦ͢લʹɺ
ͣͬͱͬͯΒ͑Δ UI ͣͬͱͬͯΒ͑Δ6*Λߟ͑·͠ ΐ͏
࣋ଓՄೳͳσβΠϯ
࣋ଓՄೳ ͖ͳ͍ ϝϯςφϒϧ
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ
None
σβΠϯݪଇ ΠϯλϥΫγϣϯ ελΠϧ ϨΠΞτ ίϯϙʔωϯτ σβΠϯݪଇ ΨΠ υϥΠϯϧʔϧҎ֎ʹσβΠϯΛ໌จԽͨ͠ ʮσβΠϯݪଇʯ ͕σβΠϯֶशͷॿ͚ʹͳΓ·͢
ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ӈʹஔ͢Δ
औফɺ ഁյతΞΫγϣϯ ୀߦ͢ΔΞΫγϣϯ ࠨʹஔ͢Δ
औফɺ ഁյతΞΫγϣϯ ࠨʹஔ͢Δ ӈʹஔ͢Δ ୀߦ͢ΔΞΫγϣϯ ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ͳͥͦ͏͖͢ͳͷ͔·Ͱ͕ॻ͔ΕͨΨΠ υϥΠϯ
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍
Airbnb
ʠ"JSCOCͷΑ͏ͳྲྀߦͷ6*Ͱ ʂ ʡ εϐʔσΟͳσβΠϯαΠΫϧΛ"JSCOCͷΑ͏ʹճͤ·͔͢ʁ ·ͨɺ "JSCOCͷҰ෦Λ·ͶΔɺ ͜Ε͋ͳͨͷσβΠϯݪଇΛഁͤͯ͞͠·͍·͢ 6*ͷྲྀߦΓɺ ͙͢ഇΕΔ
ྲྀߦΓɺ ഇΓͷͳ͍ ྗͷ͋ΔσβΠϯͲͪΒ ʁ άϥσΟΤϯτ ࡉ͍ઢ ηϦϑ Thin Bold ϑϥο
τ ໌֬ͳઢ αϯηϦϑ σβΠϯݪଇͷ౷Ұ͕େલఏ a a
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
6*ͷϨϕϧ NG Lv.1 Lv.2 Lv.3 ෆదɺ ΨΠ υϥΠϯʹඇ४ڌ ͑Δ͕ɺ ֶश͕ඞཁ
ॳΊͯͰ͑Δ Ϣʔβʔͷܟҙ ɾ ৴པ͕͋Δ
ݴ༿͕ͨΒ͢৴པ ςΩετ ݸแͰ͖·ͤΜɻ छྨ͓બͼ͍͚ͨͩ·ͤΜɻ ൱ఆܗͷςΩετ͕࿈ͳΔɺ ͦΜͳαΠ τ͔Βड͚ΔҹΛߟ͑ͯΈ·͠ ΐ͏
ݴ༿͕ͨΒ͢৴པ ςΩετ ݸแͰ͖·ͤΜɻ ·ͱΊͯแ͞Ε͍ͯ·͢ɻ छྨ͓બͼ͍͚ͨͩ·ͤΜɻ ͞·͟·ͳछྨΛΈ߹Θ͍ͤͯ·͢ɻ ݴ͍͕͑Մೳ͔Λߟ͑ͯΈ·͠ ΐ͏
Apple ༏ΕͨσβΠϯηϯςϯε༏Ε͍ͯ·͢ɺ ͪΖΜάϩʔόϧʹ
ͬͱݟΔ ৄࡉ ৄ͘͠ίνϥ ༧͢Δ ༧ը໘ ࠓ͙͢༧͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ ϘλϯͰ͍͍ͷ͔ʁͦͷϥϕϧͰ͍͍ͷ͔ʁ
ͬͱݟΔ ৄࡉ ৄͪ͘͜͠Β ༧͢Δ ༧ը໘ ࠓ͙͢༧͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ దͳϥϕϦϯάͱίϯϙʔωϯτͷબఆ͕খ͞ͳ৴པੑʹͭͳ͕Γ·͢
ਖ਼͍͠දه web Web facebook Facebook Google Map Google Maps AppStore
App Store ݐࠃه೦ ݐࠃه೦ͷ ϓϩͷϥΠλʔͰͳ͍ʁ͍͍͑ɺ ϓϩͷσβΠφʔΤϯδχΞݴ༿Λѻ͏ࣄͰ͢
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά σβΠϯ ϓϩτλΠϓϑΝʔετɺ ͜ͷ͋ͨΓͷϫʔΫϑϩʔ༷ʑͳπʔϧʹॿ͚ΒΕ͍ͯ·͢
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ͦͦԿ͕Γ͔ͨͬͨͷ͔ɺ ΰʔϧ͕ڞ༗Ͱ͖͍ͯͳ͍ͱɺ
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ σβΠϯ ࣮ μϝͰͨ͠ ࠷ऴతʹഁ͔͠Ͷ·ͤΜ
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ நతͳΠϝʔδΰʔϧͷڞ༗πʔϧͰͳ͍ํ͕Α͍߹͋Γ·͢
ϖʔύʔϓϩτλΠϐϯά
ϖʔύʔϓϩτλΠϐϯά ಄ͱख σεΫ τοϓ ܗʹͳͬͨͷΛ ޮతʹ ͖Ε͍ʹ͢Δ ࢥߟ͠ͳ͕Β ͦΕΛܗʹͯ͠ ձ͢Δ
εϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ
ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖ ϢʔβʔԿΛ ͍ͯ͠Δ͔ Ϣʔβʔ Ͳ͏͍͏ܦҢͰ ͦ͜ʹ͍Δ͔ Ϣʔβʔ ԿΛ͢Δͷ͕ ࣗવͳߦಈ͔
Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ΛӾཡ ஈͷׂʹ࣭
Ͳ͏ͳͷ͔ؾʹͳΔ ࣸਅΛ֦େ͍ͨ͠ ͜͏ͨ͜͠ͱΛνʔϜͰ͠߹͍ɺ ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ࣸਅΛ֦େ͢Δ
ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖ ϢʔβʔԿΛ ͍ͯ͠Δ͔ Ϣʔβʔ Ͳ͏͍͏ܦҢͰ ͦ͜ʹ͍Δ͔ Ϣʔβʔ ԿΛ͢Δͷ͕ ࣗવͳߦಈ͔
Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ ڞ௨ೝࣝΛͭ͘ΔͷҰਓͷ୭͔Ͱͳ͘ɺ νʔϜͰͭ͘ΔͷͰ͢
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
σβΠϯݪଇ ͔Γ͘͢γϯϓϧͳσβΠϯ ୭ʹͱͬͯ ʁ ৭͕গͳ͍ʁ ઢ͕ࡉ͍ʁ ԿΛ͔Γ͘͢ ʁ ཁૉ͕গͳ͍ʁ ؆୯ͳݴ༿ʁ
σβΠϯΛ໌จԽ͢Δʹ͏গ͠ݴ༿͕ඞཁͰ͢
͜ͷ,FZOPUFͷσβΠϯݪଇ ʙʹ໌֬ʹ͑ΒΕΔ ݱଘ͢Δࣄྫ ɾ ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ ௌऺऀʹ͔Βͳ͍༻ޠ༻͠ͳ͍
ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ εϥΠ υͷ୯ޠ࠷খݶʹ͢Δ ϨΠΞτͷݪଇʹଇ͠దͳ༨നΛ֬อ͢Δ
σβΠϯݪଇ ͔ͬ͠Γߟ͑ΒΕͨݪଇͯ͢ʹ༏ઌ͢Δ ΞΠίϯϢʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟ οΫΛ༻͢Δɻ Android iOS Maps Favorite Search Users
(active)
ೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
࣋ଓՄೳ ͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།ҰͨΒ͢ͷ
ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ σβΠϯ6*ʹਖ਼ղͳ͍ͱݴΘΕ·͕͢ ʮؒҧ͍ʯ ͕͋Δ͜ͱʹؾ͘ඞཁ͕͋Γ·͢ ·ͨਖ਼ղͨ͘͞Μ͋ΔதͰɺ ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
UI ओͰͳ͍ ͣͬͱͬͯΒ͑Δ͜ͱ
FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ ਓʹΑͬͯΈҧ͏ɺ ͰͦΕΛܾΊͳ͚ΕͳΓ·ͤΜ
ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱ ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱɺ ͦΕΛܾΊΔखॿ͚Λͯ͘͠Ε·͢
ຊͷ ʮྑ͍ʯ ΛܾΊΔ֮ޛ ܾΊΒΕͨͷΛ࡞Δઌʹ ʮྑ͍ʯ ΛܾΊΔ֮ޛ͕ϑϩϯτΤϯυʹٻΊΒΕ·͢
Thank you @yamashitakazuki https://impath.co.jp/
6*Λ௨ͯ͡ઃܭख๏σβΠϯwϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧߟ͑ํΛ ֶͿίϛ ϡχςΟ ʮ6*-BCʯ ΛӡӦ͍ͯ͠·͢ɻ 'BDFCPPLʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ