背景に動画を使ったデザインが印象的なWebサイトが年々増えています。動画はHTMLを使うことによって組み込むことができますが、具体的な方法や効果的な見せ方についてはよくわからないという人も多いでしょう。そこで、Webページの背景で動画を流すための具体的なHTMLコーディングの方法や、動画を見せるときの注意点などについて解説します。

背景に動画を流す3つのメリット

Webサイトの背景に動画を使うことには、多くのメリットがあります。ここでは、3つの観点からメリットについて説明します。

Webサイトの訪問者に世界観を見せることができる

動画には、ほんの短い時間でイメージを伝えられるという効果があります。Webサイトに印象的な動画を掲載すれば、それを目にしたユーザーを世界観に引き込むことも可能です。なかでも、フロントページの背景はファーストビューでしっかりと目に入る場所なので、動画を配置することで直帰率や離脱率の低下にも寄与する可能性があります。このとき、Webサイトのブランディングに沿った内容の動画を用いるほど効果的です。Webサイトを訪問したユーザーは、動画によってコンテンツへの興味をかきたてられるとともに、ブランドのイメージをよりよく理解することになるでしょう。

動いているものを見せることでユーザーの関心を誘う

人間には、動いているものを自然と目で追ってしまう性質があります。そのため、画像やテキストだけで構成されたWebページよりも、動画が用いられているもののほうに注意が向きやすくなるのです。ファーストビューに動画を活用すれば、検索エンジンから流入してきたユーザーにWebサイトの魅力を素早く伝え、早期の離脱を防ぐことも可能です。そのためには、世界観がすぐにわかる動画によってコンテンツに興味をもってもらい、ユーザーが飽きてしまう前に、より詳しい情報へと誘導することを意識するとよいでしょう。

文章よりも一度に多くの情報を伝えられる

人間は、必要な情報の多くを視覚に頼って得ているといわれています。SNSやスマートフォン向けアプリの普及に伴い、長い文章による説明よりも写真や映像のような視覚情報のほうが理解しやすいと感じる人も増えてきました。また、ファーストビューの小さなスペースのみでは、文字で掲載できる情報量も限られています。そのため、Webサイトで情報を伝えたいときは、文章を読んでもらおうとするよりも、魅力的な動画で訴求するほうが効果的なことが多いのです。

動画による効果は、多くの人がスマートフォンからWebサイトを閲覧するようになったことにも関係しています。スマートフォンは直感的に使うことができるため、動画によってWebサイトに興味をもったユーザーは、ほとんど無意識のうちに画面をスクロールさせる操作を行うでしょう。このことは、コンテンツを適切に配置しておけば、ユーザーをより詳しいコンテンツへと自然に誘導できることを意味しています。

動画を背景に活用する際の注意点

Webページの背景に動画を使用する際には、気をつけたほうがよいこともあります。どのような点に注意すればよいのかについて説明します。

デザインの一部として背景に動画を使う

Webページのファーストビューに動画を用いるのは、世界観や魅力をイメージとして表現したり、何らかの情報を視覚的に伝えたりするためです。動画から伝わってくる印象がWebサイト全体の雰囲気と合っていなければ、ユーザーは違和感を覚えてしまうかもしれません。そのため、背景に埋め込む動画はWebデザインの一部として考えることが重要です。

Webデザインでは、レイアウトや見た目の雰囲気をブランディイングの方針に沿って決めていくのが一般的です。動画についても同様で、なぜ背景に埋め込むのか、ユーザーにどのような印象を与えるのかといったことを考慮しながら、デザインのテイストを損なわないような配置を心がけるとよいでしょう。

尺の短い動画を使用する

背景として配置する動画は、それ自体が主要なコンテンツではありません。そのため、再生時間が長い動画を用いても、ユーザーが最後まで視聴してくれる可能性は低いと言えるでしょう。一般的には、30秒に収まる程度の長さであれば、ユーザーを飽きさせることなくイメージを伝えることができます。また、動画の内容にもよりますが、ループ再生させる手法がよく使われているようです。

