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

Transcript

1. Muneaki Hayakawa BASE, Inc. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝

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

   #"4&ͷXFCͷϑϩϯτશൠ୲౰ɻ

3. # " 4 & ʹ ͭ ͍ͯ

4. ωοτγϣοϓߏங αʔϏε γϣοϐϯάΞϓϦ

5. ୭Ͱ΋؆୯ʹແྉͰ ωοτγϣοϓ͕࡞Ε·͢

6. None

7. γ ϣ ο ϓ ։ ઃ ਺   ສ

   ళ ฮ Ҏ ্
   ݄ ؒ ໿  ສ ళ ฮ ͷ ϖʔε Ͱ ૿ Ճ த
   

8. BASE DESIGN MARKET

9. None

10. ਺ ඦ ສ ԁ ച Εͯ Δ σ βΠφ ʔ

    ΋ ʂ ʂ

11. ͔͜͜Β΍ͬͱຊ୊ɾɾ

12. #"4&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝

13. None

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&ͷσβΠφʔ͕ ίʔυ΋ॻ͘ཧ༝

29. None

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