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
Introduce Atomic Design with small rework
Search
kenshir0f
December 10, 2018
Design
3
300
Introduce Atomic Design with small rework
https://note.mu/fjkn/n/n9c8f8921b13c
2018年12月10日(月)のアトミックデザインを考える会でお話しした「手戻りが少ないアトミックデザイン」の登壇資料です。
kenshir0f
December 10, 2018
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
Figma with Cookpad
kenshir0f
16
16k
How Cookpad use Figma
kenshir0f
3
880
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.8k
Basic css note for Komerco Team
kenshir0f
6
8.1k
Design for Behavior and Impact
kenshir0f
9
5.1k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.7k
s-dev-talks#2-komerco-team-building
kenshir0f
4
910
Other Decks in Design
See All in Design
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
250
DESIGNEAST 2025 A-3
_kotobuki_
0
100
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
200
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
150
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
440
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
400
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
880
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
Liquid GlassとApp Intents
touyou
0
430
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
kintone Style Book
kintone
1
490
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Applications with DynamoDB
mza
96
6.7k
Optimizing for Happiness
mojombo
379
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
KATA
mclloyd
PRO
32
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Designing Experiences People Love
moore
142
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
Cookpad Inc. 2018.12.10 AtomicDesignΛߟ͑Δձ खΓ͕গͳ͍ΞτϛοΫσβΠϯͷಋೖ ౻Ҫݠ࢜࿕
Cookpad Inc. All Rights Reserved. ౻Ҫݠ࢜࿕ kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦σβΠφʔ ࣗݾհ
Cookpad Inc. All Rights Reserved.
Cookpad Inc. All Rights Reserved. ৽نࣄۀͰΞτϛοΫσβΠϯΛಋೖ͓ͨ͠ ͜Ε͔Β͢͜ͱ
Cookpad Inc. All Rights Reserved. ։ൃॳظͷࠒ ϒϥϯσΟϯάɺମݧઃܭɺ6*ɺΨΠυϥΠϯ࡞ͳͲฒߦ͍ͯͨ͠ͷͰ͕࣌ؒΓͳ͍ σβΠφʔ1 iOSΤϯδχΞ4 ΞϓϦ2
Cookpad Inc. All Rights Reserved. ͜ͷͱ͖ײ͍ͯͨ͜͡ͱ σβΠϯσʔλΛΩϨΠʹཧͯ͠ޮΛ্͍͛ͨʜ
ΞτϛοΫσβΠϯ͞ΜɺͳΜͱ͔ͯ͘͠Εʜ
Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯʹظ͍ͯͨ͜͠ͱ 1. σβΠϯσʔλͷཧָ͕ʹͳΔ 2. ͍ճ͢ίϯϙʔωϯτͷमਖ਼ɾద༻ָ͕ʹͳΔ
3. ͦͷ݁ՌɺσβΠϯ͢Δεϐʔυ্͕͕Δ
ಋೖͯ͠Έͨͱ͖ͷֶͼΛ͝հ͠·͢ɻ
Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷϙΠϯτ 1. ֮ޛΛͭ 2. λΠϛϯάͱྔ
3. ᐆດ͞Λڐ༰͢Δ ಋೖલ ಋೖத ಋೖޙ
Cookpad Inc. All Rights Reserved. 1. ֮ޛΛͭ 2. λΠϛϯάͱྔ 3.
ᐆດ͞Λڐ༰͢Δ ΞτϛοΫσβΠϯಋೖͷϙΠϯτ ಋೖલ ಋೖத ಋೖޙ
ୈ1ΞτϛοΫσβΠϯΛಋೖ͢Δ֮ޛʁ ʙಋೖલʙ
Cookpad Inc. All Rights Reserved. ಋೖ͢Δલͷ Atomic DesignΠέͯΔʂ ͳʹΑΓ໊લΧοί͍͍ʂ ཧ͍͢͠σβΠϯߏஙγεςϜʂ
͍ճͤͯޮతʂ
Cookpad Inc. All Rights Reserved. ͱɺࢥ͍ͬͯͨ࣌ظ͕ʹ͋Γ·ͨ͠ʜ
Cookpad Inc. All Rights Reserved. ࣮ࡍʹಋೖͯ͠Έͨ͋ͱ ΊͬͪΌຯʙʙʙʙ ͱ͍͑ͬͺޮੑ্͕ͬͨ ॳճͷߏஙʹ͕͔͔࣌ؒΔ ఆظతʹϝϯςφϯεඞཁɺ͚ͬ͜͏ਏ͍
Cookpad Inc. All Rights Reserved. ͳʹ͕ຯͳͷʁ ཧ͕ࢥͬͯͨΑΓ͔͔࣌ؒΔʜ
Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ཧ
ཧ σβΠϯ σβΠϯͱཧΛ܁Γฦ͠ɺ͔ͭఆظతʹΔඞཁ͕͋Δ t
Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ཧ
ཧ σβΠϯ σβΠϯͱཧΛ܁Γฦ͠ɺ͔ͭఆظతʹΔඞཁ͕͋Δ t σβΠϯ͍ͯ͠ͳ͍͠ਐࢭ·ͬͯ͠·͏
Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯ͢ΔͳΒʜ 1. աͳظͤͣʹ͍ͬͯ͜͏ʂ 3. ਐ͕ࢭ·Δ͜ͱΛ༧Ί͑Α͏ʂ
2. ఆظతͳཧ͕͍ͬͯΔʂ ͱɺ࣌ͷࣗʹݴ͍͔ͨͬͨʜ
ୈ2ಋೖͷλΠϛϯάͱྔ৻ॏʹʂ ʙಋೖதʙ
Cookpad Inc. All Rights Reserved. ཧͷίϯϙʔωϯτཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ཧ
ཧ σβΠϯ t
Cookpad Inc. All Rights Reserved. ݱ࣮ͦΜͳʹ͘ͳ͔ͬͨʜ ࣦഊஊ
Cookpad Inc. All Rights Reserved. ࣦഊ1ಋೖλΠϛϯά͕͔ͬͨ σβΠϯ ཧ σβΠϯ ौ͍ͬͨͤͰ͔ͳΓ͔͔࣌ؒͬͨ
ʜ ։ൃελʔτ ΞτϛοΫσβΠϯΔ ΞτϛοΫσβΠϯಋೖ ಋೖΛߟ͑Δ
Cookpad Inc. All Rights Reserved. σβΠϯ ཧ ͜͜ͰऴΘΕ·ͩ·͠
Cookpad Inc. All Rights Reserved. ࣦഊ2ίϯϙʔωϯτԽΛΓ͗ͨ͢ʜ σβΠϯ ཧ ͦΜͳʹΘΕ͍ͯͳ͍σβΠϯ ෆඞཁʹίϯϙʔωϯτԽͯ͠͠·ͬͨ
Cookpad Inc. All Rights Reserved. ࣌ͷࣗʹݴ͍͍ͨ ΄ͱΜͲͷσβΠϯมߋ͔আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ
Cookpad Inc. All Rights Reserved. ಋೖ࣌ͷϙΠϯτ 1. ಋೖͷλΠϛϯά৻ॏʹʂ 2. దʹΞτϛοΫσβΠϯΛద༻͠Α͏ʂ
ૣ͗ͯ͢μϝͩ͠ɺ͗͢Δͱޙ͕େม ؤுͬͯ࡞ͬͨίϯϙʔωϯτ͍͍ͩͨΘΕͳ͍
ୈ3ᐆດ͞Λڐ༰͠Α͏ʂ ʙಋೖޙʙ
Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭ Q. ίϯϙʔωϯτͷཻͲ͏ͯ͠·͔͢ʁ
Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭ Q. ίϯϙʔωϯτͷཻͲ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ͠߹ܾͬͯΊͯ·͢ɻ
Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭ ͞ΒʹɺϑΣʔζʹΑͬͯมߋ͍ͯ͠·͢ɻ Q. ίϯϙʔωϯτͷཻͲ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ͠߹ܾͬͯΊͯ·͢ɻ
Cookpad Inc. All Rights Reserved. Ͱ͢ʂ ͜ͷϘλϯAtoms? Molecules? ૹ৴͢Δ
Cookpad Inc. All Rights Reserved. Ͱ͢ʂ ͜ͷϘλϯAtoms? Molecules? ૹ৴͢Δ σβΠφʔ
جຊతͳϘλϯͳͷͰAtoms͔ͳʂ
Cookpad Inc. All Rights Reserved. Ͱ͢ʂ ͜ͷϘλϯAtoms? Molecules? ૹ৴͢Δ σβΠφʔ
ΤϯδχΞ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ FormͰ͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
Cookpad Inc. All Rights Reserved. Ͱ͢ʂ ͜ͷϘλϯAtoms? Molecules? ૹ৴͢Δ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ
σβΠφʔͱΤϯδχΞͰࢹ͕ҧ͏ ·ͣ͜ͷࠩΛཧղ͢Δ σβΠφʔ ΤϯδχΞ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ FormͰ͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
Cookpad Inc. All Rights Reserved. ϑΣʔζʹΑͬͯঃʑʹมΘΔ͜ͱΛڐ༰͢Δ ૹ৴͢Δ 2. ImageUploadForm 3.
SubmitButton 4. Button 1. UserProfileImageUploadForm ৽نࣄۀεϐʔυ༏ઌͳͷͰޙ͔ΒநԽ͍ͯ͘͠ (Organisms) (Molecules) (Atoms) (Atoms) ΘΕͳ͍ػೳʹͳΔՄೳੑ͕͋ΔͷͰແཧʹϨΠϠʔΛԼ͛ͳ͍
Cookpad Inc. All Rights Reserved. ͜ͷߟ͑ํ͕େࣄ ΄ͱΜͲͷσβΠϯมߋ͔আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ
ݫີ͞ʹͩ͜ΘΒͣɺ·ͣલʹਐ͏ʂ
Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷ·ͱΊ 1. ֮ޛΛͱ͏ʂ 2. λΠϛϯάͱྔʹҙʂ
3. ᐆດ͞Λڐ༰͠Α͏ʂ ಋೖલ ಋೖத ಋೖޙ
Α͍ΞτϛοΫσβΠϯϥΠϑΛʂ Thank you!