READING The Atomic Workflow

Slide 1

Slide 1 text

READING The Atomic Workﬂow Think Atomic Design Vol.1

Slide 2

Slide 2 text

ࣗݾ঺հ • ෲےϩʔϥʔͷྗΛ৴͡Ζʢ@8845musign_ʣ • גࣜձࣾ΢Οϧήʔτʗ෭ۀϑϦʔϥϯαʔ • UIσβΠϯ΍ͬͨΓɺϓϩάϥϜॻ͍ͨΓ

Slide 3

Slide 3 text

Atomic Designܦݧ • ಛʹͳ͠ • ϓϩδΣΫτ͔Βফ͠ڈͬͨ͜ͱ͸͋Δ • ΤϯδχΞ͔ΒఏҊ͞Εͨ͜ͱ͸͋Δ  ʢσβΠϯΛೲ඼ͯͦ͠ͷޙফଉෆ໌ʣ • ຊ೔΄΅ໝ૝

Slide 4

Slide 4 text

Atomic Design΁ͷ͓ؾ࣋ͪʢยࢥ͍ʣ • ٞ࿦Λ࣮૷΍σβΠϯσʔλͷ࡞੒ํ๏͚ͩʹ  ݶఆ͢Δͷ͸΋͍ͬͨͳ͍

Slide 5

Slide 5 text

Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 6

Slide 6 text

Source:http://atomicdesign.bradfrost.com/chapter-4/ ಡΜͰ·ͱΊ·ͨ͠

Slide 7

Slide 7 text

Workﬂow Waterfall

Slide 8

Slide 8 text

Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 9

Slide 9 text

Source:http://atomicdesign.bradfrost.com/chapter-4/ ͪΌͿ  ୆ฦ͠ ͕ى͜Δ

Slide 10

Slide 10 text

The Atomic Workﬂow

Slide 11

Slide 11 text

Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 12

Slide 12 text

શһ͕ಉ࣌ฒߦͰ  ϑϩʔΛΛਐΊΔ

Slide 13

Slide 13 text

੩తͳΧϯϓͷ໰୊ • εςʔΫϗϧμʔʹؒҧͬͨظ଴Λ༩͑Δ • ޻਺ͷແବ

Slide 14

Slide 14 text

੩తͳΧϯϓͷ໰୊ • εςʔΫϗϧμʔʹؒҧͬͨظ଴Λ༩͑Δ • ޻਺ͷແବ Ұࠁ΋ૣ͘ϒϥ΢βʹ͍͘΂͖

Slide 15

Slide 15 text

HTMLɾCSSɾJavaScriptͰݕূͰ͖Δ΋ͷ ϑϨγΩϏϦςΟ ωοτϫʔΫͷΠϯύΫτ ΠϯλϥΫγϣϯ Ϟʔγϣϯ ਓؒ޻ֶ ৭ͱςΩετͷϨϯμϦϯά ղ૾౓ εΫϩʔϧύϑΥʔϚϯε σόΠεͱϒϥ΢βͷบ Ϣʔβʔͷझ޲ ৹ඒతʹඒ͍͠σβΠϯ͚ͩͰ͸ͳ͘ɺ  σδλϧσβΠϯݻ༗ͷ΋ͷΛݕূՄೳʹ͢Δ

Slide 16

Slide 16 text

Method

Slide 17

Slide 17 text

໾ׂ UX Designer Visual Designer Developer (Frontend) • ϩʔϑΝΠ  εέον • جຊతͳ  ৘ใΞʔΩςΫνϟ • શମͰ༧ظ͞ΕΔ  UIύλʔϯͷ֬཰ • νʔϜඒత  Ձ஋ऩू • ॳظσβΠϯ  ํ਑ͷௐࠪ • ϋΠϑΝΠΧϯϓ  (զʑͷ૝૾͢Δ࡞Γ ࠐ·ΕͨσβΠϯΧ ϯϓͷ͜ͱ) • ؀ڥߏங • جຊతͳελϒ ςϯϓϨʔτͷ ߏங • UIύλʔϯͷ ϚʔΫΞοϓ

Slide 18

Slide 18 text

UX Designer/ϩʔϑΝΠεέον Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 19

Slide 19 text

UX Designer/ϩʔϑΝΠεέον • ϖʔδͷߏ଄ͱ֊૚Λݕ౼͢Δ • ඞཁͳٞ࿦ʹूதͤ͞Δ • ʮ͜ͷը໘Ͱ΍͍ͬͯΔ͜ͱ͸ਖ਼͍͠ͷ͔ʯ  ʮॱ൪͸ਖ਼͍͔͠ʁʯ

Slide 20

Slide 20 text

UX Designer/Site-wide UI Pattern Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 21

Slide 21 text

