ブログの記事内に「デスクトップやブラウザ上の動き」を表示する時や「ツールの操作方法」などを説明しようと思っても、テキストと静止画だけではなかなか伝えにくいことってあります。
そこで動画を挿入したりGIFアニメを使ったり・・・でも、これって結構面倒ですよね。
パソコン画面でキャプチャーした画像をそのままアニメ―ションできたら・・楽ちんで楽しいと思いませんか(^^)
そんなソフトを見つけました。
説明だけでなく画像効果もあります。
Screen To Gifのダウンロードとインストール、使い方の紹介です。
目 次
Screen To Gifとは
「Screen To Gif」は、スクリーンレコーダーでデスクトップ画面の指定領域を動画としてキャプチャーして、アニメーションGIF形式で保存できるツールなんです。
とっても簡単！
Webカメラレコーダーとボードレコーダーもあります。
かなりのクオリティーのGIFアニメが簡単につくれたり、シネマグラフまで作れる無料ソフトが「Screen To Gif」です！
使うのも楽しいソフトなんです！（＾ｏ＾）
Screen To Gifのインストールとダウンロード
オープンソースプロジェクトのホスティングサービス
“CodePlex”のプロジェクトサイトからダウンロードできます。
フリーソフトで、動作には.NET Framework 4が必要です。
Screen To Gif をクリックするとダウンロードサイトに飛びします。
一番左の「Download」ボタンをクリックしてダウンロードします。
USBメモリー等で持ち運べるポータブル版をダウンロードする場合は、左から2番目の「Download」ボタンをクリックします。
日本語にしたい場合は翻訳をします。
左から2番目の「ダウンロード」をクリックして保存してみます。
画面左下にScreen To Gif･･･のzipのフォルダアイコンが表示されます。
クリックして保存します。
保存されたファイルは使いやすくするために、デスクトップに右ドラッグでショートカットを作成するといいですね。
Screen To Gifの起動
●起動アイコンをクリックします。
●メイン画面が表示されます。
メイン画面
「レコーダー」・・キャプチャー枠が表示され、キャプチャーが開始できます。
「webカメラ」・・Web カメラレコーダー画面を開きます。
「ボード」・・描画を記録できるホワイトボード レコーダー画面を開きます。
「エディタ」・・新しい記録を始めたり、編集したりできるエディタ画面を開きます。
まずは、触ってみましょう！！
レコーダーの使い方
１．レコーダーを起動する
左の「レコーダー」をクリックするとキャプチャー枠が表示されます
この枠で録画したい範囲を囲んで指定します。
枠は移動させたり、リサイズしたりできます。
キャプチャー枠
ウインドウサイズはマウスでドラッグすることで変更できますが、記録ボタン左側の数値で指定することもできます。（横幅×高さ）
左端の「ウィンドウにスナップ」ボタンはウィンドウの上をクリック、ドラッグアンドドロップすると、自動的にScreenToGifのサイズを変更して移動することができます。
フレームレートは作成するGIFアニメのフレームレートの指定です。
ここの値が大きいと、動きがなめらかになりますが、その分ファイルサイズが大きくなります。
fpsとは1秒間に記録するフレーム（コマ）数のことです。
このフレーム数を多くすればするほど滑らかなGIF画像を作ることができますが、その分容量が大きくなります。
慣れるまでは初期設定のままやってみます。
オプションボタンで録画の設定ができます
オプションボタン
◇スクリーンレコーダー
・録画中にマウスカーソルを表示する ・・マウスカーソルも録画できます。
・マウスのクリックを検出する ・・マウスクリックを任意の色の楕円エフェクトで表現します。
チェックをつけると色が選択できます。
・開始前にカウントダウン ・・録画開始前に3秒間のカウントダウンをする。
・その他は（）内に説明があります。
各項目を見て、必要に応じて設定します。
設定が終わったら右下の「OK」をクリックします。
２．キャプチャーの実行
開始するには、右下の「記録」ボタンをぽちっとクリックします。
録画中に、キャプチャー枠を移動することもできます。
キャプチャー枠を動かすと、範囲領域も変動していきます。
録画中は左上に進み具合が数値で表示されています。
記録ボタンは「ポーズ」ボタンになります。
録画を一時停止するにはポーズボタンをクリックすると一時停止になります。
録画を終了するには右下端の停止ボタンをクリックします。
録画を停止すると、自動的に「Screen To Gifエディタ」が立ち上がります。
ここで編集ができます。
エディタ
画面下にフレームのサムネイルが並んでいます。
このフレームリストのサムネイルをクリックすると画面中央にそのフレームが表示されます。
下部にあるボタンはリボンの「プレイバック」タブの内容と同じです。
左の拡大ボタンで表示したサムネイルの画面表示サイズを変更できます。
横の数字は全フレーム数/選択フレーム番号です。
表示しているフレームの上で右クリックするとショートカットメニューが表示されます。よく使う操作が実行できます。
再生・元に戻す・やり直し・名前をつけて保存・破棄・選択されたフレームを削除などがあります。
●キャプチャーしたフレームの削除をする
画面下部に録画したフレームが並んでいます。
その下のシークバーをドラッグ、或いは一番したの矢印ボタンで左右に移動して削除したいフレームを探します。
削除したいフレームのサムネイルを、選択状態にします。
複数選択するには、最初のサムネイルを選択したら最後のサムネイルをSiftキーを押しながらクリックすると連続したフレームを選択できます。
「Ctrl」キーで飛び飛びのサムネイルを選ぶこともできます。、
画面上部の「編集」タブをクリックし、「削除」をクリックします。
選択したフレームが削除されます。
削除したいフレームが他にもある場合は、同様にして削除します。
※間違えて削除してしまったら？ ⇒ ホームタブの「元に戻す」で直前のアクション内容を戻すことができます。
全てのアクション内容をやり直したいときは、「リセット」ボタンをクリックします。
●指定したフレームに、テキストを合成
画面下部の欄で、テキストの合成を行いたいフレーム（のサムネイル）を選択状態にします。（複数選択可）
リボンのタブを「画像」に切り替え、「キャプション」または「テキスト入力」ボタンをクリックします>
キャプション⇒見出し テキストの輪郭を強調できる。
テキスト入力⇒テキストの輪郭を強調することができないが、合成先の場所をドラッグ＆ドロップで自由に指定できる。
「テキスト入力」を選択した場合、左上に「Text」というテキストが表示されます。
「Text」というテキストが合成されます
この「Text」というテキストを、合成先の場所にドラッグ＆ドロップします。
画面右側のテキスト編集パネルで、合成するテキストを入力編集します。
テキストのフォント・スタイル（Normal - 普通/Italic - イタリック/Oblique - 斜体）・太さ・サイズ・色の設定ができます。
合成するテキストが「キャプション」の場合は、さらに
アウトライン（輪郭）の厚さ・アウトラインの色・縦方向の位置（Top - 上/Center - 中央/Bottom - 下）横方向の位置（Left - 左/Center - 中央/Right - 右）・マージン（余白）を設定できます。
設定が終わったら、パネル下部の「適用」ボタンをクリックします。
選択したフレームにテキストが追加されます。
●タイトルフレームの作成
キャプチャーした動画には、タイトルフレームを付けることもできます。
タイトルフレームを付ける場合は、画面上部のタブを「画像」に切り替え、「タイトルフレーム」ボタンをクリックします。
画面右側に、「タイトルフレーム」のパネルが表示されます。
パネルで表示するタイトルの入力と設定をします。
編集はテキストの入力と同様です。
ディレイはタイトルフレームの表示時間（単位はミリ秒）です
設定が終わったら「適用」をクリックします。
●ウォーターマーク（透かし模様）の合成
画面下部の欄で、ウォーターマークの合成を行いたいフレーム（のサムネイル）を選択状態にします。 （複数選択可）
画面上部のタブを「画像」に切り替え、「透かし」ボタンをクリックします。
「画像」タブで画面右側に表示される「透かし」パネル内の「選択」ボタンをクリックします。
ウォーターマークとして合成する画像（BMP / JPEG / PNG）を選択します。
※事前に透かしもようとして使いたい画像などを任意の場所に保存しておきます。
ウォーターマークの不透明率・スケール・ポイント（位置）を設定し、「適用」ボタンをクリックします。
設定はマウスドラッグでもできます。
選択していたフレームにウォーターマークが合成されます。
●指定したフレームに、フリーハンド線を描画
画面下部の欄で、フリーハンド線を描画したいフレーム（のサムネイル）を選択状態にします。 （複数選択可）
画面上部のタブを「画像」に切り替え、「フリー描画」ボタンをクリックします。
画面右側に表示される「フリー 描画」パネル内で、モードの設定をします。
ペン・幅・高さ・色・先端（ペン先の形状）（四角か丸）・その他（ハイライター（蛍光ペン）/カーブに合わせる）
などのオプションを設定ができます。
描画した内容を消去する時は、「モード」を「消しゴム」にしておきます。
プレビュー画面上に、フリーハンドで線を描いていきます。
描画が終わったら、「フリー 描画」パネル下部の「適用」ボタンをクリックします。
選択したフレームに描いた線が追加表示されます。
●GIFアニメとして保存
録画した内容を、GIF アニメや動画として保存します。
編集が終わったら、画面上部のリボンの「ファイル」タブをクリックします。
「名前をつけて保存」ボタンをクリックします。
パネルが表示されたら、保存するGIF アニメの各設定をします。
ファイルタイプ・エンコーダ・GIFオプション ―繰り返し方（ループ型GIF にするか、永遠に繰り返すか、指定回数のみ繰り返し再生させるか）などのオプションを設定します
・録画内容を動画ファイルとして出力する場合は、パネル上部のファイルタイプ欄で「ビデオ」を選択し各設定をします。
パネルを下にスクロールして「ファイル」欄の「場所の選択（黄色いフォルダ）」アイコンをクリックし、ファイルの出力先やファイル名を指定します。
「保存」をクリックするとパネルに保存場所やファイル名が表示されるので確認したらパネルの「保存」をクリツクします。
デスクトップの右下に「エンコーダー」という画面が表示され、GIF アニメへの変換処理が開始されます。
場合によってはいくらか時間がかかります、ひたすら待ちます。
「完了」と表示されたら変換完了です。
Ｗｅｂカメラを録画する
起動画面の「Web カメラ」をクリックし、Web カメラレコーダー画面を表示します。
「デスクトップ操作を録画する」の操作同様に、記録 ボタンをクリックすると、すぐに録画を開始します。
レコーダーと使い方はほぼ同じです。パソコンにWebカメラが接続されていないとできません。
ボードを録画する
ボードは自由にマウスのドラッグで絵などがかけるものです。
起動画面の「ボード」をクリックし、描画を記録できるボード レコーダー画面を表示します。
ここにペンツールで自由に描画できます。描くごとに録画されます。
上部にはペン先の色やサイズを変更するオプションがあります。
動画の一部だけを動かしてシネマグラフを作る
「Screen To Gif」は、シネマグラフも簡単に作れます。
シネマグラフとは写真の一部分だけにループした動きを入れた画像のことですが、ブログ記事などに貼ると面白い効果があります。
「静止画？」と思ったら一部だけが動くなんていうのができます。
・キャプチャーが完了したら、リボンの「画像」タブを開いて「シネマグラフ」をクリックします。
シネマグラフのパネルから動かしたい部分を「ペン」や「選択」でマーカー（緑色）します。
「適用」をクリックしてシネマグラフの動きを再生して確認してみます。
余計な部分まで動いてしまうようならマーカーを消しゴムで消して修正します。
完成したら「保存」します。
例はあまりうまくできてないけど、感じがわかってもらえればと思います。
画像の一部分だけループで動きのある不思議な画像ができます。
保存した画像はブログやホームページに貼ることができます。
不思議なシネマグラフを作るには、本来動いているはずの風景動画を選ぶことで、脳は静止画と思うわけです。
その認識の中で、画像の一部分が動くので不思議な感覚になるんですね。
エディタのリボンの機能
ファイルタブ
・新規 起動画面と同じ項目に加えて「空プロジェクト」で現在の録画を破棄して新しい録画をすることができます
・挿入 現在のアニメーション内にアニメーションを挿入するオプション
録画 ・・スクリーンレコーダーを開きます。録音が終了すると、エディタに戻り、新しい録音を[フレームの挿入]ウィンドウにマージします。
Webカメラ録画 ・・ウェブカメラレコーダーを開きます。上記と同じ動作に従います。
ボード録画 ・・ボードレコーダーを開きます。上記と同じ動作に従います。
メディア :・・ファイルピッカーを開き、画像またはビデオを現在のアニメーションに挿入するオプションを提供します。
・ファイル
名前をつけて保存 ・・右側に保存のアクションサイドバーが表示され、保存場所などを指定してGIF、ビデオ、プロジェクト、または別々の画像として保存できます。
ロード ・・メディアまたはプロジェクトを新しいプロジェクトに読み込むことができます。
最近のプロジェクト ・・最近のプロジェクトパネルを開きます。ここでは、廃棄されなかった最近のプロジェクトを読み込むことができます。
プロジェクトを破棄 ・・現在のアニメーションを破棄（ディスクから削除）します。
実行中のエンコーディングを妨げません。
ホームタブ
・アクション、
元に戻す ・・フレームリストに加えられた最新の変更を元に戻します
リセット ・・フレームリストの最新のundid変更をやり直します。
やり直し ・・元に戻したものをやり直す。何も変わらない
・クリップボード
貼り付け ・・現在アクティブなクリップボードエントリを取得し、選択したフレームの前後にあるフレームをリストに挿入します。
ペーストの動作は、クリップボードパネルで設定できます。
コピー ・・選択したすべてのフレームをクリップボードにコピーします。
コピーするとすぐにクリップボードパネルが開きます。
切り取り ・・選択したフレームをフレームリストから削除することを除いて、上記と同じです。
右下のボッチ⇒クリップボードを表示：クリップボードパネルを開きます。
・拡大
100％ ・・ズームを100％に設定します。
イメージに合わせる ・・ズームコントロールを使用して、画像をビューに合わせます。
ウィンドウに合わせる ・・ビューアーに合わせてズームを調整します
・選択
すべて選択 ・・すべてのフレームを選択します
フレームへ移動 ・・移動先ウィンドウを開き、特定のフレームに移動します。
フレーム番号を挿入する必要があります。
反転 ・・現在選択されているフレームの選択を削除し、選択されていない他のフレームを選択します。
選択解除 ・・現在選択されているフレームの選択を解除します。
プレイバックタブ
先頭 ・・最初のフレームに移動します。
前 ・・一つ前のフレームへ。
再生 ・・録画を再生します。
次 ・・一つ後ろのフレームに移動します。
最後 ・・最後のフレームへ移動します。
編集タブ
・フレーム
削除 ・・選択したすべてのフレームを削除します。
すべてのフレームを削除するときに警告が表示されます。
Remove Dupiicates（重複を削除） ・・クリックすると右側にウィンドが表示され、確認したら「適用」「キャンセル」で指示します。
フレーム数減少 ・・削除したフレームを数えずに、MフレームごとにNフレームを削除します。
この機能を使用すると、フレームレートを減らすことができます。
以前を削除 ・・選択中のフレームより前にあるフレームをまとめて削除します。
以後を削除 ・・選択中のフレーム以降の全てのフレームをまとめて削除します。
・並び替え
リバース ・・フレームリストの順序を逆にします。
最初のフレームが最後のフレームになります。
反復 ・・フレームリストにヨーヨー効果を追加します。
この効果は、基本的に：通常の順序+逆の順序です。
左へ移動 ・・選択したフレームをリストの前の位置に移動します。
最初の位置のフレームは最後の位置に移動します。
右へ移動 ・・選択したフレームをリストの次の位置に移動します。
最後の位置のフレームが最初の位置に移動します。
・遅延（期間）
オーバーライド ・・選択した各フレームの継続時間（表示時間）を変更できます。
増加/減少 ・・増加または減少遅延パネルを開きます
画像タブ
・サイズと位置
リサイズ ・・サイズ変更パネルを開きます。
クロップ ・・クロップパネルを開きます。（切り抜き）
反転/回転 ・・フリップ/回転パネルを開きます。
・テキスト
キャプション ・・キャプションパネルを開きます
テキスト入力 ・・フリーテキストパネルを開きます。
タイトルフレーム ・・タイトル枠パネルを開きます。
・オーバーレイ
フリー描画 ・・自由描画パネルを開きます。
進捗 ・・進捗パネルを開きます
境界 ・・ アニメーションに罫線を追加できます。
ボーダーの両側を微調整することができます。
この機能を適用するフレームを複数選択できます。
境界線パネルを開きます。
Obfuscate ・・ペイントツールを使用して、アニメートする画像の部分の上にペイントします。
選択されていないパーツは、最初のフレームをベースとして静的（固定、変更なし）のままです。このアクションはすべてのフレームに適用されます。
透かし ・・選択したフレームにウォーターマークをいれられます（透かし模様がはいります）
シネマグラフ ・・Cinemagraphパネルを開きます。
トランジションタブ
フェード ・・特定の色または次のフレームにフェードインできます。スライダを使用してトランジションの長さを選択します。
このトランジションを適用するには、1つのフレームを選択する必要があります。
スライド ・・次のフレームにスライドします。
このトランジションを適用するには、1つのフレームを選択する必要があります。
統計タブ
フレーム数・全期間・フレームサイズ・平均期間（遅延）・Frame DPI and scaleなどの情報がわかります。
選択されたフレーム ・・現在のフレームに関する情報を表示しています。
Screen To Gif さいごに
Screen To Gif いかがですか？
操作している間も楽しめるソフトですね（＾＾）
なんでも楽しくやりたいというのがモットー。
こういうソフトに出会うとわくわくします（＾＾）
うまく生かして、あなたのオリジナル作品を作ってみてください。
