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
300
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
3.9k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
680
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
7k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
5.4k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.2k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
4.8k
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
530
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
10
6.2k

Other Decks in Design

See All in Design
Bdf445461753c32eb09fbf93bef32362?s=48 jtatelucas
0
230
82414e7232f1483734d998f5c2e4f346?s=48 misaaa09
0
1.1k
5bbcb4bd0ee08d725339ac48ba50b6d9?s=48 tyoys00
0
220
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
0
370
536c406c2a293397e5139a8694fa212d?s=48 kenhsu
0
1.3k
9cb8f605e3ccad1e867dad2b0b32314f?s=48 brett58
2
360
74476e142a767a018d68c5e72e34ee2f?s=48 akkiesoft
0
390
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
0
150
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
110
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
110
07d788425ce835a38da4ab23a537b407?s=48 gavaru
0
120
C970be04e110498ee6011bed00e90c23?s=48 airi0817
0
850

Featured

See All Featured
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
53
1.8k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.8k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.2k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
310
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
520
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
108
9.6k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
10
640

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!