VueFes.pdf

Transcript

1. 1.

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

2. 2.

   None
3. 3.

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

4. 4.

   Interaction Designer UX Design UI Design Design System Management

5. 5.

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

6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

    ͦΓΌҧ͏ΜͰ͢

11. 11.

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

12. 12.

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

13. 13.

    ৬छ ͷ΂ਓ਺

14. 14.

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

15. 15.

    ྖҬ

16. 16.

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

17. 17.

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

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

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

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

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

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

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

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

    ஌ࣝͷ෼அ͕େ͖͍

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

    ΋ͬͱ ৭Μͳ࢓ࣄ͕͋Δ

28. 28.

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

29. 29.

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

30. 30.

    ͍͍ͩͨ͜Μͳײ͡

31. 31.

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

32. 32.

    ͳΒͳ͍Ͱ͢ɻ

33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

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

38. 38.

    ͪΐͬͱ࿦఺ม͑·͢

39. 39.

    ࿩͸ඈΜͰ 20೥͘Β͍લ

40. 40.

    Java

41. 41.

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

42. 42.

    ઃܭΛඪ४Խ͢Δख๏

43. 43.

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

44. 44.

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

45. 45.

    ཧ༝

46. 46.

    ΈΜͳ׳Εͨ

47. 47.

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

48. 48.

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

49. 49.

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

50. 50.

    ׳Εͯͳ͍ΜͰ͢

51. 51.

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

52. 52.

    Sketch
 vs
 PhotoShop

53. 53.

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

54. 54.

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

55. 55.

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

56. 56.

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

57. 57.

    ͞ΒʹAtomicDesign ͳΜͯݴͬͨΒ

58. 58.

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

59. 59.

    ͱ͸ݴ͑ͳΜͱ͔͍ͨ͠

60. 60.

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

61. 61.

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

62. 62.

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

63. 63.

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

64. 64.

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

65. 65.

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

66. 66.

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

67. 67.

    ΜͰͲ͏͢Ε͹ྑ͍ͷ͞

68. 68.

    ӡ༻ͰΧόʔ

69. 69.

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

70. 70.

    Design Ops

71. 71.

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

72. 72.

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

73. 73.

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

74. 74.

    ྫ͑͹

75. 75.

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

76. 76.

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

77. 77.

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

78. 78.

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

79. 79.

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

80. 80.

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

81. 81.

    None
82. 82.

    None
83. 83.

    ख๏͸ΈΜͳख୳Γ

84. 84.

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

85. 85.

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

86. 86.

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

87. 87.

    σβΠφʔΛٹ͓͏ʂ

88. 88.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