Introduce Atomic Design with small rework

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

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
2
280
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
3.6k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
660
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
6.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
5k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.2k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
520
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
10
6.1k

Other Decks in Design

See All in Design
669da7d026c150d287276fe75ab536cb?s=48 kuroko
2
3.6k
441f9c0b4475aa59ce0b584444c98ea8?s=48 shinopara
0
160
8ada576a21f7c559aa754746308d5093?s=48 skinnybrian
2
250
D14a5a0ac27e24a0b2865c9c33dede87?s=48 uxinlux
1
1.6k
Db4b4f2b80639dfa21296832bae16935?s=48 cotolier_risa
1
130
Db55023c0d14b56bf6d687da8479692c?s=48 jy27
0
120
Dcd6ae6de2452585b6d18137a4e1cd97?s=48 miurant
1
670
A5d201f45866b5d7a191cb2ac6b31a00?s=48 nadbov
0
130
696e66ab859446f91081e37e56444730?s=48 event2020
0
250
99de77666ff40dbf0988652899cc92ef?s=48 kamihira
2
2.2k
61979df46e0c6b1de27d9dbc37289838?s=48 alesaenzart
1
310
534038df473acff10c2ecabc4a6f426e?s=48 jerbonds
0
180

Featured

See All Featured
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
14k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
295
39k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
17
1.2k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
342
20k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k

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!