Slide 1

Slide 1 text

READING The Atomic Workflow 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

Workflow 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 Workflow

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!