READING The Atomic Workflow

66b5fea05e9370317581701c87e50eae?s=47 8845musign
December 10, 2018

READING The Atomic Workflow

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

66b5fea05e9370317581701c87e50eae?s=128

8845musign

December 10, 2018
Tweet

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!