【10GB】史上最高品質のGIFアニメーションを作りました【81540フレーム】

こんにちは、TIME&SPACE編集部です。

私 かんち が所属する株式会社バーグハンバーグバーグでは、今ご覧のTIME&SPACEはもちろん、様々なウェブメディアで記事の制作をしております。

記事掲載メディアの一例

記事は写真とテキストを組み合わせたスマホなどで流し読みしても楽しめるものが多く、その中でよく使っている画像が下記のようなGIF（ジフ）と呼ばれる動く画像ファイルです。

例えばこういうの。

引用元：三人称視点で生活したらどうなるのかドローンで実験してみた

他にもこういうのとか

引用元：接待ゴルフってどうやるか分からないので、上手い人に教えてもらった

こういったように

引用元：電光掲示板をレンタルして会社に導入してみた

静止画では表現できない情報を1つの画像に詰め込むことができます。

YouTubeなどの映像に比べると音声が無い・色数が少ない（最大256色）といった欠点がありますが、自動再生なので動画よりも気軽に見せることができ、インターネット黎明期に誕生してから30年以上経っても今なお現役で使われている画像形式です。

今回はそんなGIFアニメを主にウェブ記事用に作るコツをご紹介、そしておそらくインターネット史上最高品質であろうGIFも誕生したので、是非皆さんにご覧いただきたいと思います！

最高品質のGIFだけを観たい方はこちらから

GIFアニメの作り方

ここではあくまで私流のGIFアニメの作り方を紹介します。

GIFの作り方は星の数ほどパターンがありますので、試行錯誤して自分にあった作り方を見つけてください！

さて、GIFの作り方の大まかな流れは下記図の通りです。

素材集め

まず最初にアニメーションの元となる素材の手配をします。実写なら動画や写真撮影、イラストならパラパラ漫画のように1コマ1コマ画像を用意します。

動画編集

編集は動画編集ソフトを使って行います。GIF画像はコマ数が多ければ多いほどファイルサイズも大きくなりますので、実写であれば一番見せたいシーンだけを切り出すようにしましょう。私はいつもAdobeのPremiereを使って動画を編集していますが、Photoshopやフリーのツールでも代用可能です。

書き出し

GIFに変換する前の元となる動画を書き出します。この時点で1秒あたりのコマ数や、縦横のサイズを指定しておきます。

GIF変換

GIFの仕上がりを決定する大事な工程。変換ツールによっては画像のザラつきが目立ったり、画像の鮮やかさが失われたりしますのでツールの選定は結構重要です。
オススメは会社の同僚 ARuFa に教えてもらった「Giam（ギアム）」というWindows専用のGIF作成・編集フリーソフト。

これまであらゆるGIF変換ツールを試してきましたが、Giam以上にキレイな画質のGIFを作れるものに未だ出会っていません！
画質劣化を目立たなくする技術によってGIFとは思えないほどキレイな仕上がりになりますし、1フレームごとのスピード調整やフレームの間引き・入れ替えなど細かい調整が手軽にでき、仕事でとても重宝しています。
まぁ欲を言えばもっと使いやすく、便利にアップデートしてほしいのですが……残念ながらGiamは8年前に開発が止まっています。

Giam開発者 古溝氏のホームページ

古溝様、Giam開発の再開、何卒よろしくお願い致します！

MP4形式の対応やリサイズ・トリミングなどもできるようになったら最高です！！！どうか開発者の古溝 剛氏にこの思いが届いてほしい！！

届け届け届けお願いしますお願いしますお願いします。

ファイルサイズに注意しよう

GIFの作る流れを簡単に紹介しましたが、ウェブにアップする際はファイルサイズが大きくなり過ぎないよう注意する必要があります。

モバイルなど通信速度が遅い環境での閲覧も考えて、画像のファイルサイズを減らす工夫をしましょう。

あくまで私の目安ですが、GIF画像1つのあたり1～2MB以下、理想を言えば数百KBに収まっているのが望ましいです。

これからGIFファイルサイズの節約テクニックを3つ紹介しますので、是非GIF作りの参考にしてくださいね！

節約テク① フレーム数を減らす

1つ目は、GIFのフレームを間引く方法です。
ご存知の通り、GIFアニメは静止画をいくつも並べて順番に表示させています。

当然フレーム数が多ければ多いほど、滑らかで長いアニメーションを見せることができますが、それに比例してファイルサイズも大きくなりますし、逆もしかり。

例として、下記のドロップキックしようとして失敗したGIFアニメをご覧ください。

32フレーム　2.3MB

この画像は32コマ（フレーム）使って表現しています。全体的な動きは滑らかですが、ファイルサイズが2MBを超えているので、ダウンロードにちょっと時間がかかりますね。

そこでフレーム数を半分以下にしてみます。

14フレーム　1.0MB（1.3MB↓）

どうでしょうか。使用するフレームの数が半分以下になったので、その分ファイルサイズも小さくなりました。

しかしアニメーションの動きがカクカクに……。

そんな時は1フレームあたりのウェイト時間を短く設定してみましょう。

14フレーム　1.0MB

