新ツールやサービスから考える、明日からのデザインフロー

Slide 1

Slide 1 text

৽πʔϧ΍αʔϏε͔Βߟ͑Δɺ ໌೔͔ΒͷσβΠϯϑϩʔ FRONTEND CONFERENCE 2017 2017.3.18 ਂ୔޾࣏࿠

Slide 2

Slide 2 text

͜Μʹͪ͸ɺ ਂ୔޾࣏࿠Ͱ͢ ΢ΣϒαΠτɾΞϓϦ ίϫʔΩϯάεϖʔε ϑϦʔϥϯε

Slide 3

Slide 3 text

ࠓ೔͓͸ͳ͢͠Δ͜ͱ ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ νʔϜͰڞ༗͢Δࢿݯͱͯ͠ͷσβΠϯ 1 2

Slide 4

Slide 4 text

ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ Let’s start prototyping!

Slide 5

Slide 5 text

ϓϩτλΠϐϯάɺ ΍ͬͯ·͔͢ ʁ

Slide 6

Slide 6 text

άϥϑΟ οΫπʔϧͰͷ ϓϩτλΠϐϯά؀ڥ͕੔͖ͬͯͨ ͭ͘Δखؒ͸ ʮϫΠϠʔϑϨʔϜЋʯ

Slide 7

Slide 7 text

͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ

Slide 8

Slide 8 text

͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ͬ͞ͱϫΠϠʔϑϨʔϛϯά

Slide 9

Slide 9 text

͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ϦϯΫཁૉͱը໘Λͭͳ͛Δ

Slide 10

Slide 10 text

͙͢ʹϖʔδભҠ͕ ࢼͤΔ

Slide 11

Slide 11 text

ڞ༗ϘλϯͰϓϩτλΠϓΛ ଈެ։ɾڞ༗

Slide 12

Slide 12 text

σβΠϯσʔλΛϓϩτλΠϓԽ 4LFUDI*O7JTJPO

Slide 13

Slide 13 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ

Slide 14

Slide 14 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϓϩδΣΫτͳΒແྉ

Slide 15

Slide 15 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ը૾Λಡ·ͤͯϖʔδ࡞੒ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

Slide 16

Slide 16 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ๛෋ͳը໘ભҠΤϑΣΫτ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

Slide 17

Slide 17 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϥΠϒڞ༗Ͱखॻ͖ϝϞ·Ͱ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

Slide 18

Slide 18 text

*O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ 4LFUDIͱ࿈ܞ͢Δͱߋʹศར 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

Slide 19

Slide 19 text

$3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ

Slide 20

Slide 20 text

$3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ ϘλϯҰൃͰσβΠϯσʔλΛ*O7JTJPO΁ Ξοϓϩʔυɾಉظ αϯϓϧίϯςϯπͷૠೖ खॻ͖ίϝϯτ ཁૉͷϦϐʔτ σβΠϯΨΠυͷࣗಈੜ੒ʢޙड़͠·͢ʣ 1 2 3 4 5

Slide 21

Slide 21 text

ϥΫʹͳͬͨϙΠϯτ

Slide 22

Slide 22 text

ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ 1IPUPDSFEJU$IBJSNBO@.FPXWJB7JTVBMIVOU$$#:/$4"

Slide 23

Slide 23 text

ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ Ұ൪େมͳͱ͜Ζ͸ཁ๬͔ΒجຊઃܭΛ ͱΓ͋͑ͣܗʹ͢Δͱ͜ ׂ͘Β͍ͷ׬੒౓ͰݟͤΔ ͸͖ͬΓ͠ͳ͍࢓༷΋ద౰ʹԾઆཱͯͯ ͭͬͪ͘Ό͏ 1 2 3

Slide 24

Slide 24 text

1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ϛʔςΟϯάͷՁ஋͕ഒ૿

Slide 25

Slide 25 text

1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ϛʔςΟϯάͷՁ஋͕ഒ૿ ϛʔςΟϯάͷՁ஋͕ഒ૿ σβΠϯσʔλͷڞ༗͕ͱͯ΋؆୯ मਖ਼ɾࢥ͍͖ͭ΋͙͢ʹ൓ө ϛʔςΟϯάͷؒʹ͋Β͔ͨऴΘΔ ϑΟʔυόοΫରԠ σβΠϯͷաఔ͕ڞ༗͞Ε͍ͯΔͷͰ εςʔΫϗϧμʔͷೲಘײ͕ߴ͍ 1 2 3 4

