動画はファーストビューに置かなくていい｜下部配置と時間差表示

公開日 2026-11-05

動画はホームページのファーストビューに置かないといけない？

置かなくて構いません。動画をファーストビューに固定して考えると「重いから諦める」か「重いまま置く」の二択になりますが、配置場所とタイミングをずらせば両方を避けられます。具体的には、ページ下部へのYouTube埋め込みと、ファーストビュー表示後1〜2秒の時間差ポップアップです。

動画そのものの訴求力は高いものです。臨場感を出したいサイトでは強い武器になりますし、ブランディング目的でもよく機能します。手元に動画があるなら、使わない手はありません。

問題になるのは「置く場所」です。ファーストビューに動画を直接置くと、ページを開いた瞬間に動画ファイルの読み込みが始まります。ファイルが重ければ、その分だけ最初の表示が遅れます。一般的にサイトを見てから離脱するまでの時間は、最近だと1秒以内とも言われています。読み込みを待っている1秒は、訪問者にとっては「何も映っていない1秒」です。

ここで考え方を切り替えます。動画を見せたいのと、動画を最初の1秒で見せたいのは、別の話です。多くの場合、必要なのは前者だけです。前者であれば、置き方の選択肢は一気に広がります。

• ページの下の方にYouTube埋め込みで置く
• ファーストビューを先に表示させ、1〜2秒待ってからポップアップで出す
• そもそも動画を使わず、画像やテキストのエフェクトで動きを作る

いずれも、ファーストビューの表示速度を犠牲にせずに「動きのある印象」を作る方法です。

動画をページの下の方に置いても見てもらえる？

下部配置でも見てもらえます。むしろスクロールして下まで到達した人は、そのサイトに一定の関心を持った人です。YouTubeにアップして埋め込む形にすれば、動画ファイル自体を自社サーバーから配信せずに済み、ページ冒頭の読み込みにも直接の負荷をかけにくくなります。

下部配置が成立する理由

ファーストビューは「自分に関係があるサイトかどうか」を直感的に判断される場所です。そこで求められているのは、誰のための何のサービスかが瞬時にわかることで、必ずしも映像ではありません。一方、スクロールして下部まで読み進めた人は、すでに関係があると判断した人です。そこに動画があれば、再生される確率は上がります。

YouTube埋め込みにする利点

• 動画ファイルを自社サーバーに置かなくて済む
• 視聴環境に応じた配信をYouTube側が担う
• 埋め込みコードを貼り替えるだけで差し替えができる

自社サーバーに大きな動画ファイルを置いて直接再生させる構成は、ファイルサイズがそのまま読み込み時間に跳ね返ります。400メガ、500メガあるような動画ファイルをページの表側に置くのは、現実的な選択ではありません。

置く位置の目安

サービス紹介や実績紹介のセクションの直後など、「もう少し詳しく知りたい」と思ったタイミングの近くに置くと自然です。会社概要の最後に置いてしまうと、そこまで到達する人が減るぶん、再生数も落ちます。

ポップアップで動画を出すなら、何秒待ってから表示する？

ファーストビューを表示してから、1秒〜2秒ほど待ってから出す形が目安です。ページを開いた瞬間に動画のポップアップが被さると、サイトの中身を見る前に閉じられます。先にファーストビューを読ませ、内容が目に入ったあとで動画を重ねる順番にします。

時間差を入れる手順

1. ファーストビュー（キャッチコピー・背景画像）を通常どおり先に表示する
2. 表示完了から1秒〜2秒のディレイを置く
3. 動画のポップアップを表示する
4. 閉じるボタンを明確に置き、閉じればそのままページを読み進められるようにする

なぜ0秒ではいけないのか

開いた直後にポップアップが出ると、訪問者はまだ「このサイトが何のサイトか」を把握していません。把握していない状態で視界を塞がれれば、反射的に閉じるか、そのまま戻るかのどちらかになります。1秒〜2秒という短い間でも、ファーストビューのキャッチコピーが目に入っていれば、ポップアップの動画が「何の動画か」を推測できる状態になります。

