macOS上の画面操作をアニメーションWebPにする

アニメーションWebP

WebPはGoogleが開発した画像フォーマットで、JPEGとPNGに比べて圧縮率が高くファイルサイズが小さいという特徴があります。2023年1月時点では一般的に使われているほとんどのWebブラウザで表示できます。

WebP形式画像はアニメーションにも対応しています。非可逆圧縮も行えるのでファイルサイズを抑えることができます。

使用するツール

• macOS標準 画面収録機能（Shift+Command+5 で起動）
• ffmeg
• img2webp

ツールのインストール

下記コマンドで ffmpeg と img2webp をインストールする。
※Homebrewがインストールされていることが前提

brew install ffmpeg webp

アニメーションWebPの作成手順

作成手順概要

1. Shift+Command+5 を押して画面収録を記録し、画面操作を記録した動画（QuickTimeムービー形式）を記録
2. 動画を ffmpeg を使って多数の静止画（PNG形式画像）に変換
3. 多数の静止画を img2webp を作って1つのアニメーションWebPに変換

ffmpeg で動画から静止画を切り出す

以下のコマンドで動画 movie.mov を image0001.png, imgage0002.png, image0003.png ... に変換する。フレームレートは25fps（動画1秒ごとに25枚の静止画を出力）。

ffmpeg -i movie.mov -r 25 image%04d.png

• -i: 変換元の動画ファイル
• -r: フレームレート（fps）

-s オプションを使うと静止画を出力する際にサイズを指定できる。以下の例は静止画を幅640px高さ360pxで出力する。

ffmpeg -i movie.mov -r 25 -s 640x360 -lossy image*.png

img2webp で複数の静止画を1つのアニメーションWebPに変換

以下のコマンドで複数の静止画 image0001.png, imgage0002.png, image0003.png ... を1つのアニメーションWebP anime.webp に変換する。1コマ40ミリ秒のアニメーションとする（25fpsで静止画に出力したので、1000/25 = 40）。

img2webp -o anime.webp -loop 0 -d 40 -lossy image*.png

• -o: 出力するアニメーションWebPのファイル名
• -loop: アニメーションを何回繰り返すか。0の場合は無限に繰り返す
• -d: 継続時間（単位＝ミリ秒）。1枚の画像を何ミリ秒の動画にするか
• -lossy: 非可逆圧縮を行う（ファイルサイズをより小さくできる）

別解：ffmpegから直接アニメーションWebPを出力

ffmpeg -i movie.mov -vf "fps=25" -loop 0 anime.webp

収録した動画をそのままWebPにするのであればこの方法が簡単です。私がこの方法ではなく全フレームをPNGに書き出したものからアニメーションWebPを作るのを好むのは以下の理由からです。

• アニメーションの時間の微調整がやりやすい（例えば25fpsで書き出したPNGが103枚だったら先頭か末尾の画像を3個削除して4.12秒のアニメーションを4秒ちょうどにする）
• 生成された画像のうち1枚をOGP画像などに活用したい
• 途中の不要なフレームの削除が単なるファイル削除で行えるのでやりやすい