Menu

Social

Others

Webサイトへの動画掲載時に確認しておきたいこと

Publish date
Category
アバター画像
Author
Chiho Rokukawa

こんにちは。ウィルスタイルの六川です。

弊社は今年の5月にWebサイトのリニューアルを行いました。サイト内には神戸を起点に様々な場所で撮影した風景がたくさん掲載されています。六甲山はじめとする山々や海、街と自然が隣り合った風景に、あらためて「神戸っていいな〜」を実感できる素敵なサイトに仕上がりました。

さて今回は、弊社コーポレートサイトのような動画を用いたWebサイトを構築する際に気をつけたいポイントをご紹介したいと思います。動画はひと目で与えられる印象が強い一方で、サイトの表示速度の低下につながる要因の一つにもなります。本ブログでは、動画を効果的に活用するために押さえておきたい要点をおさらいしてみました。

動画形式別の特徴

ここでは、Webサイトに動画を掲載する際によく利用される形式をご紹介します。

MP4

動画の保存形式として最もよく用いられています。PC・スマートフォン、その他あらゆるデバイスやプラットフォームでの再生が可能で、その汎用性の高さが特徴です。

  • 拡張子：.mp4
  • ブラウザ対応：全ブラウザ

WebM

Googleが開発したオープンソースの動画形式です。アルファチャンネル（透明度）の保持が可能で、高画質・軽量化の両立を実現しています。

  • 拡張子：.webm
  • ブラウザ対応：Chrome，Firefox，Edge
    ※iOS 17.4以降のSafariでも利用可能（2026年現在）

WebMのような圧縮率の高い形式を用いることで、Webサイトの読み込み速度の高速化を図ることができます。

ただ、ブラウザや端末によってサポートされている形式が異なるため、その対応差に備えた記述をする必要があります。下記のように複数列挙することで上から順に読み込まれ、ブラウザが対応している形式を表示してくれます。WebM形式の動画を用いる場合は、.webm→.mp4の順に記載するとよいでしょう。

<video autoplay loop playsinline muted poster="thumbnail.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

実装段階での最適化対応

それでは、実際のWebサイトを構築するにあたり、動画の表示速度の改善に役立つ実装方法をご紹介します。

preload属性の利用

videoタグには、動画の読み込みタイミングを制御することができる「preload属性」というものがあります。属性値をpreload="none"とすることで、動画ファイルを事前に読み込まないようにブラウザへ指示することが可能です（読み込みを再生タイミングまで遅らせる分、再生開始まで少し待ちが発生する可能性があります）。ページ内に多数の動画が配置されていて少しでも初期通信量を抑えたい場合や、動画の利用頻度が低い場合はpreload="none"を、それ以外の場合は、preload="metadata"を指定すると良いかもしれません。また、この既定値はブラウザによって異なります。

preload="none"とした場合、動画の最初のフレームが表示されなくなるので、poster属性でサムネイルを表示するようにしましょう。

<video playsinline controls preload="none" poster="thumbnail.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

属性値意味
autoページ読み込み時に動画ファイルを読み込む。
none動画再生時まで動画ファイルを読み込まない。
metadataページ読み込み時にメタデータ（動画サイズや再生時間等）のみ読み込む。

IntersectionObserverの利用

動画を自動再生させたい場合は、先述のpreload属性が効かないため、JavaScriptを用いた実装が必要になります。

ここで便利なのがIntersectionObserverです。IntersectionObserverとは、監視領域に対象となる要素が入ったかを監視してくれる仕組みです。この仕組みを利用し、画面内に入ったタイミングで動画の読み込みおよび再生を行うことができます。

HTML

<video data-lazy-load muted loop playsinline poster="thumbnail.jpg">
  <source data-src="movie.webm" type="video/webm">
  <source data-src="movie.mp4" type="video/mp4">
</video>

JavaScript

const callback = (entries) => {
    entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        const video = entry.target;
        if (!video.dataset.loaded) {
            const sources = video.querySelectorAll("source");
            sources.forEach(source => {
                source.src = source.dataset.src;
            });
            video.load();
            video.dataset.loaded = "true";
        }
        video.play().catch(() => {});
        observer.unobserve(video);
    });
};

const observerOptions = {
    rootMargin: "100px 0px",
};

// インスタンスを生成
const observer = new IntersectionObserver(callback, observerOptions);

// 交差を検知させたい要素をループで監視
const sections = document.querySelectorAll('[data-lazy-load]');
if( sections.length > 0 ){
    sections.forEach( el => { 
        observer.observe(el);
    });
}

