Atomic Designにまつわるエトセトラ

20150530
春のフロントエンド祭り

Transcript

1. Atomic Design ʹ·ͭΘΔΤτητϥ 2015-05-30
2. Edward Fox • Repro Inc. • Front-end Developer • Ruby on Rails, CSS, JavaScript, Git, AWS
3. ࠓճ࿩͢͜ͱ • Atomic Designͱ͍͏ઃܭࢥ૝ • ۜͷ஄ؙ͸ͳ͍
4. ࠓճ࿩͞ͳ͍͜ͱ • ׬ᘳͳσβΠϯɾઃܭ • σβΠϯͷϋ΢πʔ΍ٕ๏
6. σβΠϯΛ֎஫͢Δ͜ͱʹ
7. Atomic Designͱ͍͏΋ͷ͕͋ΔΒ͍͠
9. Brad Frost
10. Atomic design provides a clear methodology for crafting design systems. It gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
11. Α͏͢Δʹ
12. • σβΠϯγεςϜΛ࡞Δํ๏࿦ͷ1ͭ • σβΠϯͷҰ؏ੑͱ֦ுੑ • ଟਓ਺ͷ࡞ۀʹ͓͍ͯ΋ɺσβΠϯγες Ϝ͕1ͭ1ͭ૊Έ্͕ͬͯߏங͞ΕΔ
13. Atoms
14. Atoms
15. Molecules
16. Molecules
17. Organisms
18. Organisms
19. Templates
20. Templates
21. Pages
22. Pages
23. Θ͔Γ΍͍͢ • ࠷খ୯ҐͷίϯϙʔωϯτΛ࡞ΓɺͦΕΛ ૊Έ߹ΘͤͯΑΓෳࡶͳσβΠϯΛܗ࡞Δ
24. σβΠφʔͱΤϯδχΞ͕ڠௐ͠΍ͦ͢͏ • σβΠϯͷίϯϙʔωϯτʢࢹ֮తͳ·ͱ ·Γʣͱ࣮૷ͷ୯ҐʢHTMLλάʗCSS ϑΝΠϧʣ͕ରԠ͢Δ
27. ৭ʑͱ໰୊΋͋Δ
28. ໰୊: Τϥʔϝοηʔδ͸ Molecule? Organism? Template?
29. ղܾ: ୯ମͰҙຯΛ΋ͬͯػೳ͢Δ͔Β Organismʹू໿
30. ໰୊: ଟݴޠରԠͱ͔Ͳ͏͢Μͷ?
31. ղܾ: ͦΕͧΕͷݴޠΛ 1ͭͷςϯϓϨʔτͱͯ͠ߟ͑Δ
37. θϩ͔ΒϓϩμΫτ΍ϒϩάςʔϚͳͲΛ࡞͍ͬͯ͘ ʹ͸ྑͦ͞͏ • طଘͷαʔϏε͔ΒཁૉΛநग़ͯ͠Atomicͳཁૉʹ ෼ׂ͍ͯ͘͠ͷ͸೉͍͠ • Photoshopͱ͔SketchͰͰ͖ͨσβΠϯΛ࣮૷͍ͯ͠ ͘৔߹ʹ͸Atomicͳཁૉͷ࿙Ε͕͋Γͦ͏
38. • ୯ҰϖʔδʹAtomic DesignΛ࢖Θͳ͍
39. ݁࿦ • Atomic Designྑ͍ɻͰ΋αʔϏεͷஈ֊΍։ൃʹ͋ͬ ͨσβΠϯ఩ֶɾઃܭΛબ୒͢Δͷେࣄ • CSS͸͙͢෗Δ • ׬શແܽͳઃܭΛ໨ࢦ͢ͷͰ͸ͳ͘ɺյΕͨͱͯ͠΋ ෮چ͕͙͢ʹग़དྷΔઃܭͱ৺ߏ͑Λ
40. Sample: https://github.com/edwardkenfox/atomic-sample
41. We’re hiring!
42. ׬