デザイナーのための自分サービス開発のススメ/ web service development tips for designers

2017/4/26
『渋谷開催！デザイナーLT＆交流会（BASE×ノハナ×マネーフォワード×みんなのウェディング）』
https://mwed.connpass.com/event/54099/
発表資料

Transcript

1. σβΠφʔͷͨΊͷ ࣗ෼αʔϏε։ൃͷεεϝ Muneaki Hayakawa BASE, Inc.
2. ࣗ ݾ ঺ հ frontend designer Muneaki Hayakawa ૣ઒
   फ྄ ೥݄ೖࣾɻ #"4&ͷXFCͷσβΠϯɾϑϩϯτ୲౰ɻ
3. ωοτγϣοϓ։ઃ αʔϏε γϣοϐϯάΞϓϦ
5. γϣοϓ։ઃ਺ສళฮҎ্
   
6. #"4&ͷ੒௕Λࢧ͑Δ σβΠφʔͷ࢓ࣄ
7. 130+&$5 5"4,
8. ৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
9. ৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
10. # " 4 &
    " Q Q T
11. # " 4 &
    " Q Q T
    
    γ ϣ ο ϓ ͷ ֦ ு ػ ೳ
12. IUUQTUIFpSTUQFOHVJOKQ͓฼͞Μ໨ઢͰ࡞ͬͯΈͨΒCBTF͸γϯϓϧͳαʔϏεʹͳͬͨFDBB
13. #"4&ຊମ͸ʮ͓฼͞ΜͰ΋࢖͑ΔʯΛҙࣝ͠ɺ༨ܭͳػೳΛ͚ͭͣγϯϓϧʹอͭɻ
14. #"4&ຊମ͸ʮ͓฼͞ΜͰ΋࢖͑ΔʯΛҙࣝ͠ɺ༨ܭͳػೳΛ͚ͭͣγϯϓϧʹอͭɻ ࣗ༝ʹ௥ՃͰ͖Δ"QQTʹΑͬͯɺଟछଟ༷ͳγϣοϓͷӡ༻ʹԠ͑Δ
15. ৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
16. 6 *  6 9 ν έ ο τ
17. 6 *  6 9 ν έ ο τ Ϣʔβʔ͔Βͷ ཁ๬ όά ɾ վળҊ
18. 6 *  6 9 ν έ ο τ ର Ԡ σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮૷ IUNMDTTKTQIQ 6*σβΠϯ
19. σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮૷ IUNMDTTKTQIQ 6*σβΠϯ 6 *  6 9 ν έ ο τ ର Ԡ σβΠφʔͷରԠൣғ
20. σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮૷ IUNMDTTKTQIQ 6*σβΠϯ σβΠφʔͷରԠൣғ ɾνέοτͷཻ౓͕খ͞ΊͳͷͰɺσβΠϯˠ࣮૷·ͰҰ؏ͯ͠΍Δํ͕ޮ཰త ɾKT WJFXϑΝΠϧ಺ͷQIQ΋Ұ෦σβΠφʔ͕ίʔυॻ͘ 6 *  6 9 ν έ ο τ ର Ԡ
21. " K B Y ࣮ ૷ ɾΠϯλΫϥγϣϯΛߟྀ͢Δͱ"KBY࢖͍͍ͨͱ͜Ζ͕Α͘ग़ͯ͘Δ ɾσβΠφʔ͔ΒΤϯδχΞʹ"1*ଆΛґཔ͢Δ ΤϯδχΞ σβΠφʔ ͜ͷλΠϛϯάͰ౤͛·͢ ͜Μͳσʔλ͍ͩ͘͞ ͜ͷ63-ʹ౤͛ͯͶ ύϥϝʔλʔ͸͜ΕૹͬͯͶ ͬ͘͟Γ࢓༷ "1*
22. ɾσβΠφʔ͕%#ߏ଄Λཧղͯ͠ΔͱఏҊ͠΍͍͢ɺ࿩͕εϜʔζ ΤϯδχΞ σβΠφʔ ͜ͷλΠϛϯάͰ౤͛·͢ ͜Μͳσʔλ͍ͩ͘͞ ͜ͷ63-ʹ౤͛ͯͶ ύϥϝʔλʔ͸͜ΕૹͬͯͶ ͬ͘͟Γ࢓༷ "1* " K B Y ࣮ ૷ ɾΠϯλΫϥγϣϯΛߟྀ͢Δͱ"KBY࢖͍͍ͨͱ͜Ζ͕Α͘ग़ͯ͘Δ ɾσβΠφʔ͔ΒΤϯδχΞʹ"1*ଆΛґཔ͢Δ
23. # " 4 & ͷ σ βΠφ ʔ ͷ ࢓ ࣄ σβΠϯ
24. # " 4 & ͷ σ βΠφ ʔ ͷ ࢓ ࣄ σβΠϯ ϑϩϯτΤϯυ
25. # " 4 & ͷ σ βΠφ ʔ ͷ ࢓ ࣄ σβΠϯ ϑϩϯτΤϯυ XFCαʔϏεͷ ߏ଄ͷ೺Ѳ
26. # " 4 & ͷ σ βΠφ ʔ ͷ ࢓ ࣄ Ͳ͏΍ͬͯษڧͨ͠Β͍͍Ͱ͔͢ɾɾ ! ೥౓৽ೖࣾһɾࡾࠤ࿨͞Μ σβΠϯ ϑϩϯτΤϯυ XFCαʔϏεͷ ߏ଄ͷ೺Ѳ
27. ͱ ͍ ͏ ͜ ͱ Ͱ ɾ ɾ
28. ͱ ͍ ͏ ͜ ͱ Ͱ ɾ ɾ ࣗ ෼ Ͱ α ʔ Ϗ ε ࡞ ͬͯ Έ Α ͏ ʂ
29. σβΠφʔͷͨΊͷ ࣗ෼αʔϏε։ൃͷεεϝ
30. σβΠφʔ͔Β͢Δͱɺθϩ͔Βࣗ෼Ͱ࡞Ζ͏ͱࢥ͏ͱ ϋʔυϧ͕ߴ͍Πϝʔδ͕͋Δͱࢥ͍·͕͢ɺ ࠓ೔͸ࣗ෼͕࡞ͬͨܦݧΛγΣΞ͢Δ͜ͱͰɺগ͠Ͱ΋ ͦͷϋʔυϧΛԼ͛ΒΕͨΒ͍͍ͳͱࢥ͍·͢
31. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ ΞΠσΟΞग़͠
32. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ -*,&
33. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ -*,& $ " /
34. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - %
35. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - %
36. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - % ɾԻָɺөը޷͖ ɾڝഅ޷͖ ɾ໺ٿ؍ઓ޷͖ ɾཱྀߦ͕޷͖ FUD ྫʣ ྫʣ ྫʣ FUD FUD ɾXFC࡞ΕΔ ɾ࡞ۂͰ͖Δ ɾӳޠͰ͖Δ ɾڕ͞͹͚Δ ɾࣾձͷ໰୊ ɾࣗ෼͕ࠔͬͯΔ͜ͱ ɾՈ଒΍༑ୡ͕ࠔͬͯΔ͜ͱ
37. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - %
38. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - % өը XFC࡞ΕΔ
39. ޷ ͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢΂ ͖ ͜ ͱ ʗ ՝ ୊ -*,& $ " / 4 ) 0 6 - % өը XFC࡞ΕΔ ʢ೥ʣ ɾऴઓप೥ ɾઓ૪ମݧੈ୅ͷݮগ
40. ઓ ૪ ө ը
41. ઓ ૪ ө ը ࠓ ͷ ࠃ ࡍ ৘ ੎ ʹ ͭ ͳ ͕ Δ ྺ ࢙ ͷ ษ ڧ ʹ ͳ Δ ฏ ࿨ ͷ ࡏ Γ ํ ʹ ͭ ͍ͯ ߟ ͑ ͞ ͤ ͞ Ε Δ ʢ ࢙ ࣮ ϕʔε ͷ ઓ ૪ ө ը ʣ
42. ઓ ૪ ө ը ͜ ͷ ࢹ ఺ Ͱ · ͱ Ί ͯ ୳ ͤ Δ α Π τ ͕ ͳ ͍ ʢ ࢙ ࣮ ϕʔε ͷ ઓ ૪ ө ը ʣ ࠓ ͷ ࠃ ࡍ ৘ ੎ ʹ ͭ ͳ ͕ Δ ྺ ࢙ ͷ ษ ڧ ʹ ͳ Δ ฏ ࿨ ͷ ࡏ Γ ํ ʹ ͭ ͍ͯ ߟ ͑ ͞ ͤ ͞ Ε Δ
43. ઓ ૪ ө ը ͜ ͷ ࢹ ఺ Ͱ · ͱ Ί ͯ ୳ ͤ Δ α Π τ ͕ ͳ ͍ ࡞ Ζ ͏ ʢ ࢙ ࣮ ϕʔε ͷ ઓ ૪ ө ը ʣ ࠓ ͷ ࠃ ࡍ ৘ ੎ ʹ ͭ ͳ ͕ Δ ྺ ࢙ ͷ ษ ڧ ʹ ͳ Δ ฏ ࿨ ͷ ࡏ Γ ํ ʹ ͭ ͍ͯ ߟ ͑ ͞ ͤ ͞ Ε Δ
44. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ޷ ͖ ͳ ΋ ͷ Λ ى ఺ ʹ ΞΠ σΟ Ξ ग़ ͠ 
45. IUUQXBSpMNTQFBDFDPN
47. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ σʔλͷऔಘ
48. ө ը ͷ ৘ ใ Λ Ͳ ͏ ΍ ͬͯ औ ಘ ͢ Δ ͔
49. " 1 * ө ը ͷ ৘ ใ Λ Ͳ ͏ ΍ ͬͯ औ ಘ ͢ Δ ͔ ө ը ͷ ৘ ใ Λ Ͳ ͏ ΍ ͬͯ औ ಘ ͢ Δ ͔
50. ө ը ৘ ใ ͕ औ ಘ Ͱ ͖ Δ " 1 *
51. ө ը ৘ ใ ͕ औ ಘ Ͱ ͖ Δ " 1 *
52. ւ ֎ ͷ " 1 * ୳ ͢ ͷ Φ ε ε ϝ ʂ
53. ྫ ʣ Ի ָ ܥ " 1 *
54. ྫ ʣ Ի ָ ܥ " 1 *
55. IUUQTXXXQSPHSBNNBCMFXFCDPNDBUFHPSZTFBSDIBQJT
56. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ւ ֎ ΋ ؚ Ί ͯ " 1 * ୳ ͯ͠ Έ Δ 
57. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ αʔϏεͷߏ੒
58. α ʔ Ϗ ε ͷ ߏ ੒ OPEFKT&YQSFTT OHJOY 4",63"
    714 .Z42- ؅ཧը໘ ެ։αΠτ
59. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42-
60. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42- ษ ڧ ͢ Δ ͠ ͔ ͳ ͍ ɾ ɾ ʂ
61. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42- ษ ڧ ͢ Δ ͠ ͔ ͳ ͍ ɾ ɾ ʂ
62. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ΦϯϥΠϯֶशαʔϏεͰษڧ͢Δɻ 
63. ϋʔυϧԼ͕ͬͯͳ͍ΜͰ͚͢Ͳ ! ೥౓৽ೖࣾһɾࡾࠤ࿨͞Μ
64. ͦ Μ ͳ ʹ ษ ڧ ͠ ͳ ͍Ͱ Ͱ ͖ Δ ํ ๏ ΋ ʂ ʂ
66. IUUQKBXQBQJPSH
67. OPEFKT&YQSFTT OHJOY 4",63"
    714 .Z42- ؅ཧը໘ ެ։αΠτ α ʔ Ϗ ε ͷ ߏ ੒
68. 8PSE1SFTTͰͭ͘Δ ϩʔΧϧ؀ڥ Ϩϯλϧαʔόʔ ؅ཧը໘ ެ։αΠτ
69. IUUQTNMLDDBDPN IUUQTXXXIFSPLVDPN ͋ Δ ͍ ͸ ɾ ɾ
70. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42-
71. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42- 7 1 4 ͳ ͘ ͯ ΋ 0 , % # ༻ ҙ ͠ ͳ ͘ ͯ 0 ,
72. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ศརͳπʔϧΛϑϧ׆༻ͯ͠ ֶशίετΛԼ͛Δɻ 
73. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42-
74. α ʔ Ϗ ε ͷ ߏ ੒ ɾαʔόʔ
    ɿ
    4",63"
    714 ɾXFCαʔόʔ
    ɿ
    OHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫ
    ɿ
    OPEFKT&YQSFTT ɾ%#
    
    .Z42-
