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

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

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. ɾσβΠφʔͱσϕϩούʔؒͷ ɹίϛϡχέʔγϣϯ͕ͱΓ΍͘͢ͳͬͨ ɾσβΠφʔ΋҆৺ͯ͠ϓϧϦΫ౤͛Εͨ ɾখཻ͍͞౓͔ΒσβΠϯΛى͜͢ͷ͸೉͍͠
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. ίϯϙʔωϯτϕʔεͷઃܭ͕౰ͨΓલͷࠓɺ ࡉཻ͍౓ͷίϯϙʔωϯτ͸ ఔΑ੍͍໿ͱࣗ༝౓Λ༩͑Δ͔΋ʂ
35. એ఻
36. 4LFUDIϓϥάΠϯ
    'POU
    'JOEFS
    4LFUDI಺Ͱ࢖ͬͯΔ
    ϑΥϯτΛ୳ͤΔ