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
840

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
160
MCPを活用してVRChatと現実の境界を滑らかにする
Avatar for sawa-zen sawa_zen
0
46
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
450
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
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
240
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
270
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
140
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
190
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
180
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
100
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
380
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
170
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
180
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.6k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
180
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
76
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
4.1k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
220
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
43
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
84
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
110

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