READING The Atomic Workflow

Transcript

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!