ゲーム大好きWEBデザイナーの雑記ブログ

WEB関係

パソコン画面の操作をキャプチャしてGIFアニメにする方法

更新日:

最近仕事でよく使うフリーソフト「LICEcap」を紹介します。

LICEcapはパソコン画面での操作をアニメーションとしてGIF画像で保存できる、便利なフリーソフトです。

仕事でWEBサイトを作り、WordPressを納品した時に多いのが「使い方が分からん」というクライアントからの連絡。

勿論、納品した時に操作マニュアルを作って説明もしているけど、それでも後になって使い方を聞かれることがあります。

そういった人は頑張って言葉で説明してもなかなか理解できない場合が多い。PCにめちゃくちゃ疎いクライアントは、それなりにいるのです。

かといってPC持って現地に説明しに行くのも面倒くさい、どうしてもメール1本で済ませたい…そんな時は「LICEcap」の出番です。

教えたい操作を自分で行い、その様子をGIF画像で保存します。あとはキャプチャしたGIF画像を見てもらうだけ。

クライアント
使い方が分からんぞ
これでも喰らえ(GIF画像のURLを送りつける)
クライアント
わ、分かりやすい…!!

「百聞は一見にしかず」です。動画で実際の操作を見ても分からないと言うクライアントは今のところ存在しません。



使い方

まずは公式サイトからダウンロードしてください。(Windows・Mac対応)

ページ下にWindowsとMacのダウンロードリンクがあると思います。

ダウンロード後、インストールしたらLICEcapを起動します。

起動すると画面に↓こんな感じの枠が出てくると思います。(この画面はMac)

枠の大きさは自由に調整することができます。

「Record」ボタンを押すとファイルの保存場所を指定するウィンドウが出てきます。

ファイルに適当な名前を付けて保存ボタンを押すとキャプチャ開始です。

LICEcapウィンドウ内の画面が保存されるので、操作を開始します。

操作が完了したら、最後に「Stop」ボタンを押してキャプチャを終了し、GIF画像の作成完了です。

作成したGIF画像は↓こんな感じでWEBサイトに貼り付けて、まるで動画のように見せることができます。

あまり長い操作だとファイルサイズが大きくなってWEBサイトの表示が遅くなってしまいますので注意。

WEBサイトに貼り付けて見てもらうなら、10秒以内に収めるのが無難です。

まとめ

手軽に画面をアニメーションとして保存できるので、ちょっとした操作手順を人に教えるには最高のソフトです。

仕事以外でもブログやTwitterなどに載せたりと、使い道はたくさんあります。このブログでもちょくちょく活用しています。

WEBで公開するオンラインマニュアルなら、紙やPDFのマニュアルと違ってGIFアニメが使えるので、実際の操作を動画で見てもらうことにより、ユーザーにわかりやすいマニュアルにすることができます。

文字や写真を駆使してマニュアルを作るより、GIF画像1枚で説明したほうが分かりやすいことも多いと思います。

当たり前ですが、GIF画像なので録音は出来ません( ˘ω˘)







この記事をシェアする

関連記事

サービス終了するけど、Wunderlistは超便利だった

無料でシンプルだけど便利な機能が一通りそろっているWunderlist。 サービス終了の発表が1年以上前にあったけど、未だに使い続けています。 使いやすく、デザインも良い。 今の会社に入ってからは、こ …

新人のWEBデザイナーはまずProgateで勉強しよう

未経験で入社した新人WEBデザイナーへの教育で、HTML・CSSの基本から教えるのめんどくさいな〜まずは本を読んでもらおうかな…と悩んでいたとき、思い出した。 オンラインの学習サービス「Progate …

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。 ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。 イラスト …

有料SSLと無料SSLの違いが少ないのでLet’s Encryptに乗り換えた話

最近は当たり前になってきているWEBサイトの常時SSL化。 今まで会社で作ったWEBサイトは「ラピッドSSL」を導入するサイトがほとんどでした。 だけど無料のLet’s Encryptが最 …

勉強せずにWebアナリスト検定に挑んだら難易度がヤバすぎた件

つい最近、「Webアナリスト検定」という試験を受けてきました。 いまさら資格なんていらないだろ…と思いつつも、会社から「金は出すから受けてこい」と言われたのでやむなし。 「Webアナリスト検定」とは、 …


コメント

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA