はじめに

こちらの記事で操作する GIF 画像を作るのに困って調べた結果、動画から GIF 画像作成サービスや、フリーソフトを試したのち、個人的にある程度綺麗な作り方が出来たのでまとめておきます。

環境

• macOS High Sierra Version 10.13.6
• QuickTime Player Version 10.4
• ffmpeg 4.1

QuickTime Player を使った操作の録画

標準でインストールされている QuickTime Player を起動しましょう。
Launchpad からであればその他から起動できます。

アプリケーションメニューの「File」-「New Screen Recording」から録画画面を開きます。

赤い丸をクリックすると録画の準備が始まります。

スクリーン全体を録画するのであれば、中央をクリックします。
画面の一部を録画するのであれば、ドラッグして範囲を指定します。

今回は一部を録画したいので、ドラッグして範囲指定します。
中央の「Start Recording」をクリックすると録画が始まります。

録画したい操作が完了したら、右上部のステータスメニューの停止をクリックすると録画が終了します。

タッチバー付きの Mac であれば、「Stop」をタップすると録画が終了します。

動画の長さを編集するのであれば、「Edit」-「Trim」から可能です。

必要に応じて編集後、名前を付けて保存すれば、録画完了です。

ffmpeg のインストール

録画した操作動画を ffmpeg を使用して GIF 画像に変換します。
Mac 環境では、Homebrew でインストールしていきます。

$ brew install ffmpeg

動画を GIF 画像に変換

動画内で使用している色を最適化するために、パレット画像を生成します。

ffmpeg -i input.mov -vf "palettegen" -y palette.png

GIF 画像を出力します。
サンプルでは、-r オプションでフレームレートを 24 に設定しています。

ffmpeg -i input.mov -i palette.png -r 24 -y output.gif

さいごに

QuickTime Player で操作を録画し、ffmpeg で GIF 画像を作成するまでをご紹介しました。
サンプルの GIF 画像作成では、フレームレートを指定したのみですが、
画像ファイルサイズに制限がある場合や画像サイズを小さくして表示を早くしたい場合などは、フレームレートやピクセルサイズを調整すると良いと思います。
また、より精度の高い GIF 画像を作成するのであれば、参考ページや ffmpeg のドキュメントを参考にしてください。

参考

MacでQuickTime Playerを使った画面録画とGIFアニメーションに変換する方法
ffmpegで動画を綺麗なgifに変換するコツ
ffmpeg Documentation