Web サイトに動画を載せるとき、何を決めればいいのか ？企画・書き出し・実装のチェックリストと、仕様の「なぜ」を紐解いてみた

恥ずかしながらこれまで始めて、 Web サイトに動画を設置する仕事をしました。
やってみて分かったのは、「動画を載せる」と一言で言っても、決めることが多いということです。

尺はどれくらい？ サイズは？ 形式は MP4？ フレームレートって何を指定すればいいの？

動画に詳しくない自分は、何から手をつければいいのか分からず、調べながら手探りで進めました。

この記事は、 「Web に動画を載せるとき、何を決めればいいか」のチェックリストです。
「企画・仕様」「書き出し（形式・圧縮）」「実装」の 3 段階で整理しました。

あわせて、デザイナーへの発注にそのまま使える仕様 4 項目と、それぞれの数値の「なぜ」まで掘り下げます。
同じく初めて動画を扱う方の参考にしていただけたら幸いです。

本記事は 2026 年 6 月時点の情報です。ブラウザの挙動は変わることがあるので、最終的には MDN や Can I use で確認してください。

結論: 最初に決めるべきは「3 つの層」

最初に全体像を示します。動画設置で決めることは、大きく 3 層に分かれます。

層	決めること	主に誰が
① 企画・仕様	尺・アスペクト比・表示サイズ・自動再生するか	自分＋デザイナー／依頼元
② 書き出し	形式・コーデック・解像度・フレームレート・ファイル容量	制作者／自分
③ 実装	<video> タグの属性・スマホ対応・アクセシビリティ	自分

「いきなり動画を作る／もらう」のではなく、①から順に決めていくと迷いません。
逆に、①を飛ばして動画をもらうと、「サイズが合わない」「重すぎる」「iPhone で再生されない」と後から作り直しになります。

そして、背景動画（ヒーロー動画）の場合は、②の書き出し仕様はほぼ次の 4 項目に集約されます。

■ フォーマット   : MP4（H.264）＋ WebM 併用
■ 解像度         : 1280×720
■ フレームレート : 16〜24fps
■ ビットレート   : 1,500kbps 程度

これだけ伝えれば、デザイナーは書き出し設定で迷わずに済みます。

ただ、数値を機械的に伝えるよりも「なぜこの数値なのか」を共有できると、デザイナー側からも代替案や改善提案が出やすくなります。②の章で、各項目の意図を順に解説します。

① 企画・仕様を決める

動画を作る・依頼する前に、まずここを固めます。

アスペクト比と表示サイズ

「画面のどこに、どんな比率で置くか」を最初に決めます。

• アスペクト比: 16:9（横長・一般的）、1:1（正方形）、9:16（縦長・モバイル向け）など
• 表示サイズ: 実際に画面で表示される幅（例: ヒーロー領域の全幅、カード内の 360px など）

ここで注意したいのが、「表示サイズ」と「動画ファイルの解像度」は別物ということです。
表示幅が 360px でも、高精細（Retina）ディスプレイで綺麗に見せるには、ファイルを少し大きめ（1〜2 倍）で書き出します。
「表示サイズ＝書き出しサイズ」と思い込むと、ぼやけた動画になります。
ただし大きくするほど容量も増えるので、画質と容量のバランスで決めるのがコツです。

尺（長さ）

長い動画はそれだけ重くなります。用途に応じて尺を決めます。

• 背景・ループ動画： 5〜15 秒程度で自然にループする尺
• 説明・プロモーション： 必要な情報が伝わる最小限の長さ

特にループさせる背景動画は、「始まりと終わりが繋がって見えるか」を企画段階で意識すると、仕上がりが綺麗になります。

自動再生するか

自動再生したいなら、企画段階で 音をどうするか を決めておきます。
後述しますが、ブラウザは音ありの自動再生をデフォルトでブロックします。自動再生する動画は「音なし前提」で企画するのが現実的です。

「音で伝えたい情報がある動画」なら、自動再生ではなく、ユーザーが再生ボタンを押す形にします。

② 書き出し（形式・圧縮）を決める

企画が決まったら、書き出しの仕様です。

ファイル形式とコーデック

