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

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