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

by sawa-zen

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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