デスクトップキャプチャしてアニメーションGIFデモを作成する方法

GitHub で公開されている OSS の README.md には、デモ用に GIF が挿入されていることがほとんどですよね。
この GIF により、文章で表現し難いことでも、操作方法や挙動がわかりやすくなっています。

README.md に限らず、HP で動きのあるものを説明したいときに、動画にするほどではないけど、数コマのアニメーションを載せたい、といったときに GIF アニメーションが効果を発揮します。

gif アニメーションの作成には、連番画像や動画から GIF にエンコードしたり、ひと手間必要なのでちょっと面倒ですよね。

今回はデスクトップキャプチャして、アニメーション GIF をそのまま簡単に作成する方法をまとめます。

なお、Windows 対象です。


例えば、こんな GIF を簡単に作成できます。

emmet_html5_demo

Emmet で HTML5 のテンプレートを作成するデモですね。

ScreenToGif

ScreenToGif というフリーソフトを使用します。

インストール

GitHub のリリースページ からダウンロードして、zip ファイルを解凍するだけです。

解凍先のフォルダにある exe ファイルを実行すると、このようなスタート画面が表示されます。

screentogif start window

一部翻訳されていない箇所がありますが、日本語化されています。

デスクトップキャプチャ

デスクトップキャプチャするにはレコーダーをクリックします。

screentogif screen recorder

デスクトップキャプチャ―する領域が表示されます。
以下の方法で領域サイズを変更できます。

  • 外枠にマウスを合わせてドラッグ
  • 幅と高さを pixel 単位でフォームに入力
  • ターゲットアイコンをクリックした後にスナップ対象を選択

フルスクリーンでデスクトップキャプチャするには、オプションでEnable fullscreen mode.のチェックを入れてからレコーダーを起動する必要があります。

screentogif options

他にもマウスカーソールの表示・非表示、クリック演出などを設定できます。固定フレームレートで録画したい場合もここから変更可能です。

録画領域を調整したら、右下の記録ボタンをクリックして録画を開始します。
デモを終えたら、右下の停止ボタンをクリックして録画を終了します。

編集・エンコード

録画を停止すると、エディターが起動します。

編集画像メニューから録画結果を修正・加工できます。基本的な機能は備えているので、やりたいことはほぼ実現できると思います。UI も直観的で、多過ぎず少な過ぎずで丁度いい感じです。

screentogif editor edit

screentogif editor image

編集を終えたらファイルSave asからGifを選択してSaveをクリックしましょう。
エンコードが終了したらアニメーション GIF の完成です。

まとめ

ScreenToGif を使うと、デスクトップキャプチャから GIF エンコードまでがオールインワンで可能になるよ!

コメントを残す