終わらないアニメ「パラレル」

終わらないアニメ「パラレル」

かわいいキャラクター達のほのぼのアニメとイラスト・ブログ

GIFアニメの作り方 2 -GIF変換のポイント-

f:id:PaRaLLeL:20190513154837j:plain


 GIFアニメの作り方第2回開講です!

 前回の「2枚の画像制作」はできましたか?

 

この記事から読んでる人は第1回を読んでいただくとわかりやすいと思います。

 

 

で、今回は作った画像をGIFアニメへ変換!

・・・の前にGIFにはルール制限があります。

 

 

変換方法によってはシンプルにパッとできてしまうものもありますが

せっかくなのでこの機会に少しでもGIF知識を覚えてもらえると

クオリティの高いGIFを作れるようになると思います。

 

 

 

ポイントを絞って覚えてしまいましょう!

GIFの変換でのルール

前回の説明でもありましたが

GIFには様々な制限があり、それのポイントを絞って

圧縮や変換することが必要になってきます。

 

単純に綺麗な画質で大きいサイズで

枚数も多くて・・・というわけにはいかないんですね。

 

・使える色数は256色まで

・まとめられる枚数は500枚まで

 

など何でもOKというわけにいかないのです。 

 

色数などはGIF変換時に調整すればいいので

イラストなど画像を作る際は気にしなくてもいいですが

変換するとイメージが変わってしまうこともあります。

GIF変換時、気にするポイント

個人的には変換時のポイントは下記だけ抑えればOKだと思います。

 

・ファイルサイズ

・画質

・画面(画像)サイズ

・時間(フレームレート)

・再生回数(回数制限あり or 無限)

*変換方法によっては設定できないものもあります。 

 

他にもいろいろありますが

全部覚える必要はないのでポイントだけ絞ってご紹介します。

ファイルサイズ

GIFファイルのサイズ容量です。

 

たぶん、これが一番重要

GIF制作はファイルサイズとの戦いと言っても過言ではないです。 

 

なぜならGIFはインターネット上で観れる映像なので

ファイルが重いとなかなか表示されなかったり、

中にはあまりにも重いとGoogleから注意されるなんて話も聞いたりします。

 

インターネットはやはりスピードが重要なので

ファイル容量はなるべく少なく。

 

ただ、少なくしすぎると汚い映像になってしまう。

 

 

ファイル容量を削ってなるべくきれいな状態を保つ設定が必要です。

 

 

個人的な目安は1MB前後がいいのかなと思います。

できれば100~500KBで抑えらえるといいかなと。

 (厳密なルールはないのであくまで目安です。)

 

パラレルのシンプルな背景で短い時間あれば100KBぐらいだったりしますが

メインビジュアル編はちょっと複雑なことしたので

長い尺だと2~3MBあるGIFもあります。

 

シンプルな作品例(100KB程度)

f:id:PaRaLLeL:20190502200115g:plain

複雑な作品例(2MB程度)

f:id:PaRaLLeL:20190428004728g:plain

 

上と下とではなんと20倍の容量が違います。

単純に下のGIFは上のGIFより20倍再生まで時間がかかるということですね。

 

なぜこんなに変わるかというと、

絵が大きく変わるグラデーション、映像の長さ(画像枚数)

容量食ってる感じです。

 

 

ただ、今はネット回線が早いので

このぐらいでは差があまりないかもしれませんが。

 

 

ちなみに今はスマホで撮った写真でも1枚で約1~3MBぐらいあります。

 

何枚も使うGIFを1MB前後にするのが

どれだけ圧縮しなきゃいけないかイメージわくかなと思います。

(スマホの写メ1枚より小さい容量サイズが理想)

 

出るだけファイルを軽くすることは再生が早いので

観てくれる人にも優しい気遣いにもなりますね。 

 

 

ただ軽くすればいいというわけでもないですが

このファイル容量との駆け引き

GIFを変換する上で一番ネックになることは間違いないです。

(詳細設定の変換を実際やってみるとわかります) 

画質

画像の画質(色数など)設定ですね。

GIFは256色までしか使えない。

 

逆に256色使う必要がなければ128色、64色と少なくすれば

その分ファイル容量の節約にもなります。

 

また作風にもよりますがグラデーションが多い画像は

どうしても容量が大きくなりがちですね。

シンプルな表現だと色数が少なく済むので容量が軽くなります。

 

ただ色制限があるといっても

画像やイラストを作る段階でこの色は使える?などは考えなくても大丈夫です。

基本的には最終的にGIF変換時に近いものに変換されます。

 