そもそも動画ファイルは「コンテナ（拡張子）＋ コーデック（圧縮方式）」の組み合わせで成り立っています。

形式	コンテナ	コーデック	特徴
MP4	.mp4	H.264 / H.265	業界標準、互換性が高い
WebM	.webm	VP8 / VP9	オープン規格、Google 主導、圧縮効率が良い

• 形式は MP4（H.264）を基本に。ほぼすべてのブラウザ・端末（Safari 含む）で再生でき、最も無難です
• さらに軽くしたいなら WebM を併用し、MP4 をフォールバックにする構成にします（同じ画質なら容量を抑えられます。実装は③で後述）

迷ったら、まず MP4（H.264）1 本で始めれば大きな失敗はありません。

なぜ H.264 / VP8 なのか（より新しい H.265 / VP9 / AV1 ではなく）

新しいコーデックほど圧縮率は高いのですが、対応状況にムラがあります。背景動画のような装飾用途は「確実に再生されること」が最優先なので、互換性の枯れた組み合わせを基本にします。
対象ブラウザを絞れる案件なら、VP9 / AV1 でさらに軽くする選択肢もあります。

解像度

①で決めた表示サイズの 1〜2 倍 を目安に書き出します。

• 表示幅 360px → 480〜720px 前後で書き出し
• ヒーロー全幅 → 1280px（720p）や 1920px（1080p）

解像度	通称	用途
1280×720	HD / 720p	Web 動画の標準的下限
1920×1080	FHD / 1080p	Web 動画の主流
3840×2160	4K / 2160p	高品質配信向け

「とにかく 4K で書き出す」は重すぎて、読み込みが遅くなります。表示サイズに見合った解像度にします。

背景動画で 720p を基準にする理由

ピクセル数が増えると、同じ画質を保つために必要なビットレートも比例して増えます。

• 1280×720: 921,600 px
• 1920×1080: 2,073,600 px（720p の約 2.25 倍）

720p なら 1,500kbps でも見られる画質を保てますが、1080p で同じビットレートだと圧縮が強くなって破綻しやすくなります。
つまり 720p はファイルサイズと画質のバランスを取った選択です。

ただし、ヒーローセクションは多くの場合 object-fit: cover で全画面に引き伸ばすため、「画面幅 ÷ 1280」が拡大率になる点には注意が必要です。

ディスプレイ幅	拡大率	見え方
1280px	1.0 倍	きれい
1920px (FHD)	1.5 倍	やや甘い
2560px (WQHD/Retina)	2.0 倍	はっきり粗い
3840px (4K)	3.0 倍	かなり粗い

対象ユーザーに高解像度ディスプレイが多い場合は、1920×1080 への引き上げも検討してください。ビットレート据え置きで解像度だけ上げる場合は、動きの少ない素材であれば破綻しにくいです。

フレームレート（fps）

フレームレートは「1 秒あたり何枚の静止画で動きを表現するか」です。「fps = frames per second」です。

fps	印象	用途
12fps	カクカク	アニメ・GIF
16-24fps	やや緩やか	背景動画・装飾用途
24-30fps	自然	一般的な Web 動画
60fps	なめらか	ゲーム・スポーツ映像

「とりあえず 60fps にすれば綺麗」は誤解です。
fps を上げるほどファイルは重くなります。
通常の Web 動画は 24〜30fps で十分で、むしろ軽さ（読み込みの速さ）を優先したほうが UX は良くなります。

背景動画なら 16〜24fps まで落とせる理由

装飾用途の背景動画は、さらに攻めて 16〜24fps を指定できます。理由は 3 つあります。

1. ファイルサイズ削減：30fps を 24fps にするだけで情報量が 20% 減ります。同じビットレートなら、その分 1 フレームあたりの画質を上げられます
2. 背景動画にヌルヌルさは不要：30fps / 60fps の滑らかさは「動画を視聴する」ときに価値があるものです。背景の装飾として流す場合、むしろ緩やかな方が品があり、コンテンツの邪魔をしない演出ができます。映画は伝統的に 24fps で撮影されており、「映画的な雰囲気」を出したい場合にも適しています
3. テキスト可読性：動きが緩やかな方が、上に乗るテキストが読みやすくなります。背景動画は「主役のテキスト・CTA を引き立てる脇役」として設計するのが基本です

