READING The Atomic Workflow

第１回AtomicDesignについて考える会

1. READING The Atomic Workflow Think Atomic Design Vol.1
2. ࣗݾ঺հ • ෲےϩʔϥʔͷྗΛ৴͡Ζʢ@8845musign_ʣ • גࣜձࣾ΢Οϧήʔτʗ෭ۀϑϦʔϥϯαʔ • UIσβΠϯ΍ͬͨΓɺϓϩάϥϜॻ͍ͨΓ
3. Atomic Designܦݧ • ಛʹͳ͠ • ϓϩδΣΫτ͔Βফ͠ڈͬͨ͜ͱ͸͋Δ • ΤϯδχΞ͔ΒఏҊ͞Εͨ͜ͱ͸͋Δ
 ʢσβΠϯΛೲ඼ͯͦ͠ͷޙফଉෆ໌ʣ • ຊ೔΄΅ໝ૝
4. Atomic Design΁ͷ͓ؾ࣋ͪʢยࢥ͍ʣ • ٞ࿦Λ࣮૷΍σβΠϯσʔλͷ࡞੒ํ๏͚ͩʹ
 ݶఆ͢Δͷ͸΋͍ͬͨͳ͍
5. Source:http://atomicdesign.bradfrost.com/chapter-4/
6. Source:http://atomicdesign.bradfrost.com/chapter-4/ ಡΜͰ·ͱΊ·ͨ͠
7. Workflow Waterfall
8. Source:http://atomicdesign.bradfrost.com/chapter-4/
9. Source:http://atomicdesign.bradfrost.com/chapter-4/ ͪΌͿ
 ୆ฦ͠
   ͕ى͜Δ
10. The Atomic Workflow
11. Source:http://atomicdesign.bradfrost.com/chapter-4/
12. શһ͕ಉ࣌ฒߦͰ
 ϑϩʔΛΛਐΊΔ
13. ੩తͳΧϯϓͷ໰୊ • εςʔΫϗϧμʔʹؒҧͬͨظ଴Λ༩͑Δ • ޻਺ͷແବ
14. ੩తͳΧϯϓͷ໰୊ • εςʔΫϗϧμʔʹؒҧͬͨظ଴Λ༩͑Δ • ޻਺ͷແବ Ұࠁ΋ૣ͘ϒϥ΢βʹ͍͘΂͖
15. HTMLɾCSSɾJavaScriptͰݕূͰ͖Δ΋ͷ ϑϨγΩϏϦςΟ ωοτϫʔΫͷΠϯύΫτ ΠϯλϥΫγϣϯ Ϟʔγϣϯ ਓؒ޻ֶ ৭ͱςΩετͷϨϯμϦϯά ղ૾౓ εΫϩʔϧύϑΥʔϚϯε σόΠεͱϒϥ΢βͷบ Ϣʔβʔͷझ޲ ৹ඒతʹඒ͍͠σβΠϯ͚ͩͰ͸ͳ͘ɺ
 σδλϧσβΠϯݻ༗ͷ΋ͷΛݕূՄೳʹ͢Δ
16. Method
17. ໾ׂ UX Designer Visual Designer Developer (Frontend) • ϩʔϑΝΠ
 εέον • جຊతͳ
 ৘ใΞʔΩςΫνϟ • શମͰ༧ظ͞ΕΔ
 UIύλʔϯͷ֬཰ • νʔϜඒత
 Ձ஋ऩू • ॳظσβΠϯ
 ํ਑ͷௐࠪ • ϋΠϑΝΠΧϯϓ
 (զʑͷ૝૾͢Δ࡞Γ ࠐ·ΕͨσβΠϯΧ ϯϓͷ͜ͱ) • ؀ڥߏங • جຊతͳελϒ ςϯϓϨʔτͷ ߏங • UIύλʔϯͷ ϚʔΫΞοϓ
18. UX Designer/ϩʔϑΝΠεέον Source:http://atomicdesign.bradfrost.com/chapter-4/
19. UX Designer/ϩʔϑΝΠεέον • ϖʔδͷߏ଄ͱ֊૚Λݕ౼͢Δ • ඞཁͳٞ࿦ʹूதͤ͞Δ • ʮ͜ͷը໘Ͱ΍͍ͬͯΔ͜ͱ͸ਖ਼͍͠ͷ͔ʯ
 ʮॱ൪͸ਖ਼͍͔͠ʁʯ
