【3分で作るGIFアニメ】キャプチャから文字入れの編集まで

3分で作るGIFアニメ ブログ

こんにちは、ikuzo(いくぞう)です。

なにやら「キューピー3分クッキング」のようなタイトルになりましたが、

今回はブログなどに使えるGIFアニメの作り方です。

 

私も先日はじめて作ったばかりですが、素人でも意外に簡単に作れました。

最初はブログでこの画像を使ってモーションを表現したのですが、

画像で表現した動き

後日、GIFアニメにしました。

メニューにマウスオーバーでアンダーラインが出てくる

こっちの方が断然動きがわかりやすいですよね。

私もまだ2つ3つ、作っただけではありますが、

今回はこのGIFアニメの作り方を皆様に紹介したいと思います。

スポンサーリンク

キャプチャツール「GifCam」をダウンロード

まずは元となる動画をキャプチャ(取り込み)しましょう。

なーんと、フリー画像で有名なPixabayには動画もあるんですね。

今回は素材としてこちらの動画を使わせていただきました。

GIFアニメを作る素材の動画

キャプチャで使うのは「GifCam」という無料ツールです。

(Windows用なので、Macの方はすみません!

「GIFアニメ キャプチャ Mac」などのキーワードで、別のキャプチャツールを探してみて下さい。)

ダウンロードするのは「zipファイル」なので解凍後、「GifCam.exe」をダブルクリックして起動させます。

起動したGifCam

スポンサーリンク

GifCamで動画をキャプチャ

GifCamを起動させたら、キャプチャしたい動画にGifCamのフレームを合わせます。

フレームの大きさは、枠をドラッグすれば調整可能です。

動画の上でGifCamの大きさを調整

この時、取り込む動画はなるべく小さくしておきましょう。

動画が大きかったり画像が複雑なほど、ファイルサイズが大きくなるからです。

 

動画を再生したら「Rec」ボタンを押して録画開始です。

あとで編集(部分的に削除)もできるので、再生を始めるまえに「Rec」ボタンを押してもOKです。

GifCamの「Rec」ボタンを押す

Stop」を押して録画を止めたら、「Save」を押してGIFアニメを保存します。

これだけで、ひとまずGIFアニメは完成です。

GifCamの画質を選択

「Save」を押す前に右にある「▼」を押すと、保存する画質を6種類の中から選べます。

保存するGIFアニメの画質を選ぶ

今回、この動画を、幅511×高さ286pxで3.3秒間(0.1秒×33枚)キャプチャして

画質とファイルサイズを比較してみました(画像は見本で、アニメではありません)。

Quantize

Quantizeの画質最高画質
2.26MB


Nearest

Nearestの画質少し圧縮した画質
1.95MB


256 Colors

256 Colorsの画質256色で構成した画質
1.74MB


20 Colors

20 Colorsの画質20色で構成した画質
1.20MB


GrayScale

GrayScaleの画質モノクロ(高画質)
3.16MB


Monochrome

Monochromeの画質モノクロ(低画質)
0.08MB


ファイルサイズさえ許せば、「Quantize」か「Nearest」を使いたいところですね。

スポンサーリンク

GIFアニメの編集① コマ数を減らす

ここからは作ったGIFアニメを編集してみましょう。

ファイルサイズが大きいGIFアニメは、コマ数を減らしてファイルサイズを小さくするという方法があります。

上のアニメはすべて0.1秒×33コマで構成されていますが、

コマ数を半分にして1コマの表示時間を倍にすると、同じ再生時間でファイルサイズは半分になります。

使うのはバナー工房さんの「GIFアニメの再編集」というWEBアプリです。

編集するGIFアニメを選択して「再編集する」を押します。

編集するGIFアニメを選択して「再編集する」を押す

オプション設定で、ループ(繰り返し再生)の有無と、点滅時間(1コマの再生時間)を決めます。

点滅時間は、1秒間10コマのアニメを5コマにするなら0.2秒、3.3コマなら0.3秒といった感じです。

「GIFアニメの再編集」の設定画面

編集画面でゴミ箱をクリックして、不要なコマを消していきましょう。

GIFアニメの不要なコマを削除する

ファイルサイズを半分にする場合は「2、4、6、8…」と偶数(または奇数)のコマを、

1/3にする場合は「2、3、5、6、8、9…」のコマを削除していきます。

最後に下の方にある「GIFアニメを作る」を押せばコマ数を減らしたアニメの完成です。

動きの滑らかさはなくなりますが、ファイルサイズはぐっと小さく抑えることができます。

(1コマ目の下の方に余計なものが映りこんでますがご愛敬で笑)

▼Nearestの0.3秒×10コマ(0.64MB)

コマ数を減らしたGIF動画

ちなみにバナー工房さんでは、別々の画像からGIFアニメを作成することもできます。

GIFアニメの編集② 文字を入れる

GIFアニメに文字(画像)を入れるにはGifntext.comを使います。

メニューの一番上にあるボタンを押すと文字の挿入ができます。

GIFアニメに文字を入れる

設定画面で文字の種類・大きさ・色・枠線を決める

画像の挿入も可能です。

GIFアニメに画像を挿入

フリーフォントで簡単ロゴ作成で作ったこちらの文字を入れてみました。

フリーフォントで簡単ロゴ作成で作った文字

画像を小さくしたい場合は、「切り抜き」や「リサイズ」もあります。

編集が終わったら「GENERATE GIF」を押します。

編集が終わったら「GENERATE GIF」を押す

待つこと数十秒、これで編集したGIFアニメの完成です。最後にダウンロードを押しましょう。

編集したGIFアニメをダウンロード

文字を入れたGIFアニメ

やってみると簡単ですね。ぜひ素敵なGIFアニメを作ってみて下さい。

え?全部やったら3分なんかじゃ終わらない?

たしかに全部やったら無理ですよねぇ…。

でも、実はあの「キューピー3分クッキング」も番組は正味7分くらいやってるんです。

あくまで「3分」は、手軽に作れるイメージということで(笑)

コメント