ブログ記事内で活用できる機会が多い、GIFアニメーション。気軽に動きを再現できるので便利ですよね。当記事では、数あるGIFアニメ制作ツール（Windows/Mac）をまとめました。もちろん全て無料です。PhotoShopを使ったサイズの圧縮方法も紹介しているので、GIFアニメ制作のお役に立てれば嬉しいです。
そもそもGIFはどんなファイルなのか？
「.gif」という形式のファイルで、短いアニメーションを表現する際に多く利用されています。主に動きで伝えたいデザインや、ツールの操作手順などを表現する際に使われるファイル形式です。
その他、静止画に使われることもありますが、最大256色までしか表現できない特性があるので単色の画像（ボタンやアイコン）やイラストにしか向いてません。写真や絵画などの色数が多い画像には不向きです。GIF以外の主な画像ファイルの使い分け方については、下記記事で解説しています。
ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。WEB関連の業界人でも明確な使い分けができていない方々もいらっしゃいます。いかに画像を綺麗に見せ、容量を軽くするかが肝心なので、本項ではそれぞれの拡張子のメリット、デメリットや、画像の内容に応じてどの...
多機能なWindows用GIF制作ソフト「Screen To Gif」
こちらはWIndows専用のソフトになります。MACユーザーは残念ですが、無料で使えて画質も良く、容量も小さい優れたツールです。さらに、動画の一部のみを動かすシネマグラフまで制作可能な上、テキストを入力したり、フリー描画まで可能で非常に高機能です。詳しくは下記記事をご覧ください。
ブログの記事内に「デスクトップやブラウザ上の動き」や「ツールや管理画面の操作方法」などを解説しようと思っても、テキストと静止画だけではなかなか伝えにくいニュアンスってありますよね。とはいえブログ記事に動画を貼るのも大変。そんなときは、動きのある画像を使って解説することで、直感的にニュアンスを伝えるこ...
直感的で綺麗なUIのMac用アプリ「GIPHY CAPTURE」
UIが綺麗で見やすく、直感的な操作のみでGIFを作成できるMac用GIF制作アプリです。初心者の方も簡単に使えるはずです。
簡単に使えるだけでなく、GIFアニメーション内にキャプション（テキスト）を挿入できる機能が特徴的です。しかも、4種類のアニメーションから任意に適用できて、表示するタイミングも自在に変更できます。
GIF内に任意のタイミングでテキストを表示できれば、操作手順などをよりわかりやすく伝えられます。
本稿ではMacユーザー向けのgifアニメ作成Appをご紹介いたします。美しいUIで、高い操作性を実現していること、GIFアニメーション内にキャプションを入れられることが特徴です。 GIFアニメとは そもそもgifアニメとはなんぞやということなのですが、一言でいうと多少の動き（アニメーション）を表...
複数の画像からもGIFアニメに変換可能な「PicGif Lite」
こちらもMac専用のツールです。動画だけでなく、複数の画像からもGIFアニメーションに変換できる点が大きな特徴です。画像の比較やビフォアフターなどをGIFアニメーションで表現できます。
また、上記の「GIPHY CAPTURE」と比べて、減色しにくく、比較的綺麗な点も使いやすいです。デザイン面の動きをGIFで見せたい際は、「GIPHY CAPTURE」よりもこちらをおすすめします。
1秒あたりのフレームレート（画像の枚数）の調整や、余分なカットを間引くこともできるので、用途に合わせて容量を削減することも可能です。アニメーションを滑らかに見せたいときは、フレームレートを増やし、そうでないものは減らしたりですね。
さらに完成したGifにフィルターを適用して加工することもできるので、操作性と機能性のバランスがもっとも優れていると思います。
GIFアニメーションの変換や編集ができるフリーのMacアプリ「PicGif Lite」をご紹介します。色んなGIFアニメ編集ツールを使ってみて、実用的な機能が盛り沢山でしたので、よろしければ使ってみてください。 PicGif Liteは、GIFアニメーションでも減色しにくい（画質が粗くなりすぎ...
Win/Mac対応のGIF作成ツール「LICEcap」
最後にご紹介するのは、Win/Macの両方に対応しているツールです。UIに関しては他のツールに劣りますが、比較的綺麗なGIFアニメーションを軽いサイズで制作できるツールです。「PicGif Lite」のように画像からGIFアニメーションを作成することはできませんが、ブラウザ上の動きや動画を手軽にGIFアニメーションに変換できます。透明のウィンドウが開き、その中の動きをそのままGIF化できる仕様です。
カーソルの動きがそのまま録画される上に、カーソルの動きを目立たせるようにマークできる機能もあるので、操作手順などのGIFアニメーションに向いています。
2020/10/26*情報を更新いたしました。 記事を作成する時にGIFアニメーションを使用すると、通常の静止画より直感的に動きで伝えることができます。例えば、TCDテーマの紹介記事でもこういった具合に使用しています。 GIFアニメーションの活用例 アニメーションのエフェクトを視覚...
PhotoShopを使ってGIFアニメーションを圧縮する方法
ここで紹介しているどのツールもGIFアニメーション内で使う色数の調整や、クオリティを劣化させて容量を削減させる機能は搭載されていません。※どのツールでもサイズそのものや、フレームレートを小さくしてサイズを縮小することはできます。
PhotoShopを使えば、色数を調整したり、ディザ（グラデーションを綺麗に見せる数値）を下げることで、容量を削減することができます。「劣化」機能で数値を入力して肉眼では支障のない程度に圧縮することも可能です。肉眼で大きな差がなくても、コンテンツによっては大幅な容量削減を期待できます。
動きを表現できて便利なGIFアニメーションですが、どうしても通常の画像より容量がかさんでしまいます。下記で紹介しているアプリなどでGIFアニメのフレーム数を削って容量を減らすことはできても、同時に動きの滑らかさも損なわれるわけです。 また、オンラインで簡易的にGIFを圧縮できるサービスも存...
まとめ
Windowsユーザーの方は、高機能な「Screen To Gif」か、シンプルで軽い操作性の「LICE Cap」でしょうか。Macユーザーの方でとにかく直感的な操作でGIFアニメーション内にキャプションを挿入したい方は、「GIPHY CAPTURE」。テキストを挿入する予定がなければ、比較的綺麗で、フレーム数の編集などの操作性も高い「PicGif Lite」がおすすめです。
一度操作に慣れてしまえば、色数の少ないGIF制作には「LICEcap」がいいかもしれません。比較表を作っておきましたので、一参考にご覧ください。UIの見やすさ（操作性）、機能の豊富さ（機能性）、綺麗さ（色の再現性やグラデーションの美しさ）を相対的に判断しています。
| アプリ・ツール名 | 対応OS | 操作性 | 機能性 | 綺麗さ |
| 「Screen To Gif」 | Win | △ | ◎ | ◎ |
| 「GIPHY CAPTURE」 | Mac | ◎ | ○ | △ |
| 「PicGif Lite」 | Mac | ○ | ○ | ○ |
| 「LICEcap」 | Win/Mac | △ | ○ | ○ |
コメント