Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduce Atomic Design with small rework

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
December 10, 2018
Design
3
190

Introduce Atomic Design with small rework

https://note.mu/fjkn/n/n9c8f8921b13c

2018年12月10日(月)のアトミックデザインを考える会でお話しした「手戻りが少ないアトミックデザイン」の登壇資料です。

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

December 10, 2018
Tweet

More Decks by kenshir0f

See All by kenshir0f
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
8
3.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
410
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
4.6k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
790
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
7.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
6.3k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.9k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
570

Other Decks in Design

See All in Design
3c75ad9ccb3cca4b81b9b887ba6101bb?s=48 ray110
1
710
1439b2421bf9af4d7353a76c5355b6d6?s=48 diegoa4863
1
470
E7c10900ca5d5d106d2231d47eafbac4?s=48 iquares
1
130
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k
1634ba73cac4c9210dd629243f6bbc35?s=48 chuyanku
0
520
A54edea61b670665ef50c725bdef7ed2?s=48 shannonsketches
1
260
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
230
Aa19e202c24c51a41415206e7742c098?s=48 maslow_akkun
0
7.8k
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
1
200
7d05a6e379403aa40b0e470b5567a3b1?s=48 itandi
1
200
E9bc93cfc82dc07a1b3eca5a2394dbb6?s=48 fmerian
PRO
0
190
5d2e1fa8c731ec227fda8adee714cc9d?s=48 ka3zu1ma10
0
520

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
207
38k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
0
320
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
980
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
87
5.3k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
235
950k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k

