Sustinable Frontend Design

UI デザインから考える「持続可能なデザイン」
FRONTEND CONFERENCE 2017, 18th Mar 2017
Designed by IMPATH

Transcript

1. FRONTEND CONFERENCE 2017 18th Mar. 2017 ࣋ଓՄೳͳσβΠϯ
2. ࢁ Լ
   Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫ τ @yamashitakazuki
3. 6*ͱ69
   Λઐ໳
   ϑϩϯτΤϯυΞϓϦ։ൃ
   6*վળɺ ৘ใઃܭɺ ΠϯλϥΫγϣϯσβΠϯ
   
4. https://speakerdeck.com/ykazu ࡢ೥౓ͷεϥΠ υͰ͢
5. Question
7. Which is your best?
11. 14mm 154°C 3’36” ࠷ߴͷτʔετͷম͖ํ - Scientists create perfect toast 2003 by Vogel
12. FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ σβΠϯΛ͢Δɺ ϑϩϯτΤϯυʹܞΘΔࢲͨͪ͸·ΔͰτʔετͷম͖ՃݮΛܾΊΔΑ͏ͳ΋ͷͰ͢
13. ج४Λ࣋ͭ͜ͱ ͦΕͧΕ ʮྑ͍ʯ ͱࢥ͏ॠؒ͸ɺ օ͞Μͷ಄ʹ͋Δ ʮج४ʯ ʹΑܾͬͯΊΒΕ·͢
14. 14mm 154°C 3’36” σʔλ
15. 14mm 154°C 3’36” σʔλͰ͸ͳ͘ηΦϦʔ σβΠϯ͸ଟ਺ܾ΍ಋ͔ΕͨσʔλʹΑܾͬͯΊΔ΋ͷͰ͸ͳ͘ ʮηΦϦʔʯ ͕લఏͱͳΓ·͢
16. Design UI σβΠϯͱ͍͏େ͖ͳྖҬͷதʹ͋Δ
    6*
    ͸Ұ෦Ͱɺ σβΠφʔɺ ϑϩϯτΤϯυΤϯδχΞʹ΋ؔΘΔ͜ͱ
17. Ϋʔϧͳ Ϣʔβʔ͕૿͑Δ $73
    ͕ߴ͘ͳΔ ྲྀߦΞϓϦͷ λ οϓ͞ΕΔ UI ͜͏͍͏
    6*
    Λ໨ࢦ͢લʹɺ
18. ͣͬͱ࢖ͬͯ΋Β͑Δ UI ͣͬͱ࢖ͬͯ΋Β͑Δ
    6*
    Λߟ͑·͠ ΐ͏
19. ࣋ଓՄೳͳσβΠϯ
20. ࣋ଓՄೳ ๞͖ͳ͍ ϝϯςφϒϧ
21. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ
23. σβΠϯݪଇ
    ΠϯλϥΫγϣϯ
    ελΠϧ
    ϨΠΞ΢τ
    ίϯϙʔωϯτ σβΠϯݪଇ ΨΠ υϥΠϯ͸ϧʔϧҎ֎ʹ΋σβΠϯΛ໌จԽͨ͠ ʮσβΠϯݪଇʯ ͕σβΠϯֶशͷॿ͚ʹͳΓ·͢
24. ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ӈʹ഑ஔ͢Δ
25. औফɺ ഁյతΞΫγϣϯ ୀߦ͢ΔΞΫγϣϯ ࠨʹ഑ஔ͢Δ
26. औফɺ ഁյతΞΫγϣϯ ࠨʹ഑ஔ͢Δ ӈʹ഑ஔ͢Δ ୀߦ͢ΔΞΫγϣϯ ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ͳͥͦ͏͢΂͖ͳͷ͔·Ͱ͕ॻ͔ΕͨΨΠ υϥΠϯ
27. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍
28. Airbnb
29. ʠ"JSCOC
    ͷΑ͏ͳྲྀߦͷ
    6*
    Ͱ ʂ ʡ
    εϐʔσΟͳσβΠϯαΠΫϧΛ
    "JSCOC
    ͷΑ͏ʹճͤ·͔͢ʁ
    ·ͨɺ "JSCOC
    ͷҰ෦Λ·ͶΔɺ ͜Ε͸͋ͳͨͷσβΠϯݪଇΛഁ୼ͤͯ͞͠·͍·͢ 6*
    ͷྲྀߦΓ͸ɺ ͙͢ഇΕΔ
