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

Atomic Design の課題とその現実的解決策/Atomic Design

Avatar for sawa-zen sawa-zen
August 25, 2021
Design
2
820

Atomic Design の課題とその現実的解決策/Atomic Design

Atomic Design について語るイベントで登壇した際の資料です

# イベント詳細
https://techplay.jp/event/827002

Avatar for sawa-zen

sawa-zen

August 25, 2021
Tweet

More Decks by sawa-zen

See All by sawa-zen
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
27
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
Avatar for sawa-zen sawa_zen
5
1.7k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
Avatar for sawa-zen sawa_zen
1
420
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
550

Other Decks in Design

See All in Design
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
1k
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
710
sachi_y_portfolio
Avatar for Sachi sachi337
0
460
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1.2k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
630
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
10k
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
1
170
AI動画生成ガチャ紹介
Avatar for Takatomo Torigoe piyo7
1
180
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
810
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
2
2.8k
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
200
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.3k

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.5k
Done Done
Avatar for chrislema chrislema
185
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
32
8.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

Transcript

  1. Atomic Design ͷ՝୊ͱ ͦͷݱ࣮తղܾࡦ גࣜձࣾ Topotal CDO @sawa-zen @sawa-zen (2021/8/24)

    Atomic Design 1

  2. @sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰ • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷ ෺ @sawa-zen

    (2021/8/24) Atomic Design 2

  3. @sawa-zen (2021/8/24) Atomic Design 3

  4. Atomic Design ΍ͬͨ͜ͱ͋Γ·͔͢ʁ @sawa-zen (2021/8/24) Atomic Design 4

  5. ๻͸͋Γ·͕͢... @sawa-zen (2021/8/24) Atomic Design 5

  6. ఘΊ·ͨ͠ @sawa-zen (2021/8/24) Atomic Design 6

  7. Α͘ݟΔ File Structure src/ ├─ components/ │ ├─ atoms/ ŋŋŋ

    ࠷খ୯ҐUI │ ├─ molecules/ ŋŋŋ 2ͭҎ্ͷAtomΛ࣋ͭUI │ ├─ organisms/ ŋŋŋ ͦΕ୯ମͰίϯςϯπͱͯ͠੒ΓཱͭUI │ ├─ layouts/ ŋŋŋ ϖʔδͷ਽ܗ │ ├─ pages/ ŋŋŋ ࣮ࡍʹσʔλ͕ྲྀ͠ࠐ·Εͨ΋ͷ @sawa-zen (2021/8/24) Atomic Design 7

  8. ͜Ε͕͏·͍͔͘ͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 8

  9. ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ1: Atom ͱ Molecule ʹ໎͏ • ʮAtom ͸ͦΕҎ্෼ղͰ͖ͳ͍࠷খཁૉʯ͕ෆ໌ྎ͗͢Δ •

    ʮ෼ղͰ͖ͳ͍ʯͱ͸Ͳͷঢ়ଶΛࢦ͢ͷ͔ॻ͔Ε͍ͯͳ͍ • Atom ͱࢥΘΕͨίϯϙʔωϯτ͕ଞͷ Atom ʹґଘ͕ͪ͠ • ྫ: ΞΠίϯɺςΩετΛؚΉϘλϯ͸ Molecule ʁ @sawa-zen (2021/8/24) Atomic Design 9

  10. ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ2: Organism ͕ංେԽͯ͠͠·͏ • ίϯςΩετΛؚΉ੹຿͕ Organism ʹूத • 1֊૚͚ͩͰ͸ՙ͕ॏ͗͢Δ

    @sawa-zen (2021/8/24) Atomic Design 10

  11. ͏·͍͔͘ͳͯ͘౰વ @sawa-zen (2021/8/24) Atomic Design 11

  12. "5ͭͷ૚ͷ͏ͪͲͷUI ίϯϙʔωϯτΛͲͷ ૚ʹ෼ྨ͢Ε͹Α͍ ͔ɺ۩ମతͳج४͸ࣗ ෼ͨͪͰܾΊΔඞཁ͕ ͋Γ·͢ɻ" @sawa-zen (2021/8/24) Atomic Design

    12

  13. ϧʔϧΛܾΊΒΕΔ͔͕伴 @sawa-zen (2021/8/24) Atomic Design 13

  14. ϧʔϧܾΊ΋ਏ͍ • ίϛϡχέʔγϣϯίετ͕͔͔Γ͗͢Δ • νʔϜશһ͕ೲಘ͢Δʹ͸౎౓࿩͠߹͍ • ϧʔϧ͕๲େʹͳΓͦ͏ • ϧʔϧ಺Ͱໃ६͕ੜ·Εͦ͏ @sawa-zen

    (2021/8/24) Atomic Design 14

  15. ࣗ෼͸͜͜Ͱ୤མ ! @sawa-zen (2021/8/24) Atomic Design 15

  16. ͦ΋ͦ΋ Atomic Design ͷ ྑͬͯ͞ͳΜ͚ͩͬʁ @sawa-zen (2021/8/24) Atomic Design 16

  17. Atomic Design ͷྑ͞ • ίϯϙʔωϯτͷ੹຿ͷൣғʹ͍ͭͯߟ͑Δ͖͔͚ͬΛ࡞ΕΔ • UIͱͯ͠ͷҰ؏ੑΛอͯΔ • ΞδϦςΟͷߴ͍ίϯϙʔωϯτΛ࡞ΕΔ @sawa-zen

    (2021/8/24) Atomic Design 17

  18. 5֊૚Ͱ͋Δඞཁ͸ͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 18

  19. Ͱ͸Ͳ͏͢Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 19

  20. ࡦͱͯ͠ͷ File Structure ͷఏҊ ҎԼΛ৚݅ʹಠࣗͷ File Structure Λߟ͑ͯΈͨ 1. ίϯϙʔωϯτͷ֊૚ʹ੍ݶΛ΋ͨͤͳ͍

    2. ෼ྨʹ೰·ͳ͍ @sawa-zen (2021/8/24) Atomic Design 20

  21. ࡦͱͯ͠ͷ File Structure ͷఏҊ 1. PCFS (Per-component File Structure) 2.

    શମͷߏ੒ @sawa-zen (2021/8/24) Atomic Design 21

  22. PCFS (Per-component File Structure) • ίϯϙʔωϯτ୯Ґͷ File Structure ͷ͜ͱ •

    ίϯϙʔωϯτ͸ඞͣ͜ͷߏ੒ΛकΔ @sawa-zen (2021/8/24) Atomic Design 22

  23. PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts

    ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦΁ export ͞ΕΔ root 2. ੾Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 23

  24. PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts

    ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦΁ export ͞ΕΔ root 2. ੾Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 24

  25. PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts

    ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦΁ export ͞ΕΔ root 2. ੾Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 25

  26. PCFS (Per-component File Structure) Button/ ├─ index.tsx ᶃ ├─ styles.ts

    ᶄ ├─ components/ ᶅ │ ├─ SubComponentA │ ├─ ... 1. ֎෦΁ export ͞ΕΔ root 2. ੾Γग़͞ΕͨελΠϧ 3. ࢠཁૉͷίϯϙʔωϯτ܈ • PCFS ͷ܁Γฦ͠ @sawa-zen (2021/8/24) Atomic Design 26

  27. શମͷߏ੒ src/ ├─ components/ ᶃ │ ├─ core/ │ │

    ├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... @sawa-zen (2021/8/24) Atomic Design 27

  28. શମͷߏ੒ src/ ├─ components/ ᶃ │ ├─ core/ │ │

    ├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ① ڞ௨ίϯϙʔωϯτ܈ • core/ ͸ίϯςΩετΛ࣋ͨͳ͍ • Atom, Molecule Ϩϕϧ • ͜ͷ֊૚ಉ࢜ͷґଘ͸OK • core/ Ҏ֎͸ίϯςΩετΛ࣋ͭ • Organism Ϩϕϧ @sawa-zen (2021/8/24) Atomic Design 28

  29. શମͷߏ੒ src/ ├─ components/ ᶃ │ ├─ core/ │ │

    ├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ② ը໘ίϯϙʔωϯτ܈ • Atomic Design ͷ Pages @sawa-zen (2021/8/24) Atomic Design 29

  30. Atomic Design ͱൺ΂ͯԿ͕خ͍͔͠ • ڧ੍ྗ͕ڧ͍׌ͭᐆດͳϧʔϧ͕ແ͍ • ෼ྨͷͨΊͷڥք͕ͨͬͨ̎ͭ 1. ෳ਺ՕॴͰ࢖ΘΕ͍ͯΔ͔ʁ 2.

    ίϯςΩετΛؚΜͰ͍Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 30

  31. Atomic Design ͸ѱͳͷ͔ʁ • ͦΜͳ͜ͱ͸ͳ͍ • ͬ͘͟Γͱͨ͠ίϯϙʔωϯτͷઢҾ͸ͯ͘͠Εͨ • ڞ௨ݴޠͱͯ͠͸࢖͍ଓ͚ΒΕΔ •

    Atom Ϩϕϧͷʓʓ • Molecule Ϩϕϧͷʓʓ • etc... • File Structure ͱ͸૬ੑ͕ѱ͔͚ͬͨͩ @sawa-zen (2021/8/24) Atomic Design 31

  32. ·ͱΊ • Atomic Design ͸͋͘·Ͱࢦ਑Ͱ͔͠ͳ͍ • ۜͷ஄ؙͰ͸ͳ͍ • ࣮૷ʹద͍ͯ͠Δ͔͸Αۛ͘ຯͨ͠΄͏͕ྑ͍ •

    Atomic Design ͸ڞ௨ݴޠͱͯ͠͸࢖͍ଓ͚ΒΕΔ • ఏҊͨ͠ File Structure Λࢀߟʹ͍͚ͯͨͩ͠Ε͹خ͍͠Ͱ͢ @sawa-zen (2021/8/24) Atomic Design 32