Twitterでこんな動画を見たことがありませんか？
これは「GIF」と呼ばれる、画像をつなぎ合わせたパラパラ漫画のようなものです。
今日は「ScreenToGIF」というツールを使い、自分のPC画面を録画して簡単にGIF動画を作る方法をご紹介します。動画編集をしたことがない私でも、5分で出来ました！
１．ScreenToGIFをダウンロード
公式ページのトップ画面です。一番左側の「Msi Installer: 2.1 MB」からダウンロードしました。
２．録画したい画面を開く
以前JavaScriptで作った「トルコ語神経衰弱」をGIF動画にしてみましょう。
３．ダウンロードしたScreenToGIFを開く
画面の左上にメニューが表示されます。「レコーダー」を使うと、PC画面の一部だけを録画できるのでこれを使います。
４．録画範囲を選んで記録
作業画面に枠が出てくるので、録画したい部分を囲いましょう。
右下の「記録」を押して録画を開始して、枠内で操作をします。「停止」を押すと自動的に編集画面が開きます。
５．編集（動画の一部削除）
編集画面の「プレイバック」から動画が確認できます。
こんな感じです↓
うーん。
少し長いので最初の1ペアのカードをめくる部分はカットしましょう。
プレイバック画面で「これより前は切ってもいい」というタイミングで停止しましょう。
左下を見ると、49番目の画像で動画が停止したと分かります。
このまま「編集」タブへ移動し「以前を削除」して不要な部分をカットしましょう（復元も可能）。
６．編集（動画の早送り）
最初の部分と、最後も少しカットしました。
これでも動きは伝わりますが、Twitter上で見せることを考えたら、もう少しサクサク動かしたい。
というわけで早送りしましょう。
編集タブの「オーバーライド」をクリック。
ここから各フレーム（画像）の表示時間を変更できます。フレームあたりの表示時間を短くすればGIF動画全体が短くなりますね。
下の部分でフレームを全選択して、ディレイを40msに設定してみます。
この機能は動画の一部にも使えるので、例えば文字入力やカーソル移動だけ早送りにしてwebアプリ自体の動きはそのままにすることも可能です。
ちょっと早すぎるかも。この辺りは自由に調整してみましょう。
いくつかGIF動画を作ったのですが、ScreenToGIF上でチェックした時よりも完成後の方が少し動画が早くなってしまうようです。理由は分からないのですが、実際に作るときは気をつけてください。
８．保存
完成したら「ファイル」から名前を付けて保存しましょう。
保存したものを開くとGIF動画になっているはずです。
Twitterに上げるときは「画像/動画を追加」からGIFを選択できます。
あっという間でしたね！
前後をカットするくらいなら5分以内で完成です。
タイトル画面や文字の挿入もできるので、少し工夫すれば簡単に解説GIF動画も作れます。
「ScreenToGIF」は会員登録不要・無料なのでお気軽にお試しください