ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

mac の画面を録画して GIFアニメを作る方法

ブログを書いていると、説明資料としてGIFアニメが欲しくなるときがあります。
自分の場合は、はてなブログに GIF の説明資料をアップロードするときに必要になります。
今回は、作業端末が mac で GIFアニメを作る方法をここにメモしたいと思います。

GIF アニメとは?

GIF アニメは「GIFアニメーション」の略で、複数の静止画をひとつの動画のようにコマ送りで表示する画像フォーマットを指します。

メリット

  • 動画よりもファイル容量が少ないデータ量で扱える
  • 画像よりも印象に残りやすいイメージが作成できる
  • 動画再生ボタンなどは無く何もしなくても自動再生とループされる

デメリット

  • 動画ほどなめらかな動きが表現できない
  • GIFのファイルサイズに注意(ファイルサイズが大きくなってしまうこともあるので注意)

GIF アニメ作成手順

動画撮影

以下の手順で動画撮影を行います。

1.「Shift + Command + 5」を押します。
2.「選択部分を収録」を押し、枠をドラッグ&ドロップし、収録範囲を決めます。
3.「収録」ボタンをクリックすると録画が開始されます。
4. 画面上部 or「Touch Bar」の左に停止ボタンがあるので押すと録画が終了します。

mov ファイルが作成されます。
(今回は chart.mov というファイル名に変更しています)

GIFアニメに変換

以下のサイトで mov ファイルを gif に変換します。
convertio.co

フォーマット指定

MOV -> GIF を選択します。

mov ファイルアップロード&変換

chart.mov をアップロードし変換ボタンをクリックします。

gif ファイルダウンロード

変換が完了したら gif ファイルをダウンロードします。

はてなブログにアップロード

gif ファイルをはてなブログにアップロードします。

実際にアップロードしたもの

チャートの表示をGIFアニメにしたものを表示させてみました。