Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Sketch.appでデザインガイドラインを作ってみた
Search
sawa-zen
April 24, 2018
Programming
7
2.4k
React Sketch.appでデザインガイドラインを作ってみた
リポジトリのURLはこちらです
https://github.com/sawa-zen/style-guide
sawa-zen
April 24, 2018
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
33
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.7k
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
830
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
430
Birthday Driven Development
sawa_zen
0
550
Other Decks in Programming
See All in Programming
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
私の後悔をAWS DMSで解決した話
hiramax
4
200
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Laravel Boost 超入門
fire_arlo
2
210
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
370
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
720
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
500
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
460
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
為你自己學 Python - 冷知識篇
eddie
1
350
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
19
11k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Balancing Empowerment & Direction
lara
3
610
The Cult of Friendly URLs
andyhume
79
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Language of Interfaces
destraynor
161
25k
How GitHub (no longer) Works
holman
315
140k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
React Sketch.appͰ σβΠϯΨΠυϥΠϯΛ ࡞ͬͯΈͨ גࣜձࣾϝϧϖΠ ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/4/22) Roppongi.js
@sawa-zen ॴଐɿגࣜձࣾϝϧϖΠ ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ͖ @sawa-zen
(2018/4/22) Roppongi.js
React Sketch.appͬͯͬͯΔʁ @sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͱ • ReactͰSketchσβΠϯΛѻ͑Δπʔϧ • airbnbࣾͷOSS • SketchϓϥάΠϯΛॻ͖ग़ͤΔ • ه๏΄΅ReactNa0veͱಉ͡
@sawa-zen (2018/4/22) Roppongi.js
import React from 'react'; import { View, Text, render }
from 'react-sketchapp'; export default function(context) { render( <View> <Text>Sample Text</Text> </View>, context.document.currentPage() ); } @sawa-zen (2018/4/22) Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴ @sawa-zen (2018/4/22)
Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴ શ෦͜ΕͰॻ͚͍͍ͷʹ @sawa-zen
(2018/4/22) Roppongi.js
΄Μͱʹʁ @sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͦΜͳ͘ͳ͍!! • σβΠφʔJSΛ֮͑Δඞཁ͕͋Δ • σβΠϯͱΫϥΠΞϯτͷೋख࣮ؒ • ײతʹσβΠϯͰ͖ͳ͍ @sawa-zen (2018/4/22)
Roppongi.js
શͯReact͠ΜͲ͍... ! ! @sawa-zen (2018/4/22) Roppongi.js
σβΠϯΨΠυϥΠϯ͚ͩͳΒ...ʁ @sawa-zen (2018/4/22) Roppongi.js
@sawa-zen (2018/4/22) Roppongi.js
ReactͰॻ͍ͯΈ·ͨ͠ @sawa-zen (2018/4/22) Roppongi.js
ReactͰΨΠυϥΠϯΛ ࡞ͬͯΈͯྑ͔ͬͨ͜ͱ @sawa-zen (2018/4/22) Roppongi.js
① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖Δ nodeϞδϡʔϧͱͯ͠ڞ༗͢ΕελΠϧΛίʔυ ͯ͠ѻ͑Δ • color • font-size, font-weight •
margin, padding • etc... @sawa-zen (2018/4/22) Roppongi.js
② ϓϥάΠϯͱͯ͠ڞ༗Ͱ͖Δ ϓϥάΠϯΛ࣮ߦ͢Δ͚ͩͰҎԼ͕̎ͭηοτͰੜ Ͱ͖ΔͨΊɺϓϩδΣΫτΛލ͍ͩσβΠϯͷ౷ ҰԽΛਤΓ͍͢ɻ • ελΠϧΨΠυϥΠϯ • γϯϘϧ @sawa-zen
(2018/4/22) Roppongi.js
③ ࡞Γ͍͢ ܁Γฦ͠ViewΛฒΔ࡞ۀ͕ଟ͍ͷͰίʔυͰදݱ ͢Δํ͕͍ @sawa-zen (2018/4/22) Roppongi.js
④ ແବͳγϯϘϧ͕Βͳ͍ ޮԽͷҝʹ࡞͍ͯͨ͠γϯϘϧ͕ίʔυʹஔ Ͱ͖Δ @sawa-zen (2018/4/22) Roppongi.js
՝ • ίϯϙʔωϯτͷࡉ͔ͳσβΠϯ͔ΒΤϯδχ ΞͰ͍͠ • σβΠφʔ͞Μͱີͳίϛϡχέʔγϣϯ͕ඞਢ • ݁ہJSΛσβΠφʔ͞Μ৮ΔՄೳੑ͕͋Δ • ͦͦ࡞ͬͯΔ༨༟͕ແ͍ࣄ͕ଟ͍
@sawa-zen (2018/4/22) Roppongi.js
ͰखԠ͑͋ͬͨ @sawa-zen (2018/4/22) Roppongi.js
ͬͱϓϩμΫτͷUIΛ ྑ͍͖͍ͯͨ͘͠ʂ @sawa-zen (2018/4/22) Roppongi.js
࣮ۀʹಋೖ͢ΔͨΊʹʁ @sawa-zen (2018/4/22) Roppongi.js
UIͷ৴པੑ্Λ୲͏ ৽෦ॺͷര͔͠ͳ͍ʂ @sawa-zen (2018/4/22) Roppongi.js
Site Reliability EngineeringʢSREʣ ↓ UI Reliability Engineering ʢUREʣ @sawa-zen (2018/4/22)
Roppongi.js
ฐࣾʹ৽෦ॺઃཱݕ౼ ͓ئ͍͠·͢ʂ ! @sawa-zen (2018/4/22) Roppongi.js
ϝϧϖΠͰ #z-youtuber ʹ ೖΓ͍ͨํืूͯ͠·͢ @sawa-zen (2018/4/22) Roppongi.js
GithubϦϙδτϦ h"ps:/ /github.com/sawa-zen/style-guide @sawa-zen (2018/4/22) Roppongi.js