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
420
デザインガイドラインを作る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
820
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
540
Other Decks in Design
See All in Design
AI時代に淘汰されないデザインのしごと
akinen
0
120
Echoes Boomerang
artcloudyu
PRO
0
230
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
390
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
590
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
880
オープンデータを利用して色々なものを作った話
hjmkth
1
110
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
180
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
Cards | Storyboards
giofortuna_story
0
270
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
今日から意識できるアクセシビリティ
fumiko
0
240
UXデザインはなぜ定着しないのか?
designstudiopartners
0
700
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for humans not robots
tammielis
253
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Six Lessons from altMBA
skipperchong
28
3.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Side Projects
sachag
455
42k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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