BASEのデザイナーがコードも書く理由 / base-design-and-frontend

2016/5/20
デザイナーLT＆交流会（freee×BASE×みんなのウェディング）にて発表した資料

Transcript

1. Muneaki Hayakawa BASE, Inc. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝
2. ࣗ ݾ ঺ հ frontend designer Muneaki Hayakawa ૣ઒
   फ྄ ೥݄ೖࣾɻ #"4&ͷXFCͷϑϩϯτશൠ୲౰ɻ
3. # " 4 & ʹ ͭ ͍ͯ
4. ωοτγϣοϓߏங αʔϏε γϣοϐϯάΞϓϦ
5. ୭Ͱ΋؆୯ʹແྉͰ ωοτγϣοϓ͕࡞Ε·͢
7. γ ϣ ο ϓ ։ ઃ ਺   ສ ళ ฮ Ҏ ্
   ݄ ؒ ໿  ສ ళ ฮ ͷ ϖʔε Ͱ ૿ Ճ த
   
8. BASE DESIGN MARKET
10. ਺ ඦ ສ ԁ ച Εͯ Δ σ βΠφ ʔ ΋ ʂ ʂ
11. ͔͜͜Β΍ͬͱຊ୊ɾɾ
12. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝
14. σ βΠφ ʔ ʹ ٻ Ί Β Ε Δ ྖ Ҭ ͷ ֦ େ
15. σ βΠφ ʔ ʹ ٻ Ί Β Ε Δ ྖ Ҭ ͷ ֦ େ ς Ϋ χ Χ ϧ Ϋ Ϧ ΤΠλ ʔ
16. # " 4 & ͷ ৔ ߹
17. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ
18. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ
19. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ
20. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ ҧ͍͕Α͘Θ͔ͳΒ͍ɾɾ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈
21. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈 EJ⒎ͱͬͯΈͨ
22. # " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ ͖ ͷ ࿩ ๭స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈 ݴ͍ճ͕͠ҧ͏͚ͩͰݴͬͯΔ͜ͱ͸ಉ͡ EJ⒎ͱͬͯΈͨ
23. 㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ
24. 㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ
25. 㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
26. 㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
27. 㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
28. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝
30. σβΠϯ ϑΝʔετ εϐʔυ Ϟνϕʔγϣϯ ΍Β͟ΔΛ ಘͳ͍ঢ়گ
31. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝ σβΠϯϑΝʔετ 
32. ୭Ͱ΋؆୯ʹ࢖͑Δ
33. ୭Ͱ΋؆୯ʹ࢖͑Δ ͓฼͞ΜͰ΋࢖͑Δ
34. ୅දͷ௽Ԭ͕࣮Ոͷ͓฼͞Μ͔ΒݴΘΕͨ ʮωοτͰ෺ΛചΓ͍ͨʯͱ͍͏ ͻͱݴΛ͖͔͚ͬʹ࡞ͬͨαʔϏε
35. ʮωοτ͕Α͘Θ͔Βͳ͍ʯ͚ΕͲ ʮؾܰʹωοτγϣοϓΛ΍ͬͯΈ͍ͨʯ
36. ίΞͷ෦෼͸ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ ʮωοτ͕Α͘Θ͔Βͳ͍ʯ͚ΕͲ ʮؾܰʹωοτγϣοϓΛ΍ͬͯΈ͍ͨʯ
37. 6* ίΞͷ෦෼͸ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
38. ΤϯδχΞ 6* γεςϜཁ݅ ίΞͷ෦෼͸ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
39. σβΠφʔ ΤϯδχΞ 6* ͓฼͞ΜͰ΋ ࢖͑Δ͔ʁ γεςϜཁ݅ ίΞͷ෦෼͸ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
40. ίΞͷ෦෼͸ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ σβΠφʔ ΤϯδχΞ 6* σβΠϯϑΝʔετ ͓฼͞ΜͰ΋ ࢖͑Δ͔ʁ γεςϜཁ݅
41. σβΠφʔ ΤϯδχΞ 6* ͓฼͞ΜͰ΋ ࢖͑Δ͔ʁ γεςϜཁ݅ 6*ଆͷγεςϜͷ࣮ݱੑ΋୲อ͢Δ
42. σβΠφʔ ΤϯδχΞ 6* ͓฼͞ΜͰ΋ ࢖͑Δ͔ʁ γεςϜཁ݅ 6*ଆͷγεςϜͷ࣮ݱੑ΋୲อ͢Δ ϑϩϯτͷ࣮૷΋ߟྀͨ͠σβΠϯ
43. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝ εϐʔυ 
44. Ϣʔβʔ͔Βͷ ཁ๬ όά ɾ վળҊ
45. Ϣʔβʔ͔Βͷ ཁ๬ όά ɾ վળҊ
46. 6*69
    νέοτରԠϑϩʔ 6*σβΠϯ
47. 6*σβΠϯ σβΠϯϨϏϡʔ 6*69
    νέοτରԠϑϩʔ
