Tweet
Tweet

Slide 1

Slide 1 text

Atomic Design σβΠϯͱ࣮૷ͷڱؒ ੁݪ ޹ଇ VueFesJapan 2018

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

17೥͘Β͍σβΠφʔͱΤϯδχΞΛ
 ߦͬͨΓདྷͨΓͯ͠·͢ɻ ΠϯλϥΫγϣϯͱ σʔλϏδϡΞϥΠζ ͕ಘҙͰ͢

Slide 4

Slide 4 text

Interaction Designer UX Design UI Design Design System Management

Slide 5

Slide 5 text

Technical advisor ख͕଍Γͳ͍ॴͷϑΥϩʔ

Slide 6

Slide 6 text

Έͳ͞Μ ίϯϙʔωϯτ ࡞ͬͯ·͢ΑͶɻ

Slide 7

Slide 7 text

Atomic Design͸
 σβΠφʔͱΤϯδχΞʹಉ͡໨ ઢΛ༩͑·ͨ͠

Slide 8

Slide 8 text

σβΠφʔͱ ΤϯδχΞ ෼͔Γ߹͑ͯ·͔͢ʁ

Slide 9

Slide 9 text

ίϯϙʔωϯτͷ ෼͚ํͳΜ͔ҧ͏ͳʔ ͱ͔ࢥ͍·ͤΜ͔ʁ

Slide 10

Slide 10 text

ͦΓΌҧ͏ΜͰ͢

Slide 11

Slide 11 text

ͱ͍͏Θ͚Ͱઌि ΞϯέʔτͱͬͯΈ·ͨ͠ɻ

Slide 12

Slide 12 text

24໊ͷํʹճ౴͍ͨͩ ͖·ͨ͠ɻ

Slide 13

Slide 13 text

৬छ ͷ΂ਓ਺

Slide 14

Slide 14 text

ίϯϙʔωϯτʹؔΘΔ ਓ਺ن໛

Slide 15

Slide 15 text

ྖҬ

Slide 16

Slide 16 text

ར༻͍ͯ͠ΔσβΠϯπʔϧ FigmaϢʔβʔάϧʔϓʹڠྗΛ௖͍ͨͷͰ ͪΐͬͱόΠΞε͔͔ͬͯΔ͔΋

Slide 17

Slide 17 text

෼཭ σβΠϯ͸ϥϑ·Ͱ ίʔυ্Ͱ࢓্͛Δ ελΠϦϯάͱԋग़ ʹؔΘΔίʔυ͸ σβΠφʔ͕ॻ͘ σβΠϯ͕׬͔ྃͯ͠Β ΤϯδχΞ͕ίʔυΛॻ͘ σβΠϯ͔Βίʔυ·Ͱ ҰਓͰ΍Δ ີ σβΠφʔͱσΟϨΫλʔͰ ਺ࣈΛݟͯͲ͜Λ վળ͢Δ͔ܾΊ͍ͯΔ ϓϩτλΠϓΛ࡞͔ͬͯΒ ΤϯδχΞʹڞ༗ ϓϩηε

Slide 18

Slide 18 text