もしかすると、Webサイトの内容を動画でわかりやすく伝えるには、30秒では足りないと感じることもあるかもしれません。その場合は、本当に背景で行うべきことなのかどうか検討してみるとよいでしょう。背景とは別により長い動画を制作して、メインコンテンツのひとつとして配置するほうが適していることも少なくないためです。

デフォルトではサウンドをオフにしておく

背景に用いる動画はサウンドをオフに設定して、音が鳴らないようにしておくのが基本です。これは、ユーザーがさまざまな場所からWebサイトを訪問するためです。背景の動画は自動的に再生されるので、電車の中や図書館のような場所からアクセスした際に突然音が鳴ってしまうと、驚いて画面を閉じてしまうかもしれません。また、勝手に音声が流れることを不快に感じるユーザーも少なからず存在します。

もし、音声がなければ成立しないような動画なのだとしたら、本当にファーストビューの背景に適したものなのかどうか検討してみましょう。そのうえで、やはり音声をつけたいという場合には、サウンドのオン・オフを切り替えるボタンや音量調節機能を用意して、音を鳴らすかどうかをユーザーが自分のタイミングで決められるようにするとよいでしょう。

ファイルサイズに気を配っておく

動画のファイルサイズが大きいと読み込みに時間がかるうえ、モバイル通信では容量を大量に消費させてしまう原因にもなりかねません。反対に、ファイルサイズが小さければ読み込み時間が短くなり、すぐに再生が始まります。そのため、快適に閲覧してもらえるWebページにするためには、動画ファイルは小さいほうがよいのです。具体的には3MB以内、できれば500KB以内であれば理想的でしょう。

ファイルサイズを小さくするためには、いくつかのポイントがあります。まずは、動画の再生時間を短くすることと、映像の解像度を必要最低限にするのが効果的です。また、データ圧縮率を高くしたり、動画フォーマットそのものを変えたりすることでもファイルサイズが劇的に小さくなる場合があります。動画ファイルにはサイズを小さくするほど画質が落ちるという性質があるので、実際の映像を確認しながら調整を行うことが大切です。

動画を準備する4つの方法

Webサイト用の動画を準備するには、大きく分けて4つの方法があります。

1つ目は、無料素材を使う方法です。誰でも自由に使える動画を配布しているサービスが多数あるので、イメージに合うものを探してみましょう。ただし、無料素材には利用するうえでの制限事項があるものも少なくありません。商用利用が可能かどうかや、クレジット表記が必要ないかなど、利用規約をよく確認してから使うことが大切です。

2つ目は、有料素材を使う方法です。無料素材のなかからWebサイトのイメージや条件に合うものを見つけられなかったときには、有料のものを探してみるとよいでしょう。有料動画は利用規約で商用利用が許可されているのが一般的ですが、利用可能な範囲などの細かい条件については確認が必要です。

3つ目は、自分で制作する方法です。Webサイトのファーストビューでオリジナリティを演出するために、動画もオリジナルのものが必要になるということは少なくないでしょう。以前なら高価な撮影器材が必要でしたが、スマートフォンでも高品質な動画を撮影することができるようになりました。編集についても、無料のアプリやソフトウェアでもある程度のことは可能です。

4つ目は、プロに制作を依頼する方法です。動画制作には、コンセプトの決定や撮影場所と出演者の手配といった工程があり、ある程度のノウハウが求められます。これらを自分で行うことが難しそうな場合は、プロに頼むことになるでしょう。その際は、予算や納期などの希望をきちんと伝えることはもちろん、最終的に満足できる仕上がりにするためにも事前にしっかりと時間を確保して打ち合わせを行うようにするとよいでしょう。

HTML5のvideoタグを使って背景に動画を埋め込む方法

動画の準備ができたら、いよいよWebページに埋め込みます。ここからは、動画を埋め込む際に必要となる「video」タグの具体的な使用方法について解説していきます。

