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

Atomic Designと刺さらない現場/Atomic Design and it fit to Project or not

Atomic Designと刺さらない現場/Atomic Design and it fit to Project or not

コンポーネント設計の話といえばAtomic Design一強な印象だけど、
Atomic Design、うまくいってますか?

果物リン

July 31, 2019
Tweet

More Decks by 果物リン

Other Decks in Technology

Transcript

  1. Atomic Designと
    刺さらない現場
    Ռ෺Ϧϯ@FruitRiin
    גࣜձࣾΏΊΈ
    2019/07/31
    Roppongi.vue #2

    View Slide

  2. Atomic Design࢖ͬͯ·͔͢ʁ

    View Slide

  3. Atomic Design

    ͏·͍ͬͯ͘·͔͢ʁ

    View Slide

  4. 自己紹介
    • Ռ෺Ϧϯ@FruitRiin
    • גࣜձࣾΏΊΈ
    • ϑϩϯτΤϯυΤϯδχΞ
    • ϦʔυΤϯδχΞΒ͍͠
    • Vue͸͍͍ͧ
    • Ionic/Vue΋࠷ۙਪ͠

    View Slide

  5. Atomic Designといえば
    Α͘ݟΔ΍ͭ

    View Slide

  6. ϞμϯϑϩϯτΤϯυઃܭ
    ʹ͍͍ͩͨAtomic Designઆʁ

    View Slide

  7. View Slide

  8. Atomic Designとは
    • σβΠϯΛݪࢠ͔Β૊ΈཱͯΔ
    • ڞ௨Ͱ࢖͑Δ෼ࢠɾ༗ػମͱͯ͠࠶ར༻͕ಛ௃
    • શମͱͯ͠ͷ౷ҰײΛੜΈग़͢

    σβΠϯγεςϜͷͻͱͭ

    View Slide

  9. デザインシステム?
    “σβΠϯγεςϜͱ͸ɺσβΠϯͷݪଇɺ֓೦ɺΨΠυɺίϯ
    ϙʔωϯτͳͲɺσβΠϯʹؔ͢Δ͋ΒΏΔϧʔϧΛఆΊͨ΋ͷ
    ͷ͜ͱΛݴ͍·͢ɻ”
    “ελΠϧΨΠυ΍ίϯϙʔωϯτϥΠϒϥϦʢύλʔϯϥΠϒϥ
    Ϧʣ͸σβΠϯελΠϧͷҰ෦ʹ͋ͨΓ·͢ɻ”
    σβΠϯγεςϜΛਖ਼͘͠ཧղ͠Α͏ɻ࡞Γํɾࢀߟࣄྫͷ·ͱΊ

    ʕʕ8FC%FTJHO5SFOET

    View Slide

  10. デザインシステムのメリット
    • Ұ؏ͨ͠σβΠϯΛ࡞ΕΔΑ͏ʹͳΔ
    • νʔϜͰͷσβΠϯ੍࡞ΛεϜʔζʹ
    • σβΠφʔҎ֎ͷਓͱڞ௨ೝࣝΛ࣋ͭ

    View Slide

  11. ຊདྷɺΤϯδχΞͷͨΊͷ΋ͷͰ͸ͳ͍
    ʢΤϯδχΞʹͱͬͯ࢖͍΍͍͢΋ͷͰ͸͋Δʣ

    View Slide

  12. ࣮͸Atomic DesignͷݪஶͰ͸…
    • ࣮૷ʢσʔλ΍ϩδοΫͷ੹຿ʣʹ͸৮Ε͍ͯͳ͍
    • ͨ·ͨ·ίϯϙʔωϯτͱ૬ੑ͕ྑ͔͚ͬͨͩ

    View Slide

  13. 刺さる現場
    • ܧଓ։ൃɺن໛͕େ͖͍
    • σβΠφʔ͞Μͱͷ

    ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ
    • σβΠφʔ͞Μ͕

    ίʔυΛར༻ͯ͠σβΠϯ͢Δ

    View Slide

  14. 刺さらない現場
    • ܧଓ͠ͳ͍ɺن໛͕খ͍͞
    • σβΠφʔͱΤϯδχΞͷڑ཭͕ԕ͍
    • σβΠφʔ͕Atomic DesignΛ࠾༻ͯ͠ͳ͍

    View Slide

  15. 刺さらない時どうすべきか?
    • Atomic DesignΛ࠾༻͠ͳ͍
    • ࣗ෼ͰίϯϙʔωϯτΛ෼͚Δ
    • ࢖͍ճ͞ͳ͍ͱ͖͸ີʹͭͬͯ͘΋ྑͦ͞͏
    • ࢖͍·Θͨ͘͠ͳͬͨΒ੾Γग़ͭͭ͠෼ׂ
    • ݟ௨͕͠ѱ͘ͳͬͨΒ੾Γग़ͯ͠෼ׂ
    • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷ͸ׂͱศར

    View Slide

  16. Appendix:私のディレクトリ分け
    • ೰ΈͲ͜Ζ
    • ڞ௨ͳ΍ͭͱີ݁߹ͳ΍ͭ͸෼͚Δʁ
    • ̎૚͘Β͍͸ωετͨ͠΄͏͕෼͚΍͍͢ʁ

    View Slide

  17. まとめ
    • Atomic Designͦͷ΋ͷ͸

    σβΠϯ͢ΔਓͷͨΊͷπʔϧ
    • ΤϯδχΞͷͨΊͷπʔϧͰ͸ͳ͍
    • ݱ৔ʹΑͬͯ͸ࢗ͞Βͳ͍͜ͱ΋͋Δ
    • ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ

    View Slide