デスクトップ上の動きを録画し、記事を効果的に演出できる無料サービス「LICEcap」

2016

10.11

記事を作成する時にGIFアニメーションを使用すると、インパクトのある印象を与える事ができ、画像よりも多くの情報を伝える事ができます。例えば、TCDの紹介記事でもこういった具合に使用しています。

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では、設定を変更することも出来ますので解説していきます。

lice014

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

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

lice11

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アニメーションを使用すると、ファイルサイズが大きくなり、動作が遅くなる可能性があります。目安としては、数100KB程度に収めると良いと思います。

効果的に使う

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

まとめ

今回は、GIFアニメーションを簡単に作成できるソフトを紹介させていただきました。LICEcap(ライスキャップ)は全て英語ですが、操作自体は簡単で、またWindowsとmac両方に対応しているのでおすすめです。こういったソフトウエアを使い、より効果的な記事を書いて頂ければと思います。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