動画制作・動画マーケティングで費用対効果をあげるノウハウや事例をお届けするニュースメディア

背景動画の活用が肝?動画を活用したWebサイトの構築

このエントリーをはてなブックマークに追加

スマートフォンの普及やインターネットの高速化に伴い、Webサイトのデザインも大きな変化を遂げています。現在は多くの企業が、背景に動画を用いたオシャレなWebサイトを作成するようになりました。そのようなサイトを利用している企業は、徐々に集客率や販売効果をアップさせています。ここでは、背景動画を利用することで得られるマーケティング効果や、動画の入手方法、その動画をどのように利用するのか、作成時に押さえておくべきポイントなど、Webサイトにおける背景動画について詳しく解説していきます。

Webサイトの背景動画

最近よく目にするようになった、背景に動画を用いたWebサイトですが、なぜそのようなサイトが増えてきているのでしょうか。実例サイトと一緒にその理由についての情報をお届けします。

背景動画を使ったWebサイト

開くと画面全体に動画が表示されるWebサイトがあります。さらにその動画の上に重ねて、サービス名やコンテンツのリンクが並べられているのが、背景動画を使ったWebサイトです。企業や商品のイメージを表現しやすいことから、取り入れる企業が多くなりました。

背景動画から得られるマーケティング効果

Webサイトの背景動画には、「イメージ戦略として活用できる」「商品を魅力的に見せることができる」といったマーケティング効果があります。例えばWebサイトを訪れたと同時に背景動画が再生されれば、ユーザーは自然とその映像を目にします。そしてWebサイトを閲覧している際は常にその動画を視聴することになるため、企業のイメージを自然と伝えることができるのです。

出典元:http://www.yamazaki-rice.com/

ユーザーからの信頼を獲得するために、現場の作業風景や店内の映像などを利用し、雰囲気を直接伝えている企業もあります。

出典元:https://online.dhw.co.jp/

また、自社サービスの動画を背景として使う場合もあります。なぜなら利用風景を背景動画にすれば、サービスの情報だけでなく、魅力も同時に伝えることができるからです。

動画はどこで入手する?

Webサイトの背景に動画を使用する場合は、まず動画を手に入れなくてはいけません。3つの入手方法があるので、紹介します。

入手方法1.自分で撮影

簡単な動画なら、自分で撮影した方が手っ取り早くておすすめです。今ならスマートフォンでも映像を撮影することができるので、専用の機材などは必要ありません。

また、自分の思い描くイメージをそのまま形にすることもできます。しかし動画の撮影に慣れていない場合、そのままWebサイトの背景に使うと、イメージが上手くユーザーに伝わらない可能性もあるので注意が必要です。

入手方法2.プロに依頼

動画の撮影に自信がない方は、プロに依頼してみましょう。映像制作会社や、フリーで活動しているカメラマンなどに相談することで、背景に利用できる動画を撮影してもらうことができます。その場合は、事前に具体的な動画のイメージを作っておくことが大切です。図として描き出してみたり、スマートフォンで簡単な映像を撮影しておいたりしてもよいでしょう。商品やサービスの魅せ方に関するアドバイスも、もらうことができるかもしれません。

入手方法3.動画素材を利用

専用サイトにアップされている動画素材を利用することもできます。有料のものもありますが、中には無料で動画素材を配布しているサイトもあるので、探してみましょう。しかしその動画素材を利用する際は、商用のサイトでの利用は可能か、著作権表示をする必要があるのかということを必ず確認してください。

HTML5とCSSを使った実装方法

では、実際に動画を使ってWebサイトの背景動画を作成してみましょう。埋め込み動画を利用する場合はHTML5、動画をそのまま背景にする場合はCSSを使います。

HTML5で動画を埋め込む

2014年頃から、サイト構築ではHTML5が利用されるようになりました。HTML5を使えば、「video」「autoplay(自動再生)」「loop(繰り返し再生)」この3つのタグを組み合わせるだけでWebサイトに動画を埋め込むことができます。自分で撮影、またはプロに撮影してもらった映像を利用する場合は、動画投稿サイトを活用すれば簡単に埋め込むことができます。Webサイトのメインビジュアルにも使われているのが、この埋め込み動画です。ブログなどでは、文中に動画を埋め込む場合もあります。

【動画を埋め込む手順】

  1. YouTubeなどの動画投稿サイトに撮影した映像をアップロード
  2. アップロード完了後のページでHTMLコードをコピー
  3. コピーしたHTMLコードを自社のWebサイトに埋め込む

