HTMLファイ部という職能のはなし - bonfire frontend #1

by Shin Fujisawa

Slide 1

Slide 1 text

HTMLファイ部という職能のはなし ໘ന๏ਓΧϠοΫ HTMLϑΝΠ෦Ϧʔμʔ ౻ᖒ৳ / @fnobi

Slide 2

Slide 2 text

自己紹介 • ౻ᖒ৳ / @fnobi • ໘ന๏ਓΧϠοΫ डୗࣄۀ෦ • HTMLϑΝΠ෦ʢWebϑϩϯτνʔϜʣ Ϧʔμʔ

Slide 3

Slide 3 text

[1] 面白法人カヤック受託事業部

Slide 4

Slide 4 text

「どれだけバズるか」 ܝ͍͛ͯΔςʔϚ

Slide 5

Slide 5 text

όζίϯςϯπΛಘҙ෼໺ͱ͍ͯ͠Δ

Slide 6

Slide 6 text

→「バズ」の変容

Slide 7

Slide 7 text

↓2016/4/1 ↓2017/4/1

Slide 8

Slide 8 text

→「バズ」の変容 •ͨͩόζΛૂ͏͚ͩͳΒɺSNS౤ߘ༻ͷը૾ Λͭͬͨ͘Γɺهࣄॻ͍ͨ΄͏͕ૣ͍ͯ҆͘ •ೝ஌ΛͶΒ͏όζͰαΠτ੍࡞ͯ͠΋͠ΐ͏ ͕ͳ͍ •࣮ࡍΧϠοΫͰ΋ɺಈը΍SNS౤ߘͷ࢓ࣄ͕ ૿͑ͨ

Slide 9

Slide 9 text

→時代の変化 •HTMLϑΝΠ෦ɺഇ෦…ʁ

Slide 10

Slide 10 text

→「バズ」の変容 WebαΠτΛ௨ͯ͠ɺ  Ϣʔβʔͷײ৘Λ༳͞ͿΔΑ͏ͳɺ  ࢗ͞Δମݧɾ৽͍͠ମݧΛ  ͭ͘Δͱ͍͏͜ͱʹಛԽɻ

Slide 11

Slide 11 text

ΦϦδφϧίϯςϯπͷ  ϑΝϯ৺ཧΛ༳͞ͿΔ  ΋ͷͩͬͨΓ ؆୯Ͱɺ͔ͭ೤தͰ͖ ΔήʔϜମݧͩͬͨΓ

Slide 12

Slide 12 text

[2] HTMLファイ部のアプローチ

Slide 13

Slide 13 text

•受託事業部 •ディレクター •プロデューサー •プランナー •プロジェクトマネージャー •デザイナー •エンジニア •サーバーサイド •HTMLファイ部 •オルタナティ部（その他）

Slide 14

Slide 14 text

HTMLファイ部 • डୗࣄۀ෦ͰWebϑϩϯτΛ୲౰͢ΔνʔϜ • σβΠφʔνʔϜ͕ίʔσΟϯάˠʮME՝ʯˠʮHTML ϑΝΠ෦ʯͱঃʑʹઐ໳Խ͍ͯͬͨ͠ • ࠓߋHTML5Λਪͯ͠΋࣌୅஗Εײ͕͋ΔͷͰɺ࠷ۙ͸ ʮWebϑϩϯτܳਓʯͬͯࣗশ͍ͯ͠Δ

Slide 15

Slide 15 text

HTMLファイ部 Webϑϩϯτܳਓ = Webフロントで新しい体験をつくるエキスパート

Slide 16

Slide 16 text

事例紹介

Slide 17

Slide 17 text

事例紹介 Webフロント x 3Dグラフィック(WebGL) https://www.kayac.com/service/client/1557

Slide 18

Slide 18 text

事例紹介 Webフロント x マイク入力（getUserMedia） https://www.kayac.com/service/client/1579

Slide 19

Slide 19 text

事例紹介 Webフロント x AfterEffect (lottie-web) https://www.kayac.com/service/client/1529

Slide 20

Slide 20 text

アプローチ • Web(HTML5)ͰͰ͖Δ͜ͱ͕ɺεϖοΫతɾAPIతʹ޿ ͕͍ͬͯΔ࠷தͳͷͰɺผͷ෼໺Ͱ࢖ΘΕ͍ͯͨख๏Λ Ҿͬுͬͯ͘Δͱͦͷ··৽͍͠ମݧΛͭ͘Γ΍͍͢ɻ

Slide 21

Slide 21 text

その他やっていること

Slide 22

Slide 22 text

その他やっていること (1) 研究室のような部内ユニット

Slide 23

Slide 23 text

•HTMLファイ部 •プランナー・PM専攻 •演出（動画）専攻 •Web以外専攻（Unity・機械学習） 20ਓ΄Ͳ͍ΔνʔϜϝϯόʔΛײ৺ྖҬͰ3ͭʹ෼Խɾ ͦΕͧΕͷΞϯςφΛਂΊ͍ͯΔ

Slide 24

Slide 24 text

その他やっていること (2) プランナーに殴り込みに行く会

Slide 25

Slide 25 text

•受託事業部 •ディレクター •プロデューサー •プランナー •プロジェクトマネージャー •デザイナー •エンジニア •サーバーサイド •HTMLファイ部 •オルタナティ部（その他） ݄ʹҰ౓ɺ࢖͍͍ٕͨज़Λ ϓϥϯφʔશһͷલͰ ௚઀ϓϨθϯΛ͢Δ

Slide 26

Slide 26 text

࣮ࡍ٬ઌͰఏҊʹߦࣾ͘һͱWebϑϩϯτͷ࠷લઢΛ  ڞ༗ɾ࢓ࣄͱͯ͠׆༻Ͱ͖ΔՄೳੑΛߴΊΔɻ

Slide 27

Slide 27 text

まとめ • ୯ͳΔόζͷͨΊʹWebαΠτΛ࡞Δͷ͸͍·΍ίεύ ͕ѱ͍ɻೝ஌Ͱ͸ͳ͘ମݧ·Ͱࢗ͞Δ΋ͷΛ࡞Βͳ͍ͱ ҙຯ͕ͳ͍ɻ • WebͰͲΜͳମݧΛͭ͘Δ͜ͱ͕Ͱ͖Δͷ͔ɺͱ͍͏఺ʹ ͍ͪ͹Μৄ͍͠ͷ͸ΤϯδχΞࣗ਎ɻݚڀɾఏҊ͢Δମ੍ Λͭ͘Δ͜ͱͰɺݟͨ͜ͱ͕ͳ͍ମݧΛͭ͘ΕΔՄೳੑ͕ ্͕Δ͠ɺΤϯδχΞࣗ਎΋ָ͍͠ɻ

Slide 28

Slide 28 text

ありがとうございました！！！