もうJPEGやPNGは古い？アニメーションWebPをffmpegで作る実用ガイド

この記事にはアフィリエイトリンクが含まれており、この記事経由で契約すると私に紹介料が入ります。詳しくは　プライバシーポリシーをご覧ください。

WebP使っていますか？まだJPEGやPNGを使い続けていますか？

今ではWebPは主要ブラウザで広くサポートされ、軽量・高画質・透過対応と三拍子揃ったフォーマットです。しかもGIFのようにアニメーションも作れるのですが、大手メディアですらWebPを使ってないんですよね。人のパケ代なんだと思ってるんだ！と怒ってもいい所です。

WebPは今やPhotoshopでも標準で書き出しが出来るようになっていますが、ほとんど活用されてない気もします。でもこれってSEO対策にもかなり有効なんですが、そこまで重視する必要が無いサイトでは従来のままなんです。

なぜWebPがSEOに効くのか

軽量化：JPEGやPNGに比べて平均25〜35％ファイルサイズを削減できる2
表示速度改善：Googleは「ページ速度」をランキング要因に組み込んでおり、特に Core Web Vitals（LCP, CLS, FID） に直結する
ユーザー行動改善：ページが速くなると直帰率が下がり、滞在時間やCVRが上がる（Google調査では、読み込みが1秒→3秒に伸びると直帰率が32％増加）
Litehouse対策：GoogleのPageSpeed InsightsやLighthouseで「次世代フォーマットの画像を使用してください」と警告されるのを回避できる

実際の効果事例

大手ECサイト：商品画像をWebP化 → 読み込み速度が 2.8秒 → 1.5秒に短縮、直帰率12％減、検索流入18％増
旅行予約サイト：高解像度写真をWebP化 → 平均1.1秒短縮、予約コンバージョン15％向上

つまり「WebP化」は単なる画像最適化じゃなくて、Googleが求めるUX改善を直接満たす施策なんです。

この記事では、WebPの中でも動画やGIFからアニメーションWebPを生成するためのffmpeg実用コマンドを紹介します。
「軽くて速い」WebPを使いこなして、快適なWeb体験を実現しましょう。
※現在はffmpegが導入されていると仮定しての記事になります。導入してない方は下記に導入法を記載してあります。

Wizard-Phoenix

ffmpegとは何か？動画・音楽ファイルの変換方法を基本から分かりやすく解説 | Wizard-Phoenix 「動画のフォーマットを変換したい」「動画から音声だけを取り出したい」と思ったとき、ffmpegという名前を耳にしたことはありませんか？実はffmpegはもう25年の歴史がある...

基本の変換コマンド

ffmpeg -i input.mp4 -an -vcodec libwebp -vf "fps=15,scale=750:-1:flags=lanczos" -loop 0 -q:v 70 -compression_level 8 -preset default -vsync 0 output.webp

主なオプション解説

fps=15 : フレームレートを15fpsに制御（軽量化と滑らかさのバランス）
scale=750:-1 : 幅を750pxに固定し、高さは自動計算
-loop 0 : 無限ループ
-q:v 70 : 品質指定（数値が小さいほど高画質）
-compression_level 8 : 圧縮率（6〜9、8がバランス良）

scale指定3パターン

1. 入力サイズそのまま

-vf "fps=15,scale=iw:ih:flags=lanczos"

元の解像度を維持してWebP化
高解像度ソースはファイルサイズが大きくなるので注意

2. 幅を固定して高さは自動

-vf "fps=15,scale=750:-1:flags=lanczos"

幅を750pxに統一
高さはアスペクト比に合わせて自動計算
レイアウト幅を揃えたいときに便利

3. 高さを固定して幅は自動

-vf "fps=15,scale=-1:480:flags=lanczos"

高さを480pxに固定
幅はアスペクト比に合わせて自動計算
サムネイルやカードUIに最適

まとめ

WebPは今や標準的な画像フォーマット
GIFより軽く、PNGより高画質、JPEGより柔軟
WebPに変えるだけで サイト全体が軽量化 → 表示速度改善 → Core Web Vitals改善 → SEO評価向上 という流れが作れる
Lighthouseの「次世代フォーマットを使え」という警告も消えるので、技術的にもマーケ的にも一石二鳥
ffmpegを使えば、動画やGIFから簡単にアニメーションWebPを生成できる
用途に応じて scale指定 と 品質調整 を使い分けるのがコツ

実用的なオマケコード

▼あなたの動画をアニメーションWebP(AnimatedWebp)にしてくれるコードはこれです。Windows向けにバッチファイルにしておきました。これでbatファイルを作って、D&Dすれば同じフォルダーにアニメーションWebP(AnimatedWebp)で出力してくれます。

@echo off
rem --- UTF-8にコードページを変更し、日本語ファイル名の文字化けを防ぐ ---
chcp 65001 > nul

setlocal

rem --- ドラッグ＆ドロップされたファイルがなくなるまでループ処理 ---
for %%f in (%*) do (
    echo ======================================================
    echo Processing: "%%~f"
    echo ======================================================

    rem ◆動画をアニメーションWebPに変換（fpsやサイズは調整可）
    ffmpeg -i "%%~f" -vf "fps=15,scale=iw:ih:flags=lanczos" -loop 0 "%%~dpnf.webp"

    echo.
)

endlocal

echo.
echo All tasks completed.
pause

業務やプロジェクトで「少し助けが欲しい」と感じることはありませんか？
小さなご相談から大きな課題まで、私たちが全力でお手伝いします。
ぜひお気軽にお問い合わせください。