Transcript

  1. Cookpad Inc. 2018.12.10 AtomicDesignΛߟ͑Δձ ख໭Γ͕গͳ͍ΞτϛοΫσβΠϯͷಋೖ ౻Ҫݠ࢜࿕

  2. Cookpad Inc. All Rights Reserved. ౻Ҫݠ࢜࿕ kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦σβΠφʔ ࣗݾ঺հ

  3. Cookpad Inc. All Rights Reserved.

  4. Cookpad Inc. All Rights Reserved. ৽نࣄۀͰΞτϛοΫσβΠϯΛಋೖ͓ͨ͠࿩ ͜Ε͔Β࿩͢͜ͱ

  5. Cookpad Inc. All Rights Reserved. ։ൃॳظͷࠒ ϒϥϯσΟϯάɺମݧઃܭɺ6*ɺΨΠυϥΠϯ࡞੒ͳͲฒߦ͍ͯͨ͠ͷͰ͕࣌ؒ଍Γͳ͍ σβΠφʔ1 iOSΤϯδχΞ4 ΞϓϦ2

  6. Cookpad Inc. All Rights Reserved. ͜ͷͱ͖ײ͍ͯͨ͜͡ͱ σβΠϯσʔλΛΩϨΠʹ؅ཧͯ͠ޮ཰Λ্͍͛ͨʜ

  7. ΞτϛοΫσβΠϯ͞ΜɺͳΜͱ͔ͯ͘͠Εʜ

  8. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯʹظ଴͍ͯͨ͜͠ͱ 1. σβΠϯσʔλͷ؅ཧָ͕ʹͳΔ 2. ࢖͍ճ͢ίϯϙʔωϯτͷमਖ਼ɾద༻ָ͕ʹͳΔ

    3. ͦͷ݁ՌɺσβΠϯ͢Δεϐʔυ্͕͕Δ

  9. ಋೖͯ͠Έͨͱ͖ͷֶͼΛ͝঺հ͠·͢ɻ

  10. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷϙΠϯτ 1. ֮ޛΛ΋ͭ 2. λΠϛϯάͱྔ

    3. ᐆດ͞Λڐ༰͢Δ ಋೖલ ಋೖத ಋೖޙ

  11. Cookpad Inc. All Rights Reserved. 1. ֮ޛΛ΋ͭ 2. λΠϛϯάͱྔ 3.

    ᐆດ͞Λڐ༰͢Δ ΞτϛοΫσβΠϯಋೖͷϙΠϯτ ಋೖલ ಋೖத ಋೖޙ

  12. ୈ1࿩ΞτϛοΫσβΠϯΛಋೖ͢Δ֮ޛʁ ʙಋೖલʙ

  13. Cookpad Inc. All Rights Reserved. ಋೖ͢Δલͷ๻ Atomic DesignΠέͯΔʂ ͳʹΑΓ໊લΧοί͍͍ʂ ؅ཧ͠΍͍͢σβΠϯߏஙγεςϜʂ

    ࢖͍ճͤͯޮ཰తʂ

  14. Cookpad Inc. All Rights Reserved. ͱɺࢥ͍ͬͯͨ࣌ظ͕๻ʹ΋͋Γ·ͨ͠ʜ

  15. Cookpad Inc. All Rights Reserved. ࣮ࡍʹಋೖͯ͠Έͨ͋ͱ ΊͬͪΌ஍ຯʙʙʙʙ ͱ͸͍͑΍ͬͺޮ཰ੑ͸্͕ͬͨ ॳճͷߏஙʹ͕͔͔࣌ؒΔ ఆظతʹϝϯςφϯεඞཁɺ͚ͬ͜͏ਏ͍

  16. Cookpad Inc. All Rights Reserved. ͳʹ͕஍ຯͳͷʁ ੔ཧ੔಴͕ࢥͬͯͨΑΓ͔͔࣌ؒΔʜ

  17. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t

  18. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t σβΠϯ͍ͯ͠ͳ͍͠ਐ௙͸ࢭ·ͬͯ͠·͏

  19. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯ͢ΔͳΒʜ 1. ա౓ͳظ଴͸ͤͣʹ΍͍ͬͯ͜͏ʂ 3. ਐ௙͕ࢭ·Δ͜ͱΛ༧Ί఻͑Α͏ʂ

    2. ఆظతͳ੔ཧ੔಴͕଴͍ͬͯΔʂ ͱɺ౰࣌ͷࣗ෼ʹݴ͍͔ͨͬͨʜ

  20. ୈ2࿩ಋೖͷλΠϛϯάͱྔ͸৻ॏʹʂ ʙಋೖதʙ

  21. Cookpad Inc. All Rights Reserved. ཧ૝ͷίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ t

  22. Cookpad Inc. All Rights Reserved. ݱ࣮͸ͦΜͳʹ؁͘ͳ͔ͬͨʜ ࣦഊஊ

  23. Cookpad Inc. All Rights Reserved. ࣦഊ1ಋೖλΠϛϯά͕஗͔ͬͨ σβΠϯ ੔ཧ੔಴ σβΠϯ ौ͍ͬͨͤͰ͔ͳΓ͔͔࣌ؒͬͨ

    ʜ ։ൃελʔτ ΞτϛοΫσβΠϯ஌Δ ΞτϛοΫσβΠϯಋೖ ಋೖΛߟ͑Δ

  24. Cookpad Inc. All Rights Reserved. σβΠϯ ੔ཧ੔಴ ͜͜ͰऴΘΕ͹·ͩ·͠

  25. Cookpad Inc. All Rights Reserved. ࣦഊ2ίϯϙʔωϯτԽΛ΍Γ͗ͨ͢ʜ σβΠϯ ੔ཧ੔಴ ͦΜͳʹ࢖ΘΕ͍ͯͳ͍σβΠϯ΋ ෆඞཁʹίϯϙʔωϯτԽͯ͠͠·ͬͨ

  26. Cookpad Inc. All Rights Reserved. ౰࣌ͷࣗ෼ʹݴ͍͍ͨ ΄ͱΜͲͷσβΠϯ͸มߋ͔࡟আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ෉

  27. Cookpad Inc. All Rights Reserved. ಋೖ࣌ͷϙΠϯτ 1. ಋೖͷλΠϛϯά͸৻ॏʹʂ 2. ద౓ʹΞτϛοΫσβΠϯΛద༻͠Α͏ʂ

    ૣ͗ͯ͢΋μϝͩ͠ɺ஗͗͢Δͱޙ͕େม ؤுͬͯ࡞ͬͨίϯϙʔωϯτ͸͍͍ͩͨ࢖ΘΕͳ͍

  28. ୈ3࿩ᐆດ͞Λڐ༰͠Α͏ʂ ʙಋೖޙʙ

  29. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ

  30. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ࿩͠߹ܾͬͯΊͯ·͢ɻ

  31. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ ͞ΒʹɺϑΣʔζʹΑͬͯมߋ͍ͯ͠·͢ɻ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ࿩͠߹ܾͬͯΊͯ·͢ɻ

  32. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ

  33. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ σβΠφʔ

    جຊతͳϘλϯͳͷͰAtoms͔ͳʂ

  34. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ σβΠφʔ

    ΤϯδχΞ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ

  35. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ

    σβΠφʔͱΤϯδχΞͰࢹ఺͕ҧ͏ ·ͣ͸͜ͷࠩΛཧղ͢Δ σβΠφʔ ΤϯδχΞ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ

  36. Cookpad Inc. All Rights Reserved. ϑΣʔζʹΑͬͯঃʑʹมΘΔ͜ͱΛڐ༰͢Δ ૹ৴͢Δ 2. ImageUploadForm 3.

    SubmitButton 4. Button 1. UserProfileImageUploadForm ৽نࣄۀ͸εϐʔυ༏ઌͳͷͰޙ͔Βந৅Խ͍ͯ͘͠ (Organisms) (Molecules) (Atoms) (Atoms) ࢖ΘΕͳ͍ػೳʹͳΔՄೳੑ͕͋ΔͷͰແཧʹϨΠϠʔΛԼ͛ͳ͍

  37. Cookpad Inc. All Rights Reserved. ͜ͷߟ͑ํ͕େࣄ ΄ͱΜͲͷσβΠϯ͸มߋ͔࡟আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ෉

  38. ݫີ͞ʹͩ͜ΘΒͣɺ·ͣ͸લʹਐ΋͏ʂ

  39. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷ·ͱΊ 1. ֮ޛΛ΋ͱ͏ʂ 2. λΠϛϯάͱྔʹ஫ҙʂ

    3. ᐆດ͞Λڐ༰͠Α͏ʂ ಋೖલ ಋೖத ಋೖޙ

  40. Α͍ΞτϛοΫσβΠϯϥΠϑΛʂ Thank you!