デザイナーによるAtomic Designの実践〜導入編・運用編〜

11be42612fb329e1e3f514a09ff72d74?s=47 Tatsuya Uchida
September 07, 2016

デザイナーによるAtomic Designの実践〜導入編・運用編〜

AbemaTVのデザイナーによるAtomic Designの実践を、導入編、運用編に分けて紹介します。
導入編では、スタイルガイドの作成や、エンジニアさんとのやりとりでどのように粒度を決めたか。運用編ではSketchのシンボル機能を使って、実装のコンポーネント指向に近いSketchファイルの作成方法を紹介します。

11be42612fb329e1e3f514a09ff72d74?s=128

Tatsuya Uchida

September 07, 2016
Tweet

Transcript

  1. σβΠφʔʹΑΔAtomic Designͷ࣮ફ ʙಋೖฤɾӡ༻ฤʙ גࣜձࣾAbemaTV ੴ௩ ઍ༟ɾ಺ా ୡ໵

  2. Speakers ੴ௩ ઍ༟ Chihiro Ishitsuka גࣜձࣾαΠόʔΤʔδΣϯτ 2012೥9݄ த్ೖࣾ גࣜձࣾAbemaTV 2015೥11݄

    ग़޲ גࣜձࣾαΠόʔΤʔδΣϯτ2013೥4݄ ৽ଔೖࣾ גࣜձࣾAbemaTV 2015೥6݄ ग़޲ ಺ా ୡ໵ Tatsuya Uchida ಋೖฤ ӡ༻ฤ
  3. Service

  4. Focus on PC h?ps:/ /abema.tv

  5. ಋೖฤ

  6. About Atomic Design Atoms Molecules Organisms Templates Pages 5ͭͷ୯Ґʹ෼͚ͯ؅ཧ͞Ε͍ͯΔɺ ύʔπΛ૊Έ߹Θͤͯ࠶ར༻Մೳͳ

    ίϯϙʔωϯτͰߏ੒͢ΔσβΠϯγεςϜɻ
  7. SketchͰελΠϧΨΠυΛ ࡞Γ·ͨ͠

  8. Sketch CSS

  9. ໌҉2छྨͷελΠϧΨΠυΛ༻ҙ DARK UI LIGHT UI

  10. CSSͷΧελϜϓϩύςΟ΋2छྨఆٛ

  11. ͍͟ʂAtomic Design

  12. σϕϩούʔ͞Μ͕ Atomic DesignͷϦετΛ ىͯ͘͜͠Ε·ͨ͠

  13. Ͳ͏͍͏ίϯϙʔωϯτʹͳ͍ͬͯΔͷ͔

  14. AbemaTVͰ͸ Atoms / Molecules / Organisms ͷΈΛ؅ཧ

  15. Atoms ͜ΕҎ্෼ׂͰ͖ͳ͍࠷খͷίϯϙʔωϯτ܈ εϥΠμʔ Ϙλϯ ςΩετΤϦΞ ΞΠίϯ νΣοΫϘοΫε ϔομʔ

  16. Molecules ෳ਺ͷAtoms͕·ͱ·ͬͯͰ͖ͨίϯϙʔωϯτ܊ φϏήʔγϣϯ ϦϞίϯ ೖྗϑΥʔϜ νΣοΫϘοΫε

  17. Organisms AtomsͱMoleculesΛ૊Έ߹Θͤͨίϯϙʔωϯτ܊ γʔΫόʔ ϔομʔ

  18. ಋೖͯ͠ΈͯΘ͔ͬͨ͜ͱ

  19. ɾσβΠφʔͱσϕϩούʔؒͷ ɹίϛϡχέʔγϣϯ͕ͱΓ΍͘͢ͳͬͨ ɾσβΠφʔ΋҆৺ͯ͠ϓϧϦΫ౤͛Εͨ ɾখཻ͍͞౓͔ΒσβΠϯΛى͜͢ͷ͸೉͍͠

  20. None
  21. ӡ༻ฤ

  22. ͢Ͱʹίϯϙʔωϯτ͕͋ΔͷͰ ͦΕΛ࢖ͬͯσβΠϯ͢Ε͹͍͍͚ͩ Components Page

  23. ඇৗʹָ

  24. ͕!

  25. ݕࡧɺ౤ථͳͲͷػೳ௥Ճ ɾɾɾ݁Ռɺίϯϙʔωϯτ͕૿͑ΔҰํ ճ༡ͤ͞ΔͨΊσβΠϯվम ʮͪ͜͜ΐͬͱม͍͑ͨʯ

  26. Atomic DesignʹԊͬͨ SketchͷSymbolΛ࡞ΔͱΑͦ͞͏ Atoms Molecules Organisms

  27. Sketch͸ Atomic DesignΛ࣮ફ͢Δ σβΠϯπʔϧͱͯ͠࠷ڧ

  28. 1. ೖΕࢠʹͰ͖Δ 2. จࣈ΍ը૾ΛมߋͰ͖Δ 3. େ͖͞ΛมߋͰ͖Δ SketchͷγϯϘϧػೳͷಛ௃

  29. 1. ೖΕࢠʹͰ͖Δ Atoms, Molecules, Organisms ͷ֤ཁૉΛೖΕࢠʹͰ͖Δ

  30. 2. จࣈ΍ը૾Λ มߋͰ͖Δ ಉ͡γϯϘϧͰ΋಺༰Λ มߋ͢Δ͜ͱ͕Ͱ͖Δ

  31. 3. େ͖͕͞Մม ϨΠΞ΢τΛ่͢͜ͱͳ͘ େ͖͞ΛมߋͰ͖Δ

  32. ৽͍͠ϖʔδΛσβΠϯ͢Δ࣌͸ ελΠϧΨΠυͱAtomsΛҙࣝͭͭ͠ ॊೈʹ΍ͬͨΒΑͦ͞͏ʂ

  33. ίϯϙʔωϯτϕʔεͷઃܭ͕౰ͨΓલͷࠓɺ ࡉཻ͍౓ͷίϯϙʔωϯτ͸ ఔΑ੍͍໿ͱࣗ༝౓Λ༩͑Δ͔΋ʂ

  34. None
  35. એ఻

  36. 4LFUDIϓϥάΠϯ 'POU'JOEFS 4LFUDI಺Ͱ࢖ͬͯΔ ϑΥϯτΛ୳ͤΔ