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
840
Core skills of the Design for Front-end
ykazu
17
50k
Primer of Information Architecture 2018
ykazu
5
550
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
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
220
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
380
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
290
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.4k
LayerX DesignersDeck
layerx
PRO
0
6.5k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
140
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
320
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
500
aya_murakami_portfolio
ayakaimi1101
0
1.5k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5k
発表資料テンプレート / My slide template
thatblue
0
260
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
1
200
Featured
See All Featured
Making Projects Easy
brettharned
116
6.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Embracing the Ebb and Flow
colly
85
4.6k
Side Projects
sachag
452
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Faster Mobile Websites
deanohume
306
31k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
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ʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