埋め込み動画を画面全体に表示させ、ページが読み込まれたと同時に再生を開始することで、背景動画のように利用する場合もあります。また、埋め込み動画はサーバーへの負担を減らし、読み込みが重くなることを防げるため、パソコンだけでなくスマートフォンでも再生することができるという利点があります。

CSSでレイヤー状に

動画とコンテンツを層のように重ね合わせて表示させることができるのがCSSです。背景全体を動画にし、その上にコンテンツを重ねて配置するという、レイヤー状のデザインです。「position」や「z-index」といったタグの組み合わせで、動画とコンテンツを重ね合わせることができます。海外のWebサイトでよく使われるデザイン手法ですが、現在は国内でもこの手法を取り入れている企業が増えてきています。しかし高画質の動画や、再生時間の長い動画を利用すると、読み込みに時間がかかってしまう場合もあるので容量の大きさには注意が必要です。

 

背景動画作成時のポイント

こちらで紹介する5つのポイントを押さえておくことで、Webサイトで活用できる背景動画を上手く作成することができます。

ポイント1.動画の長さは20秒

動画の再生時間が長いと、ユーザーに最後まで見てもらえない可能性があります。また、容量も大きくなってしまうため、ある程度短い動画を作るよう意識した方がよいのです。しかし短すぎるのもユーザー目線で見るとあまり良いものとは言えません。そのため情報を詰め込みやすく、見た目も自然な20秒程度の動画を作ることをオススメします。

ポイント2.音楽は流さない

Webサイトに訪れたと同時に音楽が流れた場合、訪れた人は驚いてページを閉じてしまいます。外出先や職場でそのようなサイトを開いてしまった場合は、音が流れてしまうことが気になり、もう二度と訪れることはないでしょう。そのような事態を防ぐために、音楽を流すのは控えた方がよいのです。もしどうしても流したいという場合は、ユーザーが自分でオン・オフできるように、スピーカーアイコンを表示させておきましょう。

ポイント3.軽いファイルを使用

開いてもずっと読み込みが終わらないWebサイトは、全てのコンテンツを見終わる前に閉じられてしまう可能性が高いので、背景動画を設定する際は、その部分にも注意が必要です。どうしても見たいサイトなら待ってくれるかも知れませんが、ほとんどの人は読み込みが遅いとすぐにページを閉じてしまいます。そうならないためにも、動画ファイルのサイズは軽いものを使用するようにしましょう。

ポイント4.荒い画質はドット画像で対応

ファイルを軽くした場合、画質が荒くなってしまうことがあります。そのまま背景動画に使用すると、なんだか味気ない印象になりかねないので、どうにか誤魔化さなくてはいけません。そこでオススメなのが、細かいドット柄の画像を組み合わせるという手法です。ドット柄を使うことで、画質の荒さを誤魔化せるだけでなく、オシャレに見せることもできます。

ポイント5.モバイルデバイスへの対応

Webサイトを閲覧できるのは、PCのみではありません。現在はほとんどの方がスマートフォンやタブレットを利用しているため、そのことを考慮して作成する必要があります。その場合は読み込み速度に対応するために、代わりの静止画を用意してみてはいかがでしょうか。そうすることでユーザーの待機時間をなくし、サイトからの離脱を防ぐことができます。

背景動画はシンプルなものに仕上げよう!

企業のイメージやサービスの魅力を伝えることができる背景動画ですが、容量が重かったり再生時間が長かったりすると、ユーザーに見てもらえない可能性が高くなってしまうので、その点は十分に気をつけなくてはいけません。動画の長さは20秒程度に抑え、軽いファイルを使用するようにしましょう。できる限り容量の軽い動画に仕上げることで、スマートフォンからでもストレスなく閲覧することができます。また、あまりたくさんの情報を詰め込むと、返って見づらくなってしまうため注意してください。一番伝えたいポイントを押さえることが大切です。シンプルかつスムーズに視聴できる背景動画を利用し、Webサイトを作成しましょう。

site-like-box

この記事が気に入ったら
「いいね」しよう!

このエントリーをはてなブックマークに追加

資料ダウンロード

運営会社の動画マーケティングサービス資料
詳しく見る
動画制作・動画マーケティングの基礎知識
詳しく見る
導入事例インタビュー集 -vol.1-
詳しく見る
instagram広告運用ポイント
詳しく見る

運営会社提供サービス

動画制作・動画マーケティングに特化した(株)プルークスが運営

大企業からベンチャー企業まで動画制作・動画マーケティング支援企業「プルークス」が運営。過去1500本・500社以上もの動画制作・動画広告運用、などを通じて獲得した、成果の出るノウハウを公開しております。

この記事の後によく読まれている記事

ページトップへ