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

Zeplinを使ったコンポーネント管理術

DaiTorii
November 24, 2019

 Zeplinを使ったコンポーネント管理術

2019年11月24日(日)にDesignship 2019 でLTした登壇資料です。Quipper でのデザインコンポーネント管理を、Abstract/zeplin/sketchを使ってどのようにやっているのかを簡単に説明しました。

DaiTorii

November 24, 2019
Tweet

More Decks by DaiTorii

Other Decks in Design

Transcript

  1. Zeplin Λ࢖ͬͨ
    ίϯϙʔωϯτ؅ཧज़
    24 November 2019 @ Designship 2019
    @daitorii
    Quipper Limited - VP of Design

    View Slide

  2. Quipper Limited
    VP of Design
    ௗډ େ
    @daitorii
    લ৬ࣄۀձࣾ΁σβΠφʔͱͯ͠ೖࣾޙɺ৽نࣄۀ੹೚ऀ
    ʹɻͦͷޙσβΠϯ૊৫ϚωʔδϟʔΛܦͯ೥݄
    2VJQQFS΁ೖࣾɻ೥݄ΑΓ 71PG%FTJHOͱͯ͠೔
    ຊΠϯυωγΞϑΟϦϐϯͷσβΠϯ૊৫Λ౷ׅɻ
    όϯυʢ"5"5"ʣͰ͸ΪλʔΛ୲౰ɻ

    View Slide

  3. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    2VJQQFS͸ %JTUSJCVUPSTPG8JTEPN ͱ͍͏Ϗδϣϯͷ΋ͱɺΦϯϥΠϯڭҭαʔϏεΛ௨ͯ͡
    #SJOHJOHUIF#FTU&EVDBUJPOUP&WFSZ$PSOFSPGUIF8PSME
    ੈքͷՌͯ·Ͱ࠷ߴͷֶͼΛಧ͚Α͏ɺͱ͍͏ϛογϣϯΛܝ͍͛ͯ·͢ɻ

    View Slide

  4. View Slide

  5. Japan Indonesia
    G4-9 G10-12 Adults G10-12 G10-12
    Philippines Mexico
    ύʔιφϧίʔν
    Online Video
    Online Video &
    Assessment
    Online Coaching
    G9
    ఏڙ͍ͯ͠ΔαʔϏε
    Services

    View Slide

  6. σβΠϯ૊৫

    View Slide

  7. ελσΟαϓϦ , খதߴେ
    ͷϫʔΫϑϩʔ
    Ϧαʔν
    ػೳઃܭ
    ཁ݅ఆٛ
    ߏ଄ઃܭ
    ը໘ઃܭ
    ಋઢઃܭ
    σβΠϯ
    ࡞ۀ
    ϨϏϡʔ
    मਖ਼
    ຊ൪σʔλ
    όʔδϣϯ؅ཧ
    ˞ ศ্ٓҰํ௨ߦͷ໼ҹͰ͕͢ɺ࣮ࡍ͸Կ౓΋͍ͬͨΓ͖ͨΓ͠·͢
    ෼ੳ
    اը

    View Slide

  8. ελσΟαϓϦ , খதߴେ
    ͷϫʔΫϑϩʔ
    όʔδϣϯ؅ཧ
    Ϧαʔν
    ػೳઃܭ
    ཁ݅ఆٛ
    ߏ଄ઃܭ
    ը໘ઃܭ
    ಋઢઃܭ
    σβΠϯ
    ࡞ۀ
    ϨϏϡʔ
    मਖ਼
    ຊ൪σʔλ
    ෼ੳ
    اը

    View Slide

  9. 出展: https://uxdaystokyo.com/articles/glossary/atomic-design/
    ίϯϙʔωϯτͰσβΠϯσʔλΛϥΠϒϥϦԽ

    View Slide

  10. ͜ͷύʔπ͸৽نʁ
    طଘͰ͔͢ʁ
    ͳʹ΋Θ͔Βͳ͍
    Ͳ͔͜ͷϖʔδͰ
    ࢖ͬͯ·͔͢ʁ



    ͋;Εग़ٙ͢໰࣭໰

    View Slide

  11. ;FQMJOͰղܾ͠·͠ΐ͏

    View Slide


  12. ίϯϙʔωϯτΛϥΠϒϥϦԽ͠؅ཧ

    View Slide


  13. ͞·͟·ͳϨΠΞ΢τύλʔϯ͝ͱʹ
    ίϯϙʔωϯτΛ࡞੒͠ఆٛ

    View Slide


  14. ίϯϙʔωϯτΛ૊Έ߹Θͤϖʔδ࡞੒

    View Slide


  15. ֤ϖʔδΛηΫγϣϯͰ؅ཧ

    View Slide


  16. Ұཡ͔ΒηΫγϣϯʹҠಈ΋Մೳ
    Mac AppͳΒӈΫϦοΫͰ
    ηΫγϣϯ΁ͷδϟϯϓ͕ग़དྷ·͢

    View Slide


  17. ίϯϙʔωϯτ΋֊૚Խͯ͠؅ཧ

    View Slide


  18. ίϯϙʔωϯτͷ࢖༻ϖʔδ͕Θ͔Δ
    ͜ͷίϯϙʔωϯτΛ
    ࢖༻͍ͯ͠Δϖʔδ

    View Slide

  19. ͜ͷύʔπ͸طଘͰ͋
    Γ·ͨ͠
    ͳʹ΋Θ͔Βͳ͍
    ͜ͷϖʔδͰ࢖ͬͯΔ
    ΜͩͶ



    ࢖༻ՕॴΛݟ͑ΔԽͯ͠ղܾ

    View Slide

  20. ͳʹ΋Θ͔Βͳ͍

    View Slide

  21. ৽نɾར༻ͷϧʔϧ͕ͳ͍
    ίϯϙʔωϯτͷ؅ཧ͸ग़དྷͨɻ͕ɺ
    ʢਖ਼͘͠͸ɺ͋Δ͕໌จԽ͞Ε͍ͯͳ͍ʣ

    View Slide

  22. ࠓޙ΍͍ͬͯ͘͜ͱ
    ࡞੒ɾར༻ϧʔϧ΋໌จԽ͠
    ࠶ݱੑͷ͋ΔσβΠϯ࡞੒ΛՄೳʹ

    View Slide

  23. View Slide

  24. Thank you for listening!
    @daitorii

    View Slide