この記事の要点
ファーストビューに動画を置くなら、ファイルサイズは10メガ以内、大きくても15メガあたりが限界です。400メガ〜500メガの動画をトップに置くのは論外で、読み込みを待つ間に離脱されます。対策は、ダミーの背景画像とキャッチコピーを先に表示し、動画の読み込みを待たせないこと。無理なら下部配置や時間差表示に逃がします。
公開日 2026-10-30
ファーストビューに置く動画のファイルサイズは何メガまでが目安？
目安は10メガ以内です。大きくても10メガから15メガあたりが限界だと考えています。これを超えると、読み込みが終わる前に見る側の判断が終わってしまいます。
ファーストビュー（ページを開いて最初に見える範囲）に動画を置く相談を受けたとき、最初に確認するのはデザインではなくファイルサイズです。どんなに良い映像でも、表示されるまでに時間がかかれば、見る側にとっては「何も映っていないページ」でしかありません。
実務上の目安として使っている基準は次のとおりです。
| ファイルサイズ | ファーストビューでの扱い |
|---|---|
| 10メガ以内 | 目安の範囲。置くならここを狙う |
| 10〜15メガ | 限界ライン。工夫と併用が前提 |
| 数十メガ以上 | ファーストビューには置かない。配置を変える |
| 400〜500メガ | ありえない。検討の対象にならない |
この数字は画質を軽視しているわけではありません。尺を短くする、ループ前提で切る、解像度を表示サイズに合わせる、音声トラックを外すといった処理を重ねれば、ファーストビューの背景として使う映像は10メガ前後に収まることが多いからです。収まらないなら、その映像はファーストビュー向きではない、という判断になります。
400メガや500メガの動画をトップページに置くとどうなる？
読み込みが終わる前に離脱されます。400メガや500メガある動画ファイルをファーストビューに置くのは、実務上ありえない話です。容量の大きさがそのまま待ち時間になり、待ち時間がそのまま離脱になります。
撮影したままの動画ファイルは、数百メガになることが珍しくありません。それをそのままトップページの背景に使いたい、という相談は実際にあります。ただ、400メガとか500メガぐらいあるような動画ファイルをファーストビューに置くというのは、本当にありえない話です。
理由は単純で、見る側はそこまで待たないからです。一般的に、サイトを見てから離脱するまでの時間は、最近だと1秒以内とも言われています。1秒で「自分に関係のあるサイトかどうか」を直感的に判断される前提に立つと、数百メガの動画が読み込み終わるのを待ってもらえる場面はありません。
さらに、スマートフォンからの閲覧では通信環境が一定ではありません。オフィスの回線で確認して問題がなかったものが、移動中の回線では真っ白なまま終わる、ということが起きます。確認はデスクトップの高速回線だけでなく、モバイル回線でも行う必要があります。
動画の読み込みが遅くて離脱されないために、何をすればいい？
動画の読み込みを待たせない作りにします。具体的には、ダミーの背景画像とキャッチコピーを先に表示させておき、動画は準備ができた時点で差し替える形にします。これなら、読み込み中でもページとして成立します。
ファーストビューに動画を使うときに提案しているのは、動画を軽くすることとあわせて、「動画が出ていない状態でも成立する画面」を先に用意しておくことです。
- 静止画のダミー背景（動画の1フレームや近い構図の写真）を先に表示する
- キャッチコピーと、問い合わせや申し込みのボタンを同時に出す
- 動画の読み込みが終わった時点で、背景だけを動画に差し替える
- 読み込みが終わらない回線では、静止画のまま見せ切る
この順番にしておくと、読み込みが遅い環境でも、見る側には「何のサイトで、誰向けで、次に何をすればいいか」が伝わります。動画が主役ではなく、動画は背景の演出だと割り切るということです。
逆にやってはいけないのは、動画が読み込まれるまで真っ白、あるいはローディング表示だけを出しておく作りです。1秒以内に判断されると言われている場面で、その1秒をローディングに使ってしまうことになります。
ファーストビューに置けない動画は、どこに置けばいい？
ページの下の方に置くか、ファーストビューを表示してから時間差で出します。下部にYouTubeの埋め込みで置く、あるいは1秒か2秒待ってからポップアップで表示する、という逃がし方があります。
動画を使うこと自体が目的ではないので、ファーストビューに収まらないなら、置き場所を変えれば済みます。重い動画を無理にトップに載せるより、配置を変えたほうが結果は良くなります。
| 置き方 | 向いている場面 | 読み込みへの影響 |
|---|---|---|
| ページ下部にYouTube等で埋め込む | 内容をしっかり見せたい、尺が長い | ファーストビューの表示を邪魔しない |
| ファーストビュー表示後に時間差でポップアップ | メッセージを必ず見せたい | 1〜2秒待ってから出せば初期表示に影響が出にくい |
| ファーストビューの背景として使う | 臨場感やブランディングを最優先する | 10〜15メガ以内に抑える前提 |
時間差ポップアップは、ファーストビューを表示してから、たとえば1秒とか2秒ぐらい待ってから出す形です。最初の判断は静止画とキャッチコピーに任せ、残った人に動画を見てもらう、という順番になります。
動画を置くかどうかの考え方そのものは、ホームページのトップに動画は必要か｜使う・使わないの判断基準でも整理しています。
動画を使わずに「動きのある印象」を作ることはできる？
できます。画像を30秒ぐらいかけてじわじわ1.1倍から1.2倍まで引き伸ばす、テキストを時間差やアニメーションで出す。この2つだけでも、止まった画面には見えません。
ファーストビューに動きが欲しい、という要望の多くは、動画でなくても満たせます。重いファイルを読み込ませずに動きを作る方法として、次のような処理があります。
- 画像のゆっくりした拡大：背景写真を30秒ぐらいかけて、じわじわと1.1倍、1.2倍ぐらいのサイズまで引き伸ばす。見ている間ずっと微妙に動いているので、静止画に見えない
- テキストの時間差表示：キャッチコピー、サブコピー、ボタンの順に少しずつ遅らせて表示する。読む順番を誘導できる
- テキストのアニメーション：フェードインやスライドインを一度だけかける。繰り返さないので邪魔にならない
いずれも追加で読み込むデータはほとんどありません。ファイルサイズの問題を抱えずに、印象だけを動かせるということです。動画がどうしても必要な理由がないなら、まずこちらで足りるかを検討したほうが安全です。
結局、ファーストビューに動画を使うべきか使わないべきか、どう決める？
読み込みが重くなるという代償を、それを上回るメリットが超えるかどうかで決めます。むやみに動画を使うのは反対ですが、見合ったメリットが見込めるなら使うのは賛成です。臨場感やブランディングが勝負どころなら、動画は強い武器になります。
動画自体の訴求力は高いので、手元に動画があるなら使ったほうがいいと考えています。特に、現場の空気や規模感といった臨場感を出したい場合、写真や文章では届かないものが動画では届きます。ブランディングを目的にする場合も同じです。
そのうえで、判断の順番はこうなります。
- この動画で伝えたいのは臨場感やブランディングか、それとも情報か（情報なら下部配置で足りる）
- ファーストビュー用に10〜15メガ以内へ書き出せるか
- 書き出せないなら、下部配置や時間差ポップアップで目的を満たせないか
- それでもファーストビューに置くなら、ダミー背景画像とキャッチコピーを先に出す作りにできるか
この4つを通らない動画は、ファーストビューに置かない。シンプルに言えばそれだけです。動画を置いたことでページが重くなり、1秒以内の判断に負けてしまえば、せっかくの映像は誰にも見られません。
よくある質問
ファーストビューの動画は何メガまでが目安ですか？
10メガ以内が目安で、大きくても10メガから15メガあたりが限界です。収まらない場合は、尺を短くする、解像度を表示サイズに合わせる、音声トラックを外すといった処理をするか、ファーストビュー以外の場所に置くことを検討します。
撮影したままの動画ファイル（数百メガ）をそのまま使えますか？
使えません。400メガや500メガある動画ファイルをファーストビューに置くのは、実務上ありえない話です。読み込みが終わる前に離脱されるため、書き出し直すか、置き場所を変える必要があります。
動画の読み込み中に真っ白になるのを防ぐには？
ダミーの背景画像とキャッチコピーを先に表示させ、動画の読み込みを待たせない作りにします。読み込みが終わった時点で背景だけを動画へ差し替え、終わらない環境では静止画のまま見せ切ります。
動画を使わずに動きのある印象を出す方法はありますか？
あります。背景画像を30秒ぐらいかけてじわじわと1.1倍、1.2倍ぐらいまで引き伸ばす処理や、キャッチコピーを時間差・アニメーションで表示する処理があります。追加の読み込みがほとんど発生しないのが利点です。
どうしても動画を見せたい場合はどうしますか？
ページ下部にYouTubeなどで埋め込む方法と、ファーストビューを表示してから1秒や2秒ぐらい待ってポップアップで出す方法があります。最初の判断は静止画とキャッチコピーに任せ、動画は後から見せる順番にします。
参考・出典
- web.dev（ページ表示と利用者体験に関する公式ドキュメント）（2026年9月時点）
関連記事
ホームページのトップに動画は必要か｜使う・使わないの判断基準
届かない問い合わせを後から追う｜送信内容をデータベースに残す
士業ホームページに「直接会えます」と書く｜対面対応の伝え方