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
830
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
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
34
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.7k
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
430
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
550
Other Decks in Design
See All in Design
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
660
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.2k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
850
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
460
株式会社バクタム 会社説明資料
bactum
0
360
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Liquid GlassとApp Intents
touyou
0
370
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
Code Reviewing Like a Champion
maltzj
525
40k
Scaling GitHub
holman
463
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
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