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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for sawa-zen sawa-zen
August 25, 2021
Design
2
850

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
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
190
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
50
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
Avatar for sawa-zen sawa_zen
6
1.7k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
Avatar for sawa-zen sawa_zen
1
460
React Sketch.appでデザインガイドラインを作ってみた
Avatar for sawa-zen sawa_zen
7
2.4k
Birthday Driven Development
Avatar for sawa-zen sawa_zen
0
580

Other Decks in Design

See All in Design
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
650
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
740
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.3k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
720
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
230
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
740
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
230
kintone_aroma
Avatar for kintone kintone
0
1.7k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
290
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
120

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
74
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
300
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
130
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.9k

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