48. 6*σβΠϯ σβΠϯϨϏϡʔ 6*69
    νέοτରԠϑϩʔ HJU ϒϥϯν࡞੒
49. 6*σβΠϯ ࣮૷ IUNMDTTKTQIQ HJU ϒϥϯν࡞੒ 6*69
    νέοτରԠϑϩʔ σβΠϯϨϏϡʔ
50. 6*σβΠϯ HJU ίϛοτ 6*69
    νέοτରԠϑϩʔ HJU ϒϥϯν࡞੒ σβΠϯϨϏϡʔ ࣮૷ IUNMDTTKTQIQ
51. 6*σβΠϯ ίʔυϨϏϡʔ 6*69
    νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞੒ ࣮૷ IUNMDTTKTQIQ
52. σβΠφʔͷΈͰ׬݁Ͱ͖Δ 6*69
    νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞੒ 6*σβΠϯ ίʔυϨϏϡʔ ࣮૷ IUNMDTTKTQIQ
53. σβΠφʔͷΈͰ׬݁Ͱ͖Δ αʔϏεվળͷαΠΫϧΛૣ͘ճͤΔ 6*69
    νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞੒ 6*σβΠϯ ίʔυϨϏϡʔ ࣮૷ IUNMDTTKTQIQ
54. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝ Ϟνϕʔγϣϯ ̏
55. Ϣ ʔ β ʔϑ Ν ʔε τ
56. Ϣ ʔ β ʔϑ Ν ʔε τ ϑ Ν ʔε τ Ϣ ʔ β ʔ
57. ࣗ ෼ ͕ ͦ ͷ α ʔ Ϗ ε ͷ Ϣʔ βʔͰ ͋ Γ ɺ ୭ Α Γ ΋ ͦ ͷ α ʔ Ϗ ε ͕ ޷ ͖ Ͱɺ
    ͦ ͷ α ʔ Ϗ ε Λ ࢖ ͍ ࠐ ΜͰ ͍ Δ ͜ ͱ ɻ
    ϑ Ν ʔε τ Ϣ ʔ β ʔ
58. MJLF ເɾझຯɾཉٻ ޷͖ͳ͜ͱ
59. TIPVME MJLF ເɾझຯɾཉٻ ՝୊ɾ࢖໋ɾ੹೚ ޷͖ͳ͜ͱ ͢΂͖͜ͱ º
60. TIPVME ϑΝʔετϢʔβʔʹͳΕΔαʔϏε MJLF ເɾझຯɾཉٻ ՝୊ɾ࢖໋ɾ੹೚ ޷͖ͳ͜ͱ ͢΂͖͜ͱ º
61. ࣗ෼ͷझຯ΍ؔ৺ͷ͋Δ෼໺ʹؔΘΔ͜ͱɺ׌ͭ
    ୭͔ͷ՝୊Λղܾ͢Δͱ͍͏࢖໋ײ͕ ݟग़ͤΔϓϩμΫτͰ͋Ε͹ɺ
    l΋ͬͱΑ͍ͨ͘͠z
    lଟ͘ͷਓʹ࢖ͬͯ΋Β͍͍ͨz ͱ͍͏ཉٻ͕͖ͭͳ͘ͳΔɻ
    
62. σ βΠ ϯ ͩ ͚ ͡ Ό ଍ Γ ͳ ͘ ͳ Δ ɻ ࣮ ૷ ͠ ͨ ͘ ͳ Δ ɻ ࣗ෼ͷझຯ΍ؔ৺ͷ͋Δ෼໺ʹؔΘΔ͜ͱɺ׌ͭ
    ୭͔ͷ՝୊Λղܾ͢Δͱ͍͏࢖໋ײ͕ ݟग़ͤΔϓϩμΫτͰ͋Ε͹ɺ
    l΋ͬͱΑ͍ͨ͘͠z
    lଟ͘ͷਓʹ࢖ͬͯ΋Β͍͍ͨz ͱ͍͏ཉٻ͕͖ͭͳ͘ͳΔɻ
    
63. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝ ΍Β͟ΔΛಘͳ͍ঢ়گ 
64. αʔϏεϦϦʔε͔࣌Βͷෛ࠴
65. αʔϏεϦϦʔε͔࣌Βͷෛ࠴ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉ౓ͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
66. αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉ౓ͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
67. αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉ౓ͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ #&.ϕʔεͷ໋໊نଇ 4BTTɾ(VMQಋೖ
68. αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ #&.ϕʔεͷ໋໊نଇ σβΠϯΨΠυϥΠϯ࡞੒ 3FBDUಋೖ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉ౓ͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ 4BTTɾ(VMQಋೖ
69. αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ ਓ͕଍Γͳ͍ɾɾʂ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉ౓ͷ্ॻ͖߹ઓ #&.ϕʔεͷ໋໊نଇ σβΠϯΨΠυϥΠϯ࡞੒ 3FBDUಋೖ 4BTTɾ(VMQಋೖ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
70. IUUQTXXXXBOUFEMZDPNQSPKFDUT
71. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