複雑なアニメーションがラクラク After EffectsをWebに書き出すプラグイン

アニメーションはJSやCSS3でやることが多いけど、数が多いと大変だし、表現にも限界がある…そんなときはAfter Effectsと拡張機能「Bodymovin(Lottie)」でタイムラインアニメーションをWeb用に簡単書き出し。ゆるい絵本仕立てでお届け。

Transcript

1. ΈΜͳɹ
   ͏͘͜͝
   ΪΞελ͍͔͍ͩ̎
   

   View Slide

2. ;Ή;Ή
   ܅ɺࠓ౓࡞Δ΢ΣϒͳΜ͚ͩͲͶ
   ͜Μͳ৭ͷ͍ͭͨ൘͕͍ͬͺ͍͋ͬͯ
   

   View Slide

3. ΄͏΄͏
   ྃղ͠·ͨ͠
   ϙϯο
   γϡο
   Ͳ͹ʔͬͱ͍ͬͺ͍ಈ͘ͷΛ࡞ͬͯ΄͍͠ΜͩΑ
   ɾ൘͕͔͋ͪͪ͜ΒγϡοͱඈΜͰ͖ͨΓ
   ɾϦϯάͷΤϑΣΫτͱ͍ͬ͠ΐʹΆΜͱग़͖ͯͨΓ
   

   View Slide

4. ͔ͪ͠͠ΐͬͽΓ͜·Γ·ͨ͠
   

   View Slide

5. ͱ͸ݴͬͨ΋ͷͷɺ+4 ͱ $44 Ͱ
   શ෦ͷཁૉಈ͔͢ͷَϝϯυͩͳʜ
   શ෦Ͱ͍ͭ͋͘ΔΑͩͬͯ
   ൘͕ ݸ Ϧϯά͸൒෼͘Β͍
   ͚͍ͭͨͷͰ໿ ݸ
   

   View Slide

6. ͜ΜͳΜશ෦ಈ͔ͯͨ͠ΒҰମԿ೔͔͔Μͩʜ
   ʮ΅ͨͪ͘ͷ͜ͱͪΌΜͱಈ͔ͯ͠Ͷʂʯ ʮ͋ͨͨͪ͠΋ͩΑʂʯ
   

   View Slide

7. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
   ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
   

   View Slide

8. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
   ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
   Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ
   ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ
   

   View Slide

9. ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜ
   ҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱ΋ͳ͠
   Ґஔ߹Θ͚ͤͩͰ΋େมͳͷʹ
   ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ
   ͋ʔ΋͏ΊΜͰ͌ʔ
   

   View Slide

10. ͱ͜Ζ͕͗ͬͪΐΜ
    ͵ͬ
    ͏͓ͬ
    
    

    View Slide

11. ͜ΕΛܶతʹϥΫʹɺ
    ͦͯ͠ΫΦϦςΟ΋ߴ͘΍ΕΔํ๏͕͋Δ
    Ϛʁ
    

    View Slide

12. ͓લ "GUFS&GGFDUT ͸࢖͑ͨΑͳʁ
    ࢖͑ͳ͔ͬͨΒࠓ೔ͷ࿩٧Ή͚Ͳͳ
    ͳΒ࿩͸ૣ͍
    ͏Μ·͋ɾɾɾ
    

    View Slide

13. "GUFS&GGFDUT ͬͯʁ
    ಈըฤूιϑτͩϤʂ
    1SFNJFSF ΍ J.PWJF ͱ͔ͱҧͬͯ
    ಈըૉࡐΛλΠϜϥΠϯͰ੾ΓషΓ͢Δ͚ͩ͡Όͳ͘ɺ
    ࡉ͔͍ਤܗ΍ը૾ύʔπΛషͬͯ
    ࣗ༝ʹ֦େɺॖখͱ͔͠์୊ʂ
    ձࣾͷύιίϯͳΒ "EPCF ೖͬͯΔ͸͔ͣͩΒɺ
    ೖͬͯΔΑωʂ
    

    View Slide

14. ࣮͸ "GUFS&GGFDUT Ͱ࡞ͬͨΞχϝʔγϣϯΛ
    8FC ʹॻ͖ग़ͯ͠࢖͑Δͷͩ
    ͳ͍ΜͩͳͦΕ͕
    ͑ɺͲʔͤ NQ ͷಈըͱͯ͠
    ॻ͖ग़ͬͯ͢Φν͡Όʜ
    

    View Slide

