VueFes.pdf

Transcript

1. Atomic Design σβΠϯͱ࣮૷ͷڱؒ ੁݪ ޹ଇ VueFesJapan 2018

2. None

3. 17೥͘Β͍σβΠφʔͱΤϯδχΞΛ
 ߦͬͨΓདྷͨΓͯ͠·͢ɻ ΠϯλϥΫγϣϯͱ σʔλϏδϡΞϥΠζ ͕ಘҙͰ͢

4. Interaction Designer UX Design UI Design Design System Management

5. Technical advisor ख͕଍Γͳ͍ॴͷϑΥϩʔ

6. Έͳ͞Μ ίϯϙʔωϯτ ࡞ͬͯ·͢ΑͶɻ

7. Atomic Design͸
 σβΠφʔͱΤϯδχΞʹಉ͡໨ ઢΛ༩͑·ͨ͠

8. σβΠφʔͱ ΤϯδχΞ ෼͔Γ߹͑ͯ·͔͢ʁ

9. ίϯϙʔωϯτͷ ෼͚ํͳΜ͔ҧ͏ͳʔ ͱ͔ࢥ͍·ͤΜ͔ʁ

10. ͦΓΌҧ͏ΜͰ͢

11. ͱ͍͏Θ͚Ͱઌि ΞϯέʔτͱͬͯΈ·ͨ͠ɻ

12. 24໊ͷํʹճ౴͍ͨͩ ͖·ͨ͠ɻ

13. ৬छ ͷ΂ਓ਺

14. ίϯϙʔωϯτʹؔΘΔ ਓ਺ن໛

15. ྖҬ

16. ར༻͍ͯ͠ΔσβΠϯπʔϧ FigmaϢʔβʔάϧʔϓʹڠྗΛ௖͍ͨͷͰ ͪΐͬͱόΠΞε͔͔ͬͯΔ͔΋

17. ෼཭ σβΠϯ͸ϥϑ·Ͱ ίʔυ্Ͱ࢓্͛Δ ελΠϦϯάͱԋग़ ʹؔΘΔίʔυ͸ σβΠφʔ͕ॻ͘ σβΠϯ͕׬͔ྃͯ͠Β ΤϯδχΞ͕ίʔυΛॻ͘ σβΠϯ͔Βίʔυ·Ͱ ҰਓͰ΍Δ

    ີ σβΠφʔͱσΟϨΫλʔͰ ਺ࣈΛݟͯͲ͜Λ վળ͢Δ͔ܾΊ͍ͯΔ ϓϩτλΠϓΛ࡞͔ͬͯΒ ΤϯδχΞʹڞ༗ ϓϩηε

18. ίϯϙʔωϯτϕʔεͷར఺ σβΠϯ໨ઢ σβΠϯͷϧʔϧ͕໌֬Խ͠ ଐਓੑʹΑΒͳ͍σβΠϯ͕ՄೳʹͳΔ ΧϥʔελΠϧͳͲʹઆ໌จΛॻ͘ͱ ϧʔϧΛकΓͳ͕ΒσβΠϯ͠΍͍͢ ࠶ར༻͠΍͍ͨ͢ΊɺσβΠϯ޻਺͕ݮΒͤΔ ݟͨ໨ͷʮσβΠϯʯͰ͸ͳ͘ɺ ϧʔϧͱͯ͠ͷʮσβΠϯʯΛ
 ͭ͘Δͱ͍͏ҙ͕ࣝࣗવͱժੜ͑Δ

    Ұ෦௚͢ͱ͢΂ͯ௚Δ఺ ίϛϡχέʔγϣϯίετ͕ݮΔ ਖ਼͍͠σβΠϯʹ͍ͭͯͷڞ௨ཧղΛ࣋ͪ΍ ͍͢఺ શମͷ౷ҰײɺҰ؏ੑΛҡ࣋͠΍͍͢ ΤϯδχΞ໨ઢ ΤϯδχΞͰ΋͍ܰσβΠϯ͸Ͱ͖ΔΑ͏ʹͳΓ ͦ͏ XD, Sketchͷ࡞ΓࠐΈ͸࠷ऴ੒Ռ෺ʹ ͳΒͳ͍͜ͱ͕ٯઆతͳར఺ scoped cssͰBEMֶशίετ͕ա৒౤ࢿʹͳͬͨ StorybookΛར༻ͯ͠ ݟͨ໨ͷ֬ೝ͕Ͱ͖Δ σβΠϯͷஈ֊͔Β࠶ར༻ੑΛߟ͑ͨUIઃܭΛ͢ Δ͜ͱͰɺ CSSͳͲ࣮૷ͷ౎߹͕ࣗવͱߟྀ͞ΕΔ ΧϓηϧԽʹΑΓɺ௿εΩϧͷΤϯδχΞɾσβ Πφʔ΋ίΞͷίʔυʹ৮Εͣʹ։ൃʹίϛοτ

19. ίϯϙʔωϯτϕʔεͷ೉఺ σβΠϯ໨ઢ ϏδϡΞϧͷࣗ༝౓͕Լ͕Δ ֶशίετ͕͔͔Δ σβΠϯͷཻ౓ͱػೳͷཻ౓Λἧ͑ͯίϯϙʔ ωϯτઃܭΛߦΘͳ͚Ε͹ɺ ίϯϙʔωϯτͷछྨ͕૿͍͖͑ͯɺιʔε ίʔυʹѱӨڹ͕ͰΔ ίϯϙʔωϯτԽ͢Δج४ʹෆ͕҆͋Δ
 (1Օॴ͔͠࢖ͬͯͳ͍ͷʹίϯϙʔωϯτԽ

    ͢Δͷʁ) ΤϯδχΞ໨ઢ UIతͳίϯϙʔωϯτͱɺσʔλϑϩʔతͳ ίϯϙʔωϯτͷ෼͚ํ͕ҟͳΔ͜ͱ͕͋Δ σβΠφʔ΋atomicdesignͷ֓೦Λ஌ͬͯ໯͏ ඞཁ͕͋Δ ֶशίετ͕͔͔Δ ࡉ͔͗͢Δͱ؅ཧ͠ਏ͍ σβΠφʔͱΤϯδχΞͰίϯϙʔωϯτͷ ཻ౓ͷ؍఺͕ҧ͏ ཻ౓Λ෼͚Δ͜ͱͰίϯϙʔωϯτ͕૿͑ͯ ໘౗ σβΠϯͱ࣮૷ऀཻ͕౓ͷೝ͕ࣝҟͳ͍ͬͯ Δͱӡ༻Ͱ͖ͳ͍

20. ΤϯδχΞɾσβΠφʔͱͷ ΍ΓऔΓͰͲΜͳࣄ͕ى͍ͬͯ͜Δ͔ʁ ίϯϙʔωϯτ͕ग़ἧͬͯ͘Δͱɺίϯϙʔωϯτͷ࿩ΑΓ໰୊੔ཧ΍APIͷઃܭɺ࢖͍΍͢͞ʹ͍ͭͯ࿩ͯ͠ ͍·͢ɻ ࣮૷ͱσβΠϯʹဃ཭͕͋Δ ίϯϙʔωϯτͷඞཁੑΛσβΠφʔ͕ཧղ͠ͳ͍ ݁ہσβΠϯΛݩʹΤϯδχΞ͕ίϯϙʔωϯτԽ͍ͯ͠Δ ΤϯδχΞ͕BEMΛอक͢Δ͜ͱʹർΕ͍ͯΔɻ ίϯϙʔωϯτΨΠυతͳ෺͕ͳ͍ͱίϯϙʔωϯτ͕ར༻͞Εͳ͍ ίϯϙʔωϯτΛར༻͢ΔΑ͏ʹͳΓɺσβΠφʔಉ࢜Ͱͷ΍ΓऔΓ͕೉͘͠ͳ͕ͬͨɺΤϯδχΞͱͷ΍Γͱ

    Γ͸ָʹͳͬͨ ࣮૷Λ஌Βͳ͍σβΠφʔʹͱͬͯ͸ɺӢΛ͔ͭΉΑ͏ͳ࿩ʹฉ͑͜Δ෦෼͕͋ΔΑ͏ͰɺͦΕΛཧղͤ͞Δʹ ۤ࿑͍ͯ͠Δɻ

21. ஌ࣝͷ෼அ͕େ͖͍

22. େࣄʹ͍ͯ͠Δ ࣄฑ͕ҧ͏

