[ScreenToGif]Gifを埋め込んでクオリティの高いブログを目指す

https://amzn.to/3bd8XOX

amzn.to

　ブログを書いているとPCの操作画面を簡単なアニメーションで埋め込みたくなることがあります。エンジニアのブログでは、操作画面がGIFアニメーションで埋め込まれているのをよく見ます。そしてこれが非常にわかりやすくて私は好きです。

　この記事では、ScreenToGifというツールを使用して、画面操作動画をGIF形式でキャプチャ、Wordpressのブログに埋め込む方法まで説明します。

ScreenToGifのインストール

　ScreenToGifはこちらの提供元のダウンロードサイトからダウンロードできます。インストーラをダウンロードして実行すると、インストールが開始されます。

　インストール時の注意点は得にありません。そのままインストールを終えます。

録画してみる

　インストールが完了したら起動してみます。非常にシンプルなUIでわかりやすいです。

　　左のレコーダーをクリックすると、録画窓が起動します。

　あとはこの窓の位置、大きさを調整して、録画したい画面に合わせて右下の赤丸を押すだけで録画が開始されます。押した後マウスによる操作が必要になる場合はF7を押すことで録画が開始、一時停止されます。完全に録画を終える場合は停止ボタンを押します。

編集してみる

　録画を停止させると編集エディタが開きます。

エディタでは以下のような作業ができます。

• 再生してみる
• 不要なフレームを削除する
• フレーム数を減らしてサイズを小さくする
• Textの埋め込みやTitleフレームの挿入

再生

　再制御の再生ボタンから再生することができます。動画を編集して、途中で動きを確認したい場合にも使用できます。

不要なフレームを削除する

　再生不要なフレームを削除できます。最初や最後の不要なフレームを削除するのに便利です。フレーム操作のフレーム削除から行います。あらかじめ不要なフレームをすべて選択しておくとよいです。選択はShiftを押しながらマウスで開始フレームを選択して、そのまま終了フレームを選択するとその間の全てのフレームが選択できます。

フレーム数を減らす

　フレーム数を減らすとかくかくしますが、書きだされるファイルのサイズが減ります。フレーム数を減らすには、フレーム操作>フレーム数削減で設定できます。右の設定では何フレーム毎に後ろの何フレームを削除するかを指定できます。例えばフレーム数を半分にしたい場合は1フレーム毎に後ろの１フレームを削除するように設定すればよいです。

テキストやTitleの埋め込み

　メニューの画像編集からテキストやTitleを埋め込むことができます。複数のフレームにテキストを埋めたい場合はフレームを選択して、テキストを入力します。
　再生時間のカウンタや、透かしをいれたりもできます。

ブログに埋め込む

　本ブログはWordpressで書かれていますが、ブログに作成したGifを埋め込んでみます。

　メディアにアップロードして追加ではなく、直接ファイルを投稿上にドラッグして貼り付けるやり方をお勧めします。なぜなら、ファイルが大きすぎるとメディアのアップローダーはサイズをオリジナルから変更してしまい、その結果Gifファイルが動かないことに陥ってしまうからです。
　直接ドラッグするやり方ですと以下のようにサイズが指定できます。

　動かない場合はフルサイズを指定してみてください。私はこれで動かなかったGifが動くようになりました。

まとめ

　作業画面のキャプチャを貼り付けることで、ノウハウをまとめる記事がものすごくわかりやすくなると感じました。普通のスクリーンショットよりひと手間かかりますが、人jによく伝わる記事になると思います。

https://amzn.to/3bd8XOX

amzn.to