ポップアップ方式が向くケース

• どうしても動画を早い段階で見せたい
• ファーストビューのデザインは画像とコピーで完成させたい
• 動画の内容が、サービスの印象を決める性質のもの（店舗の雰囲気、施工現場、イベントの空気など）

逆に、動画が補足的な説明にとどまる場合は、わざわざ画面を覆う必要はありません。下部配置で十分です。

ファーストビューに動画を置くなら、ファイルサイズはどれくらいまで？

ファーストビューに直接置く場合、10メガ以内、多くても15メガあたりが限界だと考えています。400メガや500メガあるような動画ファイルをファーストビューに置くのは現実的ではありません。サイズが収まらないなら、下部配置や時間差ポップアップに切り替えたほうが確実です。

サイズの目安

ファイルサイズ	ファーストビューでの扱い
10メガ以内	許容範囲。ファーストビューに置く前提で検討できる
10〜15メガ	限界ライン。表示の工夫とセットで判断する
400〜500メガ	ファーストビューに置く選択肢にならない。下部配置や外部サービスの埋め込みに回す

読み込みを待たせないための工夫

ファーストビューに動画を置くと決めた場合でも、動画の読み込み完了を待ってから画面を見せる構成にはしないほうが安全です。先にダミーの背景画像とキャッチコピーを表示しておき、動画の準備ができたら差し替わる形にすれば、訪問者は待たされた感覚を持ちません。最初の数百ミリ秒で「何も映っていない画面」を見せないことが目的です。

自分のサイトの現状を測る

表示速度は体感ではなく数値で確認できます。GoogleのPageSpeed Insightsなど、公開されている計測ツールでページの読み込み状況を確認できます（2026年9月時点）。仕様や評価指標は更新されることがあるため、最新の公式情報で確認してください。

動画を使わずに「動きのある印象」を作る方法はある？

あります。画像を30秒ほどかけてじわじわ1.1倍〜1.2倍に引き伸ばすエフェクトや、テキストを時間差で表示するアニメーションでも、動きのある印象は十分に作れます。動画ファイルを読み込ませないぶん、表示速度への影響もほとんどありません。

画像のスローズーム

背景画像を、30秒ぐらいかけてじわじわと1.1倍、1.2倍ぐらいのサイズまで引き伸ばす処理です。動きの速度が遅いため、見ている側は「動いている」とはっきり認識しないまま、静止画との違いを感じ取ります。読み込むのは画像1枚なので、重さの問題が起きません。

テキストの時間差表示

キャッチコピーを一度に出さず、行ごと・語句ごとに少しずつ時間をずらして表示する方法です。読む順番をこちらで設計できるため、伝えたい語句を最後に残すといった組み立てもできます。

使い分けの考え方

• 臨場感を伝えたい（現場、店舗、人の動き）→ 動画が向く
• ブランドの世界観を出したい → 動画も有効だが、画像のスローズームでも成立する場合がある
• 情報を順序立てて読ませたい → テキストアニメーション

むやみやたらと動画を使うことには反対ですが、それに見合ったメリットが見込めるなら動画を使うのは賛成です。判断の基準は、読み込みが重くなるという代償を払ってでも得たいものがあるかどうかです。

結局、動画の置き方はどう選べばいい？

動画ファイルのサイズと、動画で伝えたい内容の性質の2つで決まります。10〜15メガに収まり、かつ最初の印象を動画で決めたいならファーストビュー。サイズが大きい、あるいは説明を目的とするならページ下部。早く見せたいがファーストビューの設計は崩したくないなら時間差ポップアップです。

3つの置き方の比較

