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

Introduce Atomic Design with small rework

kenshir0f
December 10, 2018

Introduce Atomic Design with small rework

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

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

kenshir0f

December 10, 2018
Tweet

More Decks by kenshir0f

Other Decks in Design

Transcript

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

    ᐆດ͞Λڐ༰͢Δ ΞτϛοΫσβΠϯಋೖͷϙΠϯτ ಋೖલ ಋೖத ಋೖޙ
  2. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t
  3. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t σβΠϯ͍ͯ͠ͳ͍͠ਐ௙͸ࢭ·ͬͯ͠·͏
  4. Cookpad Inc. All Rights Reserved. ಋೖ࣌ͷϙΠϯτ 1. ಋೖͷλΠϛϯά͸৻ॏʹʂ 2. ద౓ʹΞτϛοΫσβΠϯΛద༻͠Α͏ʂ

    ૣ͗ͯ͢΋μϝͩ͠ɺ஗͗͢Δͱޙ͕େม ؤுͬͯ࡞ͬͨίϯϙʔωϯτ͸͍͍ͩͨ࢖ΘΕͳ͍
  5. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ σβΠφʔ

    ΤϯδχΞ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
  6. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ

    σβΠφʔͱΤϯδχΞͰࢹ఺͕ҧ͏ ·ͣ͸͜ͷࠩΛཧղ͢Δ σβΠφʔ ΤϯδχΞ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
  7. Cookpad Inc. All Rights Reserved. ϑΣʔζʹΑͬͯঃʑʹมΘΔ͜ͱΛڐ༰͢Δ ૹ৴͢Δ 2. ImageUploadForm 3.

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