15. "GUFS&GGFDUT ʹ #PEZNPWJO ͱ͍͏ϓϥάΠϯΛೖΕΔͱ
    IUNM TWH
    ͱ KT ͱ QOH Ͱॻ͖ग़ͤΔΜͩ
    ͔ͩΒͱͬͯ΋ܰͯ͘ɺ͓खೖΕϥΫϥΫ
    ·͔͡
    Ոి͔
    

    View Slide

16. ·ͣ "GUFS&GGFDUT ʹ #PEZNPWJO ΛೖΕͱ͜͏
    ͋Β͔͡Ί༻ҙ͓͍ͯͨ͠΋ͷ͕ͪ͜ΒͰʙ͢ʢྉཧ൪૊෩ʣ
    ˒͘Θ͍͠ೖΕํ͸΢ΣϒΛΈͯͶʂ
    

    View Slide

17. ࠷ॳ͔ͩΒ؆୯ͳΞχϝʔγϣϯ࡞ͬͯΈ͔ͬ
    ී௨ʹΩʔϑϨʔϜଧ࢛ͬͯ֯ܗΛҠಈͤ͞Δ
    ͸͍Α
    ಈըϓϨϏϡʔ
    IUUQTHZB[PDPNFEFDBDC
    πʔʔʔο
    

    View Slide

18. ͦͨ͠Β "GUFS&GGFDUT ಺ͷϝχϡʔ͔Β
    #PEZ.PWJO Λ։͘ͱ͜Μͳը໘͕ͰΔɹ Λԡ͢ͱॻ͖ग़͠։࢝
    

    View Slide

19. ͋ɺͰ΋ͦͷલʹ͜͜ͷઃఆͰʮ%FNPʯʹνΣοΫೖΕͱ͘ͱ
    IUNM ΋ੜ੒͞ΕΔ͔Β͙֬͢ೝͰ͖Δͧ
    

    View Slide

20. ͢Δͱ IUNM ͱ KT ͕อଘ͞ΕΔ͔Βɺ
    IUNM Λ։͘ͱ͜͏ͩʂ
    ˣ࣮෺ͷ IUNM ΈͯͶ
    IUUQTVEPHFBSKQEBUBIUNM
    

    View Slide

21. ͦ͏ͦ͏
    ࠓճ͸࢛֯ܗ͚ͩͩͬͨͷͰը૾͸ॻ͖ग़͞Εͣɺ
    TWH ͷύεʹͳͬͨ
    ͓ʙಈ͍ͯΔಈ͍ͯΔ
    ཁૉݕূͨ͠ΒɺTWH ΞχϝͰͰ͖ͯΔͷͶ
    

    View Slide

22. KT Λຊ൪༻ϑΥϧμʹೖΕͯɺIUNM ʹλάͱ͔ KT ͱ͔Λ
    ͽΌͬʔɺΘʔͬͱॻ͘ͱͰ͖Δͧʢ͖ͯͱ͏ʣ
    αΠζ΋ࣗࡏ
    ࣗಈ࠶ੜɺϧʔϓ΋ઃఆՄ
    ͜ΜͳΜˠ
    EJWJENW@CHDMBTTNNWCHEJW
    TDSJQU
    WBSQBSBNT\
    DPOUBJOFSEPDVNFOUHFU&MFNFOU#Z*E NW@CH
    
    SFOEFSFSIUNM
    MPPQGBMTF
    BVUPQMBZGBMTF
    QBUISFTPVSDFTKTNWEBUBKTPO
    ^
    WBSNW"OJN
    NW"OJNMPUUJFMPBE"OJNBUJPO QBSBNT
    
    TDSJQU
    Ͱ΋͜ΕϓϨϏϡʔͩΑͳ
    શը໘ͩ͠
    ຊ൪͸Ͳ͏΍Μͷ
    

    View Slide

23. ࣮຿Ͱ࡞ͬͨ΋ͷ
    

    View Slide

24. Ͱɺ͓લ͕೰ΜͰͨϠπΛ࣮຿Ͱ΍ͬͯΈͨͷ͕ͪ͜Βͩ
    IUUQTBJNZTDSFFODPN
    ͩΖͩΖʔ
    "F ͷλΠϜϥΠϯͷ͓͔͛Ͱɺ
    ΦϒδΣΫτΛେྔʹಈ͔͢ͷ͕؆୯ͩͬͨ
    ͓ʙʂ
    ࣮ݱͰ͖ͯΜ͡ΌΜ
    

    View Slide

25. ͜Ε͕ैདྷͷ KTɺ$44 ௚ॻ͖ͩͬͨΒ్ํ΋ແ͍࡞ۀͩΖ͏
    ͦΕͳ
    ং൫Ͱ΋ݴ͚ͬͨͲ
    ΍ͬͺλΠϜϥΠϯฤूͰ͖Δͱ
    λΠϛϯά߹Θͤͷޮ཰͕ஈҧ͍ΑͶ
    

    View Slide

26. ࠓͷ࡞ΓํΛղઆ͢Δͧ
    ·ͣσβΠϯσʔλͷ BJ Λɺ
    ͭͷΦϒδΣΫτʹ͖ͭ ϨΠϠʔʹ෼͚͓ͯ͘Μͩ
    ൘ ຕʹϨΠϠʔ ຕͯ͜ͱͳ
    ϨΠϠʔ
    ϨΠϠʔ
    ϨΠϠʔ ʜΈ͍ͨʹ
    

    View Slide

27. ͦͯ͠ BJ ͷ··อଘͯ͠
    "F ʹ΋ͬͯ͘Δ
    ը૾ʹॻ͖ग़͞ͳ͍͍ͯ͘Μͩ
    ָ΍ͳ
    

    View Slide

28. ͦͯ͠൘Λ
    ɾҠಈ
    ɾ֦େॖখ
    ɾճస
    ͳͲΛ࢖ͬͯಈ͔͍ͯ͘͠
    IUUQTHZB[PDPNFDDGDEFFGGDFBGB
    

    View Slide

29. ࠷ऴతʹ͜͏ͳΔʂ
    IUUQTHZB[PDPNDFEGFDCFEDBB
    ΅͘ಈ͍ͯΔʂ
    ͋ͨ͠΋ಈ͍ͯΔʂ
    ϫγ΋ಈ͍ͱΔʂ
    ϫϯϫϯʂ
    

    View Slide

30. Ͳ͏ͩɺಈ͔͍ͨ͠΋ͷ͕େྔʹ͋ͬͯ΋
    ΈΜͳ lಈ͘ࢠz ʹͳͬͨͩΖ͏
    λΠτϧճऩԵ
    

    View Slide

31. Ͱ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ
    

    View Slide

32. ͦ͏ࢥ͍ͬͯͨ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠
    "F Λͦͷ·· 8FC ʹॻ͖ग़ͤΔͳΒ
    มܗͱ͔ύʔςΟΫϧͱ͔ͷ
    ϑΟϧλ΋͔͚์୊ͳΜ͡ΌͶʁʂ
    ͜ΜͳΜͱ͔
    

    View Slide

33. "& ͷΤϑΣΫτܥ͸΄΅࢖͑ͳ͍ͱࢥͬͨ΄͏͕ྑ͍
    ॻ͖ग़ͯ͠΋ແޮʹͳͬͪΌ͏
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ
    ʷ
    

    View Slide

34. Ͱ͖Δͷ͸جຊ͜ͷ͘Β͍ͱࢥͬͱ͍ͨ΄͏͕ྑ͍ͩΖ͏
    ·͋ͦΕͰ΋े෼Ͱ͖Δ͜ͱ͸ଟ͍͕ͳ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ
    㾎
    ʷ
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ
    

    View Slide

35. ؔ܎ͳ͍͚Ͳ
    ւ֎Ͱ˓ʷ ͸௨͡ͳ͍Ϥʂ
    ΈͲΓͷνΣοΫ͘Μ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ
    㾎
    ʷ
    ɾ% ΤϑΣΫτؔ܎
    ɾಛघͳϒϥʔ
    ɾΏ͕ΈͳͲͷมܗ
    ɾύʔςΟΫϧ
    

    View Slide

36. ॏཁͳͱͩ͜ͱϚεΫ͕࢖͑Δ͜ͱͩͳʂ
    ޷͖ͳܗͰ͘Γൈ͘΍ͭʂ
    ɾҐஔҠಈ
    ɾ֦େॖখ
    ɾճస
    ɾಁ໌
    ɾ;ͭ͏ͷϒϥʔ
    ɾϚεΫɺτϥοΫϚοτ
    㾎
    

    View Slide

37. ͜ͷΑ͏ʹ໼ҹ͕৳ͼͯ͘Ξχϝʔγϣϯ΋
    ϥΫϥΫͩ
    IUUQTHZB[PDPNGCDGDGBGBGFBFF
    ͔ͩΒϝΠϯϏδϡΞϧ͚ͩ͡Όͳ͘ɺ
    ਤղܥͷΞχϝʔγϣϯ΋޲͍ͯΔͳ
    ɹ
    ·͔͡ʂ
    ͜Ε KT ͱ DTT ͩͱɺΊͪΌ͖͔ͭͬͨΜͩΑͳʙ
    ώʔλʔͷਤͱ͔
    

    View Slide

38. ͋Εʁจࣈग़Δͱ͖ύʔςΟΫϧ࢖ͬͯΜ͡ΌΜ
    Ͱ͖ͳ͍ͬͯݴͬͨΑͶ
    IUUQTHZB[PDPNFDEDFECBFD
    ଞʹ΋࣮຿Ͱ࡞ͬͨαϯϓϧΛࡌ͓ͤͯ͜͏
    IUUQTTIJOSPLJNPDIJDPN
    ͦΕ͸खಈͰύʔςΟΫϧΆ͘࡞ͬͯΔ͚ͩ
    ίϯϙδγϣϯʹͯ͠ίϐϖ͢Ε͹·ͩϥΫ
    

    View Slide

39. ͔ͯ͜ΕͬͯࠓྲྀߦΓͷ
    ϞʔγϣϯάϥϑΟοΫε͡Όʁ
    

    View Slide

40. ݟग़͠ͷͱ͓ΓͳΘ͚͕ͩɺͦ͏ͩΑͳ
    ͦ͏ͩͳ
    ϞʔγϣϯάϥϑΟοΫεʹ͸΋͍ͬͯͩ͜ͳ
    

    View Slide

41. ϞʔγϣϯάϥϑΟοΫεͬͯʁ
    ਤܗ͕͔ͬ͜Α͘ಈ͘Ξχϝʔγϣϯ
    ͬͯݴͬͨΒ͍͍͔ͳ
    :PV5VCFS ΍ 57 ΍ .7 ͱ͔Ͱ ೥୅຤͘Β͍͔Β
    ྲྀߦΓͩͯ͠ΔΑωʂ
    ͜Μͳͷͱ͔
    IUUQTXXXZPVUVCFDPNXBUDI WD@V0'B6HIL
    

    View Slide

42. ϞʔγϣϯάϥϑΟοΫε͍͍Αͳʂ
    ࠓΊͬͪΌྲྀߦͬͯΔ͠ɺ57 Ͱ΋ :PV5VCFS ΋΍ͬͯΔ͠ɺ
    ೥୅ʹྲྀߦͬͨϝϯϑΟεσβΠϯΈ͋ͬͯΤϞ͍͠
    ͓ɺ͓͏
    

    View Slide

43. ಈ͖Λ૝ఆͨ͠ఏҊΛ͢Δͱ͖
    Ͳ͏ͯ͠΋ KT ͷ੍໿͔ΒΦϒδΣΫτ਺ͷ
    গͳ͍΋ͷΛத৺ʹ͢Δ͜ͱ΋͋ͬͨͩΖ͏ʜ
    Ͱ͔͍ࣸਅ਺ຕɺจࣈগʑͳͲʜ
    ͔͜͠͠ΕͳΒ "& ͕࢖͑Δ͔ΒλΠϜϥΠϯͰΒ͘Β͘
    ίϐϖ΋͠์୊
    ੍໿͕େ͖͘औΓ෷ΘΕͨΘ͚ͩ
    දݱͷ෯͕޿͕Δͧ
    

    View Slide

44. #PEZNPWJO ͕͋Ε͹ɺ
    ཁૉͷ਺͕ଟͯ͘೉͔ͬͨ͠Ϟʔάϥ΋
    8FC ͰͰ͖ΔͬͯΘ͚ͩ
    ·ͩʢ ೥ ݄ݱࡏʣ8FC ͰϞʔάϥ͸
    ͋Μ·ਁಁͯ͠ͳ͍͔Β
    ΑͦͱࠩΛ͚ͭΔνϟϯε͔΋஌Εͳ͍ͧ ˞ݸਓͷײ૝Ͱ͢
    ͋ͷɺղઆԶͷ໾ʜ
    

    View Slide

45. Α͠ɺͪΐͬͱσΟϨΫλʔ΍σβΠφʔʹ΋࿩ͯ͠ΈΑͬʂ
    ͜ΜͳΜ͋ΔΜ͢Αʔͬͯ
    ͽΎʔ
    ɾɾɾ
    

    View Slide

46. ॳճʹͯ͠ԶͷཱͪҐஔ͕ʜ
    ऐ͍͠ʜ
    ͓ΘΓ
    

    View Slide