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
15
12k
How Cookpad use Figma
kenshir0f
3
810
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.3k
Basic css note for Komerco Team
kenshir0f
6
7.7k
Design for Behavior and Impact
kenshir0f
9
4.9k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.5k
s-dev-talks#2-komerco-team-building
kenshir0f
4
840
Other Decks in Design
See All in Design
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
160
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
220
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
8
6.5k
ホワイト化するこの世界の片隅に
hisayosky
0
190
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
Emil Storyboards (2024)
abbsant
0
130
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
160
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Typedesign – Prime Four
hannesfritz
37
2.2k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Building Adaptive Systems
keathley
34
2k
Debugging Ruby Performance
tmm1
71
11k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Designing for Performance
lara
604
67k
Building an army of robots
kneath
301
42k
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!