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
870
Core skills of the Design for Front-end
ykazu
17
50k
Primer of Information Architecture 2018
ykazu
5
560
Think of the User Experience not UX
ykazu
6
1.3k
Primer of Information Architecture 2016
ykazu
5
2k
Think Design for Future.
ykazu
5
1.3k
Other Decks in Design
See All in Design
「デザイン」を信じるには
iflection
0
240
Kid Cowboy 103
marilutwin
0
230
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.6k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
400
PF_濵村ひろみ_202503
maru_design78
0
170
Marp + TailWind CSS でスライドをきれいにする
maea2
0
200
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
590
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.4k
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.7k
マズロー安達の弟子2期生、成功事例集(17人中17人が3ヶ月平均140万受注)
maslow_akkun
0
5.1k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Adopting Sorbet at Scale
ufuk
77
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building an army of robots
kneath
306
45k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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ʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