アニメーションはJSやCSS3でやることが多いけど、数が多いと大変だし、表現にも限界がある…そんなときはAfter Effectsと拡張機能「Bodymovin(Lottie)」でタイムラインアニメーションをWeb用に簡単書き出し。ゆるい絵本仕立てでお届け。
ΈΜͳɹ͏͘͜͝ΪΞελ͍͔͍ͩ̎
View Slide
;Ή;Ή܅ɺࠓ࡞ΔΣϒͳΜ͚ͩͲͶ͜Μͳ৭ͷ͍ͭͨ൘͕͍ͬͺ͍͋ͬͯ
΄͏΄͏ྃղ͠·ͨ͠ϙϯογϡοͲʔͬͱ͍ͬͺ͍ಈ͘ͷΛ࡞ͬͯ΄͍͠ΜͩΑɾ൘͕͔͋ͪͪ͜ΒγϡοͱඈΜͰ͖ͨΓɾϦϯάͷΤϑΣΫτͱ͍ͬ͠ΐʹΆΜͱग़͖ͯͨΓ
͔ͪ͠͠ΐͬͽΓ͜·Γ·ͨ͠
ͱݴͬͨͷͷɺ+4 ͱ $44 Ͱશ෦ͷཁૉಈ͔͢ͷَϝϯυͩͳʜશ෦Ͱ͍ͭ͋͘ΔΑͩͬͯ൘͕ ݸ Ϧϯά͘Β͍͚͍ͭͨͷͰ ݸ
͜ΜͳΜશ෦ಈ͔ͯͨ͠ΒҰମԿ͔͔Μͩʜʮ΅ͨͪ͘ͷ͜ͱͪΌΜͱಈ͔ͯ͠Ͷʂʯ ʮ͋ͨͨͪͩ͠Αʂʯ
ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱͳ͠
ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱͳ͠Ґஔ߹Θ͚ͤͩͰେมͳͷʹ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ
ͭͮ͘͘ KT ͰେྔͷཁૉΛಈ͔͠·͘Δ͖͍ͬͯͭΑͳʜҰݸҰݸಈ͖ҧ͏͔Β GPS จͰҰׅͰͰ͖ΔΘ͚Ͱͳ͠Ґஔ߹Θ͚ͤͩͰେมͳͷʹ͞Βʹ֤ཁૉͷλΠϛϯά߹ΘͤͳΜََͯͷَ͋ʔ͏ΊΜͰ͌ʔ
ͱ͜Ζ͕͗ͬͪΐΜ͵ͬ͏͓ͬ
͜ΕΛܶతʹϥΫʹɺͦͯ͠ΫΦϦςΟߴ͘ΕΔํ๏͕͋ΔϚʁ
͓લ "GUFS&GGFDUT ͑ͨΑͳʁ͑ͳ͔ͬͨΒࠓͷ٧Ή͚ͲͳͳΒૣ͍͏Μ·͋ɾɾɾ
"GUFS&GGFDUT ͬͯʁಈըฤूιϑτͩϤʂ1SFNJFSF J.PWJF ͱ͔ͱҧͬͯಈըૉࡐΛλΠϜϥΠϯͰΓషΓ͢Δ͚ͩ͡Όͳ͘ɺࡉ͔͍ਤܗը૾ύʔπΛషͬͯࣗ༝ʹ֦େɺॖখͱ͔͠์ʂձࣾͷύιίϯͳΒ "EPCF ೖͬͯΔ͔ͣͩΒɺೖͬͯΔΑωʂ
࣮ "GUFS&GGFDUT Ͱ࡞ͬͨΞχϝʔγϣϯΛ8FC ʹॻ͖ग़ͯ͑͠Δͷͩͳ͍ΜͩͳͦΕ͕͑ɺͲʔͤ NQ ͷಈըͱͯ͠ॻ͖ग़ͬͯ͢Φν͡Όʜ
"GUFS&GGFDUT ʹ #PEZNPWJO ͱ͍͏ϓϥάΠϯΛೖΕΔͱIUNM TWH ͱ KT ͱ QOH Ͱॻ͖ग़ͤΔΜ͔ͩͩΒͱͬͯܰͯ͘ɺ͓खೖΕϥΫϥΫ·͔͡Ոి͔
·ͣ "GUFS&GGFDUT ʹ #PEZNPWJO ΛೖΕͱ͜͏͋Β͔͡Ί༻ҙ͓͍ͯͨ͠ͷ͕ͪ͜ΒͰʙ͢ʢྉཧ൪෩ʣ˒͘Θ͍͠ೖΕํΣϒΛΈͯͶʂ
࠷ॳ͔ͩΒ؆୯ͳΞχϝʔγϣϯ࡞ͬͯΈ͔ͬී௨ʹΩʔϑϨʔϜଧ࢛ͬͯ֯ܗΛҠಈͤ͞Δ͍ΑಈըϓϨϏϡʔIUUQTHZB[PDPNFEFDBDCπʔʔʔο
ͦͨ͠Β "GUFS&GGFDUT ͷϝχϡʔ͔Β#PEZ.PWJO Λ։͘ͱ͜Μͳը໘͕ͰΔɹ Λԡ͢ͱॻ͖ग़͠։࢝
͋ɺͰͦͷલʹ͜͜ͷઃఆͰʮ%FNPʯʹνΣοΫೖΕͱ͘ͱIUNM ੜ͞ΕΔ͔Β͙֬͢ೝͰ͖Δͧ
͢Δͱ IUNM ͱ KT ͕อଘ͞ΕΔ͔ΒɺIUNM Λ։͘ͱ͜͏ͩʂˣ࣮ͷ IUNM ΈͯͶIUUQTVEPHFBSKQEBUBIUNM
ͦ͏ͦ͏ࠓճ࢛֯ܗ͚ͩͩͬͨͷͰը૾ॻ͖ग़͞ΕͣɺTWH ͷύεʹͳ͓ͬͨʙಈ͍ͯΔಈ͍ͯΔཁૉݕূͨ͠ΒɺTWH ΞχϝͰͰ͖ͯΔͷͶ
KT Λຊ൪༻ϑΥϧμʹೖΕͯɺIUNM ʹλάͱ͔ KT ͱ͔ΛͽΌͬʔɺΘʔͬͱॻ͘ͱͰ͖Δͧʢ͖ͯͱ͏ʣαΠζࣗࡏࣗಈ࠶ੜɺϧʔϓઃఆՄ͜ΜͳΜˠEJWJENW@CHDMBTTNNWCHEJW TDSJQU WBSQBSBNT\ DPOUBJOFSEPDVNFOUHFU&MFNFOU#Z*E NW@CH SFOEFSFSIUNM MPPQGBMTF BVUPQMBZGBMTF QBUISFTPVSDFTKTNWEBUBKTPO ^ WBSNW"OJN NW"OJNMPUUJFMPBE"OJNBUJPO QBSBNT TDSJQUͰ͜ΕϓϨϏϡʔͩΑͳશը໘ͩ͠ຊ൪Ͳ͏Μͷ
࣮Ͱ࡞ͬͨͷ
Ͱɺ͓લ͕ΜͰͨϠπΛ࣮ͰͬͯΈͨͷ͕ͪ͜ΒͩIUUQTBJNZTDSFFODPNͩΖͩΖʔ"F ͷλΠϜϥΠϯͷ͓͔͛ͰɺΦϒδΣΫτΛେྔʹಈ͔͢ͷ͕؆୯͓ͩͬͨʙʂ࣮ݱͰ͖ͯΜ͡ΌΜ
͜Ε͕ैདྷͷ KTɺ$44 ॻ͖ͩͬͨΒ్ํແ͍࡞ۀͩΖ͏ͦΕͳং൫Ͱݴ͚ͬͨͲͬͺλΠϜϥΠϯฤूͰ͖ΔͱλΠϛϯά߹Θͤͷޮ͕ஈҧ͍ΑͶ
ࠓͷ࡞ΓํΛղઆ͢Δͧ·ͣσβΠϯσʔλͷ BJ Λɺ ͭͷΦϒδΣΫτʹ͖ͭ ϨΠϠʔʹ͚͓ͯ͘Μͩ൘ ຕʹϨΠϠʔ ຕͯ͜ͱͳϨΠϠʔ ϨΠϠʔ ϨΠϠʔ ʜΈ͍ͨʹ
ͦͯ͠ BJ ͷ··อଘͯ͠"F ʹͬͯ͘Δը૾ʹॻ͖ग़͞ͳ͍͍ͯ͘Μָͩͳ
ͦͯ͠൘ΛɾҠಈɾ֦େॖখɾճసͳͲΛͬͯಈ͔͍ͯ͘͠IUUQTHZB[PDPNFDDGDEFFGGDFBGB
࠷ऴతʹ͜͏ͳΔʂIUUQTHZB[PDPNDFEGFDCFEDBB΅͘ಈ͍ͯΔʂ͋ͨ͠ಈ͍ͯΔʂϫγಈ͍ͱΔʂϫϯϫϯʂ
Ͳ͏ͩɺಈ͔͍ͨ͠ͷ͕େྔʹ͋ͬͯΈΜͳ lಈ͘ࢠz ʹͳͬͨͩΖ͏λΠτϧճऩԵ
Ͱ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ
ͦ͏ࢥ͍ͬͯͨ࣌ظ͕ࢲʹ͋Γ·ͨ͠"F Λͦͷ·· 8FC ʹॻ͖ग़ͤΔͳΒมܗͱ͔ύʔςΟΫϧͱ͔ͷϑΟϧλ͔͚์ͳΜ͡ΌͶʁʂ͜ΜͳΜͱ͔
"& ͷΤϑΣΫτܥ΄΅͑ͳ͍ͱࢥͬͨ΄͏͕ྑ͍ॻ͖ग़ͯ͠ແޮʹͳͬͪΌ͏ɾ% ΤϑΣΫτؔɾಛघͳϒϥʔɾΏ͕ΈͳͲͷมܗɾύʔςΟΫϧʷ
Ͱ͖Δͷجຊ͜ͷ͘Β͍ͱࢥͬͱ͍ͨ΄͏͕ྑ͍ͩΖ͏·͋ͦΕͰेͰ͖Δ͜ͱଟ͍͕ͳɾҐஔҠಈɾ֦େॖখɾճసɾಁ໌ɾ;ͭ͏ͷϒϥʔɾϚεΫɺτϥοΫϚοτ㾎ʷɾ% ΤϑΣΫτؔɾಛघͳϒϥʔɾΏ͕ΈͳͲͷมܗɾύʔςΟΫϧ
ؔͳ͍͚Ͳւ֎Ͱ˓ʷ ௨͡ͳ͍ϤʂΈͲΓͷνΣοΫ͘ΜɾҐஔҠಈɾ֦େॖখɾճసɾಁ໌ɾ;ͭ͏ͷϒϥʔɾϚεΫɺτϥοΫϚοτ㾎ʷɾ% ΤϑΣΫτؔɾಛघͳϒϥʔɾΏ͕ΈͳͲͷมܗɾύʔςΟΫϧ
ॏཁͳͱͩ͜ͱϚεΫ͕͑Δ͜ͱͩͳʂ͖ͳܗͰ͘Γൈͭ͘ʂɾҐஔҠಈɾ֦େॖখɾճసɾಁ໌ɾ;ͭ͏ͷϒϥʔɾϚεΫɺτϥοΫϚοτ㾎
͜ͷΑ͏ʹҹ͕৳ͼͯ͘ΞχϝʔγϣϯϥΫϥΫͩIUUQTHZB[PDPNGCDGDGBGBGFBFF͔ͩΒϝΠϯϏδϡΞϧ͚ͩ͡Όͳ͘ɺਤղܥͷΞχϝʔγϣϯ͍ͯΔͳɹ·͔͡ʂ͜Ε KT ͱ DTT ͩͱɺΊͪΌ͖͔ͭͬͨΜͩΑͳʙώʔλʔͷਤͱ͔
͋Εʁจࣈग़Δͱ͖ύʔςΟΫϧͬͯΜ͡ΌΜͰ͖ͳ͍ͬͯݴͬͨΑͶIUUQTHZB[PDPNFDEDFECBFDଞʹ࣮Ͱ࡞ͬͨαϯϓϧΛࡌ͓ͤͯ͜͏IUUQTTIJOSPLJNPDIJDPNͦΕखಈͰύʔςΟΫϧΆ͘࡞ͬͯΔ͚ͩίϯϙδγϣϯʹͯ͠ίϐϖ͢Ε·ͩϥΫ
͔ͯ͜ΕͬͯࠓྲྀߦΓͷϞʔγϣϯάϥϑΟοΫε͡Όʁ
ݟग़͠ͷͱ͓ΓͳΘ͚͕ͩɺͦ͏ͩΑͳͦ͏ͩͳϞʔγϣϯάϥϑΟοΫεʹ͍ͬͯͩ͜ͳ
ϞʔγϣϯάϥϑΟοΫεͬͯʁਤܗ͕͔ͬ͜Α͘ಈ͘ΞχϝʔγϣϯͬͯݴͬͨΒ͍͍͔ͳ:PV5VCFS 57 .7 ͱ͔Ͱ ͘Β͍͔ΒྲྀߦΓͩͯ͠ΔΑωʂ͜Μͳͷͱ͔IUUQTXXXZPVUVCFDPNXBUDI WD@V0'B6HIL
ϞʔγϣϯάϥϑΟοΫε͍͍ΑͳʂࠓΊͬͪΌྲྀߦͬͯΔ͠ɺ57 Ͱ :PV5VCFS ͬͯΔ͠ɺ ʹྲྀߦͬͨϝϯϑΟεσβΠϯΈ͋ͬͯΤϞ͍͓͠ɺ͓͏
ಈ͖Λఆͨ͠ఏҊΛ͢Δͱ͖Ͳ͏ͯ͠ KT ͷ੍͔ΒΦϒδΣΫτͷগͳ͍ͷΛத৺ʹ͢Δ͜ͱ͋ͬͨͩΖ͏ʜͰ͔͍ࣸਅຕɺจࣈগʑͳͲʜ͔͜͠͠ΕͳΒ "& ͕͑Δ͔ΒλΠϜϥΠϯͰΒ͘Β͘ίϐϖ͠์੍͕େ͖͘औΓΘΕͨΘ͚ͩදݱͷ෯͕͕Δͧ
#PEZNPWJO ͕͋Εɺཁૉͷ͕ଟ͔ͯͬͨ͘͠Ϟʔάϥ8FC ͰͰ͖ΔͬͯΘ͚ͩ·ͩʢ ݄ݱࡏʣ8FC ͰϞʔάϥ͋Μ·ਁಁͯ͠ͳ͍͔ΒΑͦͱࠩΛ͚ͭΔνϟϯε͔Εͳ͍ͧ ˞ݸਓͷײͰ͋͢ͷɺղઆԶͷʜ
Α͠ɺͪΐͬͱσΟϨΫλʔσβΠφʔʹͯ͠ΈΑͬʂ͜ΜͳΜ͋ΔΜ͢ΑʔͬͯͽΎʔɾɾɾ
ॳճʹͯ͠ԶͷཱͪҐஔ͕ʜऐ͍͠ʜ͓ΘΓ