Slide 26

Slide 26 text

1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ

Slide 27

Slide 27 text

1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ࣮૷ऀ͕ૣΊʹ҆৺ͯ͠ணखͰ͖Δ ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ ಈ͔ͤΔ͔ΒɺΈΜͳͰૣظʹ6*ͷΞϥ΍ ໃ६Λ͋ͿΓग़͢͜ͱ͕Ͱ͖Δ ໃ६͕ͳ͍͜ͱΛ֬ೝͰ͖ͯͨΒɺ࢓༷ʹ ٙ೦Λ๊͔ͣʹػೳ࣮૷ʹूதͰ͖Δ 1 2

Slide 28

Slide 28 text

ίϛϡχέʔγϣϯΛ׆ੑԽ͢Δ σβΠϯπʔϧΑΓ͵͖ ΄͔ʹ΋ͨ͘͞Μ͋Γ·͚͢ΕͲ

Slide 29

Slide 29 text

1SPUU άϥϑΟΧϧͰඒ͍͠6*ɾը໘ભҠਤͷࣗಈॻ͖ग़͠΋

Slide 30

Slide 30 text

'JHNB ΦϯϥΠϯͷσβΠϯπʔϧɻෳ਺ਓʹΑΔσβΠϯσʔλͷಉ࣌ฤू

Slide 31

Slide 31 text

1SJODJQMF ࡉ͔͍ΞχϝʔγϣϯΛ੍࡞Ͱ͖ΔɻϞʔγϣϯσβΠϯͷϓϩτλΠϓʹ

Slide 32

Slide 32 text

νʔϜͰڞ༗͢Δ ࢿݯͱͯ͠ͷσβΠϯ Design as a shared resource

Slide 33

Slide 33 text

4LFUDIʹΑΔ σβΠϯཁૉͷ࠶ར༻

Slide 34

Slide 34 text

γϯϘϧ ϨΠϠʔελΠϧ ςΩετελΠϧ 4LFUDIʹ͸͍͔ͭ͘ͷ σβΠϯͷ࠶ར༻๏͕͋Δ

Slide 35

Slide 35 text

৽ػೳ γϯϘϧͷωετͱΦʔόʔϥΠυ

Slide 36

Slide 36 text

γϯϘϧͷதʹγϯϘϧΛೖΕΔ -BCFM -BCFM -BCFM 8IFSFBSFZPV -BCFM -BCFM -BCFM CVUUPO CVUUPO CVUUPO CVUUPOT

Slide 37

Slide 37 text

γϯϘϧʹؚ·ΕΔςΩετΛ্ॻ͖ &WFSZXIFSF 5IFSF )FSF 8IFSFBSFZPV CVUUPOT

Slide 38

Slide 38 text

ωετ͞ΕͨγϯϘϧͷࠩ͠ସ͑ ɾ࡟আ 5IFSF )FSF 8IFSFBSFZPV CVUUPOT

Slide 39

Slide 39 text

"UPNJD%FTJHO ෼ׂෆՄೳͳࡉ͔͍ίϯϙʔωϯτʢݪࢠʣ͔Β σβΠϯ͠ɺ͜ΕΒΛ૊Έ߹Θ͍ͤͯ͘͜ͱͰϖʔδ σβΠϯΛ૊৫͍ͯ͘͠σβΠϯͷߟ͑ํ ݪࢠ "UPNT ෼ࢠ .PMFDVMFT ༗ػମ 0SHBOJTN ςϯϓϨʔτ 5FNQMBUF ϖʔδ 1BHF

Slide 40

Slide 40 text

ཁૉΛσβΠϯσʔλ্Ͱଟ૚ʹ૊৫

Slide 41

Slide 41 text

༻ҙ͞Εͨύʔπͷ૊Έ߹ΘͤͰ ৽نϖʔδσβΠϯ͕Ͱ͖Δ )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH -PSFNJQTVNEPMPSTJUBNFU DPOTFDUFUVSBEJQJTDJOHFMJU TFE EPFJVTNPEUFNQPSJODJEJEVOUVU MBCPSFFUEPMPSFNBHOBBMJRVB 6UFOJNBENJOJNWFOJBN RVJT OPTUSVEFYFSDJUBUJPOVMMBNDP -BCFM -BCFM -BCFM -BCFM -BCFM -BCFM

Slide 42

Slide 42 text

σβΠϯσʔλ͔ΒͷΨΠυੜ੒

Slide 43

Slide 43 text

