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

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

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

f:id:PaRaLLeL:20190513154837j:plain

GIFアニメの作り方第2回開講です!今回はGIF変換時のポイントをご紹介!知っておくと変換時に困らずにすみますよ!

 

 

前回の「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アニメ参考作品はこちら