ίϯϙʔωϯτϕʔεͷར఺ σβΠϯ໨ઢ σβΠϯͷϧʔϧ͕໌֬Խ͠ ଐਓੑʹΑΒͳ͍σβΠϯ͕ՄೳʹͳΔ ΧϥʔελΠϧͳͲʹઆ໌จΛॻ͘ͱ ϧʔϧΛकΓͳ͕ΒσβΠϯ͠΍͍͢ ࠶ར༻͠΍͍ͨ͢ΊɺσβΠϯ޻਺͕ݮΒͤΔ ݟͨ໨ͷʮσβΠϯʯͰ͸ͳ͘ɺ ϧʔϧͱͯ͠ͷʮσβΠϯʯΛ
 ͭ͘Δͱ͍͏ҙ͕ࣝࣗવͱժੜ͑Δ Ұ෦௚͢ͱ͢΂ͯ௚Δ఺ ίϛϡχέʔγϣϯίετ͕ݮΔ ਖ਼͍͠σβΠϯʹ͍ͭͯͷڞ௨ཧղΛ࣋ͪ΍ ͍͢఺ શମͷ౷ҰײɺҰ؏ੑΛҡ࣋͠΍͍͢ ΤϯδχΞ໨ઢ ΤϯδχΞͰ΋͍ܰσβΠϯ͸Ͱ͖ΔΑ͏ʹͳΓ ͦ͏ XD, Sketchͷ࡞ΓࠐΈ͸࠷ऴ੒Ռ෺ʹ ͳΒͳ͍͜ͱ͕ٯઆతͳར఺ scoped cssͰBEMֶशίετ͕ա৒౤ࢿʹͳͬͨ StorybookΛར༻ͯ͠ ݟͨ໨ͷ֬ೝ͕Ͱ͖Δ σβΠϯͷஈ֊͔Β࠶ར༻ੑΛߟ͑ͨUIઃܭΛ͢ Δ͜ͱͰɺ CSSͳͲ࣮૷ͷ౎߹͕ࣗવͱߟྀ͞ΕΔ ΧϓηϧԽʹΑΓɺ௿εΩϧͷΤϯδχΞɾσβ Πφʔ΋ίΞͷίʔυʹ৮Εͣʹ։ൃʹίϛοτ

Slide 19

Slide 19 text

ίϯϙʔωϯτϕʔεͷ೉఺ σβΠϯ໨ઢ ϏδϡΞϧͷࣗ༝౓͕Լ͕Δ ֶशίετ͕͔͔Δ σβΠϯͷཻ౓ͱػೳͷཻ౓Λἧ͑ͯίϯϙʔ ωϯτઃܭΛߦΘͳ͚Ε͹ɺ ίϯϙʔωϯτͷछྨ͕૿͍͖͑ͯɺιʔε ίʔυʹѱӨڹ͕ͰΔ ίϯϙʔωϯτԽ͢Δج४ʹෆ͕҆͋Δ
 (1Օॴ͔͠࢖ͬͯͳ͍ͷʹίϯϙʔωϯτԽ ͢Δͷʁ) ΤϯδχΞ໨ઢ UIతͳίϯϙʔωϯτͱɺσʔλϑϩʔతͳ ίϯϙʔωϯτͷ෼͚ํ͕ҟͳΔ͜ͱ͕͋Δ σβΠφʔ΋atomicdesignͷ֓೦Λ஌ͬͯ໯͏ ඞཁ͕͋Δ ֶशίετ͕͔͔Δ ࡉ͔͗͢Δͱ؅ཧ͠ਏ͍ σβΠφʔͱΤϯδχΞͰίϯϙʔωϯτͷ ཻ౓ͷ؍఺͕ҧ͏ ཻ౓Λ෼͚Δ͜ͱͰίϯϙʔωϯτ͕૿͑ͯ ໘౗ σβΠϯͱ࣮૷ऀཻ͕౓ͷೝ͕ࣝҟͳ͍ͬͯ Δͱӡ༻Ͱ͖ͳ͍

Slide 20

Slide 20 text

