Sustinable Frontend Design

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

Transcript

1. FRONTEND CONFERENCE 2017
   18th Mar. 2017
   ࣋ଓՄೳͳσβΠϯ
   

   View Slide

2. ࢁ Լ Ұ थ
   ΠϯϑΥϝʔγϣϯΞʔΩςΫ
   τ
   @yamashitakazuki
   

   View Slide

3. 6*ͱ69Λઐ໳
   ϑϩϯτΤϯυΞϓϦ։ൃ
   6*վળɺ
   ৘ใઃܭɺ
   ΠϯλϥΫγϣϯσβΠϯ
   

   View Slide

4. https://speakerdeck.com/ykazu
   ࡢ೥౓ͷεϥΠ
   υͰ͢
   

   View Slide

5. Question
   

   View Slide

6. View Slide

7. Which is your best?
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. 14mm 154°C 3’36”
    ࠷ߴͷτʔετͷম͖ํ - Scientists create perfect toast 2003 by Vogel
    

    View Slide

12. FRONT-END
    ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ
    σβΠϯΛ͢Δɺ
    ϑϩϯτΤϯυʹܞΘΔࢲͨͪ͸·ΔͰτʔετͷম͖ՃݮΛܾΊΔΑ͏ͳ΋ͷͰ͢
    

    View Slide

13. ج४Λ࣋ͭ͜ͱ
    ͦΕͧΕ
    ʮྑ͍ʯ
    ͱࢥ͏ॠؒ͸ɺ
    օ͞Μͷ಄ʹ͋Δ
    ʮج४ʯ
    ʹΑܾͬͯΊΒΕ·͢
    

    View Slide

14. 14mm 154°C 3’36”
    σʔλ
    

    View Slide

15. 14mm 154°C 3’36”
    σʔλͰ͸ͳ͘ηΦϦʔ
    σβΠϯ͸ଟ਺ܾ΍ಋ͔ΕͨσʔλʹΑܾͬͯΊΔ΋ͷͰ͸ͳ͘
    ʮηΦϦʔʯ
    ͕લఏͱͳΓ·͢
    

    View Slide

16. Design UI
    σβΠϯͱ͍͏େ͖ͳྖҬͷதʹ͋Δ6*͸Ұ෦Ͱɺ
    σβΠφʔɺ
    ϑϩϯτΤϯυΤϯδχΞʹ΋ؔΘΔ͜ͱ
    

    View Slide

17. Ϋʔϧͳ
    Ϣʔβʔ͕૿͑Δ
    $73͕ߴ͘ͳΔ
    ྲྀߦΞϓϦͷ
    λ
    οϓ͞ΕΔ
    UI
    ͜͏͍͏6*Λ໨ࢦ͢લʹɺ
    

    View Slide

18. ͣͬͱ࢖ͬͯ΋Β͑Δ
    UI
    ͣͬͱ࢖ͬͯ΋Β͑Δ6*Λߟ͑·͠
    ΐ͏
    

    View Slide

19. ࣋ଓՄೳͳσβΠϯ
    

    View Slide

20. ࣋ଓՄೳ
    ๞͖ͳ͍
    ϝϯςφϒϧ
    

    View Slide

21. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    

    View Slide

22. View Slide

23. σβΠϯݪଇ
    ΠϯλϥΫγϣϯ
    ελΠϧ
    ϨΠΞ΢τ
    ίϯϙʔωϯτ
    σβΠϯݪଇ
    ΨΠ
    υϥΠϯ͸ϧʔϧҎ֎ʹ΋σβΠϯΛ໌จԽͨ͠
    ʮσβΠϯݪଇʯ
    ͕σβΠϯֶशͷॿ͚ʹͳΓ·͢
    

    View Slide

24. ࣗવͳΞΫγϣϯ
    ਐߦ͢ΔΞΫγϣϯ
    ӈʹ഑ஔ͢Δ
    

    View Slide

25. औফɺ
    ഁյతΞΫγϣϯ
    ୀߦ͢ΔΞΫγϣϯ
    ࠨʹ഑ஔ͢Δ
    

    View Slide

26. औফɺ
    ഁյతΞΫγϣϯ
    ࠨʹ഑ஔ͢Δ
    ӈʹ഑ஔ͢Δ
    ୀߦ͢ΔΞΫγϣϯ
    ࣗવͳΞΫγϣϯ
    ਐߦ͢ΔΞΫγϣϯ
    ͳͥͦ͏͢΂͖ͳͷ͔·Ͱ͕ॻ͔ΕͨΨΠ
    υϥΠϯ
    

    View Slide

27. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    

    View Slide

28. Airbnb
    

    View Slide

