2020/10/26*情報を更新いたしました。

記事を作成する時にGIFアニメーションを使用すると、通常の静止画より直感的に動きで伝えることができます。例えば、TCDテーマの紹介記事でもこういった具合に使用しています。

GIFアニメーションの活用例

アニメーションのエフェクトを視覚的に伝えたいときや、操作手順を伝えたいときに役立ちます。

LOTUS紹介記事

こちらでは、トップページのエフェクト効果を紹介するためにGIFアニメーションを使用しています。
lotus
直感的操作だけでサロン系の美しいサイトが作成できるWordPressテーマ「LOTUS」

TCDオリジナル機能クイックタグの紹介記事

この記事ではクイックタグの操作方法をGIFアニメーションで説明し、わかりやすく解説しています。
quicktag_kihon2
クイックタグ機能の使い方②基本的な使用方法と使用例

今回紹介する、LICEcap(ライスキャプ)は、PC上の画面を録画し、瞬時にGIFアニメーションを作成してくれるアプリケーションです。操作も非常に簡単ですので、よろしければ使ってみて下さい。

「LICEcap(ライスキャプ)」のインストール

こちらよりまずはLICEcap(ライスキャプ)をお使いのPCにインストールしてください。こちらはWindowsとmac両方に対応しています。
lice
LICEcapダウンロードページ

ダウンロードサイトにいくと中央のDownloadと書いてあるあたりよりソフトをダウンロードできます。ダウンロードが完了しましたら、お使いのパソコンにインストールしてください。
lice02

LICEcapの使い方

LICEcapを起動すると、下記のような画面が現れます。
lice03

使い方の手順としては、

  1. 撮影する画面を上記の枠内に入れる
  2. Recordボタンを押す
  3. ファイル名を指定し、「Save」を押すと録画スタート
  4. Stopで録画終了

の4ステップで操作を行います。それでは順に操作方法を解説します。先に保存するファイル名や保存場所を選択する点が他のツールとは異なります。

撮影する画面を上記の枠内に入れる

まずは撮影したい画面内に必要な画像を入れておきます。今回はファイルをフォルダに入れるという動きをgifで撮影します。
lice10

Recordボタンを押す

枠にスタートの画面をいれたらRecordボタンを押します。押すとすぐに撮影が始まるわけではなく、設定画面が表示されます。
lice10-01

ファイル名を指定し、「Save」を押すと録画スタート

設定画面では、ファイル名を設定します。後ほど詳細の設定は説明しますが、単純に画面を撮りたいだけであれば、ファイル名のみ設定し、Saveボタンを押して下さい。
lice11

実際に撮影したい操作を行います。Saveボタンを押した後、3秒後に録画がスタートします。”ファイルをフォルダに移動させる”という動きをさせるとこういったgifアニメーションになります。
lice

Stopで録画終了

撮影が完了したら、「STOP」ボタンを押して撮影を終了します。
lice13

そうすると、gifファイルがデスクトップ上に保存され、確認することができます。たったこれだけでgifアニメーションを使った画像が作成できます。本当に簡単ですね。

LICEcapの設定

LICEcapでは、GIFアニメーションにタイトル画面を表示したり、フレームレートを変更して、アニメーションの滑らかさを調整することもできます。

lice014

Max FPS

1秒あたりの画像の枚数を指定出来ます。枚数が多いほどGIFアニメの動作が滑らかになりますが、その分ファイルサイズが大きくなりますので注意ください。

Size

画像のサイズを指定出来ます。こちらもサイズが大きくなるほどファイルサイズも大きくなります。

title frame

GIFアニメーションにタイトル画面を挿入出来ます。右側のTitleのところに表示する文字を入力します。ただし、日本語は使用できませんのでご注意ください。

sec

タイトル画面を表示する秒数を指定出来ます。

Big font

タイトルのフォントサイズを大きく出来ます。

elapsed time

録画の時間経過を表示します。「0:00」という形式で右下に小さく表示されます。

mouse button press

録画中に、クリックボタンを押した場所で○を表示します。

lice11

Control+Alt+P pauses recording

キーボードの「Ctrl+Alt+P」で録画を一時停止できるようにします。

.GIF repeat count (0=infinite):

GIFアニメを何度繰り返すか設定できます。0だと無限に繰り返します。

use .GIF transparency for smaller files

チェックを入れるとファイルを小さくするためにGIFアニメーションを透過させます。

Automatically stop after

チェックをいれると、自動で録画を停止させます。また止める時間を指定できます。

GIFアニメーションの注意点

ファイルサイズ

GIFアニメーションを使用すると、ファイルサイズが大きくなり、動作が遅くなる可能性があります。目安としては、大きくても3MB以下程度に収めるといいと思います。

効果的に使う

GIFアニメーションばっかりのサイトは正直見にくいです。それによって離脱率があがっては元も子もありません。GIFアニメーションを使用する場合はそれを使う事で効果的かどうかを考え、あっても1記事内に1,2個程度に収めるといいと思います。

まとめ

「LICEcap」のUIは見やすいとは言えませんが、一度操作を覚えれば、簡単にGIFアニメーションを作成できるソフトです。比較的、減色も目立たず、軽いGIFアニメーションを作れる点もメリットです。Windows、Macの両方に対応しているので、ぜひご活用ください。

Mac専用になりますが、UIが見やすい下記のようなツールもあります。よろしければ、ご覧ください。