VueFes.pdf

Transcript

1. Atomic Design σβΠϯͱ࣮૷ͷڱؒ ੁݪ ޹ଇ VueFesJapan 2018
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. ϓϩηεΛ Ͳ͏ʹ͔͢Δͱ͔
83. ख๏͸ΈΜͳख୳Γ
84. σβΠφʔ͕΍Δ΂͖࢓ࣄʹઐ ೦ͤͯ͋͛͞ΕΔঢ়گΛ࡞Γ· ͠ΐ͏
85. ΤϯδχΞϦϯάͰαϙʔτ Ͱ͖Δࣄ͸͍ͬͺ͍͋Δ͸ͣ
86. Vue.js࢖͍ͷօ͞Μ ͋ͳͨʹ͸ྗ͕͋Δʂ
87. σβΠφʔΛٹ͓͏ʂ
88. ͋Γ͕ͱ͏͍͟͝·ͨ͠