Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
σβΠφʔʹΑΔAtomic Designͷ࣮ફ ʙಋೖฤɾӡ༻ฤʙ גࣜձࣾAbemaTV ੴ௩ ઍ༟ɾా ୡ
Slide 2
Slide 2 text
Speakers ੴ௩ ઍ༟ Chihiro Ishitsuka גࣜձࣾαΠόʔΤʔδΣϯτ 20129݄ த్ೖࣾ גࣜձࣾAbemaTV 201511݄ ग़ גࣜձࣾαΠόʔΤʔδΣϯτ20134݄ ৽ଔೖࣾ גࣜձࣾAbemaTV 20156݄ ग़ ా ୡ Tatsuya Uchida ಋೖฤ ӡ༻ฤ
Slide 3
Slide 3 text
Service
Slide 4
Slide 4 text
Focus on PC h?ps:/ /abema.tv
Slide 5
Slide 5 text
ಋೖฤ
Slide 6
Slide 6 text
About Atomic Design Atoms Molecules Organisms Templates Pages 5ͭͷ୯Ґʹ͚ͯཧ͞Ε͍ͯΔɺ ύʔπΛΈ߹Θͤͯ࠶ར༻Մೳͳ ίϯϙʔωϯτͰߏ͢ΔσβΠϯγεςϜɻ
Slide 7
Slide 7 text
SketchͰελΠϧΨΠυΛ ࡞Γ·ͨ͠
Slide 8
Slide 8 text
Sketch CSS
Slide 9
Slide 9 text
໌҉2छྨͷελΠϧΨΠυΛ༻ҙ DARK UI LIGHT UI
Slide 10
Slide 10 text
CSSͷΧελϜϓϩύςΟ2छྨఆٛ
Slide 11
Slide 11 text
͍͟ʂAtomic Design
Slide 12
Slide 12 text
σϕϩούʔ͞Μ͕ Atomic DesignͷϦετΛ ىͯ͘͜͠Ε·ͨ͠
Slide 13
Slide 13 text
Ͳ͏͍͏ίϯϙʔωϯτʹͳ͍ͬͯΔͷ͔
Slide 14
Slide 14 text
AbemaTVͰ Atoms / Molecules / Organisms ͷΈΛཧ
Slide 15
Slide 15 text
Atoms ͜ΕҎ্ׂͰ͖ͳ͍࠷খͷίϯϙʔωϯτ܈ εϥΠμʔ Ϙλϯ ςΩετΤϦΞ ΞΠίϯ νΣοΫϘοΫε ϔομʔ
Slide 16
Slide 16 text
Molecules ෳͷAtoms͕·ͱ·ͬͯͰ͖ͨίϯϙʔωϯτ܊ φϏήʔγϣϯ ϦϞίϯ ೖྗϑΥʔϜ νΣοΫϘοΫε
Slide 17
Slide 17 text
Organisms AtomsͱMoleculesΛΈ߹Θͤͨίϯϙʔωϯτ܊ γʔΫόʔ ϔομʔ
Slide 18
Slide 18 text
ಋೖͯ͠ΈͯΘ͔ͬͨ͜ͱ
Slide 19
Slide 19 text
ɾσβΠφʔͱσϕϩούʔؒͷ ɹίϛϡχέʔγϣϯ͕ͱΓ͘͢ͳͬͨ ɾσβΠφʔ҆৺ͯ͠ϓϧϦΫ͛Εͨ ɾখཻ͍͔͞ΒσβΠϯΛى͜͢ͷ͍͠
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
ӡ༻ฤ
Slide 22
Slide 22 text
͢Ͱʹίϯϙʔωϯτ͕͋ΔͷͰ ͦΕΛͬͯσβΠϯ͢Ε͍͍͚ͩ Components Page
Slide 23
Slide 23 text
ඇৗʹָ
Slide 24
Slide 24 text
͕!
Slide 25
Slide 25 text
ݕࡧɺථͳͲͷػೳՃ ɾɾɾ݁Ռɺίϯϙʔωϯτ͕૿͑ΔҰํ ճ༡ͤ͞ΔͨΊσβΠϯվम ʮͪ͜͜ΐͬͱม͍͑ͨʯ
Slide 26
Slide 26 text
Atomic DesignʹԊͬͨ SketchͷSymbolΛ࡞ΔͱΑͦ͞͏ Atoms Molecules Organisms
Slide 27
Slide 27 text
Sketch Atomic DesignΛ࣮ફ͢Δ σβΠϯπʔϧͱͯ͠࠷ڧ
Slide 28
Slide 28 text
1. ೖΕࢠʹͰ͖Δ 2. จࣈը૾ΛมߋͰ͖Δ 3. େ͖͞ΛมߋͰ͖Δ SketchͷγϯϘϧػೳͷಛ
Slide 29
Slide 29 text
1. ೖΕࢠʹͰ͖Δ Atoms, Molecules, Organisms ͷ֤ཁૉΛೖΕࢠʹͰ͖Δ
Slide 30
Slide 30 text
2. จࣈը૾Λ มߋͰ͖Δ ಉ͡γϯϘϧͰ༰Λ มߋ͢Δ͜ͱ͕Ͱ͖Δ
Slide 31
Slide 31 text
3. େ͖͕͞Մม ϨΠΞτΛ่͢͜ͱͳ͘ େ͖͞ΛมߋͰ͖Δ
Slide 32
Slide 32 text
৽͍͠ϖʔδΛσβΠϯ͢Δ࣌ ελΠϧΨΠυͱAtomsΛҙࣝͭͭ͠ ॊೈʹͬͨΒΑͦ͞͏ʂ
Slide 33
Slide 33 text
ίϯϙʔωϯτϕʔεͷઃܭ͕ͨΓલͷࠓɺ ࡉཻ͍ͷίϯϙʔωϯτ ఔΑ੍͍ͱࣗ༝Λ༩͑Δ͔ʂ
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
એ
Slide 36
Slide 36 text
4LFUDIϓϥάΠϯ 'POU'JOEFS 4LFUDIͰͬͯΔ ϑΥϯτΛ୳ͤΔ