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

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

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