2020/10/26*情報を更新いたしました。
記事を作成する時にGIFアニメーションを使用すると、通常の静止画より直感的に動きで伝えることができます。例えば、TCDテーマの紹介記事でもこういった具合に使用しています。
GIFアニメーションの活用例
アニメーションのエフェクトを視覚的に伝えたいときや、操作手順を伝えたいときに役立ちます。
LOTUS紹介記事
こちらでは、トップページのエフェクト効果を紹介するためにGIFアニメーションを使用しています。
直感的操作だけでサロン系の美しいサイトが作成できるWordPressテーマ「LOTUS」
TCDオリジナル機能クイックタグの紹介記事
この記事ではクイックタグの操作方法をGIFアニメーションで説明し、わかりやすく解説しています。
クイックタグ機能の使い方②基本的な使用方法と使用例
今回紹介する、LICEcap(ライスキャプ)は、PC上の画面を録画し、瞬時にGIFアニメーションを作成してくれるアプリケーションです。操作も非常に簡単ですので、よろしければ使ってみて下さい。
「LICEcap(ライスキャプ)」のインストール
こちらよりまずはLICEcap(ライスキャプ)をお使いのPCにインストールしてください。こちらはWindowsとmac両方に対応しています。
LICEcapダウンロードページ
ダウンロードサイトにいくと中央のDownloadと書いてあるあたりよりソフトをダウンロードできます。ダウンロードが完了しましたら、お使いのパソコンにインストールしてください。
LICEcapの使い方
LICEcapを起動すると、下記のような画面が現れます。
使い方の手順としては、
- 撮影する画面を上記の枠内に入れる
- Recordボタンを押す
- ファイル名を指定し、「Save」を押すと録画スタート
- Stopで録画終了
の4ステップで操作を行います。それでは順に操作方法を解説します。先に保存するファイル名や保存場所を選択する点が他のツールとは異なります。
撮影する画面を上記の枠内に入れる
まずは撮影したい画面内に必要な画像を入れておきます。今回はファイルをフォルダに入れるという動きをgifで撮影します。
Recordボタンを押す
枠にスタートの画面をいれたらRecordボタンを押します。押すとすぐに撮影が始まるわけではなく、設定画面が表示されます。
ファイル名を指定し、「Save」を押すと録画スタート
設定画面では、ファイル名を設定します。後ほど詳細の設定は説明しますが、単純に画面を撮りたいだけであれば、ファイル名のみ設定し、Saveボタンを押して下さい。
実際に撮影したい操作を行います。Saveボタンを押した後、3秒後に録画がスタートします。”ファイルをフォルダに移動させる”という動きをさせるとこういったgifアニメーションになります。
Stopで録画終了
撮影が完了したら、「STOP」ボタンを押して撮影を終了します。
そうすると、gifファイルがデスクトップ上に保存され、確認することができます。たったこれだけでgifアニメーションを使った画像が作成できます。本当に簡単ですね。
LICEcapの設定
LICEcapでは、GIFアニメーションにタイトル画面を表示したり、フレームレートを変更して、アニメーションの滑らかさを調整することもできます。
Max FPS
1秒あたりの画像の枚数を指定出来ます。枚数が多いほどGIFアニメの動作が滑らかになりますが、その分ファイルサイズが大きくなりますので注意ください。
Size
画像のサイズを指定出来ます。こちらもサイズが大きくなるほどファイルサイズも大きくなります。
title frame
GIFアニメーションにタイトル画面を挿入出来ます。右側のTitleのところに表示する文字を入力します。ただし、日本語は使用できませんのでご注意ください。
sec
タイトル画面を表示する秒数を指定出来ます。
Big font
タイトルのフォントサイズを大きく出来ます。
elapsed time
録画の時間経過を表示します。「0:00」という形式で右下に小さく表示されます。
mouse button press
録画中に、クリックボタンを押した場所で○を表示します。
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が見やすい下記のようなツールもあります。よろしければ、ご覧ください。
本稿ではMacユーザー向けのgifアニメ作成Appをご紹介いたします。美しいUIで、高い操作性を実現していること、GIFアニメーション内にキャプションを入れられることが特徴です。 GIFアニメとは そもそもgifアニメとはなんぞやということなのですが、一言でいうと多少の動き(アニメーション)を表...