75. ɾ։ൃ؀ڥͷߏங͔Βஸೡʹղઆ ɾ"NB[PO
    "1*ͷαϯϓϧ ɾ'BDFCPPL 5XJUUFS
    "1*ͷαϯϓϧ ɾػցֶश ɾ%KT࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ
    
    
    FUD ͓͢͢Ίʂ ग़యɿIUUQTXXXBNB[PODPKQFYFDPCJEPT"4*/
76. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ KT͕গ͠Ͱ΋ॻ͚Δਓ͸OPEFKT͓͢͢Ίɻ 
77. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ ϑΟʔυόοΫ
79. ͜ΜͳΜ࡞ͬͨΑʂ
80. ͜ΜͳΜ࡞ͬͨΑʂ ͏Θɺઓ૪޷͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ
81. ͜ΜͳΜ࡞ͬͨΑʂ ͏Θɺઓ૪޷͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ ͳΜͰελʔ΢Υʔζೖͬͯͳ͍Μ͔͢ʁ
82. ͏Θɺઓ૪޷͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ ͳΜͰελʔ΢Υʔζೖͬͯͳ͍Μ͔͢ʁ ఻Θͬͯͳ͍ɾɾɾ !
83. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ पғʹੵۃతʹγΣΞͯ͠ ϑΟʔυόοΫ΋Β͏ 
84. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ ࡞ͬͨ࿩Λهࣄʹ͢Δ
85. IUUQTNFEJVNDPN!NNNBUDIઓ૪өըͷαΠτΛ࡞ͬͨ࿩ͦͷ̍FBD
86. Կ ͔ ͷ λ Π ϛ ϯ ά Ͱ ͸ ͯ ϒ ͕ ͭ ͘ ͜ ͱ ΋ ͋ Δ
87. σ βΠφ ʔ ޲ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ։ ൃ ࣌ ͷ ۤ ࿑ ࿩ ΍ ɺ α ʔ Ϗ ε ΁ ͷ ࢥ ͍ ͳ Ͳ Λ ه ࣄ ʹ ͢ Δ 
88. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ ࡞ΔϝϦοτ
89. ɾXFCΞϓϦέʔγϣϯͷߏ଄͕Θ͔Δ ࣗ ෼ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ
90. ࣗ ෼ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾXFCΞϓϦέʔγϣϯͷߏ଄͕Θ͔Δ ࣗࣾͷαʔϏε΁ͷཧղ͕ਂ·Δ
91. ࣗ ෼ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾࣦഊͯ͠΋ౖΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ɾXFCΞϓϦέʔγϣϯͷߏ଄͕Θ͔Δ ࣗࣾͷαʔϏε΁ͷཧղ͕ਂ·Δ
92. ࣗ ෼ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾXFCΞϓϦέʔγϣϯͷߏ଄͕Θ͔Δ ɾࣦഊͯ͠΋ౖΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ࣗࣾͷαʔϏε΁ͷཧղ͕ਂ·Δ ͜͜Ͱಘͨ஌ݟΛձࣾͷαʔϏεʹ׆͔ͤΔ
93. ɾXFCΞϓϦέʔγϣϯͷߏ଄͕Θ͔Δ ࣗ ෼ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾࣦഊͯ͠΋ౖΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ɾࣗ༝ʹσβΠϯͰ༡΂ΔɺσβΠϯΛָ͠Ή ͜͜Ͱಘͨ஌ݟΛձࣾͷαʔϏεʹ׆͔ͤΔ ࣗࣾͷαʔϏε΁ͷཧղ͕ਂ·Δ
94. σβΠφʔͳΒͰ͸ͷײੑɺൃ૝͕ܗʹͳͬͨαʔϏε͕ ΋ͬͱͨ͘͞Μ૿͑ͨΒ͍͍ͳͱࢥ͍ͬͯ·͢
95. σβΠφʔͳΒͰ͸ͷײੑɺൃ૝͕ܗʹͳͬͨαʔϏε͕ ΋ͬͱͨ͘͞Μ૿͑ͨΒ͍͍ͳͱࢥ͍ͬͯ·͢ ࠓ೔ͷ࿩Λ௨ͯ͠ɺগ͠Ͱ΋ࣗ෼΋࡞ͬͯΈΑ͏͔ͳɺ ͱࢥͬͯ΋Β͑ͨΒخ͍͠Ͱ͢ʂ
96. IUUQTXXXXBOUFEMZDPNDPNQBOJFTCBTFQSPKFDUT
97. THANK YOU! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