はじめに
Webサイトに動画を載せるときは、見た目や使い勝手だけでなく、サーバーの容量や閲覧者の通信環境にも配慮する必要があります。本書では、サーバーのアップロード制限、動画の容量目安、ページ表示の軽さを保つための工夫や設定方法をわかりやすく説明します。
目的を決める
まず、動画を載せる目的をはっきりさせましょう。商品紹介、操作説明、短いプロモーションなど用途で最適な画質や長さが変わります。目的を決めれば、必要な容量や掲載方法も見えてきます。
押さえておきたいポイント
- サーバーの容量と1回のアップロード上限を確認します。上限が低いと大きなファイルを分割する必要があります。
- 動画の本数や長さが増えるとページの読み込みに時間がかかります。必要に応じて外部ホスティングや埋め込みを検討します。
- 見る人の回線速度を想定して、画質と容量のバランスをとります。スマートフォン閲覧が多ければ、軽めの設定が有利です。
この章では、全体の考え方と準備のポイントを提示しました。次章以降で具体的な容量目安や設定方法を順に紹介していきます。
サーバー容量とアップロード制限
アップロード上限（1ファイルあたり）
レンタルサーバーやCMS（例：WordPress）では、1ファイルごとのアップロード制限があります。多くの環境で25〜50MBが一般的です。長い動画や高画質のファイルはこの制限で弾かれることがあります。
総容量の考え方
総容量とはサーバーに保存できる全データ量です。画像や動画が多いサイトは容量を消費しやすく、目安として100〜200GBあると安心です。静的なブログなら数GBでも足ります。
具体例
・短いMP4（720p、1分）：約10〜20MB
・高画質（1080p、5分）：約200〜500MB
こうした目安から、動画を多く扱う場合は総容量が早く減ることが分かります。
実務的な対策
・アップロード制限を変更できるか確認する（サーバー設定やPHPの設定）。
・大きな動画はYouTubeやVimeo、クラウドストレージで配信し、埋め込み表示にする。
・画像や動画を圧縮する（解像度を下げる、ビットレートを抑える）。
・定期的に使用量を確認し、必要なら上位プランへ移行する。
初心者でも取り組める対策で容量不足を防げます。必要なら具体的な手順も説明します。
動画自体の容量の目安
概要
Web用の動画は解像度とビットレートで容量が大きく変わります。フルHD（1920×1080）では数分で数百MBになることが多く、1分のHDでも数十MBになるケースがよくあります。
時間・解像度ごとの目安
- 1080p（高画質）: 目安は4〜8 Mbps。1分あたり約30〜60MB。
- 720p（標準）: 目安は2〜4 Mbps。1分あたり約15〜30MB。
- モバイル向け低解像度: 0.5〜1.5 Mbps。1分あたり約4〜12MB。
数値はエンコード方式や動きの多さで前後します。静かな画面は圧縮効率が良く、動きが激しい動画は容量が増えます。
実際の運用での目安と対策
複数の動画をページに置く場合は、1本あたり数十MBに抑える運用が現実的です。目安として短いプロモーションや説明動画は20〜40MB程度を目指すと良いです。容量を抑えるには解像度を720pに下げる、ビットレートを下げる、再生時間を短くするなどが有効です。
エンコード時のポイント
- コーデックは互換性の高いH.264（MP4）を基本にする。
- H.265は同じ画質で容量を抑えられるが、対応ブラウザが限られる点に注意する。
- 可変ビットレート（VBR）にすると、無駄な容量を減らせます。
以上を参考に、コンテンツと利用者環境に合わせて容量を調整してください。
Webサイトで動画を扱うコツ
埋め込みを基本にする
サイトに動画を直接置くとサーバー容量と回線を圧迫します。YouTubeやVimeoなど外部のストリーミングサービスにアップロードし、埋め込みコードで表示する方法が簡単で安全です。手順は、動画をアップロード→共有の埋め込みコードをコピー→記事や固定ページに貼るだけです。
遅延読み込み（Lazy Load）を使う
ページ読み込み時に動画を読み込まない「遅延読み込み」を使うと、表示が速くなります。まずは静止画像（サムネイル）を表示し、ユーザーが再生ボタンを押すか画面に近づいたときに初めて動画を読み込みます。多くのCMSやライブラリで簡単に導入できます。
1ページあたりの動画本数を絞る
動画を一度にたくさん並べると遅くなります。目安は一覧ページで3本前後、詳細ページに1本を基本にしてください。必要なら「もっと見る」やページネーションで分けて表示します。
サムネイルとプレースホルダーを活用する
再生前はサムネイルや短いGIFで見せると、印象が伝わりつつ負荷を抑えられます。サムネイルは軽い画像にしておくと効果的です。
回線と配信方法の確認
訪問者が多い場合はCDNやストリーミングサービスの利用を検討してください。もし自前で配信するなら、容量や転送量の制限を事前に確認しておきます。
よくあるおすすめ設定
推奨解像度とビットレート
- モバイル中心: 360p〜540p。ビットレート目安は500 kbps〜1.5 Mbps。軽めにして読み込みを早くします。
- PCメイン: 720pを基本に。目安は2.5〜5 Mbps。視聴品質と容量のバランスが良い設定です。
- 高画質が必要なら: 1080pを使用。目安は4〜8 Mbps。ただし容量が増えます。
コーデックとコンテナ
- コーデック: H.264をまずおすすめします。幅広く再生対応します。新しい端末や配信で容量重視ならH.265（HEVC）も有効です。
- コンテナ: MP4が無難で扱いやすいです。
フレームレートと音声
- フレームレート: 普通の映像は30fpsで十分です。動きが速いゲーム動画などは60fpsを検討してください。
- 音声: AAC、ビットレートは128 kbpsで十分なことが多いです。
エンコードのコツ
- 過度に高いビットレートは無駄になります。まず低めに設定し、実際に画質を確認して調整してください。
- キーフレーム間隔は2秒程度が目安です。読み込み開始が速くなります。
用途別おすすめ設定（例）
- モバイル向け（軽量）: 360p/30fps/H.264/700 kbps/AAC 128 kbps/MP4
- スタンダード（PC向け）: 720p/30fps/H.264/3.5 Mbps/AAC 128 kbps/MP4
- 高品質（保存・配信）: 1080p/30–60fps/H.264またはH.265/6 Mbps/AAC 128–192 kbps/MP4
ファイルサイズの目安
- 1分あたりのおおよその容量: 700 kbpsは約5 MB、3.5 Mbpsは約26 MB、6 Mbpsは約45 MBです。用途に合わせて目安を参考にしてください。
どう検索するとよいか
基本のキーワード
まずはシンプルな組み合わせを試します。例：「ホームページ 動画 容量 目安」「WordPress 動画 アップロード 容量制限」「Webサイト 動画 埋め込み 重い 対策」。目的に近い語を並べると、実践的な情報が見つかります。
具体的な検索例（コピペ可能）
- ホームページ 動画 容量 目安 MP4 画質
- WordPress 動画 アップロード 容量制限 php.ini upload_max_filesize
- Webサイト 動画 埋め込み 重い 対策 CDN 圧縮
検索のコツ
- 引用符でフレーズ検索（”動画 容量 目安”）と部分一致を使い分けします。
- site:で特定サイト内を探す（例：site:stackoverflow.com WordPress 動画）。
- filetype:mp4 や KB/MBの単位を入れると容量に関する情報が絞れます。
探すべき情報の種類
- 容量の目安を示す記事や表
- 実際の設定例（php.ini、.htaccess、プラグイン）
- 埋め込みや配信での軽量化手順（トランスコード、CDN、遅延読み込み）
よくある間違いと対処法
- 検索語が曖昧だと一般論ばかり出ます。目的（アップロード・埋め込み・配信）を明記してください。
- 古い情報に注意し、公開日やコメントで確認しましょう。
これらを組み合わせると、より具体的で実用的な設定例や容量目安を見つけやすくなります。
