VueFes.pdf

98acea7e23ff864644cdc9dde602f91d?s=47 takanori sugawara
November 03, 2018
7.8k

 VueFes.pdf

98acea7e23ff864644cdc9dde602f91d?s=128

takanori sugawara

November 03, 2018
Tweet

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