さきほどよりもカクつきが気にならなくなり、コミカルな動きになりました。

人が早く動く姿ってなぜか面白いので、動きで楽しませたいときには是非このフレーム間引きとウェイト時間の短縮をやってみてください！

節約テク② 縦横のサイズを小さくする

二つ目は効果がかなり大きい、解像度を落とす方法。

GIFの縦横サイズを小さくすればするほど、面積と一緒でファイルサイズも小さくなります。

例としてこちらの 500×281サイズ のGIFをご覧ください。

横500px 縦281px　454KB

フレーム数が8フレームしかないので元々ファイルサイズは少なめですが、これをさらに軽くするため縦横サイズを半分にしてみます。

横250px 縦141px　122KB（332KB↓）

ファイルサイズが約4分の3近く減少しました！

スマホの画面でだと、そこまで画質が落ちているようには感じないかと思います。

ただパソコンのような大きな画面で見ると画像が小さいので……

横250px 縦141px　122KB

このようにHTMLタグやスタイルシートで縦横サイズを指定し、大きく引き伸ばすのが良いと思います。

節約術③ 色数を減らす

最後は画像の色数を減らす方法。

画像に使われる色の数が減れば、情報量が少なくなるのでファイルサイズが小さくなります。

256色しか使えないのに、ここからさらに色数を減らすなんて……と思われるかも知れませんが、GIF編集ソフトによって意外とキレイに見せることができます！

先述のGIF編集ソフト「Giam」で編集したGIF（256色）がこちら。

256色　950KB

結構キレイですよね。

ここからさらに色数を4分の1に減らしてみます。

64色　689KB（-261KB）

いかがでしょうか。若干セピア色っぽくなったものの、まだ自然な色だと思います。

これでファイルサイズは約27％削減できました。

さらに思い切って8色にしてみると……

8色　288KB（-662KB）

うーん、ファイルサイズは元より70%減とかなり削減されましたが、鮮やかさが失われてしまいました。

色数の少ないイラストやパラパラ漫画のようなGIFアニメではオススメですが、実写でここまで落とすとちょっと美しくないですね。

ということで色数のまとめはこちら！

以上、3つのファイルサイズ節約術を紹介しました！

みなさんのお役に立てたでしょうか？

正直、GIF制作を必要としない人にはこの記事はどうでもいい情報だったと思います。

中には途中でこう思った人もいると思います。

6フレーム 横200px 縦2000px 8色 50KB

と。

「ファイルサイズとかそんな情報どうでもいいんだよ!! おっさんが動いてるGIFなんて見たくないんだよ!!!!!」

と。

そんな皆さんの為に、上のノウハウを完全に無視した最高の癒やしのGIFを作りましたので、是非ハイスペックパソコンでご覧ください。

インターネット史上最高品質のGIFを公開！

高解像度

高画質

長時間

この3つを満たした最高のGIFを作りました。

GIFの解像度は1280×720のハイビジョンサイズ、色数はGIF最大の256色、使用したフレーム数は8万1540フレームで、アニメーションが一周するのは45分超！ そしてファイルサイズはなんと約10GB（ギガバイト）という、おそらくインターネット史上最大・最高画質のGIFアニメではないでしょうか？

このGIFを作るにあたり、大自然の映像を記録しているHAPPY DAYZ PRODUCTIONS（ハッピーデイヅ プロダクションズ）さんに元となる映像を提供していただきました。

長野の雄大な山々が織りなす大自然の絶景映像を是非ご覧ください！

サンプルGIF

Dropboxからダウンロード

※ファイルサイズが莫大すぎて、スマートフォンでは再生できません
※パソコン版Google Chromeで開くことをオススメします
※PCスペックが高くないと再生できないか、途中でエラーで止まります

2018.12.10 追記
…申し訳ございません、諸事情により「10GBのGIF」の公開を取り下げました。

その代わりにGIFに変換する前の元動画をYouTubeにアップしましたので、こちらをお楽しみください！ やっぱり時代はGIFよりもギガを消費しない動画なのかもしれませんね……

……どうでしたか、10GBのGIFは無事ダウンロード出来ましたか？

かなり時間がかかってストレスを感じたのではないでしょうか？ 

快適にインターネットがしたい！ダウンロードでストレスを感じたくない！

そんな方にオススメなのが……

世界最速
個人向け光回線サービス
「auひかり ホーム10ギガ」

ピンと来ない方も多いかと思いますが、これはもうとにかく速い。理論上は「10GBのGIF画像」がたったの8秒でダウンロード出来てしまうんです！ ファイルダウンロード中にちょっとトイレに行こうかな、なんて小休憩も許さないほどの速さです。

これから増えてくるであろう、4K映像・8K映像のストリーミング視聴だって余裕で出来ちゃいますし、通信ラグが命取りとなるe-sportsなどのオンラインゲームだって相手より有利になるかもしれません！

世界最速の光回線サービス「auひかり ホーム10ギガ」で誰よりも高速に10GBのGIFをダウンロードしてみてはいかがでしょうか？

それではみなさん、さようなら。