$44͔Β࡞ΔελΠϧΨΠυ͸͋͘·Ͱ ࣮૷ऀʹΑΔ࣮૷๏ͷڞ༗ͷͨΊͷࢿྉ σΟϨΫλʔɾσβΠφʔ͔Β࣮૷ऀʹ ελΠϧΨΠυΛࣔͤΔɾߋ৽Ͱ͖Δ 1 2

Slide 44

Slide 44 text

$3"'5ͷϥΠϒϥϦ ελΠϧΨΠυʢTUZMFTʣϖʔ δΛࣗಈੜ੒ 4LFUDIσʔλʹؚ·ΕΔ৭ɾ ϑΥϯτɾςΩετελΠϧΛ ࣗಈͰݕग़ɾϦετΞοϓ ελΠϧΨΠυ͔ΒҰׅஔ׵ *O7JTJPO্ʹڞ༗

Slide 45

Slide 45 text

*O7JTJPO ΠϯεϖΫτϞʔυ $3"'5ͰΞοϓϩʔυͨ͠ 4LFUDIσʔλΛ*O7JTJPO্Ͱ ղੳ ֤ը໘Λϒϥ΢βͰදࣔͭ͠ ͭɺίʔσΟϯάʹ໾ཱ͍ͭΖ ͍Ζͳ৘ใ͕ࢀরͰ͖Δ Ξηοτͷॻ͖ग़͠ʹ΋ରԠ

Slide 46

Slide 46 text

σβΠϯΨΠυͰϥΫʹͳͬͨ͜ͱ ࣮૷ऀ΁ͷࢦ͕ࣔ໌շʹͳΔ 4LFUDIΛ͍࣋ͬͯͳ͍࣮૷ऀʹ΋؆୯ʹ σʔλΛৄ͘͠ݟͯ΋Β͑Δ ڞ༗͕؆୯ɻ࠷৽ͷ৘ใ͕ϘλϯҰൃͰ 1 2 3

Slide 47

Slide 47 text

࣮ࡍʹࢼͯ͠Έͯͷ՝୊ Challenges for the future

Slide 48

Slide 48 text

ϑϩʔͷ޲͖ ɾෆ޲͖͸͋Δ

Slide 49

Slide 49 text

ϑϩʔͷ޲͖ɾෆ޲͖͸͋Δ ੵۃతʹίϛϡχέʔγϣϯͰ͖Δ؀ڥ͕ ඞਢɻఆྫϛʔςΟϯάͳͲੵۃతʹ ࿩͠߹͏ػձΛ ΢ΥʔλʔϑΥʔϧࣜͷϑϩʔΛ൱ఆ͢Δ ΋ͷͰ͸ͳ͍ɻݸਓతʹ͸ΞϓϦ։ൃʹ͸ ޲͍͍ͯΔͱࢥ͏ɻ 1 2

Slide 50

Slide 50 text

ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔

Slide 51

Slide 51 text

ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔ ཧ૝ܗΛ͍ͭ·Ͱ΋௥͍ٻΊ͍ͯͯ͸ऴΘ Βͳ͍ ࡞͍ͬͯΔ΋ͷͷຊ࣭తͳՁ஋ΛݟͭΊ ΔɾίΞʹͳΔ΋ͷͱͦ͏Ͱͳ͍΋ͷΛબ ผͯ͠औࣺબ୒Λ͢Δඞཁ͕͋Δ 1 2

Slide 52

Slide 52 text

Ͳ͏ݟੵΔͷ͔

Slide 53

Slide 53 text

։ൃظؒͱҰϲ݄ʢ͋Δ͍͸Ұिؒʣ͋ͨ ΓͷඞཁύϑΥʔϚϯε͔ΒݟੵֹΛࢉఆ ͢Δඞཁ͕͋Δ ։ൃظؒɾ༧ࢉ͕͔ͭΈʹ͘͘ͳΔ͓ͦΕ ΋͋Δ 1 2 Ͳ͏ݟੵΔͷ͔

Slide 54

Slide 54 text

͍͞͝ʹ Afterword

Slide 55

Slide 55 text

·ͩ·ͩ͋Γ·͢ ϓϩτλΠϐϯάπʔϧ

Slide 56

Slide 56 text

͜ͷεϥΠυ΋࣮͸4LFUDI੡Ͱͨ͠ γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞

Slide 57

Slide 57 text

͜ͷεϥΠυ΋4LFUDI੡Ͱͨ͠ γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ʂ !XJUDI@EPLUPS