お問合せ
MENU

GIFアニメーション画像を作成するツール【ScreenToGif】の紹介【Windows】

ブログ

GIFアニメーション画像を作成するツールScreenToGif

ブログで実際の表示を動き付きで見せたい…!

「ホバーしたらこうなるよ」とか、「スクロールしたらこうやって出てくるよ」とか、言葉で伝えるだけじゃ伝わらないっていうことありますよね。

そんな時はGIFアニメーション画像を作成するのが簡単です♪
WordPressでも画像としてアップしてブログに表示させるだけで動くんです!!

↓こんな感じ

ズームしながらフェードで切り替わるスライダー

この記事では、簡単にGIFアニメーションを作成できる無料ツール「ScreenToGif」を紹介します。

「ScreenToGif」をインストールする

ScreenToGifのWEBサイト

ScreenToGif

まずはScreenToGifのサイトへ行って右上の「ダウンロード」ボタンをクリックします。

ScreenToGifダウンロード画面

「インストーラー」をクリックします。

ScreenToGifセットアップファイル

ダウンロードが完了したらインストーラーを起動します。

ScreenToGifインストール「次へ」を押す

「次へ」をクリックします。

ScreenToGifインストール画面「インストール」を押す

「インストール」をクリックします。

ScreenToGifインストール画面「終了」を押す

「終了」をクリックします。

ScreenToGifで画面を録画する

ScreenToGifショートカット

デスクトップのショートカットから「ScreenToGif」を起動します。

ScreenToGif「レコーダー」メニューを選択する

メニューが開くので「レコーダー」をクリックします。

ScreenToGifのキャプチャ画面のサイズ調整

録画範囲が表示されますので大きさと位置を調整します。

ScreenToGifのキャプチャ画面のサイズ調整

録画したい範囲を調整出来たら右下の「録画」をクリックします。
録画できたら終了を押しましょう。

録画終了後エディターが立ち上がる

録画が終了したら自動的にエディターが立ち上がります。

GIFアニメーションを書き出しする

GIFアニメーションの書き出し方法「名前を付けて保存」を押す

ファイル>>名前を付けて保存をクリックします。

保存先と名前を付けて保存

「保存先」「GIF画像の名前設定」等の必要な設定を行ったら「保存」を押します。

不要な部分をカット

実際に保存してみたら23MBもあったので長さを半分にしたい…!

ということが実際に合ったので、不要なフレームを実際にカットしてみました。

フレームを削除

フレーム操作>>以前を削除を選択後、100枚目のフレームをクリックしました。

削除ボタンを押す

100以前のフレームがすべて選択されたので「削除」をクリックします。

もう少し軽くしたいので最後の方も短くします。

削除するフレームを選んで削除

下のフレームを消したい部分を手動で選択後、左上の削除をクリック。

不要なフレームが消えたことの確認

実際に不要なフレームが消えてくれました!

13MBになったのでなんとか許容範囲かなと…!やっぱりアニメーションなので容量は結構大きくなりますね。長さには注意が必要そうです。

まとめ

一度インストールすると気軽に使える「ScreenToGif」いかがだったでしょうか?
操作方法も直感的で分かりやすかったのでお勧めのツールです!

他にもいろいろカスタマイズできそうでしたが、今回はカットくらいしかしませんでした。でもこれでもすごくブログの表現の幅は広がりますよね✨

ブログ一覧へ