デザイナーとエンジニアの垣根を超えたフロントエンド開発

Slide 1

Slide 1 text

'PSLXFMM )5.-"11$0/'&3&/$& σβΠφʔͱΤϯδχΞͷ֞ࠜΛ௒͑ͨ ϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧͷཪଆ

Slide 2

Slide 2 text

גࣜձࣾHSPPWFTͷσβΠφʔɻ தݪැݟେ !GVNJ ΤϯδχΞͷ੒௕Λαϙʔτ͢ΔαʔϏε ʮ'PSLXFMMʯͷ։ൃʹܞΘͬͯ·͢ɻ ࣗݾ঺հ

Slide 3

Slide 3 text

ࠓճ͓࿩͢Δ಺༰ ໨࣍ શһͰਐΊΔϑϩϯτΤϯυ։ൃ 6*σβΠϯͰଥڠ͠ͳ͍

Slide 4

Slide 4 text

'PSLXFMMʹ͍ͭͯ

Slide 5

Slide 5 text

'PSLXFMMͱ͸ʁ 'PSLXFMM͸ ੒௕͠ଓ͚ΔΤϯδχΞ  Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦ IUUQTGPSLXFMMDPN

Slide 6

Slide 6 text

'PSLXFMMͱ͸ʁ 'PSLXFMM͸ ੒௕͠ଓ͚ΔΤϯδχΞ  Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦˡ3FOFXBM IUUQTGPSLXFMMDPN

Slide 7

Slide 7 text

'PSLXFMMϙʔτϑΥϦΦ͸ *5ΤϯδχΞͷͨΊͷ ੒௕ʹͭͳ͕Δ ΦʔϓϯͳϙʔτϑΥϦΦ Λ໨ࢦͯ͠࡞Γ·ͨ͠ɻ ʢ͋Γͦ͏Ͱҙ֎ͱͳ͍ʣ 'PSLXFMMͱ͸ʁ

Slide 8

Slide 8 text

*5ΤϯδχΞͷͨΊͷΦʔϓϯͳϙʔτϑΥϦΦ ɾࣗݾ঺հαΠτͱͯ͠ʢษڧձɺస৬ʣ ɾଞਓͱൺֱʢଞͷਓ͸ͲΜͳײ͡ʁʣ ɾࠓޙͳΓ͍ͨ࢟Λߟ͑Δʢ্࢘ͱͷPOʣ ࠓޙ΋༷ʑͳػೳΛ௥Ճ͍͖ͯ͠·͢ʂ 'PSLXFMMͱ͸ʁ

Slide 9

Slide 9 text

6*։ൃ΋खΛൈ͚ͳ͍ɻ ΑΓଟ͘ͷ*5ΤϯδχΞʹ ࢖ͬͯ΋Β͏ͨΊɺ

Slide 10

Slide 10 text

ࠓճͷϦχϡʔΞϧʹ͋ͨͬͯɺ ͲͷΑ͏ʹνʔϜશମͰ6*։ൃʹऔΓ૊Μͩͷ͔ ͓࿩͍͖ͤͯͨͩ͞·͢ɻ ͳʹ͔গ͠Ͱ΋ࢀߟʹͳΔ৘ใ͕͋Ε͹޾͍Ͱ͢ʜ

Slide 11

Slide 11 text

̍શһͰਐΊΔϑϩϯτΤϯυ։ൃ

Slide 12

Slide 12 text

'PSLXFMM։ൃνʔϜ ޾͔ෆ޾͔ ։ൃϝϯόʔશһ͕+BWB4DSJQUΛ ॻ͘νʔϜ

Slide 13

Slide 13 text

'PSLXFMM։ൃνʔϜ ΤϯδχΞ໊ σβΠφʔ໊ "ϓϩμΫτϚωʔδϟʔͱ։ൃΛ݉ͶΔϝΨω #ύϑΥʔϚϯεվળʹ໨Λ഑ΔϝΨω ϝϯόʔ঺հʢࡶʣ $Πϯϑϥ΋ϑϩϯτΤϯυ΋͜ͳ͢ϝΨω  %σβΠϯˍϑϩϯτΤϯυʹ΋ৄ͍͠ϝΨω &ࢲɻ6*σβΠϯˍ࣮૷ΛϝΠϯͰ୲౰͢ΔϝΨω

Slide 14

Slide 14 text

Ͳ͏΍ͬͯ΍͍ͬͯΔͷ͔ʁ ϝϦοτ͸ʁ શһͰϑϩϯτΤϯυ։ൃ

Slide 15

Slide 15 text

ϑϩϯτΤϯυʹҰ൪ৄ͍͠σβΠφʔʢ%͞Μʣ͕ ཰ઌͯ͠؀ڥΛ੔͑ͨ  શһͰϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧϓϩδΣΫτҎલͷऔΓ૊Έ

Slide 16

Slide 16 text

'PSLXFMMελΠϧΨΠυͷ࡞੒ 3BJMTΞϓϦέʔγϣϯͰͷ؀ڥߏங ։ൃʹඞཁͳϥΠϒϥϦΛ࡞੒ˠ )BNM 4"44 3FBDUʹΑΔελΠϧΨΠυͰ6*࣮૷ͷޮ཰Խ ΤϯδχΞͱڠྗ͠ͳ͕ΒߏஙΛ͢͢Ίͨ &4 #BCFM 8FCQBDL 8FCQBDLFS 3FBDU 3FBDU3BJMT .PDIB &O[ZNF શһͰϑϩϯτΤϯυ։ൃ %͞Μ ੵۃతʹ৘ใڞ༗ɺஸೡʹϨϏϡʔ

Slide 17

Slide 17 text

3FEVY͕ΦʔόʔεϖοΫͳͷͰ ίϯϙʔωϯτ୯ҐͰ4UBUF؅ཧͰ͖ΔίϯϙʔωϯτΛ࡞੒ શһͰϑϩϯτΤϯυ։ൃ

Slide 18

Slide 18 text

શһͰϑϩϯτΤϯυ։ൃ શһ͕ܞΘΔ͜ͱͷڧΈ ྫʣࣗಈੜ੒ϓϩϑΟʔϧͷ දࣔίϯϙʔωϯτ࡞੒ͷྲྀΕ

Slide 19

Slide 19 text

ԾσʔλͰࢲʢσβΠφʔʣ͕ϕʔεͱͳΔ3FBDUίϯϙʔωϯτΛ࡞੒ ɹˠઃܭͨ͠ਓ͕·ͣݟͨ໨Λ࡞ͬͯ͠·͏ શһͰϑϩϯτΤϯυ։ൃ ίϯϙʔωϯτ࣮૷ͷྲྀΕ ΤϯδχΞ͕αʔόʔαΠυ͔ΒσʔλΛ౉͢ ɹˍදࣔ಺༰Λ૊ΈཱͯΔ෦෼Λ࣮૷ ϑϩϯτΤϯυಘҙͳσβΠφʔΛத৺ʹ ɹϝϯόʔΈΜͳͰϨϏϡʔ

Slide 20

Slide 20 text

શһͰϑϩϯτΤϯυ։ൃ શһ͕ϑϩϯτΤϯυ΁ͷཧղΛ͓࣋ͬͯ͘͜ͱͰ ͦΕͧΕͷڧΈΛ׆͔ͯ͠ޮ཰తͳ6*։ൃ͕Ͱ͖Δ 'SPOUFOE 6*%FTJHO 4FSWFS4JEF

Slide 21

Slide 21 text

ɾͦͷࣄฑʹੵۃతͳϦʔμʔ ·ͱΊͦͷ ɾҰॹʹऔΓ૊ΜͰ͘ΕΔϑΥϩϫʔ ΍Γ͍ͨਓ͕Ի಄ΛͱΔͱεϜʔζɻ੹೚͸νʔϜͰͱΔɻ  ϑΥϩϫʔ͕͍ͳ͍ͱػೳɾλεΫ͕ଐਓԽ͢Δɻ ΈΜͳ͕ੵۃతͰͳͯ͘΋͍͍ɺಋೖ΁ͷ߹ҙ͕ඞཁɻ શһͰϑϩϯτΤϯυ։ൃ ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ

Slide 22

Slide 22 text

ɾຎࡲ͕ੜ͡ʹ͍͘ ·ͱΊͦͷ ɾαʔϏεઃܭͷٞ࿦͕ਂ·Δ ڞ௨ཧղ͕͋ΔͨΊɺ͍ΘΏΔσβΠφʔΤϯδχΞରཱͷΑ͏ͳ ໰୊͕ൃੜ͠ʹ͍͘ 6*࣮૷ʹશһ͕ؔΘΔ͜ͱͰɺαʔϏεઃܭʢ69ʣͷٞ࿦͕ਂ·Δ ͔ͭ۩ମతͳ࣮૷ઃܭ·Ͱ͢͹΍͘མͱ͠ࠐΉ͜ͱ͕Ͱ͖Δ શһͰϑϩϯτΤϯυ։ൃ αʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢

Slide 23

Slide 23 text

6*σβΠϯͰଥڠ͠ͳ͍

Slide 24

Slide 24 text

ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ 6*Ͱଥڠ͠ͳ͍͜ͱ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ

Slide 25

Slide 25 text

ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ʁ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 26

Slide 26 text

ʺ ଥڠͷͳ͍σβΠϯ ׬ᘳͳσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 27

Slide 27 text

ʹ ଥڠͷͳ͍σβΠϯ Ձ஋ݕূ͕Ͱ͖Δ ϨϕϧͷσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 28

Slide 28 text

ʮͱʹ͔͘ૣ͘ϦϦʔεͯ͠ɺϢʔβʔͷ൓ԠΛΈΑ͏ʯ 6*Ͱଥڠ͠ͳ͍͜ͱ աڈͷࢲୡ Ͱ͖Δͱ͜·ͰɺͰϦϦʔε

Slide 29

Slide 29 text

ͲͪΒ͔൑அͰ͖ͳ͍ʜ ˣ Ձ஋ݕূ͕Ͱ͖ͳ͍ʂ ࢥͬͨΑ͏ͳ൓Ԡ͕ͳ͔ͬͨ৔߹ʜ "ఏڙͨ͠ػೳʹ Ձ஋Λײͯ͡΋Β͑ͳ͔ͬͨɻ #6*͕࢖͍ͮΒ͍ͨΊɺՁ஋͕ Ϣʔβʔʹ఻ΘΒͳ͔ͬͨɻ PS 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 30

Slide 30 text

࠷খػೳ͕໰୊ͳ͘࢖͑ΔϨϕϧͷ6*ʢ.71ʣͱ͸ɺ ɾϓϩϑΟʔϧΛ҆৺ͯ͠ΈΜͳʹެ։Ͱ͖Δ ɾ(JU)VC΍ϒϩά΍εϥΠυαʔϏεͱ࿈ܞͯ͠ΞϐʔϧͰ͖Δ ৽نϢʔβʔ͕͜ͷػೳΛ໰୊ͳ͘࢖͑Δ͜ͱɺͦ͜͸ଥڠ͠ͳ͍ɻ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 31

Slide 31 text

ͱ͸͍͑࣌ؒʹ੍ݶ΋͋ΔʜՁ஋͕Ϣʔβʔʹಧ͘͜ͱ͕ୈҰ ɾຊ౰͸"KBYͰߋ৽͍͚ͨ͠Ͳɺී௨ͷTVCNJUͰՁ஋͸ఏڙͰ͖Δ ɾਤ΍ΞχϝʔγϣϯΛ࢖ͬͯઆ໌͍͚ͨ͠ͲɺςΩετͰ΋఻ΘΔ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 32

Slide 32 text

#FGPSFɿʮͰ͖Δ͜ͱʯʮͦͷͨΊʹ͢Δ͜ͱʯ͕Θ͔Βͳ͍ʜ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 33

Slide 33 text

6*Ͱଥڠ͠ͳ͍͜ͱ /PXɿΘ͔Γ΍͘͢͸ͳ͍ɺͨͩ͠ʮͰ͖Δ͜ͱʯʮͦͷϝϦοτʯ͸ඞͣ఻͑Δ

Slide 34

Slide 34 text

ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾσβΠφʔ͔ΒͷϨϏϡʔ Θ͔Γ΍͢͞ɾ఻ΘΓ΍͢͞ɺσβΠϯͷόϥϯεʢݟͨ໨ʣ ɾΤϯδχΞ͔ΒͷϨϏϡʔ λʔήοτͱͯ͠ͷࢹ఺ɺ࣮૷͠΍͢͞ɺψέϞϨͷνΣοΫ

Slide 35

Slide 35 text

ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾޮ཰తˍޮՌͷ͋ΔϨϏϡʔํ๏Λ୳Δ 6*σβΠϯҊΛݟͳ͕ΒͷϨϏϡʔձ πʔϧΛ࢖ͬͨඇಉظϨϏϡʔʢྫɿ*O7JTJPOʣ ࣮૷ͪ͠Όͬͯ(JU)VC্ͰίʔυˍσβΠϯϨϏϡʔ υοάϑʔσΟϯάձ

Slide 36

Slide 36 text

ɾϨϏϡϫʔͷ৺ߏ͑ ଥڠ͠ͳ͍ͨΊʹͦͷ ϨϏϡʔΛؾܰʹґཔͰ͖Δۭؾͮ͘Γ ୲౰ऀ΁ͷϦεϖΫτɻ࡞ͬͨਓ΁ͷܟҙɻ ࢦఠͰ͸ͳ͘ఏҊͬͯߟ͑Δͷྑ͘ͳ͍Ͱ͔͢ʁ ɾϨϏϡΠʔͷ৺ߏ͑ ϨϏϡʔͱ͸ਓͰ͸ͳ͘Ξ΢τϓοτʹରͯ͠ͷ΋ͷ ֆจࣈͷྑ͞ ͓͢͢Ίຊɿ ΈΜͳͰ͸͡ΊΔσβΠϯ൷ධ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 37

Slide 37 text

ɾσβΠφʔ͕࣮૷·Ͱ୲౰͢Δ৔߹ʢࠓճͷࢲʣ ଥڠ͠ͳ͍ͨΊʹ͓·͚ σβΠϯϞοΫΞοϓ͸Ͳ͜·Ͱ࡞ΓࠐΉͷ͔ʁ ࢲ͸࣮૷·Ͱ୲౰͢ΔͷͰɺਖ਼ৗܥʢجຊύλʔϯʣ͕Ͱ͖͍ͯΕ͹ ͋ͱ͸࣮૷ͰΧόʔ͢Δ৔߹͕ଟ͍ ΞχϝʔγϣϯͳΜ͔΋ίϝϯτͰදݱ͢ΔͷΈ ɾσβΠφʔ͕࣮૷ʹ͔͔ΘΒͳ͍৔߹ ༷ʑͳঢ়گͷϞοΫΞοϓΛ࡞͓ͬͯ͘ඞཁ͕͋Γͦ͏ ϓϩτλΠϓͷ࡞੒΍ৄࡉͳࢿྉʢ;FQMJO౳ʣΛར༻͢Δ΄͏͕͍͍৔߹΋ 6*Ͱଥڠ͠ͳ͍͜ͱ

Slide 38

Slide 38 text

ଥڠ͠ͳ͍ࣄͷҙຯ΍ํ๏͸ͳΜͱͳ͘Θ͔͚ͬͨͲʜ 6*Ͱଥڠ͠ͳ͍͜ͱ σβΠϯ൑அͬͯ೉͘͠Ͷʁʂʁʁ ҙݟͷ૬ҧɺͲ͜·Ͱ͕ଥڠͳͷ͔ʁɺͳͲͳͲ Α࣭͘໰͞ΕΔ͜ͱ

Slide 39

Slide 39 text

ɾσβΠϯ͸σβΠφʔ͕੹೚Λ࣋ͭ ·ͱΊ σβΠϯʢ6*ʣΛ࡞Δͷ͕σβΠφʔͰ͸ͳ͍ɻ ੈʹग़͢Ξ΢τϓοτʹ੹೚Λ࣋ͭͷ͕ओͳ໾ׂɻ ҆৺͍ͯͩ͘͠͞ɺͦͷͨΊʹσβΠφʔ͕͍·͢Α 6*Ͱଥڠ͠ͳ͍͜ͱ %#ઃܭ΍ΠϯϑϥʹΤϯδχΞ͕ࡋྔΛ࣋ͭͷͱಉ͡ɻ σβΠϯʹ͍ͭͯ͸σβΠφʔʹ͓೚͍ͤͩ͘͞ɻ

Slide 40

Slide 40 text

શһͰਐΊΔϑϩϯτΤϯυ։ൃ ࠓ೔ͷ·ͱΊ ɾ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ 6*Ͱଥڠ͠ͳ͍͜ͱ 6*σβΠϯͰଥڠ͠ͳ͍ ɾαʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢ ɾՁ஋ݕূ͕Ͱ͖ΔϨϕϧ·Ͱଥڠ͠ͳ͍ ɾઐ໳ՈͰ͋ΔσβΠφʔΛத৺ʹ

Slide 41

Slide 41 text

ࠓޙ΋νʔϜͷΈΜͳͰվળΛਐΊ͍͖ͯ·͢ɻ ΋͠͝ҙݟͳͲ͋Γ·ͨ͠Β 'PSLXFMMϖʔδ΁ͷ͓໰͍߹Θͤ΍ 5XJUUFSͳͲͰ͝࿈བྷ͍͚ͨͩΔͱخ͍͠Ͱ͢ʂ ࠷ޙʹ IUUQTQPSUGPMJPGPSLXFMMDPN IUUQTUXJUUFSDPN'PSLXFMM@KB

Slide 42

Slide 42 text

͓ΘΓ