なお 16fps を下限とするのは、これより低いと「カクつき」が目立ち、装飾としての品が損なわれるためです。「動画」というより「コマ送りアニメーション」に見えてしまいます。

ビットレートとファイル容量

Web 動画でいちばん大事なのが容量です
重い動画は表示が遅れ、離脱の原因になります。
容量を最も大きく左右するのがビットレート（1 秒あたりのデータ量。kbps = kilobits per second）で、次の式で概算できます。

ファイルサイズ（MB） ≒ ビットレート（kbps）× 秒数 ÷ 8000

1,500kbps の場合

動画の尺	ファイルサイズ
10 秒	約 1.9MB
15 秒	約 2.8MB
20 秒	約 3.8MB
30 秒	約 5.6MB

背景ループ動画なら、数 MB 以内が目安です。「解像度を下げる」「尺を短くする」「ビットレートを下げる」で容量を調整します。

背景動画で 1,500kbps を基準にする理由

Web パフォーマンスの観点で「許容範囲」とされる目安です。

ビットレート	用途	評価
~500kbps	低画質ストリーミング	❌ 背景でもブロックノイズが目立つ
1,500kbps	Web 背景動画の標準	✓ 軽さと画質の良い妥協点
3,000-5,000kbps	YouTube 720p 推奨	⚠ TOP ページの背景には重い
8,000kbps+	YouTube 1080p 推奨	❌ 確実に LCP に影響

ヒーロー領域はページ最大の要素になることが多く、LCP（Largest Contentful Paint）に直接影響します。

• LCP の目標: 2.5 秒以内
• 動画ファイルが重いと、poster 画像 → 動画への切り替わりが遅れる
• 1,500kbps × 15 秒 ≒ 2.8MB であれば、preload="metadata" と組み合わせて初回表示の足を引っ張らずに済む

ffmpeg での書き出しコマンド例

デザイナーが Adobe Media Encoder などを使えない場合や、エンジニア側で素材から書き出し直す場合に便利な ffmpeg コマンドを紹介します。

MP4（H.264）への変換

ffmpeg -i input.mov \
  -c:v libx264 \
  -vf "scale=1280:720,fps=24" \
  -b:v 1500k \
  -maxrate 1500k -bufsize 3000k \
  -pix_fmt yuv420p \
  -movflags +faststart \
  -an \
  output.mp4

オプション	意味
-c:v libx264	H.264 コーデックを指定
-vf "scale=1280:720,fps=24"	解像度とフレームレート
-b:v 1500k	目標ビットレート
-pix_fmt yuv420p	iOS Safari 含む全ブラウザでの互換性確保
-movflags +faststart	メタデータを先頭に配置（ストリーミング再生用）
-an	音声トラックを削除

WebM（VP8）への変換

ffmpeg -i input.mov \
  -c:v libvpx \
  -vf "scale=1280:720,fps=24" \
  -b:v 1500k \
  -an \
  output.webm

なお WebM（Matroska）は既定でインデックス情報をファイル末尾に書き出す仕様のため、MP4 の +faststart と同じ「先頭配置」にしたい場合は -cues_to_front 1 などの指定が別途必要です。多くの配信用途ではデフォルトのままでも大きな問題にはなりません。

③ 実装する（<video> タグ）

仕様と素材が揃ったら、実装です。HTML の <video> タグを使います。
仕様通りの動画素材を受け取っても、実装で詰まると意味がありません。

基本形

<video controls width="620" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
  お使いのブラウザは動画に対応していません。
</video>

• poster：動画の読み込み前に表示するサムネイル画像。最初の見た目を決める
• controls：再生・停止・音量などのネイティブ UI を表示する
• <source>：動画ファイルを指定。中のテキストは非対応ブラウザ向けのフォールバック

自動再生（背景動画など）させたいとき

ここが初心者が一番ハマるポイントです。
音ありの自動再生は、多くのブラウザでデフォルトでブロックされます。ミュートなら常に許可、音ありは「ユーザーがそのサイトを操作済み」などの条件を満たしたときだけ許可、というのが主要ブラウザ共通の方針です（Chrome の自動再生ポリシー、MDN: Autoplay guide、WebKit: New video Policies for iOS）。

