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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for sawa-zen sawa-zen
June 22, 2018
Design
1
460

デザインガイドラインを作る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
180
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
50
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
840
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
570

Other Decks in Design

See All in Design
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
320
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
400
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
390
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
430
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4.5k
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
940
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
310
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.2k
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
100
Emmy's Artwork
Avatar for McKenna mcksmith
0
210

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
910
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
250
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
450
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
120
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
740
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
74
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
110
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
270

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