【5分で分かる】技術ブロガーのためのスクリーンキャプチャGIF動画の作り方

技術ブログに動画を載せるには

技術ブログには、その文中に技術やサービスを操作している スクリーンショット があると分かりやすいですよね。さらにはそれが動画になっていると、動作の様子がより分かりやすくなるため大変効果的です。

しかし動画はファイルサイズが大きくなりがち。そこで GIF動画にする という方法は圧縮しやすいためとても良い方法です。

macOSの場合は FFmpeg を使うとコマンド一発で簡単にGIF動画に変換できます。ということで、技術ブロガーのためにスクリーンキャプチャGIF動画の作り方をまとめたいと思います。

まずはじめに、結論

忙しい人のための結論を先に書きます。macOSの場合、FFmpegを使って以下のコマンドを実行するとMOVファイルをGIFファイルに変換できます。

# インストールしていない場合はインストール
$ brew install ffmpeg

# 以下を実行
$ ffmpeg -i <Movファイル名> -vf scale=1280:-1 -r 10 <出力するGIFファイル名>

これでMOVファイルをGIFファイルに変換できます。

以下では、MOVファイルを作るところGIFファイルにするまでの流れを解説したいと思います。

スクリーンキャプチャ動画作るまでの流れ

それでは、macOSの場合のスクリーンキャプチャ動画を作るまでの流れを説明します。

1. QuickTime Playerで画面収録を行う

まずQuickTime Playerを起動します。QuickTime PlayerはmacOSに標準でインストールされているアプリケーションです。

メニューから「ファイル」の「新規画面収録」を選びます。

以下のようなウインドウが表示されるので真ん中の赤いボタンをクリックします。

画面収録を行う範囲をドラッグで調整します。技術ブログの場合はアプリケーション画面全体を選ぶと良いでしょう。

中央に表示されている「収録を開始」をクリックすると収録が始まります。収録中の画面操作が記録されます。

収録を終える場合はステータスバーに表示されている以下のようなアイコンをクリックします。

動画が出来ました。

2. トリミングを行う

動画は収録開始から終了まで、綺麗に操作できることは滅多にありません。ということで動画のトリミング（切り取り）を行い、必要最低限にカットします。

メニューの「編集」の「トリム」を選びます。

タイムラインバーが表示されます。黄色い枠で囲われた範囲が保存される動画の範囲です。枠をドラッグして範囲を調整し「トリム」をクリックします。

MOVファイルとして保存します。メニューの「ファイル」の「保存」を選び、好きな場所に保存します。

3. GIFファイルに変換する

いよいよFFmpegの出番です。ターミナルで先ほど動画ファイルを保存したディレクトリを開き、以下のコマンドを実行します。

# インストールしていない場合はインストール
$ brew install ffmpeg

# 以下を実行
$ ffmpeg -i sample.mov -vf scale=640:-1 -r 10 sample.gif

scale=640 はGIFファイルの横幅のサイズです。適宜調整が必要ですが、数秒程度であれば640〜1280くらいが視認性が良く、ファイルサイズも大きくなりません。

元のMovファイルは9.4MBでしたが842KBまで圧縮されました。

$ ls -l sample.mov sample.gif
-rw-r--r--  1 suwa.yuki  staff   841883  6 24 00:00 sample.gif
-rw-r--r--@ 1 suwa.yuki  staff  9448152  6 24 00:00 sample.mov

実行結果の動画をサクッと貼ろう

FFmpegを使うと、非常に簡単にGIFファイルに変換できます。技術ブログを書き上げる際、ちょい足し動画でより分かりやすいブログに仕上げましょう。