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
260
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
15k
How Cookpad use Figma
kenshir0f
3
840
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.6k
Basic css note for Komerco Team
kenshir0f
6
7.9k
Design for Behavior and Impact
kenshir0f
9
5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
880
Other Decks in Design
See All in Design
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
250131_product meetup
motokoishida
0
100
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
240
横断組織デザイナーの働き方
mixi_design
PRO
0
330
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.4k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
OLTA株式会社/デザイン紹介資料
taxy
0
110
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
クライアントワークにおける UXリサーチの実践
kozotaira
0
310
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
KATA
mclloyd
29
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Scaling GitHub
holman
459
140k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Docker and Python
trallard
44
3.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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!