20. UX Designer/Site-wide UI Pattern Source:http://atomicdesign.bradfrost.com/chapter-4/
21. UX Designer/SpreadSheet OrganismͱMoleculeͷ෼ྨ͕͋Γʢ˞Atom͸ͳ͍ʣ આ໌ͱίϯςϯπαϯϓϧ͕هड़͞Ε͍ͯΔ Source:http://atomicdesign.bradfrost.com/chapter-4/
22. UX Designer/SpreadSheet • ίϯςϯπͱݟͨ໨ͷύλʔϯΛ੔ཧ • ಛఆͷςϯϓϨʔτʹؚ·ΕΔύλʔϯΛ੔ཧ • ૬ରతͳ֊૚ • ը໘্Ͱͷ໾ׂ • ࠨ୺ΛಡΈऔΔͱϞόΠϧͰͷϏϡʔ͕Θ͔Δ • σβΠφʔ͕ϨΠΞ΢τΛ࡞Βͣɺٕज़తͳԾఆͳ͠ʹ
 ίϯςϯπͱݟͨ໨ͷύλʔϯɺॱংΛٞ࿦Ͱ͖Δ
23. Visual Designer/The 20-Second gut test Source:http://atomicdesign.bradfrost.com/chapter-4/
24. Visual Designer/The 20-Second gut test • ৹ඒతՁ஋Λ͙͢ʹཱ֬͢ΔͨΊͷΤΫααΠζ • εςʔΫϗϧμʔ΁20ඵ͝ͱʹ΢ΣϒαΠτΛݟͤͯ
 10ஈ֊ͰධՁ͍ͯ͘͠ • ۀքಛ༗ͷαΠτʗϏδϡΞϧతʹڵຯαΠτ
 ϩΰ͸ΫϥΠΞϯτͷϩΰʹ͢Δ • ࣍ͷΑ͏ͳࢹ֮ಛੑΛߟྀ͢ΔɻλΠϙάϥϑΟʗ৭ʗղ૾౓ʗ ϨΠΞ΢τʗΠϥετϨʔγϣϯͷελΠϧʗશମతͳงғؾ • ࠷΋ߴ͍ಘ఺ɺ௿͍ಘ఺ɺධՁͷׂΕͨαΠτʹ͍ͭͯٞ࿦͢Δ
25. Visual Designer/ϋΠϑΝΠΧϯϓͷ໰୊ • εςʔΫϗϧμʔ΁ڹ͔ͳ͔ͬͨ৔߹ʹɺ
 मਖ਼࣌ؒͱ౒ྗΛཁ͢Δ • ࣮ݱՄೳ͔Ͳ͏͔ʹେ͖ͳԾઆΛؚΉ͜ͱ͕͠͹͋͠Δ • ݱ࣮తͰͳ͍ظ଴Λ΋ͨͤͯ͠·͏
26. Visual Designer/Style Tiles Source:http://atomicdesign.bradfrost.com/chapter-4/
27. Visual Designer/Style Tiles • ৭ʗλΠϙάϥϑΟʗςΫενϟʗΞΠίϯʗͦͷଞ
 ͷݕ౼ΛՄೳʹ͢Δ • ϜʔυϘʔυΑΓ͸໌֬Ͱɺ
 ϋΠϑΝΠΧϯϓఔ͸ݻ·͍ͬͯͳ͍ • ϋΠϑΝΠΧϯϓͷظ଴ʹअຐ͞Εͳ͍ • ϨΠΞ΢τʹ͍ͭͯͷԾઆ΍ɺ
 ϏδϡΞϧͷચ࿅͞ͳ͠ʹඒతՁ஋ͷݕ౼͕Ͱ͖Δ • εςʔΫϗϧμʔ΁σβΠϯγεςϜͷڭҭΛߦ͍ɺ
 ύλʔϯϕʔεͷߟ͑ํΛ΋ͨͤΔ
28. Visual Designer/Ellement Collages Source:http://atomicdesign.bradfrost.com/chapter-4/
29. Visual Designer/Ellement Collages • ඒతͳํ޲ੑΛٞ࿦͢ΔͨΊͷ΋ͷ • ΠςϨʔγϣϯ͕͠΍͘͢ΞΠσΞΛਐԽͤͯ͞
 ͍͘ͷ͕༰қ • *ৄࡉΛ٧ΊΔલʹΑΓ޿ൣғͳऔΓܾΊΛ͢Δ
30. Visual Designer/ϋΠϑΝΠΧϯϓ͸ͭ͘Βͳ͍ʁ • ΧϯϓΛ·ͬͨ͘࡞Βͳ͍Θ͚Ͱ͸ͳ͍ • Χϯϓ͸εςʔΫϗϧμʔͱͷձ࿩Λ
 ଅਐ͢ΔͨΊʹ࢖ΘΕΔ • UI͕Ͳ͏͍ͬͨݟͨ໨ʹͳΔ͔
 શମ૾Λඳ͘ͷʹ༗ޮ
