UI デザインから考える「持続可能なデザイン」 FRONTEND CONFERENCE 2017, 18th Mar 2017 Designed by IMPATH
FRONTEND CONFERENCE 201718th Mar. 2017࣋ଓՄೳͳσβΠϯ
View Slide
ࢁ Լ Ұ थΠϯϑΥϝʔγϣϯΞʔΩςΫτ@yamashitakazuki
6*ͱ69ΛઐϑϩϯτΤϯυΞϓϦ։ൃ6*վળɺใઃܭɺΠϯλϥΫγϣϯσβΠϯ
https://speakerdeck.com/ykazuࡢͷεϥΠυͰ͢
Question
Which is your best?
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*Λߟ͑·͠ΐ͏
࣋ଓՄೳͳσβΠϯ
࣋ଓՄೳ͖ͳ͍ϝϯςφϒϧ
ೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯ
σβΠϯݪଇΠϯλϥΫγϣϯελΠϧϨΠΞτίϯϙʔωϯτσβΠϯݪଇΨΠυϥΠϯϧʔϧҎ֎ʹσβΠϯΛ໌จԽͨ͠ʮσβΠϯݪଇʯ͕σβΠϯֶशͷॿ͚ʹͳΓ·͢
ࣗવͳΞΫγϣϯਐߦ͢ΔΞΫγϣϯӈʹஔ͢Δ
औফɺഁյతΞΫγϣϯୀߦ͢ΔΞΫγϣϯࠨʹஔ͢Δ
औফɺഁյతΞΫγϣϯࠨʹஔ͢Δӈʹஔ͢Δୀߦ͢ΔΞΫγϣϯࣗવͳΞΫγϣϯਐߦ͢ΔΞΫγϣϯͳͥͦ͏͖͢ͳͷ͔·Ͱ͕ॻ͔ΕͨΨΠυϥΠϯ
ೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯྲྀߦΓɺഇΓͷͳ͍
Airbnb
ʠ"JSCOCͷΑ͏ͳྲྀߦͷ6*ͰʂʡεϐʔσΟͳσβΠϯαΠΫϧΛ"JSCOCͷΑ͏ʹճͤ·͔͢ʁ·ͨɺ"JSCOCͷҰ෦Λ·ͶΔɺ͜Ε͋ͳͨͷσβΠϯݪଇΛഁͤͯ͞͠·͍·͢6*ͷྲྀߦΓɺ͙͢ഇΕΔ
ྲྀߦΓɺഇΓͷͳ͍ྗͷ͋ΔσβΠϯͲͪΒʁάϥσΟΤϯτࡉ͍ઢηϦϑThin Boldϑϥοτ໌֬ͳઢαϯηϦϑσβΠϯݪଇͷ౷Ұ͕େલఏa a
ೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯྲྀߦΓɺഇΓͷͳ͍৴པੑ6*͕།ҰͨΒ͢ͷ
6*ͷϨϕϧNGLv.1Lv.2Lv.3ෆదɺΨΠυϥΠϯʹඇ४ڌ͑Δ͕ɺֶश͕ඞཁॳΊͯͰ͑ΔϢʔβʔͷܟҙɾ৴པ͕͋Δ
ݴ༿͕ͨΒ͢৴པςΩετݸแͰ͖·ͤΜɻछྨ͓બͼ͍͚ͨͩ·ͤΜɻ൱ఆܗͷςΩετ͕࿈ͳΔɺͦΜͳαΠτ͔Βड͚ΔҹΛߟ͑ͯΈ·͠ΐ͏
ݴ༿͕ͨΒ͢৴པςΩετݸแͰ͖·ͤΜɻ·ͱΊͯแ͞Ε͍ͯ·͢ɻछྨ͓બͼ͍͚ͨͩ·ͤΜɻ͞·͟·ͳछྨΛΈ߹Θ͍ͤͯ·͢ɻݴ͍͕͑Մೳ͔Λߟ͑ͯΈ·͠ΐ͏
Apple༏ΕͨσβΠϯηϯςϯε༏Ε͍ͯ·͢ɺͪΖΜάϩʔόϧʹ
ͬͱݟΔ ৄࡉ ৄ͘͠ίνϥ༧͢Δ ༧ը໘ ࠓ͙͢༧͢Δݕࡧ ͕͢͞ϥϕϧͱίϯϙʔωϯτϘλϯͰ͍͍ͷ͔ʁͦͷϥϕϧͰ͍͍ͷ͔ʁ
ͬͱݟΔ ৄࡉ ৄͪ͘͜͠Β༧͢Δ ༧ը໘ ࠓ͙͢༧͢Δݕࡧ ͕͢͞ϥϕϧͱίϯϙʔωϯτదͳϥϕϦϯάͱίϯϙʔωϯτͷબఆ͕খ͞ͳ৴པੑʹͭͳ͕Γ·͢
ਖ਼͍͠දهweb Webfacebook FacebookGoogle Map Google MapsAppStore App Storeݐࠃه೦ ݐࠃه೦ͷϓϩͷϥΠλʔͰͳ͍ʁ͍͍͑ɺϓϩͷσβΠφʔΤϯδχΞݴ༿Λѻ͏ࣄͰ͢
ೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯྲྀߦΓɺഇΓͷͳ͍৴པੑ6*͕།ҰͨΒ͢ͷϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά σβΠϯϓϩτλΠϓϑΝʔετɺ͜ͷ͋ͨΓͷϫʔΫϑϩʔ༷ʑͳπʔϧʹॿ͚ΒΕ͍ͯ·͢
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά࣮ݱ͍ͨ͠ΰʔϧͦͦԿ͕Γ͔ͨͬͨͷ͔ɺΰʔϧ͕ڞ༗Ͱ͖͍ͯͳ͍ͱɺ
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά࣮ݱ͍ͨ͠ΰʔϧσβΠϯ ࣮μϝͰͨ͠࠷ऴతʹഁ͔͠Ͷ·ͤΜ
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά࣮ݱ͍ͨ͠ΰʔϧநతͳΠϝʔδΰʔϧͷڞ༗πʔϧͰͳ͍ํ͕Α͍߹͋Γ·͢
ϖʔύʔϓϩτλΠϐϯά
ϖʔύʔϓϩτλΠϐϯά಄ͱख σεΫτοϓܗʹͳͬͨͷΛޮతʹ͖Ε͍ʹ͢Δࢥߟ͠ͳ͕ΒͦΕΛܗʹͯ͠ձ͢ΔεϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά࣮ݱ͍ͨ͠ΰʔϧڞ௨ೝࣝΛͭ͘Δ
ڞ௨ೝࣝΛͭ͘Δͦͷͱ͖ϢʔβʔԿΛ͍ͯ͠Δ͔ϢʔβʔͲ͏͍͏ܦҢͰͦ͜ʹ͍Δ͔ϢʔβʔԿΛ͢Δͷ͕ࣗવͳߦಈ͔ThingsίτContext Actionഎܠɾจ຺ ߦಈ
ThingsίτContext Actionഎܠɾจ຺ ߦಈΛӾཡஈͷׂʹ࣭Ͳ͏ͳͷ͔ؾʹͳΔࣸਅΛ֦େ͍ͨ͜͠͏ͨ͜͠ͱΛνʔϜͰ͠߹͍ɺ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
ThingsίτContext Actionഎܠɾจ຺ ߦಈࣸਅΛ֦େ͢Δ
ϫʔΫϑϩʔϫΠϠʔઃܭ ϓϩτλΠϐϯά࣮ݱ͍ͨ͠ΰʔϧڞ௨ೝࣝΛͭ͘Δڞ௨ೝࣝΛͭ͘ΔͷҰਓͷ୭͔Ͱͳ͘ɺνʔϜͰͭ͘ΔͷͰ͢
ೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯྲྀߦΓɺഇΓͷͳ͍৴པੑ6*͕།ҰͨΒ͢ͷϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උσβΠϯݪଇΛߟ͑Δ
σβΠϯݪଇ͔Γ͘͢γϯϓϧͳσβΠϯ୭ʹͱͬͯʁ ৭͕গͳ͍ʁઢ͕ࡉ͍ʁԿΛ͔Γ͘͢ʁཁૉ͕গͳ͍ʁ؆୯ͳݴ༿ʁσβΠϯΛ໌จԽ͢Δʹ͏গ͠ݴ༿͕ඞཁͰ͢
͜ͷ,FZOPUFͷσβΠϯݪଇ ʙʹ໌֬ʹ͑ΒΕΔ ݱଘ͢ΔࣄྫɾࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ ௌऺऀʹ͔Βͳ͍༻ޠ༻͠ͳ͍ ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ εϥΠυͷ୯ޠ࠷খݶʹ͢Δ ϨΠΞτͷݪଇʹଇ͠దͳ༨നΛ֬อ͢Δ
σβΠϯݪଇ͔ͬ͠Γߟ͑ΒΕͨݪଇͯ͢ʹ༏ઌ͢ΔΞΠίϯϢʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟοΫΛ༻͢ΔɻAndroidiOSMaps Favorite Search Users(active)
࣋ଓՄೳ͖ͳ͍ ఆண͢ΔύλʔϯΛҳ͠ͳ͍ͦͷͨΊͷΨΠυϥΠϯྲྀߦΓɺഇΓͷͳ͍৴པੑ6*͕།ҰͨΒ͢ͷϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උσβΠϯݪଇΛߟ͑ΔσβΠϯ6*ʹਖ਼ղͳ͍ͱݴΘΕ·͕͢ʮؒҧ͍ʯ͕͋Δ͜ͱʹؾ͘ඞཁ͕͋Γ·͢·ͨਖ਼ղͨ͘͞Μ͋ΔதͰɺͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
UIओͰͳ͍ͣͬͱͬͯΒ͑Δ͜ͱ
FRONT-ENDද໘͔Βຊ࣭ΛܾΊΔ͜ͱਓʹΑͬͯΈҧ͏ɺͰͦΕΛܾΊͳ͚ΕͳΓ·ͤΜ
ʮྑ͍ʯج४Λ࣋ͭ͜ͱʮྑ͍ʯج४Λ࣋ͭ͜ͱɺͦΕΛܾΊΔखॿ͚Λͯ͘͠Ε·͢
ຊͷʮྑ͍ʯΛܾΊΔ֮ޛܾΊΒΕͨͷΛ࡞Δઌʹʮྑ͍ʯΛܾΊΔ֮ޛ͕ϑϩϯτΤϯυʹٻΊΒΕ·͢
Thank you@yamashitakazukihttps://impath.co.jp/
6*Λ௨ͯ͡ઃܭख๏σβΠϯwϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧߟ͑ํΛֶͿίϛϡχςΟʮ6*-BCʯΛӡӦ͍ͯ͠·͢ɻ'BDFCPPLʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