動画エンコード基礎：UI/解説動画の解像度・fps・ビットレート完全指針

要点 (TL;DR)

• 最初に 最大表示幅 / アスペクト固定 (余白クロップ) で不要画素を削る。
• fps は 24/25/30 の最小。有意差ない 60fps は削除。
• 品質調整は平均ビットレート固定ではなく CRF/CQ 起点 → 再試行 ±2。
• VP9 → AV1 は 再生上位 / 長寿命 から段階導入。
• 客観閾値: SSIM ≥ 0.96 / VMAF ≥ 85 を割らない範囲で最小容量。
• RUM で 再生開始遅延 / Dropped Frames / 初期転送量 を継続監視。

1. 対象とゴール

• 対象: 30〜120秒 UI 操作/機能紹介。
• 非対象: 5分超・多カメラ実写・DRM ストリーミング。
• 目的: LCP/INP 影響最小 + 可読性 + 帯域効率。

2. 設計順序

1. 最大表示幅 (例 800px) 決定
2. アスペクト最適化 (16:9→不要余白あればクロップ)
3. fps: 24/25 (動き少) / 30 (ポインタ速) / 60 禁止
4. H.264 CRF23 試行 → 品質確認
5. VP9 で追加 20〜30% 削減 (時間コスト許容時)
6. AV1 は長寿命/高再生のみ段階導入

3. 推奨値と容量目安

4. ffmpeg レシピ + 推奨起点

# 1) 前処理 (不要余白クロップ + スケール)
ffmpeg -i input.mov -vf "crop=w=ih*16/9:h=ih,scale=1024:576:flags=lanczos" -an pre.mp4

# 2) H.264 起点 (再生互換最大)
ffmpeg -i pre.mp4 -c:v libx264 -preset medium -profile:v high -crf 23 -pix_fmt yuv420p   -movflags +faststart -c:a aac -b:a 96k ui-h264.mp4

# 3) VP9 (2pass 品質安定)
ffmpeg -i pre.mp4 -c:v libvpx-vp9 -b:v 0 -crf 32 -pass 1 -an -f webm NUL &&   ffmpeg -i pre.mp4 -c:v libvpx-vp9 -b:v 0 -crf 32 -pass 2 -auto-alt-ref 1 -pix_fmt yuv420p   -c:a libopus -b:a 64k ui-vp9.webm

# 4) AV1 (長寿命/再生上位のみ)
ffmpeg -i pre.mp4 -c:v libaom-av1 -cpu-used 6 -crf 35 -b:v 0 -row-mt 1 -threads 8   -pix_fmt yuv420p10le ui-av1.mkv

メモ: AV1 エンコードは時間コスト高。CI/自動バッチで cpu-used と row-mt を調整し SLA 内処理。

5. 品質検証

• 視認: 8–12px テキスト/カーソル/境界。
• 客観: SSIM≥0.96 / VMAF≥85 (ffmpeg+libvmaf)。
• 再生性能: Dropped Frames, CPU。
• 帯域: 再生開始〜1s 転送量。

6. 自動化フロー

1. アップロード & ハッシュ付与
2. メタ抽出 (duration,resolution)
3. H.264→VP9→(条件)AV1 キュー
4. VMAF 閾値下回りで CRF -2 再試行
5. 成果登録 manifest 更新
6. CDN 指紋付き URL / immutable
7. 中間ファイル TTL 清掃

7. 失敗と対策

8. チェックリスト

• 解像度最適化 & 余白クロップ
• fps 最小化
• CRF/CQ 品質調整済
• VP9/AV1 条件導入
• ポスター/LQIP 用意
• 1s 転送量測定
• SSIM/VMAF 閾値OK

9. FAQ

CRF の下限?

H.264 18 未満は利得小。

10bit 必須?

UI キャプチャは 8bit で十分。

関連

• 動画パフォーマンス指標
• 動画LQIP設計
• コーデック移行