29. ʠ"JSCOCͷΑ͏ͳྲྀߦͷ6*Ͱ
    ʂ
    ʡ
    
    εϐʔσΟͳσβΠϯαΠΫϧΛ"JSCOCͷΑ͏ʹճͤ·͔͢ʁ
    ·ͨɺ
    "JSCOCͷҰ෦Λ·ͶΔɺ
    ͜Ε͸͋ͳͨͷσβΠϯݪଇΛഁ୼ͤͯ͞͠·͍·͢
    6*ͷྲྀߦΓ͸ɺ
    ͙͢ഇΕΔ
    

    View Slide

30. ྲྀߦΓɺ
    ഇΓͷͳ͍
    ྗͷ͋ΔσβΠϯ͸ͲͪΒ
    ʁ
    άϥσΟΤϯτ
    ࡉ͍ઢ
    ηϦϑ
    Thin Bold
    ϑϥο
    τ
    ໌֬ͳઢ
    αϯηϦϑ
    σβΠϯݪଇͷ౷Ұ͕େલఏ
    a a
    

    View Slide

31. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    

    View Slide

32. 6*ͷϨϕϧ
    NG
    Lv.1
    Lv.2
    Lv.3
    ෆద੾ɺ
    ΨΠ
    υϥΠϯʹඇ४ڌ
    ࢖͑Δ͕ɺ
    ֶश͕ඞཁ
    ॳΊͯͰ΋࢖͑Δ
    Ϣʔβʔ΁ͷܟҙ
    ɾ
    ৴པ͕͋Δ
    

    View Slide

33. ݴ༿͕΋ͨΒ͢৴པ
    ςΩετ
    ݸแ૷͸Ͱ͖·ͤΜɻ
    छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ
    ൱ఆܗͷςΩετ͕࿈ͳΔɺ
    ͦΜͳαΠ
    τ͔Βड͚Δҹ৅Λߟ͑ͯΈ·͠
    ΐ͏
    

    View Slide

34. ݴ༿͕΋ͨΒ͢৴པ
    ςΩετ
    ݸแ૷͸Ͱ͖·ͤΜɻ
    ‎·ͱΊͯแ૷͞Ε͍ͯ·͢ɻ
    छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ
    ‎͞·͟·ͳछྨΛ૊Έ߹Θ͍ͤͯ·͢ɻ
    ݴ͍׵͕͑Մೳ͔Λߟ͑ͯΈ·͠
    ΐ͏
    

    View Slide

35. Apple
    ༏ΕͨσβΠϯ͸ηϯςϯε΋༏Ε͍ͯ·͢ɺ
    ΋ͪΖΜάϩʔόϧʹ
    

    View Slide

36. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ίνϥ
    ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ
    ݕࡧ ͕͢͞
    ϥϕϧͱίϯϙʔωϯτ
    ϘλϯͰ͍͍ͷ͔ʁͦͷϥϕϧͰ͍͍ͷ͔ʁ
    

    View Slide

37. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ͪ͜Β
    ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ
    ݕࡧ ͕͢͞
    ϥϕϧͱίϯϙʔωϯτ
    ద੾ͳϥϕϦϯάͱίϯϙʔωϯτͷબఆ͕খ͞ͳ৴པੑʹͭͳ͕Γ·͢
    

    View Slide

38. ਖ਼͍͠දه
    web Web
    facebook Facebook
    Google Map Google Maps
    AppStore App Store
    ݐࠃه೦೔ ݐࠃه೦ͷ೔
    ϓϩͷϥΠλʔͰ͸ͳ͍ʁ͍͍͑ɺ
    ϓϩͷσβΠφʔ΍ΤϯδχΞ΋ݴ༿Λѻ͏࢓ࣄͰ͢
    

    View Slide

39. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    

    View Slide

40. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
    

    View Slide

41. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά σβΠϯ
    ϓϩτλΠϓϑΝʔετɺ
    ͜ͷ͋ͨΓͷϫʔΫϑϩʔ͸༷ʑͳπʔϧʹॿ͚ΒΕ͍ͯ·͢
    

    View Slide

42. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    ͦ΋ͦ΋Կ͕΍Γ͔ͨͬͨͷ͔ɺ
    ΰʔϧ͕ڞ༗Ͱ͖͍ͯͳ͍ͱɺ
    

    View Slide

43. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    σβΠϯ ࣮૷
    μϝͰͨ͠
    ࠷ऴతʹഁ୼͔͠Ͷ·ͤΜ
    

    View Slide

44. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    ந৅తͳΠϝʔδ΍ΰʔϧͷڞ༗͸πʔϧͰͳ͍ํ͕Α͍৔߹΋͋Γ·͢
    

    View Slide

45. ϖʔύʔϓϩτλΠϐϯά
    

    View Slide

46. ϖʔύʔϓϩτλΠϐϯά
    ಄ͱख σεΫ
    τοϓ
    ܗʹͳͬͨ΋ͷΛ
    ޮ཰తʹ
    ͖Ε͍ʹ͢Δ
    ࢥߟ͠ͳ͕Β
    ͦΕΛܗʹͯ͠
    ձ࿩͢Δ
    εϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
    

    View Slide

47. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    ڞ௨ೝࣝΛͭ͘Δ
    

    View Slide

48. ڞ௨ೝࣝΛͭ͘Δ
    ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔
    Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔
    Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔
    Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ
    

    View Slide

49. Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ
    ঎඼ΛӾཡ
    ஋ஈͷׂʹ࣭͸
    Ͳ͏ͳͷ͔ؾʹͳΔ
    ࣸਅΛ֦େ͍ͨ͠
    ͜͏ͨ͜͠ͱΛνʔϜͰ࿩͠߹͍ɺ
    ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
    

    View Slide

50. Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ
    ࣸਅΛ֦େ͢Δ
    

    View Slide

51. ڞ௨ೝࣝΛͭ͘Δ
    ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔
    Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔
    Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔
    Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ
    

    View Slide

52. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    ڞ௨ೝࣝΛͭ͘Δ
    ڞ௨ೝࣝΛͭ͘Δͷ͸Ұਓͷ୭͔Ͱ͸ͳ͘ɺ
    νʔϜͰͭ͘Δ΋ͷͰ͢
    

    View Slide

53. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
    σβΠϯݪଇΛߟ͑Δ
    

    View Slide

54. σβΠϯݪଇ
    ෼͔Γ΍͘͢γϯϓϧͳσβΠϯ
    ୭ʹͱͬͯ
    ʁ ৭͕গͳ͍ʁ
    ઢ͕ࡉ͍ʁ
    ԿΛ෼͔Γ΍͘͢
    ʁ
    ཁૉ͕গͳ͍ʁ
    ؆୯ͳݴ༿ʁ
    σβΠϯΛ໌จԽ͢Δʹ͸΋͏গ͠ݴ༿͕ඞཁͰ͢
    

    View Slide

55. ͜ͷ,FZOPUFͷσβΠϯݪଇ
    ୅ʙ୅ʹ໌֬ʹ఻͑ΒΕΔ
    ݱଘ͢Δࣄྫ
    ɾ
    ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ
    ௌऺऀʹ෼͔Βͳ͍༻ޠ͸࢖༻͠ͳ͍
    ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ
    εϥΠ
    υͷ୯ޠ਺͸࠷খݶʹ͢Δ
    ϨΠΞ΢τͷݪଇʹଇ͠ద੾ͳ༨നΛ֬อ͢Δ
    

    View Slide

56. σβΠϯݪଇ
    ͔ͬ͠Γߟ͑ΒΕͨݪଇ͸͢΂ͯʹ༏ઌ͢Δ
    ΞΠίϯ͸Ϣʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟ
    οΫΛ࢖༻͢Δɻ
    Android
    iOS
    Maps Favorite Search Users
    (active)
    

    View Slide

57. ೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
    σβΠϯݪଇΛߟ͑Δ
    

    View Slide

58. ࣋ଓՄೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
    σβΠϯݪଇΛߟ͑Δ
    σβΠϯ΍6*ʹਖ਼ղ͸ͳ͍ͱݴΘΕ·͕͢
    ʮؒҧ͍ʯ
    ͕͋Δ͜ͱʹؾ෇͘ඞཁ͕͋Γ·͢
    ·ͨਖ਼ղ͸ͨ͘͞Μ͋ΔதͰɺ
    ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
    

    View Slide

59. UI
    ओ໾Ͱ͸ͳ͍
    ͣͬͱ࢖ͬͯ΋Β͑Δ͜ͱ
    

    View Slide

60. FRONT-END
    ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ
    ਓʹΑͬͯ޷Έ͸ҧ͏ɺ
    Ͱ΋ͦΕΛܾΊͳ͚Ε͹ͳΓ·ͤΜ
    

    View Slide

61. ʮྑ͍ʯ
    ج४Λ࣋ͭ͜ͱ
    ʮྑ͍ʯ
    ج४Λ࣋ͭ͜ͱ͸ɺ
    ͦΕΛܾΊΔखॿ͚Λͯ͘͠Ε·͢
    

    View Slide

62. ຊ౰ͷ
    ʮྑ͍ʯ
    ΛܾΊΔ֮ޛ
    ܾΊΒΕͨ΋ͷΛ࡞Δઌʹ͸
    ʮྑ͍ʯ
    ΛܾΊΔ֮ޛ͕ϑϩϯτΤϯυʹٻΊΒΕ·͢
    

    View Slide

63. Thank you
    @yamashitakazuki
    https://impath.co.jp/
    

    View Slide

64. 6*Λ௨ͯ͡ઃܭख๏΍σβΠϯwϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧ΍ߟ͑ํΛ
    ֶͿίϛ
    ϡχςΟ
    ʮ6*-BCʯ
    ΛӡӦ͍ͯ͠·͢ɻ
    
    'BDFCPPLʹͯ৘ใΛൃ৴͍ͯ͠·͢ͷͰɺ
    ΑΖ͚͠Ε͹ϑΥϩʔ͍ͯͩ͘͠͞ɻ
    

    View Slide