23. ·ͣ͸ɺσβΠφʔ͕΍ͬͯ ͍ΔࣄΛ੔ཧͯ͠Έ·͠ΐ͏ɻ

24. UXσβΠϯ ୭͕Ϣʔβʔ͔ΛఆΊΔ
 ͲΜͳ΋ͷΛ࡞ͬͨΒϢʔβʔ͕تͿ͔ߟ͑Δ
 ෼ੳͯ͠ɺϓϩτλΠϓ࡞ͬͯɺ
 ϢʔβʔʹͿ͚ͭͨΓͱ͔ͯ͠Ձ஋ݕূΛߦ͏

25. UIσβΠϯ UXσβΠϯͰಋ͍ͨՁ஋ʹରͯ͠ܗΛ༩͑Δɻ
 Ձ஋ΛϢʔβʔʹಧ͖΍͍͢ܗʹ͢Δ͜ͱ͕੹຿

26. σβΠϯ৭ʑ CI(ίʔϙʔϨʔτΞΠσϯςΟςΟ)΍
 ࣄۀઓུΛ΋ͱʹίϯηϓτΛ࿅ͬͨΓɻ
 ͔ΒͷUIΛׂΓग़ͨ͠Γɺ
 PR༻ͷαΠτͷσβΠϯͨ͠Γ

27. ΋ͬͱ ৭Μͳ࢓ࣄ͕͋Δ

28. ޮ཰Խ͸͍͕ͨ͠ ΋ͬͱ΋େࣄͳͷ͸ɺ Ϣʔβʔͷ൓Ԡ

29. ៉ྷͳߏ଄Λ࡞Δࣄ͸ େࣄ͚ͩͲ̍൪͡Όͳ͍

30. ͍͍ͩͨ͜Μͳײ͡

31. Atomic DesignͳΒ ͦ͜Μͱ͜Ͳ͏ʹ͔ͳΔΜ͡Όʹ ͷʁ

32. ͳΒͳ͍Ͱ͢ɻ

33. ͔֬ʹUIͷ෦඼ͷઃܭ͸ ڞ௨ԽͰ͖Δ

34. ίϯϙʔωϯτ͸ͦ΋ͦ΋ ΤϯδχΞϦϯάͷ֓೦

35. σβΠφʔ͸Ձ஋ʹ ܗঢ়Λ༩͑ ΤϯδχΞ͸ܗঢ়Λ࣮ݱ͢Δ

36. σβΠφʔʹͱͬͯࠓ·Ͱͦ ͜·Ͱؔ৺ࣄͰ͸ͳ͔ͬͨ

37. ͱ͸ݴͬͯ΋αʔϏε͸ ӡ༻Λଓ͚Δ͜ͱ΋ େࣄͳՁ஋

38. ͪΐͬͱ࿦఺ม͑·͢

39. ࿩͸ඈΜͰ 20೥͘Β͍લ

40. Java

41. ΦϒδΣΫτࢦ޲ vs ߏ଄Խࢦ޲

42. ઃܭΛඪ४Խ͢Δख๏

43. ΤϯδχΞಉ࢜Ͱ΋ ΍ͬͯ·ͨ͠

44. ஗͍ͱ͔೉͍͠ͱ͔ݴΘΕͯ ͍ͨJava͕ݱࡏͰ͸౰ͨΓલ ʹͳΓ·ͨ͠ɻ

45. ཧ༝

46. ΈΜͳ׳Εͨ

47. ࣮ߦ؀ڥͷੑೳ্͕͕Γ ෋߽తϓϩάϥϛϯάͰ ໰୊ͳ͘ͳͬͨ

48. σβΠϯπʔϧʹ ͦ͏͍͏ࣄ͕ ى͍ͬͯ͜Δ

49. ਺೥લ·Ͱɺίϯϙʔωϯτࢥߟͷσβ Πϯπʔϧ͸͋·Γྲྀߦ͓ͬͯΒͣɺ ίϯϙʔωϯτػೳͷͳ͍PhotoShopͰ Ұੜݒ໋σβΠϯ͍ͯͨ͠ͷͰ͢ɻ

50. ׳Εͯͳ͍ΜͰ͢

51. Sketch͸σβΠφʔʹ ͱͬͯͷJava

52. Sketch
 vs
 PhotoShop

53. खஈ͕ਐԽͨ͠ͷͰ ख๏΋มΘΔ

54. खஈ͕ਐԽͨ͠ͷͰ ख๏΋มΘΔ

55. ·ͩ·ͩ πʔϧͷαϙʔτ͕଍Γͳ͍

56. ͕࣌ؒղܾ͢Δ͜ͱ΋ ݁ߏ͋Γͦ͏Ͱ͸͋Δ

57. ͞ΒʹAtomicDesign ͳΜͯݴͬͨΒ

58. C͔͠ॻ͍ͨ͜ͱͷͳ͍ਓʹ
 JavaͷSpringBootͰΞϓϦॻ͚ ͱཁٻ͍ͯ͠ΔΑ͏ͳ΋ͷͱ͝ཧղ͍ͩ͘͞ɻ

59. ͱ͸ݴ͑ͳΜͱ͔͍ͨ͠

60. ͿͬͪΌ͚ɺ׳Εͯͳ͍ίϯϙʔ ωϯτ࡞Γ·Ͱ಄ճΓ·ͤΜ

61. ΤϯδχΞͱ͍͏ ੜ͖෺͸ ߹ཧԽͷԽ਎

62. Ͳ͏ʹ͔ͯ͠ ߹ཧԽ͍ͨ͠

63. σβΠφʔ͸ ΤϯδχΞͰ͸ͳ͍

64. σβΠφʔ͸ΫϦΤΠςΟϒʹूதͯ͠ ϢʔβʔʹΘ͒ͱݴΘ͍ͤͨ͠ ΤϯδχΞ͸៉ྷͳߏ଄Λ ࡞ͬͯอकίετΛԼ͍͛ͨ

65. ͦ΋ͦ΋৬੹͕ҧ͏ ͦΜͳ͜ͱͯ͠ΔͳΒ ΋ͬͱྑ͍ϓϩμΫτΛ σβΠϯͯ͠΄͍͠

66. ͱ͸ݴ͑
 ϑϩϯτΤϯυͷۤ͠Έ͸্ྲྀ͔ Βม͍͔͑ͯͳ͚Ε͹վળ͠ͳ͍

67. ΜͰͲ͏͢Ε͹ྑ͍ͷ͞

68. ӡ༻ͰΧόʔ

69. ͦ͜Ͱஸ౓͍͍ ֓೦͕͋Γ·͢

70. Design Ops

71. “https://www.designbetter.co/designops-handbook/introducing-designops"

72. σβΠφʔࣗ෼ͷ ৬ೳʹઐ೦͠΍͍͢ ঢ়گΛ࡞Δ

73. σβΠϯϓϩηεΛ αϙʔτ͢Δ࢓૊Έ ૊৫Λ࡞Δ

74. ྫ͑͹

75. ΤϯδχΞ͕σβΠϯπʔϧΛ ֮͑ɺίϯϙʔωϯτԽͷखຊ Λࣔ͢

76. σβΠϯΛαϙʔτ͢ΔΤϯ δχΞϦϯάͰ͖·ͤΜ͔ʁ

77. Ktsn͞Μͷπʔϧͷख఻ ͍͢Δͱ͔

78. σβΠϯπʔϧ͔Β ΞΠίϯΛࣗಈੜ੒ Ͱ͖ΔΑ͏ʹ͢Δͱ͔

79. σβΠφʔͷԣʹ͍ͭͯ ίϯϙʔωϯτͷ ࣸܦ͠ଓ͚Δͱ͔

80. ϓϩηεΛ Ͳ͏ʹ͔͢Δͱ͔

81. None
82. None

83. ख๏͸ΈΜͳख୳Γ

84. σβΠφʔ͕΍Δ΂͖࢓ࣄʹઐ ೦ͤͯ͋͛͞ΕΔঢ়گΛ࡞Γ· ͠ΐ͏

85. ΤϯδχΞϦϯάͰαϙʔτ Ͱ͖Δࣄ͸͍ͬͺ͍͋Δ͸ͣ

86. Vue.js࢖͍ͷօ͞Μ ͋ͳͨʹ͸ྗ͕͋Δʂ

87. σβΠφʔΛٹ͓͏ʂ

88. ͋Γ͕ͱ͏͍͟͝·ͨ͠