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

Transcript

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

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

   Ϧʔμʔ

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

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

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

6. →「バズ」の変容

7. ↓2016/4/1 ↓2017/4/1

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

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

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

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

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

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

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

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

16. 事例紹介

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

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

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

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

21. その他やっていること

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

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

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

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

    ݄ʹҰ౓ɺ࢖͍͍ٕͨज़Λ ϓϥϯφʔશһͷલͰ ௚઀ϓϨθϯΛ͢Δ

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

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

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