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
430
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa-zen
June 22, 2018
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
29
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
550
Other Decks in Design
See All in Design
harutaka Vision Deck
zenkigenforrecruit
0
190
AIで加速するアクセシビリティのこれから
magi1125
3
640
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
Memory Man v3 (WIP)
storybychad
PRO
0
2.4k
Installing and Running decksh/pdfdeck
ajstarks
1
830
Kid Cowboy 103
marilutwin
0
300
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
270
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
180
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
380
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
250
株式会社バクタム 会社説明資料
bactum
0
290
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
55
6.5k
Designing Experiences People Love
moore
142
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
462
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building an army of robots
kneath
306
45k
Building Adaptive Systems
keathley
43
2.7k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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