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
860
1

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

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

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

Avatar for sawa-zen

sawa-zen

August 25, 2021

More Decks by sawa-zen

See All by sawa-zen
ブラウザだからこそできる超お手軽メタバースXRift
Avatar for sawa-zen sawa_zen
0
60
デザイナ目線で考えるAIを用いた新しいインシデントレスポンスの形
Avatar for sawa-zen sawa_zen
1
210
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
73
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
Avatar for sawa-zen sawa_zen
6
1.8k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
Avatar for sawa-zen sawa_zen
1
470
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
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
830
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
450
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
190
Tendências de UX Research 2026
Avatar for Viviane Delvequio videlvequio
0
120
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
350
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.3k
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
0
120
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.1k
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
560
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
290
hicard_credential_202601
Avatar for hicard hicard
0
240
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
170

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
400
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
560
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
380
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.5M
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
320
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
210
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k

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