React Sketch.appでデザインガイドラインを作ってみた

リポジトリのURLはこちらです
https://github.com/sawa-zen/style-guide

Transcript

1. React Sketch.appͰ
   σβΠϯΨΠυϥΠϯΛ
   ࡞ͬͯΈͨ
   גࣜձࣾϝϧϖΠ ϑϩϯτΤϯυΤϯδχΞ
   @sawa-zen
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

2. @sawa-zen
   ॴଐɿגࣜձࣾϝϧϖΠ
   ৬छɿϑϩϯτΤϯυΤϯδχ
   Ξ/ΠϯλϥΫγϣϯσβΠφʔ
   Three.js
   React
   SketchApp
   Blender
   YouTuberେ޷͖
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

3. React Sketch.appͬͯ஌ͬͯΔʁ
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

4. React Sketch.appͱ͸
   • ReactͰSketchσβΠϯΛѻ͑Δπʔϧ
   • airbnbࣾͷOSS
   • SketchϓϥάΠϯΛॻ͖ग़ͤΔ
   • ه๏͸΄΅ReactNa0veͱಉ͡
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

5. import React from 'react';
   import { View, Text, render } from 'react-sketchapp';
   export default function(context) {
   render(
   
   Sample Text
   ,
   context.document.currentPage()
   );
   }
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

6. React Sketch.app͸͍͍ࣄͩΒ͚!!
   • ίʔυͳͷͰόʔδϣϯ؅ཧͰ͖ͯ࠷ߴ
   • σβΠϯमਖ਼΋ίʔυϨϏϡʔͰ͖ͯ࠷ߴ
   • ΤϯδχΞͰ΋σβΠϯमਖ਼Ͱ͖ͯ࠷ߴ
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

7. React Sketch.app͸͍͍ࣄͩΒ͚!!
   • ίʔυͳͷͰόʔδϣϯ؅ཧͰ͖ͯ࠷ߴ
   • σβΠϯमਖ਼΋ίʔυϨϏϡʔͰ͖ͯ࠷ߴ
   • ΤϯδχΞͰ΋σβΠϯमਖ਼Ͱ͖ͯ࠷ߴ
   શ෦͜ΕͰॻ͚͹͍͍ͷʹ
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

8. ΄Μͱʹʁ
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

9. React Sketch.app͸ͦΜͳ؁͘ͳ͍!!
   • σβΠφʔ΋JSΛ֮͑Δඞཁ͕͋Δ
   • σβΠϯͱΫϥΠΞϯτͷೋ౓ख࣮ؒ૷
   • ௚ײతʹσβΠϯͰ͖ͳ͍
   @sawa-zen (2018/4/22) Roppongi.js
   

   View Slide

10. શͯReact͸͠ΜͲ͍...
    ! !
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

11. σβΠϯΨΠυϥΠϯ͚ͩͳΒ...ʁ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

12. @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

13. ReactͰॻ͍ͯΈ·ͨ͠
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

14. ReactͰΨΠυϥΠϯΛ
    ࡞ͬͯΈͯྑ͔ͬͨ͜ͱ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

15. ① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖Δ
    nodeϞδϡʔϧͱͯ͠ڞ༗͢Ε͹ελΠϧΛίʔυ
    ͯ͠ѻ͑Δ
    • color
    • font-size, font-weight
    • margin, padding
    • etc...
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

16. ② ϓϥάΠϯͱͯ͠ڞ༗Ͱ͖Δ
    ϓϥάΠϯΛ࣮ߦ͢Δ͚ͩͰҎԼ͕̎ͭηοτͰੜ
    ੒Ͱ͖ΔͨΊɺϓϩδΣΫτΛލ͍ͩσβΠϯͷ౷
    ҰԽΛਤΓ΍͍͢ɻ
    • ελΠϧΨΠυϥΠϯ
    • γϯϘϧ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

17. ③ ࡞Γ΍͍͢
    ܁Γฦ͠ViewΛฒ΂Δ࡞ۀ͕ଟ͍ͷͰίʔυͰදݱ
    ͢Δํ͕଎͍
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

18. ④ ແବͳγϯϘϧ͕࢒Βͳ͍
    ޮ཰Խͷҝʹ࡞੒͍ͯͨ͠γϯϘϧ͕ίʔυʹஔ׵
    Ͱ͖Δ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

19. ՝୊
    • ίϯϙʔωϯτͷࡉ͔ͳσβΠϯ͔Β͸Τϯδχ
    ΞͰ͸೉͍͠
    • σβΠφʔ͞Μͱີͳίϛϡχέʔγϣϯ͕ඞਢ
    • ݁ہJSΛσβΠφʔ͞Μ΋৮ΔՄೳੑ͕͋Δ
    • ͦ΋ͦ΋࡞ͬͯΔ༨༟͕ແ͍ࣄ͕ଟ͍
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

20. Ͱ΋खԠ͑͸͋ͬͨ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

21. ΋ͬͱϓϩμΫτͷUIΛ
    ྑ͍͖͍ͯͨ͘͠ʂ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

22. ࣮ۀ຿ʹಋೖ͢ΔͨΊʹ͸ʁ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

23. UIͷ৴པੑ޲্Λ୲͏
    ৽෦ॺͷര஀͔͠ͳ͍ʂ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

24. Site Reliability EngineeringʢSREʣ
    ↓
    UI Reliability Engineering
    ʢUREʣ
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

25. ฐࣾʹ৽෦ॺઃཱݕ౼
    ͓ئ͍͠·͢ʂ
    !
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

26. ϝϧϖΠͰ͸ #z-youtuber ʹ
    ೖΓ͍ͨํืूͯ͠·͢
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide

27. GithubϦϙδτϦ
    h"ps:/
    /github.com/sawa-zen/style-guide
    @sawa-zen (2018/4/22) Roppongi.js
    

    View Slide