置き方	向くケース	注意点
ファーストビューに直接	10メガ以内に収まる短い映像。臨場感で勝負するサイト	読み込みが遅れると離脱につながる。ダミー背景画像を先に表示させる
ページ下部にYouTube埋め込み	サイズが大きい動画、説明動画、実績紹介	スクロールされなければ見られない。置く位置を本文の流れの中に入れる
時間差ポップアップ（1〜2秒後）	早めに見せたいが、ファーストビューは画像とコピーで完成させたい	0秒で出すと閉じられる。閉じるボタンをわかりやすく置く

判断の順番

1. 手元の動画のファイルサイズを確認する
2. 10〜15メガを超えるなら、ファーストビュー直置きは候補から外す
3. 動画の役割が「印象づけ」か「説明」かを分ける
4. 印象づけなら時間差ポップアップ、説明ならページ下部に置く
5. どちらも難しければ、画像のスローズームやテキストアニメーションに置き換える

ファーストビューで無理に動画を使わなくても、配置場所とタイミングの工夫だけで、動きのある印象は十分に作れます。

動画を置いたあと、問い合わせにつなげるには何が必要？

動画を見終えた位置に、次の行動の受け皿を置いておくことです。動画そのものには問い合わせを受け取る機能がないため、再生が終わった直後の画面に何もなければ、関心が高まったまま離脱します。下部配置なら動画の直下、ポップアップなら閉じた先に導線を用意します。

一般的な設計の話として、ページ内で関心が最も高まるのは、サービスの中身を理解した直後です。動画は短時間でその理解を作れる手段なので、再生の終わりは行動に近い位置にあります。

動画の置き方別の受け皿

• ページ下部にYouTube埋め込み：動画のすぐ下に問い合わせボタンや相談の案内を置く。スクロールして戻らせない
• 時間差ポップアップ：閉じたあとに表示されるのはファーストビューなので、ページ全体として問い合わせ導線が追える構成にしておく
• ファーストビュー直置き：動画は雰囲気を伝える役割に徹し、問い合わせ導線は別途ページ内に配置する

動画を置くこと自体が目的になると、再生されたかどうかだけを見て満足してしまいます。見た人がその次に何をするのかまで含めて、置く場所を決めるほうが結果につながります。

よくある質問

ファーストビューに置く動画のファイルサイズはどれくらいが限界ですか？

10メガ以内、多くても15メガあたりが限界だと考えています。400メガや500メガあるような動画ファイルをファーストビューに置くのは現実的ではなく、その場合はページ下部への配置や外部サービスへのアップロードに切り替えるほうが安全です。

動画のポップアップは、ページを開いてから何秒後に出せばいいですか？

ファーストビューを表示してから1秒〜2秒ほど待ってから出すのが目安です。開いた瞬間に出すと、サイトの中身を把握する前に閉じられてしまいます。先にキャッチコピーと背景画像を見せ、内容が目に入った状態で動画を重ねます。

動画をページの下の方に置くと、見てもらえないのでは？

スクロールして下部まで到達した人は、そのサイトに一定の関心を持った人です。サービス紹介や実績紹介の直後など、もう少し知りたいと思うタイミングの近くに置けば再生されます。会社概要の最後など、到達率の低い位置は避けます。

動画が用意できない場合、動きのある見た目は作れませんか？

作れます。背景画像を30秒ぐらいかけてじわじわ1.1倍、1.2倍まで引き伸ばすスローズームや、テキストを時間差で表示するアニメーションでも、動きのある印象は十分に出せます。読み込むのは画像とテキストだけなので、表示速度への影響もほとんどありません。

参考・出典

• PageSpeed Insights（Google）（2026年9月時点）

関連記事

士業のホームページに顔写真と動画を載せる理由｜信頼の伝え方
「お問い合わせありがとうございました」だけの完了ページは訴求機会の放棄
CTAボタンの色を青や緑にしたら問い合わせは増えるのか

記事が積み上がる仕組みを見るお問い合わせはこちら

← 問い合わせが増えないへ戻る