$30 off During Our Annual Pro Sale. View Details »

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

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

Shin Fujisawa

March 26, 2018
Tweet

Other Decks in Technology

Transcript

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

    ౻ᖒ৳ / @fnobi

    View Slide

  2. 自己紹介
    • ౻ᖒ৳ / @fnobi

    • ໘ന๏ਓΧϠοΫ डୗࣄۀ෦

    • HTMLϑΝΠ෦ʢWebϑϩϯτνʔϜʣ
    Ϧʔμʔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. →「バズ」の変容

    View Slide

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

    View Slide

  8. →「バズ」の変容
    •ͨͩόζΛૂ͏͚ͩͳΒɺSNS౤ߘ༻ͷը૾
    Λͭͬͨ͘Γɺهࣄॻ͍ͨ΄͏͕ૣ͍ͯ҆͘

    •ೝ஌ΛͶΒ͏όζͰαΠτ੍࡞ͯ͠΋͠ΐ͏
    ͕ͳ͍

    •࣮ࡍΧϠοΫͰ΋ɺಈը΍SNS౤ߘͷ࢓ࣄ͕
    ૿͑ͨ

    View Slide

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

    View Slide

  10. →「バズ」の変容
    WebαΠτΛ௨ͯ͠ɺ

    Ϣʔβʔͷײ৘Λ༳͞ͿΔΑ͏ͳɺ

    ࢗ͞Δମݧɾ৽͍͠ମݧΛ

    ͭ͘Δͱ͍͏͜ͱʹಛԽɻ

    View Slide

  11. ΦϦδφϧίϯςϯπͷ

    ϑΝϯ৺ཧΛ༳͞ͿΔ

    ΋ͷͩͬͨΓ
    ؆୯Ͱɺ͔ͭ೤தͰ͖
    ΔήʔϜମݧͩͬͨΓ

    View Slide

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

    View Slide

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

    View Slide

  14. HTMLファイ部
    • डୗࣄۀ෦ͰWebϑϩϯτΛ୲౰͢ΔνʔϜ

    • σβΠφʔνʔϜ͕ίʔσΟϯάˠʮME՝ʯˠʮHTML
    ϑΝΠ෦ʯͱঃʑʹઐ໳Խ͍ͯͬͨ͠

    • ࠓߋHTML5Λਪͯ͠΋࣌୅஗Εײ͕͋ΔͷͰɺ࠷ۙ͸
    ʮWebϑϩϯτܳਓʯͬͯࣗশ͍ͯ͠Δ

    View Slide

  15. HTMLファイ部
    Webϑϩϯτܳਓ =

    Webフロントで新しい体験を
    つくるエキスパート

    View Slide

  16. 事例紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. ࣮ࡍ٬ઌͰఏҊʹߦࣾ͘һͱWebϑϩϯτͷ࠷લઢΛ

    ڞ༗ɾ࢓ࣄͱͯ͠׆༻Ͱ͖ΔՄೳੑΛߴΊΔɻ

    View Slide

  27. まとめ
    • ୯ͳΔόζͷͨΊʹWebαΠτΛ࡞Δͷ͸͍·΍ίεύ
    ͕ѱ͍ɻೝ஌Ͱ͸ͳ͘ମݧ·Ͱࢗ͞Δ΋ͷΛ࡞Βͳ͍ͱ
    ҙຯ͕ͳ͍ɻ

    • WebͰͲΜͳମݧΛͭ͘Δ͜ͱ͕Ͱ͖Δͷ͔ɺͱ͍͏఺ʹ
    ͍ͪ͹Μৄ͍͠ͷ͸ΤϯδχΞࣗ਎ɻݚڀɾఏҊ͢Δମ੍
    Λͭ͘Δ͜ͱͰɺݟͨ͜ͱ͕ͳ͍ମݧΛͭ͘ΕΔՄೳੑ͕
    ্͕Δ͠ɺΤϯδχΞࣗ਎΋ָ͍͠ɻ

    View Slide

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

    View Slide