Webサイトで使うHero背景動画の作り方と軽量化

STEP 1

Hero背景動画に適した素材を作る

Hero背景動画は、映像の内容をじっくり見せる動画ではなく、ページの雰囲気を作り、タイトルやメッセージを引き立てるために使います。

次のような素材が適しています。

• 動きが激しすぎない
• カメラの揺れが少ない
• 数秒から十数秒程度で自然に繰り返せる
• 文字を重ねても読みにくくならない
• 音声がなくても成立する

動画の最初と最後で明るさや被写体の位置が大きく変わると、繰り返した瞬間が目立ちます。可能な範囲で自然につながる素材を選びましょう。

最高画質よりも、表示の軽さを優先します。
Hero背景動画では、見た目を大きく損なわない範囲でファイル容量を抑えることが大切です。

STEP 2

Web公開に適した形式で書き出す

編集した動画は、Webブラウザーで再生しやすい形式で書き出します。ここではPremiereを例にしますが、他の動画編集ソフトでも基本的な考え方は同じです。

形式は「H.264」を選び、ファイル名は半角英数字でhero.mp4のように付けます。

Premiereの場合、プリセットには「高」「中」「低」があります。まずは「中」を基準にし、容量を抑えたい場合は「低」も試します。Hero背景動画では、映像内容によって「低」でも十分な画質になる場合があります。

さらに容量を抑えたい場合は、ビットレートエンコーディングを「VBR、1パス」、ターゲットビットレートを4Mbps前後、最大ビットレートを6Mbps前後に設定して確認します。

数値を下げすぎると、映像がぼやけたり、ブロック状の乱れが見えたりします。書き出し後は、ファイル容量だけでなく、実際の映像も確認してください。

4Mbpsと6Mbpsは設定例です。
映像の動き、長さ、解像度によって適切な値は変わります。細かな模様や動きが多い場合は、少し高い値も試してください。

STEP 3

poster画像を設定する

動画は、ページを開いた直後から必ず表示されるとは限りません。読み込み中の空白を防ぐため、videoタグのposter属性で静止画を設定します。

web-005/
├─ index.html
├─ css/
│  └─ style.css
├─ video/
│  └─ hero.mp4
└─ images/
   └─ hero-poster.jpg

第4回までに使用したvideoタグへ、poster属性を追加します。

<video
  autoplay
  muted
  loop
  playsinline
  poster="images/hero-poster.jpg"
>
  <source src="video/hero.mp4" type="video/mp4">
</video>

poster属性には、動画が再生される前に表示する画像のパスを指定します。

画像には、タイトルを重ねても見やすく、動画の開始場面と大きく印象が変わらない場面を選びます。JPEGやWebPなどで保存し、画質を保ちながら容量を抑えましょう。

ローディングアニメーションについて

動画の読み込み中であることを示すローディングアニメーションを追加する方法もあります。ただし、シンプルなHero背景動画では、poster画像を設定するだけでも読み込み中の空白を防げます。

ローディングアニメーションにはJavaScriptによる読み込み状態の確認が必要になるため、ここでは補足として扱います。

STEP 4

公開前に表示を確認する

動画とposter画像を設定したら、ローカル環境だけでなく、可能であれば実際のWebサーバーへアップロードして確認します。

PCで確認すること

• 動画が自動再生される
• 音声が再生されない
• 動画が繰り返し再生される
• タイトルや説明文が読める
• 読み込み前にposter画像が表示される

スマートフォンで確認すること

• 動画が画面内で再生される
• 動画だけが全画面表示にならない
• タイトルや説明文が画面からはみ出さない
• 見せたい被写体が大きく切れていない
• 通信環境が遅い場合もposter画像が表示される

スマートフォンで動画をページ内に表示するため、playsinline属性が指定されていることも確認します。

サーバー上で確認すること

• hero.mp4とhero-poster.jpgが正しいフォルダーにある
• HTMLに書いたパスと保存場所が一致している
• ファイル名の大文字・小文字が一致している
• 動画ファイルが破損していない
• 実際の通信環境でも読み込みが遅すぎない