31. Visual Designer/͍ͭ࡞Δʁ • ΋ͬͱʂΛٻΊΒΕͨΒ • ʮ͜ͷίϥʔδϡ͸ૉ੖Β͍͠Ͷɺͨͩ͜Ε͸ඓΛݟ ͤͯإ͕ඒ͍͔͠Ͳ͏͔ࢲʹίϝϯτΛٻΊ͍ͯΔΑ ͏ͳ΋ͷͩʯ • TechCrunch ͷϓϩδΣΫτͰ͸
 Element Collages ্͕ख͘ߦͬͨޙʹΧϯϓΛ࡞ͬͨ • Χϯϓ͕͙͢ΰϛശ͍͖ʹͳΔϦεΫΛݮΒ͢
32. Frontend Engineer • σβΠφʔͱ͍ۙ੮࠲Δ
 ʢόοΫΤϯυΤϯδχΞͱҰॹʹ͞Ε͕ͪʣ • ϑϩϯτΤϯυ։ൃΛσβΠϯϓϩηεͷ
 ίΞύʔτͱͯ͠ѻ͏͜ͱ͸ۃΊͯॏཁɻ • αΠτͷछྨʹΑͬͯ༧ظͰ͖ΔUIΛઌߦͯ͠ϚʔΫΞοϓ͢Δ • ࠷ॳ͸ߥͯ͘΋ɺσβΠφʔͱͷίϥϘϨʔγϣϯͱ
 ΠςϨʔγϣϯͷॏཁͳग़ൃ఺ʹͳΔ • UXɾϏδϡΞϧσβΠφʔ͸ϚʔΫΞοϓΛݕূʹ࢖͏
33. Frontend Engineer/TechCrunchͷྫ
34. Frontend Engineer/TechCrunchͷྫ • TechCrunchͷϓϩδΣΫτͰ͸ΧϯϓͷཪͰ
 ϔομʔʹ͍ͭͯ
 HTMLʹΑΔάϨΠεέʔϧͷϓϩτλΠϓΛ࡞ͬͨ • ΠϯλϥΫςΟϒ͔ͭղ૾౓ͷൣғ಺Ͱ
 Ͳ͏ϔομʔ͕దԠ͢Δ͔ΛσϞϯετϨʔγϣϯ
 ͢Δͷʹ໾ʹཱͬͨ
35. Iteration
36. ϒϥ΢βͰͷΠςϨʔγϣϯ • ϒϥ΢βʹσβΠϯΛҠߦͯ͠ɺ͸͡Ίͯ
 σβΠϯͷԾઆΛঝೝ/൱ೝ͢΂͖ • Ұ౓ϒϥ΢βͰσβΠϯͨ͠ͷͳΒϒϥ΢β
 ʹͱͲ·Γଓ͚Δ΂͖ • ෦෼తͳΧϯϓΛؚΉ͜ͱ͸ྑ͍ • ϒϥ΢βͰʮσβΠϯʯͱ͍͏ΑΓ͸ʮܾఆ͢Δʯ
37. ύλʔϯϕʔεͷϫʔΫϑϩʔ • ͜ͷϫʔΫϑϩʔͷར఺͸֤ύλʔϯ͕ݻ·Δͱ
 ύλʔϯΛؚΉʢ্ҐͷʣςϯϓϨʔτ΋ݻ·Δ • ৽͍͠ςϯϓϨʔτ͸طଘͷ࢖͍ճ͠Ͱ؆୯ʹ࡞ΕΔ
38. ຊ೔͸͜͜·Ͱ
 ৄࡉ͸ຊ͔WebͰʂ
39. ·ͱΊ • ϒϥ΢βʹΑΔੜ͖ͨઃܭΛ • Frontend Engineer͸ૣظʹઃܭ΁ͷࢀՃΛ • ৄࡉͰ͸ͳ͘ৗʹશମʢํ਑ʣ͔Βߟ͑Δ • Visual Designer͸Χϯϓ͔ΒೖΔͳ • ΫϥΠΞϯτͱͷձ࿩ɺνʔϜͱͷίϥϘϨʔγϣϯΛ
 ม͍͑ͯ͘ • UIͷ؅ཧํ๏Λม͑Δ͚ͩͰ͸ͩΊ
40. Atomic Designͷຊ࣭͸ εςʔΫϗϧμʔશһ ͱͷ߹ҙܗ੒ͷϓϩηε ཻ౓΋߹ҙܗ੒
    ʹ߹Θ͍ͤͯΔ …Ͱ͸
41. Thank You!