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
470
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
59
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
210
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
72
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
860
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
590

Other Decks in Design

See All in Design
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.2k
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
110
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1.2k
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
340
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
420
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
150
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.4k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for WebNAUT by Beeworks webnaut
1
110
Signull 団体説明資料
Avatar for Signull signull
0
630
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.3k
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
260

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
120
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
130
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
190
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
640
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
190

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