ブログの記事内に「デスクトップやブラウザ上の動き」や「ツールや管理画面の操作方法」などを解説しようと思っても、テキストと静止画だけではなかなか伝えにくいニュアンスってありますよね。とはいえブログ記事に動画を貼るのも大変。そんなときは、動きのある画像を使って解説することで、直感的にニュアンスを伝えることができます。
そこで、動く動画である”GIFアニメーション”を作りたいわけですが、Photoshopだと時間がかかるし、その他のツールやサービスを使っても画質が荒い。。そんな中・・
無料でめっちゃ使いやすい。それでいてクオリティーが高く、シネマグラフまで簡単に作れる「ブロガーが使ったら反則ギリギリ！」のGIFアニメーション作成ソフト「Screen To Gif」があったので、その使い方を解説します↓
MACユーザーは残念ですが「Screen To Gif」はWin専用のソフトです。Screen To Gifをインストールして立ち上げ、GIFアニメを作る場合には、赤丸の「レコーダー」をポチすると枠が出るのでキャプチャーしたい「範囲」や「fps」を指定します。
fpsとは1秒間に記録するフレーム（コマ）数のことです。このフレーム数を多くすればするほど滑らかなGIF画像を作ることができますが、その分容量が大きくなるので、ケースバイケースで適切な数値を設定しましょう。
WEBサイトの動きなどをキャプチャーしてGIFアニメを作る
WEBサイト上のキャプチャーしたい範囲を調整したら、枠の右下にある【●記録】をポチします。ブラウザ上の動いている部分や動かしたい部分キャプチャーしたら【■停止】します。
キャプチャー時間が長くなればなるほど容量が大きくなるので、あらかじめ記録時間を決めておくと良いでしょう。
記録・停止が完了するとエディタ画面が立ち上がり、不要なフレームをカットしたりコピーしたりすることができます。
画像タブを開くとテキストやフリー描画をすることもできます。特に重要なのは「リサイズ」ですね。GIFアニメをブログ記事に貼る場合には、画質を重視しつつも”できる限り容量を小さくしておきたい”ので、ブログ記事のカラムサイズを把握しておき、そのサイズにリサイズしてから保存するのがベターです。
保存する際には「ファイル」タブを開いて、フロッピーディスクマークの「Save as」から、保存先と保存ファイル名を指定して「Save」します。
すると、エンコーダーが始まるのでちょっと待機。このエンコーダーに時間がかかる場合は容量が大きい可能性が高い。
エンコーダーが完了するとファイルサイズ（容量）が表示され、保存先を指定したフォルダにGIFアニメが保存されているので、ブログ記事に貼ってみましょう。
WEBサイトの動を見せることができるGIFアニメが完成！
ツールや管理画面の使い方を解説するGIFアニメを作る
PCツールや管理画面などの操作方法を解説する場合にも「Screen To Gif」はめっちゃ便利っ！
静止画の場合「ブログの投稿画面などの使い方」や「PCツールのチュートリアル」を伝えようと思うと、「どこをどう動かして・・」といったことを画像内に記載する必要がでてきて、ごちゃごちゃした画像になってしまうことがあります。
こちらの記事では、デザインのプロがブログ記事を作るときに「どんなことを意識して画像を選んでいるのか？」、「どんなことしてクオリティーの高い画像を作っているのか？」を解説してますが、GIFアニメを使うことで直感的にニュアンスを伝えることができますね。
他人のブログを見ていると、目に見えて「このブログ記事の画像はぼやけてるな」とか「ちょっと説明が分かりにくい」と感じることがあるでしょう。その一方で、「このブログ記事の画像はなんでこんなにきれいなんだろう」とか「シンプルな説明なのにちゃんと理解ができる」と感じることもあると思います。 その違いは...
GIFアニメを使えば”画像に解説文を書く必要がなくなる”ので、ブログ記事の作成がはかどるはかどる！
シンプルで分かりやすいGIFアニメが完成！
動画の一部だけを動かしてシネマグラフを作る
Stock videos by Videezy
「Screen To Gif」は、シネマグラフまで簡単に作れます。シネマグラフとは写真の一部分だけにループした動きを入れた画像のことですが、ブログ記事に貼ってみると「静止画と思いきや動いている？」と、読者に驚きや不思議な感覚を与えることができます。
キャプチャーが完了したら、画像タブを開いて「シネマグラフ」をクリックして、動かしたい部分を「ペン」や「選択」でマーカー（緑色）します。
「適用」したらシネマグラフの動きを再生して確認してみましょう。余計な部分まで動いてしまうようならマーカーを消しゴムで消して、またマーカーすればOK！良い感じになったら「Save」で完成。
画像の一部分だけループ動きのある不思議なシネマグラフが完成！
不思議なシネマグラフを作るポイントは、街中や人物、波や揺れる植物など、本来動いているはずの風景動画をチョイスすることです。すると脳は「本来動いているはずの風景が動いていない＝静止画である」という認識しつつ、その画像の一部分が動くもんだから、不思議な感覚になるわけですね。
ここでは「ブロガーが使ったら反則ギリギリ！」のGIFアニメーション作成ソフト「Screen To Gif」の使い方を紹介しましたが、実際に使ってみるとその使い勝手の良さを実感すると思います。ぜひ楽しみながら「ブログの読者に分かりやすいGIFアニメ」や「驚きを与えるシネマグラフ」を作ってみてください。
