Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

F21a7e3b547392f94f63b1c81414413d?s=128

Muneaki Hayakawa

April 27, 2017
Tweet

Transcript

  1. σβΠφʔͷͨΊͷ ࣗ෼αʔϏε։ൃͷεεϝ Muneaki Hayakawa BASE, Inc.

  2. ࣗ ݾ ঺ հ frontend designer Muneaki Hayakawa ૣ઒फ྄ ೥݄ೖࣾɻ

    #"4&ͷXFCͷσβΠϯɾϑϩϯτ୲౰ɻ
  3. ωοτγϣοϓ։ઃ αʔϏε γϣοϐϯάΞϓϦ

  4. None
  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

  46. None
  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. ͦ Μ ͳ ʹ ษ ڧ ͠ ͳ ͍Ͱ Ͱ

    ͖ Δ ํ ๏ ΋ ʂ ʂ
  65. None
  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. ࣗ෼ͰαʔϏε࡞ͬͯΈͨ࿩ ϑΟʔυόοΫ

  78. None
  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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