MacでWeb向け動画最適化

Macでトリミング、リサイズ、H.264 MP4、Fast Start、ポスター画像、読み込み動作、リアルブラウザ再生テストにより、Web向け動画を最適化します。

マーケティングページの埋め込み動画は、ヒーローのMOVが120 MBでWeb対応のメタデータが不足しているため、モバイルでカクつきます。ブラウザは多くのフォーマットを再生できますが、MP4にH.264、適切なビットレート、faststartを組み合わせることで、予測可能な埋め込みやCMSへのアップロードにおいて最も確実な結果が得られます。

Core Web Vitalsでは、大きなメディアファイルはパフォーマンス上のリスクとみなされます。適切なサイズの埋め込み動画は、ページの他の部分が軽量であってもLCPを改善します。

Web動画に必要な要件

Web配信は、マスターアーカイブの保存やメールへの添付とは異なります。

要件	重要性
MP4 コンテナ	HTML5 `<video>` タグの最も広いサポート範囲
H.264 動画	Safari、Chrome、Edgeで追加プラグインなしで再生可能
AAC オーディオ	ブラウザのデコーダと一致
faststart (`moov` atomを先頭に配置)	残りのデータがダウンロードされている間に再生を開始
適度な解像度	ヒーローは1080pまたは720p。生4Kではない

VP9やAV1などの最新のコーデックはバイト数を削減しますが、エンコードの複雑さとフォールバックの必要性が増します。マルチコーデックパイプラインを計画する際は、 VP9とAV1とはをご覧ください。今日の単一の埋め込み動画であれば、H.264 MP4が実用的なデフォルトです。

ランディングページの自動再生ループは短く保つべきです。1080pで60秒のヒーロー動画よりも、720pで15秒のループの方が読み込みが速く、ストーリーテリングに大きな損失はありません。

QuickTimeでWeb向け圧縮

QuickTime Playerは、1クリップの処理において最も速いビルトインのパスです。

ソースのMOVまたはMP4を開きます。
ページに必要なループまたはデモセグメントに編集 → トリムします。
ファイル → 書き出し → 1080p（デスクトップ用ヒーロー動画）、720p（背景用ループ）を選択します。

QuickTimeのエクスポートはブラウザで動作することが多いですが、faststart最適化が省略されている場合があります。低速回線でもプログレスバーが数秒間ゼロのままになる場合は、以下のFFmpegで再マックスまたは再エンコードしてください。

高品質なマスターは別場所に保管しておきます。Web用のコピーは、埋め込みサイズで明確に読み取れる最小のファイルであるべきです。

マーケティングサイトではミュート自動再生が一般的です。音量の急激な変化がないバージョンをエクスポートし、訪問者がミュートを解除した際に驚かないようにします。

faststart対応のFFmpeg H.264 MP4

Homebrew経由でFFmpegをインストールします（brew install ffmpeg）。

バランスの取れたWeb埋め込み動画：

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart web-hero.mp4

960 px幅の列向けに4Kのスクリーンレコーディングをダウンスケール：

ffmpeg -i input.mov -vf scale=1920:-2 -c:v libx264 -crf 24 -preset medium \
  -c:a aac -b:a 96k -movflags +faststart web-1920w.mp4

フラグ	意味
`-movflags +faststart`	インデックスを移動し、プログレッシブダウンロードに対応
`-pix_fmt yuv420p`	Safariでの再生問題を回避
`scale=1920:-2`	幅1920、高さを2で割り切れる値に

良いMP4ファイルはあるがfaststartがない場合？再エンコードせずに再マックスします。

ffmpeg -i input.mp4 -c copy -movflags +faststart output-faststart.mp4

埋め込み用のビットレートと解像度

ピクセル数はモニターのキャプチャサイズではなく、ページのCSS幅に合わせてください。

埋め込みの役割	推奨エクスポート設定
全幅ヒーロー（約1200 px）	幅1920 px、CRF 22〜24
インラインデモ（約800 px）	幅1280 px
背景ループ（音声なし）	720p、CRFを低く設定可能
小さなテキストを含む製品UI	幅1080p以上、ズーム時の確認が必要

アップロード前に、クリップがCDNまたはCMSの容量制限に収まるかどうかを推定するには、動画ファイルサイズ計算機を使用します。

-crfエクスポートで予算をオーバーする場合、動画ビットレートとはを読んでください。ほとんどのUIデモには30 fpsのフレームレートで十分です。マーケティング埋め込み動画では、60 fpsはフレームデータを2倍にしますが、得られる効果は限定的です。

公開前の再生テスト

訪問者が使用するのと同じネットワークで検証します。

開発ツールのネットワークスロットルを設定し、SafariとChromeでMP4を開きます。
faststartエクスポートで、再生が1秒以内に開始することを確認します。
グラデーションにおける可視圧縮がないか、ミュート自動再生ループをチェックします。

症状	考えられる解決策
最初のフレームまでの遅延が長い	faststartを追加するか、ビットレートを下げる
テキストがブロック状になる	CRF品質を上げるか、幅広でエクスポートする
トリム後に音声と映像の同期がずれる	ストリームコピーではなく、オーディオを再エンコードする

ポスター画像は知覚速度に影響します。MP4と軽量なJPEGポスターを組み合わせることで、動画のバッファリング中にレイアウトが跳ねるのを防げます。

エンコードは配信の一部に過ぎません。要素にイントリシックな寸法を与え、通常の制御されたクリップにはpreload="metadata"を使用し、意味のある音声にはキャプションを提供し、モーションがない方がページが機能する場合は自動再生を避けます。装飾的なループには、ユーザーの reduced-motion 設定を尊重します。

<video width="1280" height="720" controls preload="metadata" poster="demo-poster.jpg">
  <source src="product-demo.mp4" type="video/mp4">
</video>

同じアセットをYouTubeにも投稿する場合、 MacでYouTube向け動画を最適化とノートを比較してください。Web埋め込み動画は、アップロード用のミザンヌファイルよりもやや低いビットレートを許容します。

一般的な圧縮ワークフロー： Macで動画を圧縮する方法。

ランディングページの更新で複数のヒーローバリエーションを含む場合、夜間にエンコードをスケジュールします。FFmpegプリセットをシェルスクリプトで使用すれば、QuickTimeから各ループを手動でエクスポートするよりも効率的です。

GetCompressの活用

GetCompressは、Mac上でMOVおよびMP4の埋め込み動画を作成します。

ヒーローバリエーションのフォルダ全体にweb 1080pまたは720p loopプリセットを適用します。
エクスポート前にプレビュープレイヤーでループポイントにトリムします。
CMSでアップロード時にメガバイト単位の上限を課す場合、動画に目標ファイルサイズを設定します。
同じモーションレイアウトを再利用するローカライズされたランディングページ向けに一括エクスポートします。
公開前の製品映像は、ステージング期間中のみディスクに保持します。

FFmpegのワンライナーがページテンプレートごとに増える場合、GetCompressはより簡単な代替手段です。同じローンチでリポジトリ内に重いPNGスクリーンショットが含まれる場合は、画像プリセットと組み合わせてください。

CMSがサポートしている場合、画面下部の埋め込み動画は遅延読み込みしてください。ヒーローのMP4はfaststartを維持すべきですが、2次クリップは訪問者がスクロールするまでダウンロードを遅らせることができます。