Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインガイドラインを作るWebサービスを作っている話 / React Native Meet...

Avatar for sawa-zen sawa-zen
June 22, 2018
Design
1
440

デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8

Avatar for sawa-zen

sawa-zen

June 22, 2018
Tweet

More Decks by sawa-zen

See All by sawa-zen
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
96
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
34
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
Avatar for sawa-zen sawa_zen
5
1.7k
Atomic Design の課題とその現実的解決策/Atomic Design
Avatar for sawa-zen sawa_zen
2
830
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
560

Other Decks in Design

See All in Design
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
170
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
740
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
340
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
320
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for 株式会社スマートバンク smartbank
1
410
mount_company_profile
Avatar for mount inc. mount_inc
0
3.2k
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
100
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
740
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
130
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
930
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
860
kintone Style Book
Avatar for kintone kintone
5
6k

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k

Transcript

  1. σβΠϯΨΠυϥΠϯΛ࡞Δ WebαʔϏεΛ࡞͍ͬͯΔ࿩ Merpay, Inc ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/6/22) react-na5ve-meetup

  2. @sawa-zen ॴଐɿMerpay, Inc ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ޷͖

    @sawa-zen (2018/6/22) react-na5ve-meetup

  3. react-primi*vesͬͯ ஌ͬͯ·͔͢ʁ @sawa-zen (2018/6/22) react-na5ve-meetup

  4. react-primi*vesͱ͸ʁ • ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ࢖༻ Ͱ͖ΔΠϯλʔϑΣʔε • ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ • react-dom • react-na.ve

    • react-sketchapp @sawa-zen (2018/6/22) react-na5ve-meetup

  5. ػೳ • View: ϨΠΞ΢τͷͨΊͷίϯϙʔωϯτ • Text: ςΩετͷͨΊͷίϯϙʔωϯτ • Image: ը૾ͷͨΊͷίϯϙʔωϯτ

    • Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔω ϯτ • StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡ @sawa-zen (2018/6/22) react-na5ve-meetup

  6. ૝ఆ͠͏Δ࣮༻ྫ σβΠϯஈ֊ͰίʔυͰUIΛ࡞੒͠ ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ @sawa-zen (2018/6/22) react-na5ve-meetup

  7. @sawa-zen (2018/6/22) react-na5ve-meetup

  8. ΍ͬͯΈͨ!! @sawa-zen (2018/6/22) react-na5ve-meetup

  9. @sawa-zen (2018/6/22) react-na5ve-meetup

  10. @sawa-zen (2018/6/22) react-na5ve-meetup

  11. ײ૝ • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ @sawa-zen (2018/6/22) react-na5ve-meetup

  12. ײ૝ • ෳࡶͳViewͷ৔߹एׯͷݟͨ໨ͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷ͸ࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ => C޲͚ͷϓϩμΫτʹ͸࣮༻తͰ͸ͳ͍ @sawa-zen

    (2018/6/22) react-na5ve-meetup

  13. ଞʹ༻్͸ແ͍΋ͷ͔ ! @sawa-zen (2018/6/22) react-na5ve-meetup

  14. Ͳ͏͍͏༻్Ͱ͋Ε͹࢖͑ͦ͏͔ʁ • ෳࡶͳViewΛඞཁͱ͠ͳ͍ • ݎ࿚͞Λඞཁͱ͠ͳ͍ • σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍ @sawa-zen (2018/6/22) react-na5ve-meetup

  15. ۀ຿ޮ཰ԽπʔϧͰ͋Ε͹ ͍͚ΔͷͰ͸? ! @sawa-zen (2018/6/22) react-na5ve-meetup

  16. ͔͜͜Β͕ຊ୊ @sawa-zen (2018/6/22) react-na5ve-meetup

  17. ͜Μͳ෺Λ࡞Γ࢝Ί·ͨ͠ ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞੒Ͱ͖Δπʔϧ • SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ • ΨΠυϥΠϯʹؔΘΔ৘ใΛjsonͰॻ͖ग़ͤΔ • Χϥʔ • ςΩετελΠϧ

    • etc... @sawa-zen (2018/6/22) react-na5ve-meetup

  18. @sawa-zen (2018/6/22) react-na5ve-meetup

  19. DEMO @sawa-zen (2018/6/22) react-na5ve-meetup

  20. Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱͯ͠஋͕΋Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘΋ѻ͑Δ @sawa-zen

    (2018/6/22) react-na5ve-meetup

  21. Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱͯ͠஋͕΋Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘΋ѻ͑Δ =>

    react-primi-ves͕ແବʹͳΒͳ͍ʂ @sawa-zen (2018/6/22) react-na5ve-meetup

  22. ࠓޙͷల๬ • ֤ฤूػೳ • font-famiryύλʔϯ • marginύλʔϯ • border-radiusύλʔϯ •

    jsonͷexport/importػೳ @sawa-zen (2018/6/22) react-na5ve-meetup