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 Meetup 8
Search
sawa-zen
June 22, 2018
Design
1
340
デザインガイドラインを作る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.5k
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
790
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.3k
Birthday Driven Development
sawa_zen
0
460
Other Decks in Design
See All in Design
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
130
Sci-Fi: Descenso
elrtovar
0
200
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
What Was UX Design All About?
ykazu
3
600
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
930
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
130
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
Speed Design
sergeychernyshev
9
270
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
Minuto de Aventura
olgastoryboard
0
110
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
260
アクセシビリティのはじめかた デザイナー編
tokimari
2
750
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Side Projects
sachag
451
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Being A Developer After 40
akosma
72
580k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Building an army of robots
kneath
301
42k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
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