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
830

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
34
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
440
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
kintone Style Book
Avatar for kintone kintone
5
4.9k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
470
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
910
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
0
270
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
120
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
570
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
150
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
12k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
PRO
0
200
数理的アプローチで挑むスマホ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
1
890
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.3k
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.4k

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k

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