Webサイトに動画を載せる場合、YouTubeを埋め込むのが一番ラクで軽くて確実です。
でも、デザインの都合やブランディングの理由で、サーバーに直接動画を置いて再生するケースもあると思います。

そのとき気をつけたいのが「動画が重すぎないかどうか」。

動画が重すぎると…

• 読み込みが遅くて見られない
• スマホユーザーの通信量が増える
• サーバーに大きな負荷がかかる
• 表示速度やSEOに悪影響が出る

動画を軽くするには「3つの数値」を意識！

Web動画の最適化は、主に以下の3つの指標でコントロールします。

1. 解像度（px）

用途	推奨解像度
フル画面・PC用	1920×1080
小さめの動画	1280×720
背景動画・装飾用	854×480 など

目安として1920×1080（フルHD）で十分です。

2. フレームレート（FPS）

推奨値	用途
24〜30fps	一般的な動画、説明用など
～60fps	ゲームや激しい動きの動画

Webでは30fpsで十分です。60fpsにすると容量がかなり増えるため注意が必要です。

3. ビットレート（kbpsまたはMbps）

画質とファイルサイズを左右する最重要項目です。

解像度	推奨ビットレート
1920×1080	2000～5000 kbps（2〜5Mbps）
1280×720	1000～3000 kbps
854×480	600～1500 kbps

ビットレートは、動画内の動きの激しさによって変える必要があります。
実際に再生して「違和感がない範囲」でなるべく下げましょう。

圧縮・変換する方法は？

編集ソフトを使っている場合（Premiere / DaVinci Resolve など）

書き出し時に以下のような設定を行いましょう：

• 形式：MP4（H.264）
• 解像度：1920×1080
• フレームレート：30fps
• ビットレート：3000kbps（CBRまたはVBR）

手元に動画ファイルがある場合（変換ソフト使用）

HandBrake（無料）などの動画変換ツールを使って再圧縮も可能です。

おすすめの設定：

• Format: MP4
• Video Codec: H.264
• Constant Quality: RF20〜23（もしくはビットレート指定）
• 音声：AAC 128kbps など

WebM形式について

webサイトに最適な動画形式として、WebM形式があります

WebM形式は、Googleが開発したオープンな動画フォーマットで、MP4よりもファイルサイズが小さくなることがあります。
特に背景動画やループ再生の用途など、装飾的な動画にはWebMの利用もおすすめです。

特徴	内容
拡張子	.webm
コーデック	VP9（またはAV1）、音声はOpus/AACなど
メリット	高圧縮で軽量、透明背景の動画も可能
デメリット	Safari（iOS）など、一部ブラウザで再生不可(Safari 17.4で対応)

最後に：画質と軽さのバランスを取ろう

Web用の動画は「できるだけ軽く、でも荒くならない」バランスが大切です。
ただ高画質なだけでは、逆にサイトのパフォーマンスやUXを損ねる場合もあります。

まとめ

• MP4（H.264）で出力する
• 解像度は1920×1080が基本
• FPSは30前後、ビットレートは2〜5Mbpsを目安に
• 編集ソフト or 変換ソフト(HandBrake等)で調整
• 動画の動きに応じてビットレートを調整！
• WebMは軽量・透明背景動画に便利だが、古いiOSなどに対応していない