UX Designer/SpreadSheet OrganismͱMoleculeͷ෼ྨ͕͋Γʢ˞Atom͸ͳ͍ʣ આ໌ͱίϯςϯπαϯϓϧ͕هड़͞Ε͍ͯΔ Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 22

Slide 22 text

UX Designer/SpreadSheet • ίϯςϯπͱݟͨ໨ͷύλʔϯΛ੔ཧ • ಛఆͷςϯϓϨʔτʹؚ·ΕΔύλʔϯΛ੔ཧ • ૬ରతͳ֊૚ • ը໘্Ͱͷ໾ׂ • ࠨ୺ΛಡΈऔΔͱϞόΠϧͰͷϏϡʔ͕Θ͔Δ • σβΠφʔ͕ϨΠΞ΢τΛ࡞Βͣɺٕज़తͳԾఆͳ͠ʹ  ίϯςϯπͱݟͨ໨ͷύλʔϯɺॱংΛٞ࿦Ͱ͖Δ

Slide 23

Slide 23 text

Visual Designer/The 20-Second gut test Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 24

Slide 24 text

Visual Designer/The 20-Second gut test • ৹ඒతՁ஋Λ͙͢ʹཱ֬͢ΔͨΊͷΤΫααΠζ • εςʔΫϗϧμʔ΁20ඵ͝ͱʹ΢ΣϒαΠτΛݟͤͯ  10ஈ֊ͰධՁ͍ͯ͘͠ • ۀքಛ༗ͷαΠτʗϏδϡΞϧతʹڵຯαΠτ  ϩΰ͸ΫϥΠΞϯτͷϩΰʹ͢Δ • ࣍ͷΑ͏ͳࢹ֮ಛੑΛߟྀ͢ΔɻλΠϙάϥϑΟʗ৭ʗղ૾౓ʗ ϨΠΞ΢τʗΠϥετϨʔγϣϯͷελΠϧʗશମతͳงғؾ • ࠷΋ߴ͍ಘ఺ɺ௿͍ಘ఺ɺධՁͷׂΕͨαΠτʹ͍ͭͯٞ࿦͢Δ

Slide 25

Slide 25 text

Visual Designer/ϋΠϑΝΠΧϯϓͷ໰୊ • εςʔΫϗϧμʔ΁ڹ͔ͳ͔ͬͨ৔߹ʹɺ  मਖ਼࣌ؒͱ౒ྗΛཁ͢Δ • ࣮ݱՄೳ͔Ͳ͏͔ʹେ͖ͳԾઆΛؚΉ͜ͱ͕͠͹͋͠Δ • ݱ࣮తͰͳ͍ظ଴Λ΋ͨͤͯ͠·͏

Slide 26

Slide 26 text

Visual Designer/Style Tiles Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 27

Slide 27 text

Visual Designer/Style Tiles • ৭ʗλΠϙάϥϑΟʗςΫενϟʗΞΠίϯʗͦͷଞ  ͷݕ౼ΛՄೳʹ͢Δ • ϜʔυϘʔυΑΓ͸໌֬Ͱɺ  ϋΠϑΝΠΧϯϓఔ͸ݻ·͍ͬͯͳ͍ • ϋΠϑΝΠΧϯϓͷظ଴ʹअຐ͞Εͳ͍ • ϨΠΞ΢τʹ͍ͭͯͷԾઆ΍ɺ  ϏδϡΞϧͷચ࿅͞ͳ͠ʹඒతՁ஋ͷݕ౼͕Ͱ͖Δ • εςʔΫϗϧμʔ΁σβΠϯγεςϜͷڭҭΛߦ͍ɺ  ύλʔϯϕʔεͷߟ͑ํΛ΋ͨͤΔ

Slide 28

Slide 28 text

Visual Designer/Ellement Collages Source:http://atomicdesign.bradfrost.com/chapter-4/

Slide 29

Slide 29 text

Visual Designer/Ellement Collages • ඒతͳํ޲ੑΛٞ࿦͢ΔͨΊͷ΋ͷ • ΠςϨʔγϣϯ͕͠΍͘͢ΞΠσΞΛਐԽͤͯ͞  ͍͘ͷ͕༰қ • *ৄࡉΛ٧ΊΔલʹΑΓ޿ൣғͳऔΓܾΊΛ͢Δ

Slide 30

Slide 30 text

Visual Designer/ϋΠϑΝΠΧϯϓ͸ͭ͘Βͳ͍ʁ • ΧϯϓΛ·ͬͨ͘࡞Βͳ͍Θ͚Ͱ͸ͳ͍ • Χϯϓ͸εςʔΫϗϧμʔͱͷձ࿩Λ  ଅਐ͢ΔͨΊʹ࢖ΘΕΔ • UI͕Ͳ͏͍ͬͨݟͨ໨ʹͳΔ͔  શମ૾Λඳ͘ͷʹ༗ޮ

Slide 31

