コンテンツへ移動

WindowsでWeb向け動画最適化

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

Web動画は、単に小さくした編集用エクスポートではありません。解像度、起動動作、ポスター画像、コントロール、読み込み戦略は、ページ上の特定の配置に合わせて調整する必要があります。Windowsでは、Edge DevToolsとClipchampを使って、繰り返しエクスポートを自動化する前に実用的な基盤を整えることができます。

動画の役割を定義する

エンコーダー設定を選ぶ前に、そのクリップが果たすべき役割を明確にします。

ページでの役割維持すべき要素削除すべき要素
背景ヒーロー短い視覚ループ音声、長いナレーション、小さな文字
製品デモ読みやすいUIとポインターの動き待機時間、繰り返しの動作
顧客の声明瞭な音声と顔の詳細追加のテイク、ルームトーン
ヘルプ記事正確な操作と結果導入アニメーション、無関係なナビゲーション

解像度はレンダリング幅に合わせてください。800ピクセルの記事カラムで表示される動画に、4Kソースは必要ありません。高品質なマスターは編集プロジェクトに残し、配信用のファイルは別途作成します。

ClipchampでWeb版をカットする

ソースをClipchampにインポートし、埋め込み用Timelineを構築します。

  1. 有用な動作の前後の一時停止をトリミングします。
  2. 静かな背景ループの場合は音声を削除します。
  3. UIの文字が読みやすいようにキャプチャをリフレームします。
  4. 小さなループには720p、大きな製品デモには1080pでエクスポートします。

ページで指定されているCSSサイズで出力をプレビューします。1080pファイルでも、UIが広すぎると埋め込み時に文字が小さくなり、品質が低下することがあります。

Windows TerminalからFast Startを追加する

MP4ファイルには再生インデックスがファイル末尾に含まれることがあります。このメタデータを先頭に移動することで、ダウンロード完了前に再生を開始できます。winget install --id Gyan.FFmpeg -eでFFmpegをインストールし、Clipchampのエクスポートを再エンコードせずにリマックスします。

ffmpeg -i clipchamp-export.mp4 -c copy -movflags +faststart product-demo.mp4

ソースのリサイズと圧縮が必要な場合は、一度エンコードします。

ffmpeg -i source.mov -vf scale=1280:-2 -c:v libx264 -crf 23 -preset medium `
  -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart product-demo.mp4

CMSでファイルサイズに上限がある場合は、 動画ファイルサイズ計算機 を使用してください。CRFは品質目標であるため、同じ長さのクリップでもファイルサイズが異なることがあります。

読み込みとポスターの動作を選択する

エンコーディングだけでは無駄なHTMLは修正できません。動画にイントリンスティックな寸法を指定し、代表的なポスター画像を提供し、訪問者が到達する前にセカンダリークリップのダウンロードを開始しないようにします。

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

ミュートされた装飾的なモーションには、reduced-motionの環境設定を尊重し、自動再生がなくてもページが情報を伝達できるようにします。ヘルプ記事では、自動ループよりも可視性の高いコントロールとキャプションが重要です。

H.264 MP4は、堅実な単一ファイルの選択肢です。VP9やAV1は転送サイズを削減できますが、意図的なマルチフォーマット戦略と、より多くのエンコード時間を必要とします。ビルドパイプラインに追加する前に、 VP9とAV1の解説 をご覧ください。

Edgeでデプロイされた埋め込みをテストする

ローカルファイルのテストだけでは不十分です。プレビュー環境にデプロイし、Edge DevToolsを開いてキャッシュを無効にし、低速なネットワークプロファイルを適用します。

確認すべき項目：

  • 動画データが届く前にポスターが表示されるか
  • 最初のフレームまでの時間
  • 再生開始前に実際に転送されたバイト数
  • メディア初期化中のレイアウト安定性
  • レンダリングサイズでの文字、グラデーション、モーション
  • キーボードコントロール、キャプション、reduced-motionの動作

起動が遅い場合は、品質を下げる前にネットワークリクエストを確認します。Rangeリクエストをサポートしていないサーバー、過剰なpreload、またはFast Startインデックスの欠如が、実際の問題である可能性があります。

GetCompressがWeb動画制作に適する場合

ClipchampとFFmpegの組み合わせは、1つの埋め込みには効果的です。Windowsチームが承認されたマスターから製品デモ、ローカライズされたヒーローループ、ヘルプクリップを繰り返し準備する場合は、GetCompressがより適しています。再利用可能な寸法とファイルサイズ目標で、トリミング、プレビュー、バッチ配信コピーをローカルで実行できます。

GetCompressの役割は、アクセシブルなHTML、レスポンシブページデザイン、CDN設定、キャプション、デプロイ済みパフォーマンステストとは異なります。これらはWeb実装の一部として残ります。

関連投稿