背景動画の場合、必要な属性を全部載せするとこうなります。

<video
  class="hero-video"
  poster="/images/bg_hero.webp"
  autoplay
  loop
  muted
  playsinline
  preload="metadata"
  aria-hidden="true"
>
  <source src="/videos/bg_hero.webm" type="video/webm" />
  <source src="/videos/bg_hero.mp4" type="video/mp4" />
</video>

属性	役割
autoplay	ページ読み込み時に自動再生
loop	繰り返し再生
muted	音声ありに見える動画を自動再生させるための実務上の必須策（無音動画自体は本来 muted なしでも自動再生対象になり得ます）
playsinline	iOS で全画面化せずインライン再生するために必須（自動再生の許可条件そのものではない点に注意）
poster	読み込み前・失敗時のフォールバック画像
preload="metadata"	帯域節約。auto だと初回ロードが重い
aria-hidden="true"	装飾用途のためスクリーンリーダーから除外

muted と playsinline は iPhone で背景動画を安定して自動再生させるための実務上の必須セットです。
「PC では動くのに iPhone で再生されない」とき、たいていこの 2 つの抜けが原因です。
（ブラウザのポリシーは変わることがあるので、最終的には実機で確認するのが確実です）

形式フォールバック（WebM ＋ MP4）

②で書き出した WebM と MP4 は、<source> を並べて出し分けます。

<video autoplay muted playsinline loop>
  <!-- 軽い WebM を優先 -->
  <source src="bg-video.webm" type="video/webm" />
  <!-- 非対応なら MP4 にフォールバック -->
  <source src="bg-video.mp4" type="video/mp4" />
</video>

ブラウザは <source> を上から順に試し、再生できる最初の形式を使います。WebM の方が圧縮効率が良いため先に書きます。

poster でフォールバック

poster 属性に静止画を指定しておくと、Progressive Enhancement の文脈で次の効果があります。

• 動画読み込み完了前は poster 画像が表示される
• 動画再生に失敗しても poster 画像が表示される
• 通信制限環境のユーザーにも代替表示が提供される

poster 画像はデザイナーに「動画の代表フレームを WebP で別途書き出してほしい」と依頼しておくのがおすすめです。

読み込みを軽くする

動画はファイルが重いので、読み込み制御も大事です。

<!-- 自動再生しない動画は、preload で読み込みを抑える -->
<video controls preload="metadata" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
</video>

• preload="metadata"は、長さなどの情報だけ先読みし、本体は再生時まで読み込まない
• preload="none"は、本体を先読みしないようブラウザに伝える（ページ表示を最優先したいとき）
• ※ preload はあくまでブラウザへの「ヒント」で、必ず従われるとは限りません
• ※ autoplay を指定した動画は、結局すぐ読み込まれるので preload の効果は薄いです

prefers-reduced-motion 対応

OS の「視差効果を減らす」設定をしているユーザーには、動画を停止して静止画を見せるのがアクセシビリティ的に正しい対応です。

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero-poster {
    display: block;
  }
}

モバイルでの出し分け戦略

スマートフォンでは「通信量」「バッテリー消費」の観点から、動画を流さず静止画のみ表示する選択肢もあります。

CSS のみで完結させる方法

<picture class="hero-bg">
  <source media="(max-width: 767px)" srcset="/images/bg_hero.webp" />
  <img src="/images/bg_hero.webp" alt="" />
</picture>

<video
  class="hero-video"
  poster="/images/bg_hero.webp"
  autoplay loop muted playsinline
  preload="metadata"
>
  <source src="/videos/bg_hero.webm" type="video/webm" />
  <source src="/videos/bg_hero.mp4" type="video/mp4" />
</video>

@media (max-width: 767px) {
  .hero-video { display: none; }
}

@media (min-width: 768px) {
  .hero-bg { display: none; }
}

JavaScript 不要で、見た目の出し分けはできます。

