Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomic Design の課題とその現実的解決策/Atomic Design
Search
sawa-zen
August 25, 2021
Design
2
810
Atomic Design の課題とその現実的解決策/Atomic Design
Atomic Design について語るイベントで登壇した際の資料です
# イベント詳細
https://techplay.jp/event/827002
sawa-zen
August 25, 2021
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.6k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
380
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.3k
Birthday Driven Development
sawa_zen
0
510
Other Decks in Design
See All in Design
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
240
クライアントワークにおける UXリサーチの実践
kozotaira
0
340
Dive Deep into Communication
yomtsu
0
210
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
790
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
OLTA株式会社/デザイン紹介資料
taxy
0
110
Les petites aventures de CSS, saison 2025
goetter
3
4k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
230
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
380
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Cult of Friendly URLs
andyhume
78
6.2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Facilitating Awesome Meetings
lara
52
6.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Speed Design
sergeychernyshev
27
800
Transcript
Atomic Design ͷ՝ͱ ͦͷݱ࣮తղܾࡦ גࣜձࣾ Topotal CDO @sawa-zen @sawa-zen (2021/8/24)
Atomic Design 1
@sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲ • UIσβΠϯσβΠϯγεςϜ͕େ @sawa-zen
(2021/8/24) Atomic Design 2
@sawa-zen (2021/8/24) Atomic Design 3
Atomic Design ͬͨ͜ͱ͋Γ·͔͢ʁ @sawa-zen (2021/8/24) Atomic Design 4
͋Γ·͕͢... @sawa-zen (2021/8/24) Atomic Design 5
ఘΊ·ͨ͠ @sawa-zen (2021/8/24) Atomic Design 6
Α͘ݟΔ File Structure src/ ├─ components/ │ ├─ atoms/ ŋŋŋ
࠷খ୯ҐUI │ ├─ molecules/ ŋŋŋ 2ͭҎ্ͷAtomΛ࣋ͭUI │ ├─ organisms/ ŋŋŋ ͦΕ୯ମͰίϯςϯπͱͯ͠ΓཱͭUI │ ├─ layouts/ ŋŋŋ ϖʔδͷܗ │ ├─ pages/ ŋŋŋ ࣮ࡍʹσʔλ͕ྲྀ͠ࠐ·Εͨͷ @sawa-zen (2021/8/24) Atomic Design 7
͜Ε͕͏·͍͔͘ͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 8
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ1: Atom ͱ Molecule ʹ໎͏ • ʮAtom ͦΕҎ্ղͰ͖ͳ͍࠷খཁૉʯ͕ෆ໌ྎ͗͢Δ •
ʮղͰ͖ͳ͍ʯͱͲͷঢ়ଶΛࢦ͢ͷ͔ॻ͔Ε͍ͯͳ͍ • Atom ͱࢥΘΕͨίϯϙʔωϯτ͕ଞͷ Atom ʹґଘ͕ͪ͠ • ྫ: ΞΠίϯɺςΩετΛؚΉϘλϯ Molecule ʁ @sawa-zen (2021/8/24) Atomic Design 9
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ ݪҼ2: Organism ͕ංେԽͯ͠͠·͏ • ίϯςΩετΛؚΉ͕ Organism ʹूத • 1֊͚ͩͰՙ͕ॏ͗͢Δ
@sawa-zen (2021/8/24) Atomic Design 10
͏·͍͔͘ͳͯ͘વ @sawa-zen (2021/8/24) Atomic Design 11
"5ͭͷͷ͏ͪͲͷUI ίϯϙʔωϯτΛͲͷ ʹྨ͢ΕΑ͍ ͔ɺ۩ମతͳج४ࣗ ͨͪͰܾΊΔඞཁ͕ ͋Γ·͢ɻ" @sawa-zen (2021/8/24) Atomic Design
12
ϧʔϧΛܾΊΒΕΔ͔͕伴 @sawa-zen (2021/8/24) Atomic Design 13
ϧʔϧܾΊਏ͍ • ίϛϡχέʔγϣϯίετ͕͔͔Γ͗͢Δ • νʔϜશһ͕ೲಘ͢Δʹ͠߹͍ • ϧʔϧ͕େʹͳΓͦ͏ • ϧʔϧͰໃ६͕ੜ·Εͦ͏ @sawa-zen
(2021/8/24) Atomic Design 14
ࣗ͜͜Ͱམ ! @sawa-zen (2021/8/24) Atomic Design 15
ͦͦ Atomic Design ͷ ྑͬͯ͞ͳΜ͚ͩͬʁ @sawa-zen (2021/8/24) Atomic Design 16
Atomic Design ͷྑ͞ • ίϯϙʔωϯτͷͷൣғʹ͍ͭͯߟ͑Δ͖͔͚ͬΛ࡞ΕΔ • UIͱͯ͠ͷҰ؏ੑΛอͯΔ • ΞδϦςΟͷߴ͍ίϯϙʔωϯτΛ࡞ΕΔ @sawa-zen
(2021/8/24) Atomic Design 17
5֊Ͱ͋Δඞཁͳ͍ ! @sawa-zen (2021/8/24) Atomic Design 18
ͰͲ͏͢Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 19
ࡦͱͯ͠ͷ File Structure ͷఏҊ ҎԼΛ݅ʹಠࣗͷ File Structure Λߟ͑ͯΈͨ 1. ίϯϙʔωϯτͷ֊ʹ੍ݶΛͨͤͳ͍
2. ྨʹ·ͳ͍ @sawa-zen (2021/8/24) Atomic Design 20
ࡦͱͯ͠ͷ File Structure ͷఏҊ 1. PCFS (Per-component File Structure) 2.
શମͷߏ @sawa-zen (2021/8/24) Atomic Design 21
PCFS (Per-component File Structure) • ίϯϙʔωϯτ୯Ґͷ File Structure ͷ͜ͱ •
ίϯϙʔωϯτඞͣ͜ͷߏΛकΔ @sawa-zen (2021/8/24) Atomic Design 22
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
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
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
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
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... @sawa-zen (2021/8/24) Atomic Design 27
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ① ڞ௨ίϯϙʔωϯτ܈ • core/ ίϯςΩετΛ࣋ͨͳ͍ • Atom, Molecule Ϩϕϧ • ͜ͷ֊ಉ࢜ͷґଘOK • core/ Ҏ֎ίϯςΩετΛ࣋ͭ • Organism Ϩϕϧ @sawa-zen (2021/8/24) Atomic Design 28
શମͷߏ src/ ├─ components/ ᶃ │ ├─ core/ │ │
├─ CoreComponentA │ │ ├─ ... │ ├─ CommonComponentA │ ├─ CommonComponentB │ ├─ ... ├─ screens/ ᶄ │ ├─ HogeScreen/ │ ├─ HugaScreen/ │ ├─ ... ② ը໘ίϯϙʔωϯτ܈ • Atomic Design ͷ Pages @sawa-zen (2021/8/24) Atomic Design 29
Atomic Design ͱൺͯԿ͕خ͍͔͠ • ڧ੍ྗ͕ڧ͍ͭᐆດͳϧʔϧ͕ແ͍ • ྨͷͨΊͷڥք͕ͨͬͨ̎ͭ 1. ෳՕॴͰΘΕ͍ͯΔ͔ʁ 2.
ίϯςΩετΛؚΜͰ͍Δ͔ʁ @sawa-zen (2021/8/24) Atomic Design 30
Atomic Design ѱͳͷ͔ʁ • ͦΜͳ͜ͱͳ͍ • ͬ͘͟Γͱͨ͠ίϯϙʔωϯτͷઢҾͯ͘͠Εͨ • ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ •
Atom Ϩϕϧͷʓʓ • Molecule Ϩϕϧͷʓʓ • etc... • File Structure ͱ૬ੑ͕ѱ͔͚ͬͨͩ @sawa-zen (2021/8/24) Atomic Design 31
·ͱΊ • Atomic Design ͋͘·ͰࢦͰ͔͠ͳ͍ • ۜͷؙͰͳ͍ • ࣮ʹద͍ͯ͠Δ͔Αۛ͘ຯͨ͠΄͏͕ྑ͍ •
Atomic Design ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ • ఏҊͨ͠ File Structure Λࢀߟʹ͍͚ͯͨͩ͠Εخ͍͠Ͱ͢ @sawa-zen (2021/8/24) Atomic Design 32