videoタグの属性と記述方法

「video」タグは、HTML5から利用可能になった動画埋め込み用のHTML要素です。比較的新しい仕組みではありますが、モダンブラウザーであれば問題なく利用できます。書き方としては「＜video src="movie.mp4"＞＜/video＞」というように動画ファイルを指定するのが基本です。同じ内容の動画をブラウザごとに最適なフォーマットで複数用意している場合は「source」タグを併用することもできます。

「video」タグには多数の属性（プロパティ）が用意されているので、これらを利用して動画をWebページの背景に配置していきます。なかでも代表的な属性は、表示の幅を指定する「width」と高さを指定する「height」です。また、ファーストビューの動画は自動的に再生を開始してほしいので「autoplay」属性を有効に設定しておくこともポイントです。これにより、データの読み込みが完了した時点で、自動的に再生が始まるようになります。

Webの動画には全画面モードが搭載されていることがよくありますが、背景で再生する動画には不要なことが多いでしょう。その場合は「playsinline」属性を有効に設定します。これは「動画の映像をインラインで再生する」という意味なので、全画面モードが禁止され、常にページ内で再生されるようになります。

動画の再生範囲を指定するための記述方法

「video」タグで動画を埋め込む際には、再生する範囲を指定することも可能です。たとえば、全体で20秒の動画があったとき「＜video src="movie.mp4#t=5,10"＞＜/video＞」という書き方をすれば、5〜10秒の範囲だけが再生されるようになります。この仕組みは「Media Fragments URI」という規格で定められた特別なURLの書き方で、その一部が各種ブラウザで採用されているために利用可能なものです。ただし、IE（Internet Explorer）とEdgeは対応していないので、使う際には注意しましょう。

JavaScriptで動作確認を行う

動画の再生範囲を指定できないIEやEdgeにも対応するには、再生が不要な部分を事前にカットして、必要な部分のみの動画にしておくのが最もシンプルな方法でしょう。しかし、何らかの理由で事前にカットしたくないという場合には、JavaScriptを用いてIEやEdgeに対応させる方法もあります。

「video」タグのすべての属性は、JavaScriptを通して動的に制御できます。再生範囲をURLで指定する「#t=」はタグの属性ではありませんが、代わりに「video」オブジェクトの「currentTime」属性によって再生位置の確認と設定が可能です。これを「video」オブジェクトの再生状態を制御する「play()」や「pause()」などのメソッドと組み合わせて用いれば、特定の範囲のみを再生させるプログラムを作れるでしょう。

JavaScriptを利用するためには、ある程度の知識とスキルが必要になります。また、正しく動作させるためには、各種ブラウザでの動作確認も欠かせません。「video」タグのみを使う方法に比べると手間はかかりますが、再生や停止のより高度な制御を行いたい場合などは、JavaScriptの利用を検討してみるとよいでしょう。

スマートフォンで再生する場合の注意点

動画が埋め込まれたWebページは、画像やテキストを中心としたものに比べてデータ量がかなり大きくなります。スマートフォンで閲覧する場合には、モバイル通信の容量を大量に消費してしまうことも考えられます。場合によっては、訪問したWebサイトの動画が自動的に再生されたとたんに、通信制限がかかってしまうということもあるかもしれません。スマートフォンでWebサイトにアクセスするユーザーへの配慮は、動画を活用する際の重要なポイントだと言えるでしょう。

Webサイトに動画を用いる際は、通信量を可能な限り抑えることが肝心です。そのためには、画像のファイルサイズができる限り小さくなるように、映像の解像度や動画フォーマットを慎重に決めていきます。また、スマートフォンのモバイル通信環境で実際にWebページをテスト表示させてみて、動画があってもストレスなく閲覧できるかどうか確認しておくことも大切です。このとき、Basic認証がかかっているとAndroidでは動画が再生されないことがあります。テスト表示は、できる限り本番の運用に近い形で行うようにするとよいでしょう。