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.5k
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
3
570
Core skills of the Design for Front-end
ykazu
17
49k
Primer of Information Architecture 2018
ykazu
5
470
Think of the User Experience not UX
ykazu
5
1.1k
Primer of Information Architecture 2016
ykazu
5
1.9k
Think Design for Future.
ykazu
5
1.2k
Other Decks in Design
See All in Design
3 Reasons Why I Got into Design
harukausui
1
110
ウェブディレクターを救うBacklog
wattlaa
0
370
最速で価値を届けるUXリサーチ
degudegu2510
3
950
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
0
260
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.7k
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
120
Breaking News on the Web
souvikdg
0
240
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
120
🇫🇷 Design Leadership en eaux troubles
morganepeng
1
250
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.3k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.3k
Installing and Running decksh/pdfdeck
ajstarks
1
540
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
119
18k
Faster Mobile Websites
deanohume
300
30k
Facilitating Awesome Meetings
lara
44
5.7k
The Mythical Team-Month
searls
217
42k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Cult of Friendly URLs
andyhume
74
5.8k
Done Done
chrislema
178
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Product Roadmaps are Hard
iamctodd
PRO
46
10k
Automating Front-end Workflow
addyosmani
1360
200k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.3k
Optimizing for Happiness
mojombo
372
69k
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ʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