GitHub で公開されている OSS の README.md には、デモ用に GIF が挿入されていることがほとんどですよね。
この GIF により、文章で表現し難いことでも、操作方法や挙動がわかりやすくなっています。
README.md に限らず、HP で動きのあるものを説明したいときに、動画にするほどではないけど、数コマのアニメーションを載せたい、といったときに GIF アニメーションが効果を発揮します。
gif アニメーションの作成には、連番画像や動画から GIF にエンコードしたり、ひと手間必要なのでちょっと面倒ですよね。
今回はデスクトップキャプチャして、アニメーション GIF をそのまま簡単に作成する方法をまとめます。
なお、Windows 対象です。
例えば、こんな GIF を簡単に作成できます。
Emmet で HTML5 のテンプレートを作成するデモですね。
ScreenToGif
ScreenToGif というフリーソフトを使用します。
インストール
GitHub のリリースページ からダウンロードして、zip ファイルを解凍するだけです。
解凍先のフォルダにある exe ファイルを実行すると、このようなスタート画面が表示されます。
一部翻訳されていない箇所がありますが、日本語化されています。
デスクトップキャプチャ
デスクトップキャプチャするにはレコーダーをクリックします。
デスクトップキャプチャ―する領域が表示されます。
以下の方法で領域サイズを変更できます。
- 外枠にマウスを合わせてドラッグ
- 幅と高さを pixel 単位でフォームに入力
- ターゲットアイコンをクリックした後にスナップ対象を選択
フルスクリーンでデスクトップキャプチャするには、オプションでEnable fullscreen mode.のチェックを入れてからレコーダーを起動する必要があります。
他にもマウスカーソールの表示・非表示、クリック演出などを設定できます。固定フレームレートで録画したい場合もここから変更可能です。
録画領域を調整したら、右下の記録ボタンをクリックして録画を開始します。
デモを終えたら、右下の停止ボタンをクリックして録画を終了します。
編集・エンコード
録画を停止すると、エディターが起動します。
編集や画像メニューから録画結果を修正・加工できます。基本的な機能は備えているので、やりたいことはほぼ実現できると思います。UI も直観的で、多過ぎず少な過ぎずで丁度いい感じです。
編集を終えたらファイルのSave asからGifを選択してSaveをクリックしましょう。
エンコードが終了したらアニメーション GIF の完成です。
まとめ
ScreenToGif を使うと、デスクトップキャプチャから GIF エンコードまでがオールインワンで可能になるよ！