30. ྲྀߦΓɺ ഇΓͷͳ͍
    ྗͷ͋ΔσβΠϯ͸ͲͪΒ ʁ άϥσΟΤϯτ
    ࡉ͍ઢ
    ηϦϑ Thin Bold ϑϥο τ
    ໌֬ͳઢ
    αϯηϦϑ σβΠϯݪଇͷ౷Ұ͕େલఏ a a
31. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ
32. 6*
    ͷϨϕϧ NG Lv.1 Lv.2 Lv.3 ෆద੾ɺ ΨΠ υϥΠϯʹඇ४ڌ ࢖͑Δ͕ɺ ֶश͕ඞཁ ॳΊͯͰ΋࢖͑Δ Ϣʔβʔ΁ͷܟҙ ɾ ৴པ͕͋Δ
33. ݴ༿͕΋ͨΒ͢৴པ ςΩετ ݸแ૷͸Ͱ͖·ͤΜɻ छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ ൱ఆܗͷςΩετ͕࿈ͳΔɺ ͦΜͳαΠ τ͔Βड͚Δҹ৅Λߟ͑ͯΈ·͠ ΐ͏
34. ݴ༿͕΋ͨΒ͢৴པ ςΩετ ݸแ૷͸Ͱ͖·ͤΜɻ ‎
    ·ͱΊͯแ૷͞Ε͍ͯ·͢ɻ छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ ‎
    ͞·͟·ͳछྨΛ૊Έ߹Θ͍ͤͯ·͢ɻ ݴ͍׵͕͑Մೳ͔Λߟ͑ͯΈ·͠ ΐ͏
35. Apple ༏ΕͨσβΠϯ͸ηϯςϯε΋༏Ε͍ͯ·͢ɺ ΋ͪΖΜάϩʔόϧʹ
36. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ίνϥ ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ ϘλϯͰ͍͍ͷ͔ʁͦͷϥϕϧͰ͍͍ͷ͔ʁ
37. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ͪ͜Β ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ ద੾ͳϥϕϦϯάͱίϯϙʔωϯτͷબఆ͕খ͞ͳ৴པੑʹͭͳ͕Γ·͢
38. ਖ਼͍͠දه web Web facebook Facebook Google Map Google Maps AppStore App Store ݐࠃه೦೔ ݐࠃه೦ͷ೔ ϓϩͷϥΠλʔͰ͸ͳ͍ʁ
    ͍͍͑ɺ ϓϩͷσβΠφʔ΍ΤϯδχΞ΋ݴ༿Λѻ͏࢓ࣄͰ͢
39. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ
40. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
41. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά σβΠϯ ϓϩτλΠϓϑΝʔετɺ ͜ͷ͋ͨΓͷϫʔΫϑϩʔ͸༷ʑͳπʔϧʹॿ͚ΒΕ͍ͯ·͢
42. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠
    ΰʔϧ ͦ΋ͦ΋Կ͕΍Γ͔ͨͬͨͷ͔ɺ ΰʔϧ͕ڞ༗Ͱ͖͍ͯͳ͍ͱɺ
43. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠
    ΰʔϧ σβΠϯ ࣮૷ μϝͰͨ͠ ࠷ऴతʹഁ୼͔͠Ͷ·ͤΜ
44. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠
    ΰʔϧ ந৅తͳΠϝʔδ΍ΰʔϧͷڞ༗͸πʔϧͰͳ͍ํ͕Α͍৔߹΋͋Γ·͢
45. ϖʔύʔϓϩτλΠϐϯά
46. ϖʔύʔϓϩτλΠϐϯά ಄ͱख σεΫ τοϓ ܗʹͳͬͨ΋ͷΛ
    ޮ཰తʹ
    ͖Ε͍ʹ͢Δ ࢥߟ͠ͳ͕Β
    ͦΕΛܗʹͯ͠
    ձ࿩͢Δ εϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
47. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠
    ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ
48. ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔ Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔ Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
49. Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ঎඼ΛӾཡ ஋ஈͷׂʹ࣭͸
    Ͳ͏ͳͷ͔ؾʹͳΔ ࣸਅΛ֦େ͍ͨ͠ ͜͏ͨ͜͠ͱΛνʔϜͰ࿩͠߹͍ɺ ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
50. Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ࣸਅΛ֦େ͢Δ
51. ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔ Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔ Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
52. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠
    ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ ڞ௨ೝࣝΛͭ͘Δͷ͸Ұਓͷ୭͔Ͱ͸ͳ͘ɺ νʔϜͰͭ͘Δ΋ͷͰ͢
53. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
54. σβΠϯݪଇ ෼͔Γ΍͘͢γϯϓϧͳσβΠϯ ୭ʹͱͬͯ ʁ ৭͕গͳ͍ʁ ઢ͕ࡉ͍ʁ ԿΛ෼͔Γ΍͘͢ ʁ ཁૉ͕গͳ͍ʁ ؆୯ͳݴ༿ʁ σβΠϯΛ໌จԽ͢Δʹ͸΋͏গ͠ݴ༿͕ඞཁͰ͢
55. ͜ͷ
    ,FZOPUF
    ͷσβΠϯݪଇ  ୅ʙ୅ʹ໌֬ʹ఻͑ΒΕΔ
     ݱଘ͢Δࣄྫ ɾ ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ
     ௌऺऀʹ෼͔Βͳ͍༻ޠ͸࢖༻͠ͳ͍
     ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ
     εϥΠ υͷ୯ޠ਺͸࠷খݶʹ͢Δ
     ϨΠΞ΢τͷݪଇʹଇ͠ద੾ͳ༨നΛ֬อ͢Δ
56. σβΠϯݪଇ ͔ͬ͠Γߟ͑ΒΕͨݪଇ͸͢΂ͯʹ༏ઌ͢Δ ΞΠίϯ͸Ϣʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟ οΫΛ࢖༻͢Δɻ Android iOS Maps Favorite Search Users (active)
57. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
58. ࣋ଓՄೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*
    ͕།Ұ΋ͨΒ͢΋ͷ ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ σβΠϯ΍
    6*
    ʹਖ਼ղ͸ͳ͍ͱݴΘΕ·͕͢ ʮؒҧ͍ʯ ͕͋Δ͜ͱʹؾ෇͘ඞཁ͕͋Γ·͢
    ·ͨਖ਼ղ͸ͨ͘͞Μ͋ΔதͰɺ ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
59. UI ओ໾Ͱ͸ͳ͍ ͣͬͱ࢖ͬͯ΋Β͑Δ͜ͱ
60. FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ ਓʹΑͬͯ޷Έ͸ҧ͏ɺ Ͱ΋ͦΕΛܾΊͳ͚Ε͹ͳΓ·ͤΜ
61. ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱ ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱ͸ɺ ͦΕΛܾΊΔखॿ͚Λͯ͘͠Ε·͢
62. ຊ౰ͷ ʮྑ͍ʯ ΛܾΊΔ֮ޛ ܾΊΒΕͨ΋ͷΛ࡞Δઌʹ͸ ʮྑ͍ʯ ΛܾΊΔ֮ޛ͕ϑϩϯτΤϯυʹٻΊΒΕ·͢
63. Thank you @yamashitakazuki https://impath.co.jp/
64. 6*
    Λ௨ͯ͡ઃܭख๏΍σβΠϯw
    ϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧ΍ߟ͑ํΛ ֶͿίϛ ϡχςΟ ʮ6*
    -BCʯ ΛӡӦ͍ͯ͠·͢ɻ
    'BDFCPPL
    ʹͯ৘ใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠Ε͹ϑΥϩʔ͍ͯͩ͘͠͞ɻ