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
デザインガイドラインを作るWebサービスを作っている話 / React Native Meet...
Search
sawa-zen
June 22, 2018
Design
1
400
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa-zen
June 22, 2018
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.7k
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
810
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
530
Other Decks in Design
See All in Design
今日から意識できるアクセシビリティ
fumiko
0
230
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.7k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
340
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.4k
問いの変遷
iflection
0
120
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
130
Goodpatch Tour💙 / We are hiring!
goodpatch
31
840k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
320
LLMによるRAG評価用合成テストデータの生成
licux
6
1k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
0
270
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
210
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Speed Design
sergeychernyshev
30
960
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
820
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
55
Into the Great Unknown - MozCon
thekraken
38
1.8k
Music & Morning Musume
bryan
47
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
640
Thoughts on Productivity
jonyablonski
69
4.7k
Six Lessons from altMBA
skipperchong
28
3.8k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
BBQ
matthewcrist
88
9.6k
Writing Fast Ruby
sferik
628
61k
Transcript
σβΠϯΨΠυϥΠϯΛ࡞Δ WebαʔϏεΛ࡞͍ͬͯΔ Merpay, Inc ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen ॴଐɿMerpay, Inc ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ͖
@sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͬͯ ͬͯ·͔͢ʁ @sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͱʁ • ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ༻ Ͱ͖ΔΠϯλʔϑΣʔε • ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ • react-dom • react-na.ve
• react-sketchapp @sawa-zen (2018/6/22) react-na5ve-meetup
ػೳ • View: ϨΠΞτͷͨΊͷίϯϙʔωϯτ • Text: ςΩετͷͨΊͷίϯϙʔωϯτ • Image: ը૾ͷͨΊͷίϯϙʔωϯτ
• Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔω ϯτ • StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡ @sawa-zen (2018/6/22) react-na5ve-meetup
ఆ͠͏Δ࣮༻ྫ σβΠϯஈ֊ͰίʔυͰUIΛ࡞͠ ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
ͬͯΈͨ!! @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
ײ • ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ @sawa-zen (2018/6/22) react-na5ve-meetup
ײ • ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ => C͚ͷϓϩμΫτʹ࣮༻తͰͳ͍ @sawa-zen
(2018/6/22) react-na5ve-meetup
ଞʹ༻్ແ͍ͷ͔ ! @sawa-zen (2018/6/22) react-na5ve-meetup
Ͳ͏͍͏༻్Ͱ͋Ε͑ͦ͏͔ʁ • ෳࡶͳViewΛඞཁͱ͠ͳ͍ • ݎ࿚͞Λඞཁͱ͠ͳ͍ • σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍ @sawa-zen (2018/6/22) react-na5ve-meetup
ۀޮԽπʔϧͰ͋Ε ͍͚ΔͷͰ? ! @sawa-zen (2018/6/22) react-na5ve-meetup
͔͜͜Β͕ຊ @sawa-zen (2018/6/22) react-na5ve-meetup
͜ΜͳΛ࡞Γ࢝Ί·ͨ͠ ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞Ͱ͖Δπʔϧ • SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ • ΨΠυϥΠϯʹؔΘΔใΛjsonͰॻ͖ग़ͤΔ • Χϥʔ • ςΩετελΠϧ
• etc... @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
DEMO @sawa-zen (2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱ͕ͯ͠Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘ѻ͑Δ @sawa-zen
(2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱ͕ͯ͠Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘ѻ͑Δ =>
react-primi-ves͕ແବʹͳΒͳ͍ʂ @sawa-zen (2018/6/22) react-na5ve-meetup
ࠓޙͷల • ֤ฤूػೳ • font-famiryύλʔϯ • marginύλʔϯ • border-radiusύλʔϯ •
jsonͷexport/importػೳ @sawa-zen (2018/6/22) react-na5ve-meetup