Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introduce Atomic Design with small rework
kenshir0f
December 10, 2018
Design
3
210
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
11
6.4k
How Cookpad use Figma
kenshir0f
2
570
Easy Semantic HTML Structure for Komerco Team
kenshir0f
6
5.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
870
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
8.2k
Basic css note for Komerco Team
kenshir0f
6
6.8k
Design for Behavior and Impact
kenshir0f
9
4.5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.1k
s-dev-talks#2-komerco-team-building
kenshir0f
4
660
Other Decks in Design
See All in Design
Introduce Celebration Grid
nakahara
0
420
創造学群表現学類2021_ソーシャルチームプレゼン
zhikto
1
150
事業デザイナーが考えるデザイン×ビジネスのキャリアを歩むために
cyberagentdevelopers
PRO
0
340
dipp 點譜數位方案
91appguide
1
120
Michelle Ou - Belonging in Design.
uxaustralia
PRO
0
150
視覚障害者と探究するLSPの可能性|LEGO® SERIOUS PLAY® Coffee Chat Japan #09
keitatatakizawa
1
110
We meet again
seleliao
1
640
ユーザー体験を支える_freeeのデザインシステム活用.pdf
fkady
1
1.1k
Michelle Ou - Belonging in Design.
uxaustralia
PRO
1
170
ユーザーに向き合うために 普段から意識していること
koichikato
0
200
Interest + Curiosity Booklet
juliaso
0
140
Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur
1024jp
2
570
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
KATA
mclloyd
7
8.8k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Robots, Beer and Maslow
schacon
152
7.1k
Atom: Resistance is Futile
akmur
255
20k
How GitHub (no longer) Works
holman
297
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Facilitating Awesome Meetings
lara
29
4.1k
Fireside Chat
paigeccino
13
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
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!