色数変えても問題ない例

参考:256色使用(142KB)↓

f:id:PaRaLLeL:20190514195652g:plain

参考:64色使用(98KB)↓

f:id:PaRaLLeL:20190515131620g:plain

 

どうですか?

256色でも64色でもほとんどかわりませんよね?

でもファイルサイズは50KBぐらい節約になります。

 

色数が少なすぎると汚くなる例

参考:256色使用(1.1MB)↓

f:id:PaRaLLeL:20190412105721g:plain

参考:32色使用(202KB)↓

f:id:PaRaLLeL:20190513195725g:plain

 

上のGIFに比べ下のは汚く見えませんか?

キャラはくすんだ色味になり、

木や桜のピンクがグラデーションがつぶれてますよね。

 

ファイルサイズ節約しすぎて元々のイメージが崩れてしまうのも違うので

イメージを保ちつつ容量節約の駆け引きが重要です。

画面(画像)サイズ

単純に画面(画像)のサイズです。

もちろん、小さくすれば容量が軽くなりますが

よくわからなくなっては意味がないです。

 

逆に大きすぎるのも容量を無駄に使うので

どういう媒体で公開するかで多少調整するのが理想です。

 

画像サイズ 500×500(294KB)

f:id:PaRaLLeL:20190509210326g:plain

画像サイズ 100×100(27KB)

 

f:id:PaRaLLeL:20190513201609g:plain

 

場合によっては小さいサイズも可能かもしれませんが

自分の作ったアニメを最低限表現できる大きさは必要かと思います。

 

おススメは元素材(作った画像)は大き目に作っておく

GIF変換時に小さく調整がやり直しがきいていいです。

 

パラレルは16:9のサイズの場合、1280×720で作っておいて

GIF変換時に640×360にすることが多いです。

時間(フレームレート)

ここでの時間というのは全体の長さではなく、

画像の切り替える時間のことです。

 

これをフレームレート(fps)といいます。

 

1秒間の映像を作るのに何枚の絵を使うか」 という設定です。

なので当然少ない枚数(1枚の秒数が長い)と動きががくがくします。

 

ちょっとこのフレームレートってものが文字だけだと

何を言ってる?って感じのくせもので理解しにくいんですよね。

作者もはじめ、よく混乱してました。

 

 

百聞は一見にしかず!

ってことで下記を観てもらった方がわかりやすいと思います。

 

1枚の絵の切り換え時間(0.1秒)・・・標準

f:id:PaRaLLeL:20190515131822g:plain

 *これはあくまでもパラレル作品の標準のフレームレートという意味。

1枚の絵の切り換え時間(0.02秒)・・・高速

f:id:PaRaLLeL:20190515131929g:plain

 

1枚の絵の切り換え時間(0.2秒)・・・スロー

f:id:PaRaLLeL:20190515132037g:plain

 

どうですか?

同じ枚数の絵を使っていても画像の切り替える時間を

変えるだけでこれだけ印象が変わります。

 

パラレルは効率性を求め、常に0.1秒で設定していますが

1枚目を0.1秒、2枚目を1秒などアニメーションタイミングを

取ることも可能です。

*詳細設定があるソフトなどに限ります。

 

このフレームレートを操るには相当な経験値が必要なので

自在に操れるようになるには相当な数こなすしかないです。

 

まずは少ない枚数で設定を変えて何度も確認し、

自分の心地いいタイミングを身に着けていくといいと思います。

再生回数(回数制限ありor無限)

これは説明する必要ないかもしれませんが

GIFの映像が1回(もしくは数回)で止まってしまうか、

無限にループするかの設定です。

 

何か意図がなければ「無限」でいいかと思います。

まとめ

慣れてない人は頭いたくなってきますよね?

 

正直、次回ご紹介するオンラインフリー変換サイトでは

ここまで細かい設定できなかったりしますが

変換時に「これ何?」ってものが出てくるかと思いますので

最低限ここを抑えておくといいかと思います。

 

 

 

一度に覚えるのは大変なので

GIF変換時にでもこの記事をぜひ読み返してみてください!

 

 

なるべくわかりやすく書いたつもりですが

パラレルが基本なので違う表現だと

もっと別な問題が出てくるかもしれません。

 

他にも丁寧に解説してくれてるサイトなどあるので

いろいろ調べてみることをおススメします!

 

次回はいよいよGIF変換できる簡単な方法です↓

www.parallel-gif.info

 

 

★GIFアニメ参考作品はこちら

www.parallel-gif.info