Sustinable Frontend Design

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

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

5. 5.

   Question

6. 6.

   None
7. 7.

   Which is your best?

8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

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

    by Vogel
12. 12.

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

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

    ࣋ଓՄೳͳσβΠϯ

20. 20.

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

21. 21.

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

22. 22.

    None
23. 23.

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

24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

    Airbnb

29. 29.

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

30. 30.

    ྲྀߦΓɺ ഇΓͷͳ͍
    ྗͷ͋ΔσβΠϯ͸ͲͪΒ ʁ άϥσΟΤϯτ
    ࡉ͍ઢ
    ηϦϑ Thin Bold ϑϥο

    τ
    ໌֬ͳઢ
    αϯηϦϑ σβΠϯݪଇͷ౷Ұ͕େલఏ a a
31. 31.

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

32. 32.

    6*
    ͷϨϕϧ NG Lv.1 Lv.2 Lv.3 ෆద੾ɺ ΨΠ υϥΠϯʹඇ४ڌ ࢖͑Δ͕ɺ ֶश͕ඞཁ

    ॳΊͯͰ΋࢖͑Δ Ϣʔβʔ΁ͷܟҙ ɾ ৴པ͕͋Δ
33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

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

38. 38.

    ਖ਼͍͠දه web Web facebook Facebook Google Map Google Maps AppStore

    App Store ݐࠃه೦೔ ݐࠃه೦ͷ೔ ϓϩͷϥΠλʔͰ͸ͳ͍ʁ
    ͍͍͑ɺ ϓϩͷσβΠφʔ΍ΤϯδχΞ΋ݴ༿Λѻ͏࢓ࣄͰ͢
39. 39.

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

40. 40.

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

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

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

45. 45.

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

46. 46.

    ϖʔύʔϓϩτλΠϐϯά ಄ͱख σεΫ τοϓ ܗʹͳͬͨ΋ͷΛ
    ޮ཰తʹ
    ͖Ε͍ʹ͢Δ ࢥߟ͠ͳ͕Β
    ͦΕΛܗʹͯ͠
    ձ࿩͢Δ

    εϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
47. 47.

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

48. 48.

    ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔ Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔

    Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
49. 49.

    Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ঎඼ΛӾཡ ஋ஈͷׂʹ࣭͸
    

    Ͳ͏ͳͷ͔ؾʹͳΔ ࣸਅΛ֦େ͍ͨ͠ ͜͏ͨ͜͠ͱΛνʔϜͰ࿩͠߹͍ɺ ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
50. 50.

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

51. 51.

    ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔ Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔

    Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
52. 52.

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

53. 53.

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

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
54. 54.

    σβΠϯݪଇ ෼͔Γ΍͘͢γϯϓϧͳσβΠϯ ୭ʹͱͬͯ ʁ ৭͕গͳ͍ʁ ઢ͕ࡉ͍ʁ ԿΛ෼͔Γ΍͘͢ ʁ ཁૉ͕গͳ͍ʁ ؆୯ͳݴ༿ʁ

    σβΠϯΛ໌จԽ͢Δʹ͸΋͏গ͠ݴ༿͕ඞཁͰ͢
55. 55.

    ͜ͷ
    ,FZOPUF
    ͷσβΠϯݪଇ  ୅ʙ୅ʹ໌֬ʹ఻͑ΒΕΔ
     ݱଘ͢Δࣄྫ ɾ ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ
     ௌऺऀʹ෼͔Βͳ͍༻ޠ͸࢖༻͠ͳ͍
    

    ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ
     εϥΠ υͷ୯ޠ਺͸࠷খݶʹ͢Δ
     ϨΠΞ΢τͷݪଇʹଇ͠ద੾ͳ༨നΛ֬อ͢Δ
56. 56.

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

    (active)
57. 57.

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

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
58. 58.

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

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ σβΠϯ΍
    6*
    ʹਖ਼ղ͸ͳ͍ͱݴΘΕ·͕͢ ʮؒҧ͍ʯ ͕͋Δ͜ͱʹؾ෇͘ඞཁ͕͋Γ·͢
    ·ͨਖ਼ղ͸ͨ͘͞Μ͋ΔதͰɺ ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
59. 59.

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

60. 60.

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

61. 61.

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

62. 62.

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

63. 63.

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

64. 64.

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