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
250
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
14k
How Cookpad use Figma
kenshir0f
3
830
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
5.9k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.5k
Basic css note for Komerco Team
kenshir0f
6
7.8k
Design for Behavior and Impact
kenshir0f
9
4.9k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
870
Other Decks in Design
See All in Design
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
200
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
390
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
110
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
790
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
380
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
Credence
lratmansunu
0
380
ZOZO CDO Office Design
zozodevelopers
PRO
1
350
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
210
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
How GitHub (no longer) Works
holman
311
140k
Writing Fast Ruby
sferik
626
61k
A Philosophy of Restraint
colly
203
16k
Music & Morning Musume
bryan
46
6.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
186
10k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
GitHub's CSS Performance
jonrohan
1030
460k
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!