Slide 31 text

Visual Designer/͍ͭ࡞Δʁ • ΋ͬͱʂΛٻΊΒΕͨΒ • ʮ͜ͷίϥʔδϡ͸ૉ੖Β͍͠Ͷɺͨͩ͜Ε͸ඓΛݟ ͤͯإ͕ඒ͍͔͠Ͳ͏͔ࢲʹίϝϯτΛٻΊ͍ͯΔΑ ͏ͳ΋ͷͩʯ • TechCrunch ͷϓϩδΣΫτͰ͸  Element Collages ্͕ख͘ߦͬͨޙʹΧϯϓΛ࡞ͬͨ • Χϯϓ͕͙͢ΰϛശ͍͖ʹͳΔϦεΫΛݮΒ͢

Slide 32

Slide 32 text

Frontend Engineer • σβΠφʔͱ͍ۙ੮࠲Δ  ʢόοΫΤϯυΤϯδχΞͱҰॹʹ͞Ε͕ͪʣ • ϑϩϯτΤϯυ։ൃΛσβΠϯϓϩηεͷ  ίΞύʔτͱͯ͠ѻ͏͜ͱ͸ۃΊͯॏཁɻ • αΠτͷछྨʹΑͬͯ༧ظͰ͖ΔUIΛઌߦͯ͠ϚʔΫΞοϓ͢Δ • ࠷ॳ͸ߥͯ͘΋ɺσβΠφʔͱͷίϥϘϨʔγϣϯͱ  ΠςϨʔγϣϯͷॏཁͳग़ൃ఺ʹͳΔ • UXɾϏδϡΞϧσβΠφʔ͸ϚʔΫΞοϓΛݕূʹ࢖͏

Slide 33

Slide 33 text

Frontend Engineer/TechCrunchͷྫ

Slide 34

Slide 34 text

Frontend Engineer/TechCrunchͷྫ • TechCrunchͷϓϩδΣΫτͰ͸ΧϯϓͷཪͰ  ϔομʔʹ͍ͭͯ  HTMLʹΑΔάϨΠεέʔϧͷϓϩτλΠϓΛ࡞ͬͨ • ΠϯλϥΫςΟϒ͔ͭղ૾౓ͷൣғ಺Ͱ  Ͳ͏ϔομʔ͕దԠ͢Δ͔ΛσϞϯετϨʔγϣϯ  ͢Δͷʹ໾ʹཱͬͨ

Slide 35

Slide 35 text

Iteration

Slide 36

Slide 36 text

ϒϥ΢βͰͷΠςϨʔγϣϯ • ϒϥ΢βʹσβΠϯΛҠߦͯ͠ɺ͸͡Ίͯ  σβΠϯͷԾઆΛঝೝ/൱ೝ͢΂͖ • Ұ౓ϒϥ΢βͰσβΠϯͨ͠ͷͳΒϒϥ΢β  ʹͱͲ·Γଓ͚Δ΂͖ • ෦෼తͳΧϯϓΛؚΉ͜ͱ͸ྑ͍ • ϒϥ΢βͰʮσβΠϯʯͱ͍͏ΑΓ͸ʮܾఆ͢Δʯ

Slide 37

Slide 37 text

ύλʔϯϕʔεͷϫʔΫϑϩʔ • ͜ͷϫʔΫϑϩʔͷར఺͸֤ύλʔϯ͕ݻ·Δͱ  ύλʔϯΛؚΉʢ্ҐͷʣςϯϓϨʔτ΋ݻ·Δ • ৽͍͠ςϯϓϨʔτ͸طଘͷ࢖͍ճ͠Ͱ؆୯ʹ࡞ΕΔ

Slide 38

Slide 38 text

ຊ೔͸͜͜·Ͱ  ৄࡉ͸ຊ͔WebͰʂ

Slide 39

Slide 39 text

·ͱΊ • ϒϥ΢βʹΑΔੜ͖ͨઃܭΛ • Frontend Engineer͸ૣظʹઃܭ΁ͷࢀՃΛ • ৄࡉͰ͸ͳ͘ৗʹશମʢํ਑ʣ͔Βߟ͑Δ • Visual Designer͸Χϯϓ͔ΒೖΔͳ • ΫϥΠΞϯτͱͷձ࿩ɺνʔϜͱͷίϥϘϨʔγϣϯΛ  ม͍͑ͯ͘ • UIͷ؅ཧํ๏Λม͑Δ͚ͩͰ͸ͩΊ

Slide 40

Slide 40 text

Atomic Designͷຊ࣭͸ εςʔΫϗϧμʔશһ ͱͷ߹ҙܗ੒ͷϓϩηε ཻ౓΋߹ҙܗ੒ ʹ߹Θ͍ͤͯΔ …Ͱ͸

Slide 41

Slide 41 text

Thank You!