Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueFes.pdf

takanori sugawara
November 03, 2018
8.8k

 VueFes.pdf

takanori sugawara

November 03, 2018
Tweet

Transcript

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

    View Slide

  2. View Slide

  3. 17೥͘Β͍σβΠφʔͱΤϯδχΞΛ

    ߦͬͨΓདྷͨΓͯ͠·͢ɻ
    ΠϯλϥΫγϣϯͱ
    σʔλϏδϡΞϥΠζ
    ͕ಘҙͰ͢

    View Slide

  4. Interaction Designer
    UX Design UI Design
    Design System Management

    View Slide

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

    View Slide

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

    View Slide

  7. Atomic Design͸

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

    View Slide

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

    View Slide

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

    View Slide

  10. ͦΓΌҧ͏ΜͰ͢

    View Slide

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

    View Slide

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

    View Slide

  13. ৬छ
    ͷ΂ਓ਺

    View Slide

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

    View Slide

  15. ྖҬ

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

  21. ஌ࣝͷ෼அ͕େ͖͍

    View Slide

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

    View Slide

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

    View Slide

  24. UXσβΠϯ
    ୭͕Ϣʔβʔ͔ΛఆΊΔ

    ͲΜͳ΋ͷΛ࡞ͬͨΒϢʔβʔ͕تͿ͔ߟ͑Δ

    ෼ੳͯ͠ɺϓϩτλΠϓ࡞ͬͯɺ

    ϢʔβʔʹͿ͚ͭͨΓͱ͔ͯ͠Ձ஋ݕূΛߦ͏

    View Slide

  25. UIσβΠϯ
    UXσβΠϯͰಋ͍ͨՁ஋ʹରͯ͠ܗΛ༩͑Δɻ

    Ձ஋ΛϢʔβʔʹಧ͖΍͍͢ܗʹ͢Δ͜ͱ͕੹຿

    View Slide

  26. σβΠϯ৭ʑ
    CI(ίʔϙʔϨʔτΞΠσϯςΟςΟ)΍

    ࣄۀઓུΛ΋ͱʹίϯηϓτΛ࿅ͬͨΓɻ

    ͔ΒͷUIΛׂΓग़ͨ͠Γɺ

    PR༻ͷαΠτͷσβΠϯͨ͠Γ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. ͍͍ͩͨ͜Μͳײ͡

    View Slide

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

    View Slide

  32. ͳΒͳ͍Ͱ͢ɻ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Java

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. ཧ༝

    View Slide

  46. ΈΜͳ׳Εͨ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. ׳Εͯͳ͍ΜͰ͢

    View Slide

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

    View Slide

  52. Sketch

    vs

    PhotoShop

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. C͔͠ॻ͍ͨ͜ͱͷͳ͍ਓʹ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. ͱ͸ݴ͑

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

    View Slide

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

    View Slide

  68. ӡ༻ͰΧόʔ

    View Slide

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

    View Slide

  70. Design Ops

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. ྫ͑͹

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. View Slide

  82. View Slide

  83. ख๏͸ΈΜͳख୳Γ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide