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

VueFes.pdf

takanori sugawara
November 03, 2018
9.2k

 VueFes.pdf

takanori sugawara

November 03, 2018
Tweet

Transcript

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

    View full-size slide

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

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

    View full-size slide

  3. Interaction Designer
    UX Design UI Design
    Design System Management

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Atomic Design͸

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ͦΓΌҧ͏ΜͰ͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ৬छ
    ͷ΂ਓ਺

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  19. ஌ࣝͷ෼அ͕େ͖͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. ͍͍ͩͨ͜Μͳײ͡

    View full-size slide

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

    View full-size slide

  30. ͳΒͳ͍Ͱ͢ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. ΈΜͳ׳Εͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. ׳Εͯͳ͍ΜͰ͢

    View full-size slide

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

    View full-size slide

  48. Sketch

    vs

    PhotoShop

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. ͱ͸ݴ͑

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

    View full-size slide

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

    View full-size slide

  64. ӡ༻ͰΧόʔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. ख๏͸ΈΜͳख୳Γ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide