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
61
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
220
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
80
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 NishaMe nishame
0
600
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
470
The Art of Caring
Avatar for Klemens klemens
0
360
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
2
480
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
130
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.3k
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
330
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
Avatar for Yu Morita securecat
1
410
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
1.5k
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
8
19k
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
330

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
640
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
370
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
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
220
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
300

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