先日こんな記事を書きました。

マイクロインタラクションの記事なので、アプリの動きを撮った短い動画をアニメーションGIFにして載せたい！と思ったのですが、いざやろうとすると色々調べなきゃいけなくて意外と大変でした。。

アニメーションGIFはどう作るの？noteはアップロード画像10MB以下という制限があるみたいだけど、作ったGIFのサイズが大きかった場合はどうやって圧縮するの？多分わからなくて投げちゃう人いるんじゃないかなと。

そこで自分の覚書のために、またアプリを動画で撮ってnoteに載せたいけど特別なツールとか持ってないよ！という方に少しでも役立ててもらえればと思うので、使ったツール等をここにまとめておこうと思います。

動画の撮影・編集

使ったツール：iPhone

iPhoneの画面キャプチャ機能をそのまま使用。細々切ると管理が面倒だなと思ったので、長尺で撮って、欲しい部分だけあとでカットしてアニGIF化することにしました。

アニメーションGIFの作成

使ったツール：iPhoneアプリ（Android版もある）「GIFトースター」

撮影した動画をアニメーションGIFに変換します。無料だと高画質では作れないんですが、課金しても240円とかだったので「安いね！」と購入。

好きな部分だけカットすることもできるし、フレームレートも指定できるし、スマホで完結させたいならこれめっちゃいいと思います。ただ今回は10秒前後と少々長尺だったせいもあり、変換後の動画が13〜30MBとちょっと重くてnoteに載せるには容量オーバーでした。

アニメーションGIFの容量圧縮（一括）

使ったツール：オンラインWebツール「I LOVE IMG」

複数動画を一括で圧縮できるツールです。どれくらい圧縮できるかはやってみたいとわからない部分がありますが、なんせ一括で圧縮できるのが強み。

加工したいファイル数が多いときや、「あとちょっと圧縮できれば！」というときにはかなり重宝すると思います。

アニメーションGIFの容量削減（個別）

使ったツール：オンラインWebツール「Animated GIF editor and GIF maker」

サイト内に色々ツールがありますが「GIF Optimizer」ツールで大幅に容量削減できます。変にいじると逆に容量が増えることもあるっぽい。私が使った機能は以下の二つだけでしたがこれで十分でした。

「resize」サイズの変更。小さくしていい場合はこちらで。

「Optimize Transparency」透明性の最適化。

この効果が劇的！！

フレーム間で変化のない部分は透明にして容量を削減してくれるらしいです。「Fuzz %:」というメモリの意味はよくわかりませんが、数値を大きくするとGIFが荒れるみたいです。デフォルトの3%でも私が試したすべてのGIFで50%以上容量を削ってくれたので、よほど重いGIFでなければ5%以下の設定で大丈夫そうです。

ちなみに「GIF maker」と名前にあるように動画からのアニメーションGIFの作成もこのツールでできます。しかも「GIFトースター」より容量が軽いものが作れるので最初からこれを使えばよかった感があります。

結論、超おすすめのツールです。

まとめ

これよりもっと簡単な方法があったりするかもしれませんが、何かの際にお役に立てると嬉しいです！noteにGIFアニメーション載せる人が増えるといいな。記事内で動いてるとなんか楽しいので。

最後に……アニメーションGIFかGIFアニメーションかどっちが正しいんだろう？なお本記事ではアニメーションするGIFという意味で前者を主として使いました。あ、こんなところまで読んでくださった方、本当にありがとうございます！