ΤϯδχΞɾσβΠφʔͱͷ ΍ΓऔΓͰͲΜͳࣄ͕ى͍ͬͯ͜Δ͔ʁ ίϯϙʔωϯτ͕ग़ἧͬͯ͘Δͱɺίϯϙʔωϯτͷ࿩ΑΓ໰୊੔ཧ΍APIͷઃܭɺ࢖͍΍͢͞ʹ͍ͭͯ࿩ͯ͠ ͍·͢ɻ ࣮૷ͱσβΠϯʹဃ཭͕͋Δ ίϯϙʔωϯτͷඞཁੑΛσβΠφʔ͕ཧղ͠ͳ͍ ݁ہσβΠϯΛݩʹΤϯδχΞ͕ίϯϙʔωϯτԽ͍ͯ͠Δ ΤϯδχΞ͕BEMΛอक͢Δ͜ͱʹർΕ͍ͯΔɻ ίϯϙʔωϯτΨΠυతͳ෺͕ͳ͍ͱίϯϙʔωϯτ͕ར༻͞Εͳ͍ ίϯϙʔωϯτΛར༻͢ΔΑ͏ʹͳΓɺσβΠφʔಉ࢜Ͱͷ΍ΓऔΓ͕೉͘͠ͳ͕ͬͨɺΤϯδχΞͱͷ΍Γͱ Γ͸ָʹͳͬͨ ࣮૷Λ஌Βͳ͍σβΠφʔʹͱͬͯ͸ɺӢΛ͔ͭΉΑ͏ͳ࿩ʹฉ͑͜Δ෦෼͕͋ΔΑ͏ͰɺͦΕΛཧղͤ͞Δʹ ۤ࿑͍ͯ͠Δɻ

Slide 21

Slide 21 text

஌ࣝͷ෼அ͕େ͖͍

Slide 22

Slide 22 text

େࣄʹ͍ͯ͠Δ ࣄฑ͕ҧ͏

Slide 23

Slide 23 text

·ͣ͸ɺσβΠφʔ͕΍ͬͯ ͍ΔࣄΛ੔ཧͯ͠Έ·͠ΐ͏ɻ

Slide 24

Slide 24 text

UXσβΠϯ ୭͕Ϣʔβʔ͔ΛఆΊΔ
 ͲΜͳ΋ͷΛ࡞ͬͨΒϢʔβʔ͕تͿ͔ߟ͑Δ
 ෼ੳͯ͠ɺϓϩτλΠϓ࡞ͬͯɺ
 ϢʔβʔʹͿ͚ͭͨΓͱ͔ͯ͠Ձ஋ݕূΛߦ͏

Slide 25

Slide 25 text

UIσβΠϯ UXσβΠϯͰಋ͍ͨՁ஋ʹରͯ͠ܗΛ༩͑Δɻ
 Ձ஋ΛϢʔβʔʹಧ͖΍͍͢ܗʹ͢Δ͜ͱ͕੹຿

Slide 26

Slide 26 text

σβΠϯ৭ʑ CI(ίʔϙʔϨʔτΞΠσϯςΟςΟ)΍
 ࣄۀઓུΛ΋ͱʹίϯηϓτΛ࿅ͬͨΓɻ
 ͔ΒͷUIΛׂΓग़ͨ͠Γɺ
 PR༻ͷαΠτͷσβΠϯͨ͠Γ

Slide 27

Slide 27 text

΋ͬͱ ৭Μͳ࢓ࣄ͕͋Δ

Slide 28

Slide 28 text

ޮ཰Խ͸͍͕ͨ͠ ΋ͬͱ΋େࣄͳͷ͸ɺ Ϣʔβʔͷ൓Ԡ

Slide 29

Slide 29 text

៉ྷͳߏ଄Λ࡞Δࣄ͸ େࣄ͚ͩͲ̍൪͡Όͳ͍

Slide 30

Slide 30 text

͍͍ͩͨ͜Μͳײ͡

Slide 31

Slide 31 text

Atomic DesignͳΒ ͦ͜Μͱ͜Ͳ͏ʹ͔ͳΔΜ͡Όʹ ͷʁ

Slide 32

Slide 32 text

ͳΒͳ͍Ͱ͢ɻ

Slide 33

Slide 33 text

͔֬ʹUIͷ෦඼ͷઃܭ͸ ڞ௨ԽͰ͖Δ

Slide 34

Slide 34 text

ίϯϙʔωϯτ͸ͦ΋ͦ΋ ΤϯδχΞϦϯάͷ֓೦

Slide 35

Slide 35 text

σβΠφʔ͸Ձ஋ʹ ܗঢ়Λ༩͑ ΤϯδχΞ͸ܗঢ়Λ࣮ݱ͢Δ

Slide 36

Slide 36 text

σβΠφʔʹͱͬͯࠓ·Ͱͦ ͜·Ͱؔ৺ࣄͰ͸ͳ͔ͬͨ

Slide 37

Slide 37 text

ͱ͸ݴͬͯ΋αʔϏε͸ ӡ༻Λଓ͚Δ͜ͱ΋ େࣄͳՁ஋

Slide 38

Slide 38 text

ͪΐͬͱ࿦఺ม͑·͢

Slide 39

Slide 39 text

࿩͸ඈΜͰ 20೥͘Β͍લ

Slide 40

Slide 40 text

Java

Slide 41

Slide 41 text

ΦϒδΣΫτࢦ޲ vs ߏ଄Խࢦ޲

Slide 42

Slide 42 text

ઃܭΛඪ४Խ͢Δख๏

Slide 43

Slide 43 text

ΤϯδχΞಉ࢜Ͱ΋ ΍ͬͯ·ͨ͠

Slide 44

Slide 44 text

஗͍ͱ͔೉͍͠ͱ͔ݴΘΕͯ ͍ͨJava͕ݱࡏͰ͸౰ͨΓલ ʹͳΓ·ͨ͠ɻ

Slide 45

Slide 45 text

ཧ༝

Slide 46

Slide 46 text

ΈΜͳ׳Εͨ

Slide 47

Slide 47 text

࣮ߦ؀ڥͷੑೳ্͕͕Γ ෋߽తϓϩάϥϛϯάͰ ໰୊ͳ͘ͳͬͨ

Slide 48

Slide 48 text

σβΠϯπʔϧʹ ͦ͏͍͏ࣄ͕ ى͍ͬͯ͜Δ

Slide 49

Slide 49 text

਺೥લ·Ͱɺίϯϙʔωϯτࢥߟͷσβ Πϯπʔϧ͸͋·Γྲྀߦ͓ͬͯΒͣɺ ίϯϙʔωϯτػೳͷͳ͍PhotoShopͰ Ұੜݒ໋σβΠϯ͍ͯͨ͠ͷͰ͢ɻ

Slide 50

Slide 50 text

׳Εͯͳ͍ΜͰ͢

Slide 51

Slide 51 text

Sketch͸σβΠφʔʹ ͱͬͯͷJava

Slide 52

Slide 52 text

Sketch
 vs
 PhotoShop

Slide 53

Slide 53 text

खஈ͕ਐԽͨ͠ͷͰ ख๏΋มΘΔ

Slide 54

Slide 54 text

खஈ͕ਐԽͨ͠ͷͰ ख๏΋มΘΔ

Slide 55

Slide 55 text

·ͩ·ͩ πʔϧͷαϙʔτ͕଍Γͳ͍

Slide 56

Slide 56 text

͕࣌ؒղܾ͢Δ͜ͱ΋ ݁ߏ͋Γͦ͏Ͱ͸͋Δ

Slide 57

Slide 57 text

͞ΒʹAtomicDesign ͳΜͯݴͬͨΒ

Slide 58

Slide 58 text

C͔͠ॻ͍ͨ͜ͱͷͳ͍ਓʹ
 JavaͷSpringBootͰΞϓϦॻ͚ ͱཁٻ͍ͯ͠ΔΑ͏ͳ΋ͷͱ͝ཧղ͍ͩ͘͞ɻ

Slide 59

Slide 59 text

ͱ͸ݴ͑ͳΜͱ͔͍ͨ͠

Slide 60

Slide 60 text

ͿͬͪΌ͚ɺ׳Εͯͳ͍ίϯϙʔ ωϯτ࡞Γ·Ͱ಄ճΓ·ͤΜ

Slide 61

