ホームページにパラパラアニメを設置する方法~GIFアニメとJavaScriptの利点・欠点を比較してみる

他にもいろいろ方法はあると思いますが、私がやってみた方法二つについて、感想と考察を書いてみます。

JPEGの写真画像を使って遊んだ記事の総括です。

スポンサーリンク

GIFアニメ

長所

webツールのお世話になることで、簡単に作ることができます。大した知識は要りません。

ファイルひとつ貼り付ければ見られるので、手軽でもあります。

古いブラウザでもかなり対応しているらしいです。

短所

GIFというファイル形式は、そもそもは「色数の少ない画像」に向いている形式です。図とか簡単なイラストとかですね。
なので、JPEGの精細な画像を使うほど、ファイルサイズが大きくなります。

うさぎの鼻がピクピクするGIFアニメ作った
暑さのあまり変なもの作り始めました、文月です。 GIFアニメ、いっぺん作ってみたかったんです。思い立った日が吉日。 (写真は旦那・・・

JavaScript

長所

JPEGの細かい画像であるほど、GIFアニメと比べて、最終的なファイルが軽くて済みます。
画像自体のサイズに加えて、2KB弱のスクリプト+スタイルシートを当てるだけで実装可能です。(私のソース・字幕ありの場合)

写真の差し替え・再生テストがラクにできます。

字幕をつけたり、一周で再生が終わるようにしたり、様々に応用が利きます。

短所

スクリプトを組む時点で、どう考えてもハードルが高いです。
私が作ったものは、コードの下調べから字幕入りアニメの完成まで、2日間・計3~4時間ほど掛かっています。(このうち半分くらいは写真加工してた気もしますが)

ファイルが一つにまとまっていないので、ダウンロードや移設をするには手間がかかります。
また、使用画像数分のリクエストが発生するので、通信に時間がかかる恐れも。(GIFで重たくするのと、どっちがどれくらいかなあ)

ブログサービスなど、スクリプトを直接書けない場合は、インラインフレームで呼び出すなど工夫が必要です。

うちのうさぎ、悪事編~JavaScriptでGIFアニメっぽいのを作った
JPEG画像をGIFアニメにするとファイルがでかくなる、と学んだので、こんどはJavaScriptを使ってみました。 素直に動画を撮れって・・・

どちらも同じって部分+まとめ

画像を用意するのは、どちらにしても気を遣います。今回は、過去に撮った写真を使ったので、再生時にブレないように合わせて切り出したり、光の加減も調整したり。
そうならないためには、そもそもカメラを固定して撮影したり、パラパラアニメを作るアプリを導入しちゃったりすべきなんだろなー、と思いました。
 

まとめると、小さめで単純な画像ならGIFアニメが向いており、大きい・細かい画像ならJavaScriptの方がスッキリする(ファイルサイズ的な意味で)となります。

もっとも、今は通信速度がすごく増えているので、写真を使ったGIFアニメも、たくさん作られてはいるようです。圧縮ツールも色々あるらしい。
 

あとはもう、動画編集ソフトでも使え、って話になりそうです。FLASHムービーって世界もありますね、そういえば。
でも、ちょっとしたパラパラアニメなら、せっかくJavaScriptを覚えたんだし、使えばいいんじゃない? とも思っているのでした。

とりとめないですが、パラパラ編集を多少かじった人の独り言でした。

コメント

スポンサーリンク