近年、背景にイメージ動画を使ったWEBサイトが多く見られます。モバイル端末の普及、インターネットの高速化などにより、サイトに大きな動画を表示することができるようになり、集客や販売の効果を上げています。ここでは、WEBサイトに背景動画を設置するメリットや、活用事例などを紹介します。
目次
1 WEBサイトの背景動画とは
2 埋め込み動画と背景動画の違い
2.1 外部サイト埋め込み動画
2.2 背景動画
3 背景動画を設置するメリット
4 イメージ戦略としての動画
5 商品を魅力的に見せるための動画
6 海外の背景動画事例
7 国内の背景動画事例
8 モバイル端末の対応
9 まとめ
1 WEBサイトの背景動画とは
数年前から、背景動画を利用したWEBサイトが増えてきました。ブラウザでWEBサイトを開くと、画面いっぱいに動画が再生され、動画の上に社名やサービス名などのロゴ、コンテンツのボタンなどが表示されるようなサイトです。多くの企業のWEBサイトに、背景動画が取り入れられています。
流行の原因はいくつか考えられます。HTML5というWEBサイト記述用の言語が普及し、音声や動画の表示が容易になったことも、その理由のひとつです。また、インターネットの高速化も、WEB動画の普及に貢献しています。現代は、自宅のパソコンのみならず、スマートフォンでも、光速通信で快適に動画を閲覧することができます。
近年、企業によっては、サービスや商品ごとに複数のWEBサイトを持つようになりました。それぞれの商品のイメージに合わせたサイト制作を制作することにより、よりターゲットを絞った販売戦略を立てることができます。
2 埋め込み動画と背景動画の違い
一般的に見かけられるコンピュータグラフィックスの種類は、大きく二つに分類されます。それは「2DCG」と「3DCG」です。
WEBサイトに表示される動画には、いくつかの種類があります。YouTubeなどの外部サイトの動画を埋め込むケースや、自社のサーバー内にアップロードした動画を読み込むケースなどが考えられます。
2.1 外部サイト埋め込み動画
YouTubeやVimeoなどの、動画投稿サイトに、動画をアップロードし、自社のWEBサイトのページに埋め込むことができます。ページの一部に小画面を作り、再生ボタンを押すことによって外部動画が読み込まれ、再生されるケースがほとんどです。自社サーバーに負荷がかからないために、読み込みが重くなりにくいというメリットがあります。
まれに、YouTubeなどの外部動画を、サイトに全画面表示し、ページの読み込みと同時に再生を始めることによって、背景動画のように見せている場合もあります。
2.2 背景動画
一般的には、自社のWEBサイトが置かれているサーバーに、背景用の動画データ置き、そこから読み込んだものを背景動画として利用することが多いです。WEBサイトを訪問したユーザーが、動画を再生するためにボタンをクリックしたりする必要がありません。
あまり高画質で時間の長い動画を背景にしてしまうと、読み込みに時間がかかり、サイト訪問者の利便性が悪くなってしまうので、注意が必要です。
3 背景動画を設置するメリット
背景動画の一番のメリットは、WEBサイト訪問者の感覚に一瞬で訴えることができるところです。たまたまWEBサイトをクリックし、内容を読まないでそのままブラウザを閉じてしまうユーザーでも、動画なら視界に入ります。そこで商品やサービスの魅力を伝えることができれば、サイトにとどまる率も高くなる可能性があります。
また、SEO的に見ても、トップページに動画が掲載されているWEBサイトは、上位に表示される傾向があります。Google検索の表示アルゴリズムは定期的に変更されますが、2016年現在の時点では、動画のタグを読み取った場合、動画のないサイトよりも検索結果の上位に表示されるようです。
電通の調査によると、動画を見ていないユーザーよりも、動画を見たユーザーの方が、二倍に近い購買につながるそうです。
参照元：YouTube投稿動画の広告効果はいかに–電通とグーグルが共同調査
4 イメージ戦略としての動画
企業イメージアップなどの、ブランディングのための動画は、ユーザーに目的意識がない場合、視聴してもらえることはありません。例えば、ある企業のことを知りたいと思い、WEBサイトを訪問したとしても、わざわざイメージ動画を見てもらえるとは限りません。そのようなユーザーに対しては、背景動画は非常に協力なツールとなります。サイトを見ている間、自動的にイメージビデオを視聴している状態にあるともいえます。
工房や、厨房などで、製品を制作している最中の映像を、ドキュメンタリーのように使用すれば、作り手の顔が見えるということによって、信頼感を得られます。
5 商品を魅力的に見せるための動画
商品やサービスのためのランディングページの場合、その商品そのものの動画、利用している動画などを背景動画にすれば、WEBサイトを閲覧している間に、商品の魅力を感じてもらうことができます。製品の認知度を高め、理解を深める効果があります。
商品を紹介する場合は、画質にこだわりすぎると表示速度が遅なり、レスポンスに影響します。背景動画では商品のイメージを伝えるだけにとどめ、詳細な仕様を伝えたい場合には、別ページで埋め込み動画などを利用した方が良いでしょう。
6 海外の背景動画事例
Lexus
レクサスの海外サイトです。背景動画に加えて、画面をスクロールするとモーションもします。
the Q
デジタルカメラのWEBサイトです。ターゲットの若い女性に絞った動画となっています。
Optimo chicago
帽子店のオンラインショップです。一見静止画の背景のように見えますが、一定の間隔で、背景を車が通り抜けます。
YANAGIU KAMIKO
海外向けの、手すき和紙工房のサイトです。職人のイメージが高級感を演出しています。
SONIA by Sonia Rykiel
ハイセンスなファッションブランドのWEBサイトです。
7 国内の背景動画事例
オーディオテクニカ ATH-MSR7
ヘッドホンの商品サイトです。高級感があり、商品全体の形状も伝わってきます。
トロピカーナ
フルーツジュース、トロピカーナの商品紹介サイトです。果樹園のフルーツを撮影した短い動画が背景になっています。
丸京染色株式会社
短い背景動画の中で、伝統と技術を感じることができます。
logbar
ウエアラブル翻訳デバイスの紹介サイトです。開発時の動画が背景になっています。
GUCCIオフィシャルサイト
ファッションブランドのWEBサイトです。アダムとイブを連想させる、短い背景動画を用いています。
8 モバイル端末の対応
上記で紹介したような、シングルカラムで動画が画面いっぱいに表示されるようなWEBサイトは、スマートフォンの普及とともに増えてきました。数年前まで、多くのWEBサイトでは、トップページに様々な情報が盛り込まれ、サイト内コンテンツへのリンク動線が確保されていました。しかし、スマートフォンが普及しだすとともに、トップページはすっきりとした、シンプルな静止画や動画で、スクロールをして情報を見せるWEBサイトが多くなってきています。
また、インターネット対応のテレビなどでWEBサイトを閲覧する場合も、従来のような情報の多いトップページよりは、スクロールするタイプのWEBサイトの方が便利です。インターネット対応テレビには、マウスが接続されていない場合が多いので、ボタンでスクロールできれば、ユーザビリティーが高いと言えます。
このように、WEBサイトを閲覧する環境がマルチデバイス化されたことによって、それぞれの端末に背景動画を対応させる必要が出てきます。スマートフォンなどのモバイル端末の場合には、軽い動画であればそのまま背景動画として設定することもできます。少し長さのある動画や、高画質のためにデータ量を多く使用する場合、モバイル端末のみの設定を変える必要があります。モバイルのみ静止画表示、モバイルのみボタンで背景動画を表示する、などの選択肢があります。
9 まとめ
インターネットの高速化と、動画制作技術の進んだ現代において、背景動画を利用したWEBサイトの制作は、押さえておきたい技術のひとつです。数秒しかないごく短い動画でも、ブランディングに高い効果が見込まれます。WEBサイトの目的を明確にし、ターゲットに狙いを定めたサイトづくりを意識しましょう。