ただし注意点があります。autoplay を指定した <video> は preload の指定より優先されてダウンロードが始まるため、display: none で非表示にしても、動画ファイルの読み込み自体は止まりません。この方法は「表示の出し分け」であって「通信量の削減」にはならない点に注意してください。
モバイルで本当に通信量を抑えたいなら、後述のように JavaScript で <video> 要素自体を DOM から取り除く（または <source> を最初から書かず、必要になったタイミングで動的にセットする）実装が必要です。

Network Information API（saveData）に対応する

「データセーバー」を有効にしているユーザーには動画を出さない、という配慮も可能です。navigator.connection.saveData は HTTP ヘッダーではなく JavaScript から参照する API のプロパティで、Chrome / Edge などの Chromium 系ブラウザでのみ対応しており、Safari・Firefox では利用できません（2026 年 6 月時点）。効かないブラウザでは単に条件分岐がスキップされるだけなので、対応ブラウザへの上乗せの配慮として使います。

if ('connection' in navigator && navigator.connection.saveData) {
  document.querySelector('.hero-video')?.remove();
}

アクセシビリティ（音声を含む動画の場合）

説明やナレーションなど音声に情報がある動画には、字幕（キャプション）を付けます。

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track default kind="captions" src="captions.ja.vtt" srclang="ja" label="日本語" />
</video>

<track> で WebVTT 形式の字幕ファイルを指定します。
音が出せない環境のユーザーや、聞こえづらいユーザーにも内容が伝わります。
（音のない背景ループ動画なら不要です。代わりに aria-hidden="true" でスクリーンリーダーから除外します）

まとめ

動画設置チェックリスト

最後に、3 層をチェックリストとしてまとめます。

① 企画・仕様

• アスペクト比（16:9 / 1:1 / 9:16）を決めたか
• 表示サイズを決めたか（＝ファイル解像度ではない）
• 尺を決めたか（ループなら繋がりを意識）
• 自動再生するか・音をどうするか決めたか

② 書き出し

• 形式は MP4（H.264）を基本にしたか（軽くするなら WebM 併用）
• フレームレートは適切か（通常 24〜30fps、背景動画なら 16〜24fps。むやみに 60fps にしない）
• 解像度は表示サイズの 1〜2 倍程度か（むやみに 4K にしない）
• ファイル容量を抑えたか（背景動画なら 1,500kbps・数 MB 目安）

③ 実装

• 自動再生なら muted playsinline を付けたか（iOS 対策）
• poster でサムネイルを指定したか
• 自動再生しないなら preload で読み込みを抑えたか
• 装飾用途の動画に aria-hidden="true" を付けたか
• prefers-reduced-motion に対応したか
• モバイルでの出し分け（静止画代替）を検討したか
• 音声に情報がある動画には字幕を付けたか

背景動画の仕様 4 項目と最適化対象の対応表

背景動画については、②の仕様を掛け合わせた意図をまとめておきます。

項目	値	役割	何を最適化しているか
フォーマット	WebM / MP4(H.264)	ブラウザ互換性	全環境で再生されること
解像度	1280×720	画質	ピクセル数とファイルサイズのバランス
フレームレート	16〜24fps	動きの滑らかさ	データ量削減 & 装飾としての品
ビットレート	1,500kbps	データ量	LCP / 読み込み速度

この 4 項目を掛け合わせた結果として、

• 軽くて（Core Web Vitals に優しい）
• ほぼ全ブラウザで再生されて（互換性が高い）
• テキストの邪魔にならない（装飾として品がある）

背景動画が作れる、という設計になっています。

数値だけを伝えるのではなく、「なぜその数値なのか」をデザイナーと共有することで、より良い素材が上がってきますし、要件の変更にも柔軟に対応できる関係が築けます。

初めて動画を扱ったとき、僕は「動画＝もらって貼るだけ」だと完全になめていました…。
でも実際は、企画の段階で決めておくことが仕上がりと読み込み速度を大きく左右することを知りました。

動画に詳しくなくても、この 3 層を順に押さえれば、大きな手戻りは防げます。
同じように初めて動画設置をする方の、最初の一歩になればうれしいです。

参考リンク

• HTML video 要素 - MDN
• Autoplay guide for media and Web Audio APIs - MDN
• prefers-reduced-motion - MDN
• Web Vitals - web.dev