Gifアニメの作り方をマスターしよう【無料ソフトLICEcap使用】

出典：https://jonesandcompany.co.za/gif-animations-collection

 

• GIFアニメとは
• GIFアニメを作ってみよう
• 終わりに

GIFアニメとは

GIFアニメ（GIF Animation）は、GIFという画像ファイル形式で作られたアニメーションです。アニメーションGIF、GIFアニメーションなど人によって呼び方は違います。

GIFアニメーショとは、ひとつのGIFファイルに複数の画像ファイルを詰め込んで作られています。その画像を順番に表示させることで、動画のように動いて見えるのです。
仕組みはパラパラマンガと一緒ですね。
GIFアニメは画面録画からも、画像を繋いで作ることもできます。

GIFアニメの特徴

簡単な動きの表現に便利

GIFアニメは、動画を作るほどの尺ではない・音声は必要ないという時に便利な存在です。説明だけではなく、カルーセルような感覚で画像を入れ替えたり、ちょっとした演出に使ったりと、活用幅は広いのです。

例えば、「ニューインワン」のページではgifアニメが多く使われています。
目を惹きますし、ブランディングと一致していると雰囲気も出ますね。

出典：https://special.nissay-mirai.jp/newin1/

軽い

GIFアニメは複数枚の画像を連続表示しているため、動画ファイルより容量が軽め。長いものであれば「動画にしたほうが良い」ということもありますが、数秒程度であれば基本的に軽いです。

容量が軽い＝読み込みや再生が早くなりやすい傾向がありますから、動画を沢山埋め込むよりもユーザーのストレスも少なくて済むでしょう。

どこでも再生できる

GIFアニメは実質動画のような見え方をしますが、GIFファイルなので“画像”として扱われます。HTMLに対応していれば再生可能であり、パソコンでも、スマートフォンでも見ることが出来ます。画像データとして扱われるのでSNSにも掲載しやすいです。

高画質表現は難しい

GIFアニメの弱点は、色の表現が少ないという点です。
GIFファイルは256色までしか扱うことが出来ません（JPEGは最高1,670万色、PNG-32は280兆色）。このため軽量であるものの、写真など色数の多い画像は画質が低下します。

操作説明に使用したり、シンプルなイラストでアニメーションを作ったりする際には問題ありません。ただ、対象によってはかなり汚く見えてしまうこともあります。

下のグラデーション表現を見ていただくとわかりやすいです。
中間の色が足りていませんよね。

GIFアニメを作ってみよう

パソコンの画面を録画して、GIFアニメにしてみましょう。
本レッスンではwindows とmac両方に対応している『LICEcap』というソフトを使用します。

LICEcapをインストール

https://www.cockos.com/licecap/を開きます。

そのままスクロールダウンすると、ダウンロード箇所があります。
OSを選んで、クリックして下さい。
インストーラーのダウンロードが始まります。

ダウンロードが完了したら、インストーラーを起動します。

規約に同意するか、スタートアイコンは必要か、インストール先はどこにするかを聞かれます。

特に指定が無い場合はデフォルトのまま進めていって下さい。
インストールが完了したら「Close」でウィンドウを閉じます。

これでインストールは終わりです。

録画する

インストールした『LICEcap』を使ってみましょう。

操作画面

『LICEcap』を立ち上げると、下図のようなフレームが表示されます。
このフレームの内側が、GIFアニメとして撮影される部分です。

●Max FPS
１秒あたりの画像の枚数を指定します。多いほどGIFアニメの動作が滑らかになりますが、容量も重くなります。最初はデフォルトのままで良いでしょう。

●Size
撮影する画像のサイズです。サイズはボックス内に数値を入力、ドラッグでフレームの拡大縮小、どちらでも変更できます。

録画する

撮影したい場所に『LICEcap』フレームを合わせ、右下の「Record」をクリックして下さい。

保存先・保存オプション画面が表示されます。赤い点線部分で詳細設定も出来ますが、基本的には保存先とファイル名を決めるだけで良いです。

保存ボタンをクリックすると、3秒のカウントダウンが入り録画が始まります。

動きが撮れたら「stop」ボタンをクリックすればOK。
保存先に指定した場所に、GIFアニメが保存されます。

ファイルを開くと、アニメーションが表示されます。
見ても違和感のない表示になっているか、確認してみましょう。

あとは、jpgなど画像ファイルと同じように扱えます。
Google docに、ドラッグで貼り付けることも出来ますよ。

※『LICEcap』はシンプルな機能のみです。
GIFアニメを作成できるソフトは多くリリースされています。GIFアニメ書き出し時に画質を調整したい、注釈を入れたい場合などは他のソフトも試してみて下さい。

終わりに

この記事でもわかると思いますが、Gifアニメを使うとわかりやすい解説を作ることができます。みなさんもぜひGifアニメを作ってみて、Webぺーじなどで使用してみてください。