videoタグに付与したdata属性[data-lazy-load]を取得し、IntersectionObserverで検知。videoタグ内の複数sourceタグの[data-src]をsrcに差し替えて、動画をロード・再生させています。

Lazy Loadingの利用

Lazy Loadingとは対象となる要素がビューポートに近づいた時に読み込みを開始する仕組みです。loading属性を画像や動画に付与することで、ページの初期読み込みを高速化することができます。

これまでvideoタグとaudioタグにはloading属性を付与することができませんでしたが、Chrome 148（2026年5月5日リリース）から対応可能になりました。loading="lazy"を適用することで、autoplay自体の発火も遅らせることができるようです。

<video loading="lazy" autoplay muted loop playsinline src="movie.mp4"></video>

まだ対応していないブラウザもあるので、各主要ブラウザでサポートされるまではIntersectionObserverを用いた遅延読み込みを実装するとよいでしょう。
https://caniuse.com/loading-lazy-media

これまでに紹介した3つの手法は、キービジュアルなどのファーストビューに適用すると、ページ読み込み時の表示遅延によってUXを損なう可能性があります。そのため、ファーストビュー外の動画に限定して活用するのがおすすめです。

【コラム】PageSpeed Insights

Googleが提供しているWebサイトの表示速度を測定・評価する分析ツールです。 WebサイトのURLを入力すると、0から100の数値でスコア化してくれます。
動画ありのサイトは通信量が大きくなりどうしてもスコアが下がりがちです。スコアはあくまでも理想値であるため、必ずしも100点を目指す必要はないと思いますが、ユーザーがストレスを感じない程度に改善できるのが良いですね。
https://pagespeed.web.dev/

動画を軽くするコツ

最適な動画の画質・サイズであるか確認

サイトに掲載する表示サイズに合わせた動画の書き出しを行いましょう。Webサイトに掲載する場合は、1920×1080（フルHD）ピクセルの解像度があれば十分かと思います。また、動画には「ビットレート」という1秒あたりのデータ量を示す値があります。値が大きくなればなるほど精細な映像になる一方、ファイルサイズも大きくなってしまいます。
詳細な説明は割愛しますが、フレームレートや映像の内容によって適切な値が異なるので、このあたりを踏まえ最適なバランスになるよう選定するのが良いでしょう。

圧縮ツールの利用

オンラインサービスなどの動画圧縮ツールを利用するのも一つですが、OSによっては標準で動画を圧縮する機能が備わっています。ここではMacの場合の動画エンコード方法をご紹介します。

1. 動画ファイルを右クリックし、「選択したビデオファイルをエンコード」をクリック。

2.「メディアをエンコード」ウィンドウの設定から任意のファイルサイズを選択。

3.エンコード完了。ファイルサイズが74.9MBから23.5MBに小さくなっています。

movからmp4への変換は、オンラインの動画エンコードツールもしくはiMovieを用いるか、コーデックにH.264が含まれていれば拡張子を変更するだけでも良いようです。
https://support.apple.com/ja-jp/120755

その他確認しておきたいこと

外部サービスの利用

最も実用的で簡単に取り入れられる手法が、外部サービスへのアップロードです。YoutubeやVimeoなどにアップロードした動画を埋め込むことで、動画サイズを気にせずサイトに表示させることが可能です。ただし、チャンネルやサービスのロゴが表示されたりビデオプレーヤーのコントロールが各種サービスに依存するなど、カスタマイズ性はやや劣ります。

目的や用途に応じた表示方法の検討

  • ページ内に設置する動画の個数を検討する

1ページに設置する動画の個数が多いほど読み込み速度に影響します。各ページに掲載する動画の設置数が適切かどうか検討してみましょう。

  • 動画の自動再生は必要か

動画の自動再生は読み込み速度の低下を招く恐れがあり、ユーザーの同意なしに動画が再生されることはユーザビリティの観点からも良くないものとされています。基本的には、ユーザーが再生ボタンを押してから再生される設定にしておくのがおすすめです。サイトの背景動画で用いるなど自動再生を許可したい場合は、muted属性で音声をミュート状態にしておきましょう。

  • 別の表示手法を検討する

ベクター画像を用いたアニメーションの場合、Lottieを使うと非常に小さいファイルサイズで表示することができます。Lottieであればクリックやスクロール等、ユーザーの動きに対応したアニメーションを付けることも可能です。

最後に

動画は世界観や雰囲気をより詳細に伝えることのできるコンテンツです。動画を効果的に活用して、より魅力的なサイトづくりにつなげていきたいですね。

Previous

Next