Slide 61 text

ΤϯδχΞͱ͍͏ ੜ͖෺͸ ߹ཧԽͷԽ਎

Slide 62

Slide 62 text

Ͳ͏ʹ͔ͯ͠ ߹ཧԽ͍ͨ͠

Slide 63

Slide 63 text

σβΠφʔ͸ ΤϯδχΞͰ͸ͳ͍

Slide 64

Slide 64 text

σβΠφʔ͸ΫϦΤΠςΟϒʹूதͯ͠ ϢʔβʔʹΘ͒ͱݴΘ͍ͤͨ͠ ΤϯδχΞ͸៉ྷͳߏ଄Λ ࡞ͬͯอकίετΛԼ͍͛ͨ

Slide 65

Slide 65 text

ͦ΋ͦ΋৬੹͕ҧ͏ ͦΜͳ͜ͱͯ͠ΔͳΒ ΋ͬͱྑ͍ϓϩμΫτΛ σβΠϯͯ͠΄͍͠

Slide 66

Slide 66 text

ͱ͸ݴ͑
 ϑϩϯτΤϯυͷۤ͠Έ͸্ྲྀ͔ Βม͍͔͑ͯͳ͚Ε͹վળ͠ͳ͍

Slide 67

Slide 67 text

ΜͰͲ͏͢Ε͹ྑ͍ͷ͞

Slide 68

Slide 68 text

ӡ༻ͰΧόʔ

Slide 69

Slide 69 text

ͦ͜Ͱஸ౓͍͍ ֓೦͕͋Γ·͢

Slide 70

Slide 70 text

Design Ops

Slide 71

Slide 71 text

“https://www.designbetter.co/designops-handbook/introducing-designops"

Slide 72

Slide 72 text

σβΠφʔࣗ෼ͷ ৬ೳʹઐ೦͠΍͍͢ ঢ়گΛ࡞Δ

Slide 73

Slide 73 text

σβΠϯϓϩηεΛ αϙʔτ͢Δ࢓૊Έ ૊৫Λ࡞Δ

Slide 74

Slide 74 text

ྫ͑͹

Slide 75

Slide 75 text

ΤϯδχΞ͕σβΠϯπʔϧΛ ֮͑ɺίϯϙʔωϯτԽͷखຊ Λࣔ͢

Slide 76

Slide 76 text

σβΠϯΛαϙʔτ͢ΔΤϯ δχΞϦϯάͰ͖·ͤΜ͔ʁ

Slide 77

Slide 77 text

Ktsn͞Μͷπʔϧͷख఻ ͍͢Δͱ͔

Slide 78

Slide 78 text

σβΠϯπʔϧ͔Β ΞΠίϯΛࣗಈੜ੒ Ͱ͖ΔΑ͏ʹ͢Δͱ͔

Slide 79

Slide 79 text

σβΠφʔͷԣʹ͍ͭͯ ίϯϙʔωϯτͷ ࣸܦ͠ଓ͚Δͱ͔

Slide 80

Slide 80 text

ϓϩηεΛ Ͳ͏ʹ͔͢Δͱ͔

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

ख๏͸ΈΜͳख୳Γ

Slide 84

Slide 84 text

σβΠφʔ͕΍Δ΂͖࢓ࣄʹઐ ೦ͤͯ͋͛͞ΕΔঢ়گΛ࡞Γ· ͠ΐ͏

Slide 85

Slide 85 text

ΤϯδχΞϦϯάͰαϙʔτ Ͱ͖Δࣄ͸͍ͬͺ͍͋Δ͸ͣ

Slide 86

Slide 86 text

Vue.js࢖͍ͷօ͞Μ ͋ͳͨʹ͸ྗ͕͋Δʂ

Slide 87

Slide 87 text

σβΠφʔΛٹ͓͏ʂ

Slide 88

Slide 88 text

͋Γ͕ͱ͏͍͟͝·ͨ͠