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
480
1

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

Avatar for sawa-zen

sawa-zen

June 22, 2018

More Decks by sawa-zen

See All by sawa-zen
ブラウザだからこそできる超お手軽メタバースXRift
Avatar for sawa-zen sawa_zen
0
77
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
230
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
84
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
Avatar for sawa-zen sawa_zen
6
1.8k
Atomic Design の課題とその現実的解決策/Atomic Design
Avatar for sawa-zen sawa_zen
1
880
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
600

Other Decks in Design

See All in Design
(2026 AmA Keynote) Sociotechnical Architecture - Having your Agile and agility too.pdf
Avatar for xinyao xinyao
2
100
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
230
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
250
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
190
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
230
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
200
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
170
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.5k
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
880
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
270
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
1
140

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
230
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
430
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
66
57k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
390
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
370
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
430
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k

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