背景動画がポイント！動画を活用したWebサイト制作

2018/10/22

インターネットやスマートフォンの爆発的な普及に伴い、Webサイトのデザインは時代に合わせて大きな変化を遂げ続けています。
最近は多くの企業がより高品質な背景動画を用いたWebサイトを作成するようになりました。
急激にお問い合わせが増えたり販売効果アップに直接的につながるわけではありませんが、Webサイトそのものに奥行きを持たせられたり製品の使用イメージが伝わりやすくなるので静止画のイメージに付加価値を与えられます。
この記事では、背景動画を利用することによるメリットや、動画の入手方法、利用方法、作成時に注意するポイントなど、背景動画を活用したWebサイト制作について解説していきます。

背景動画を使う意図・当社事例

フルスクリーンなどで背景動画を用いたWebサイトが増えていますが、なぜ背景動画を活用するのでしょう。
その理由についての情報や、弊社事例も併せてご紹介いたします。

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

トップページを開くと画面いっぱいに景色や作業風景の手元の動画を映し視覚としてうったえたり、動画をあくまでバックグラウンドとして認識させその上に企業名やキャッチコピーリンクがレイアウトされているWebサイトなどいくつかパターンがあります。
トップページを開いたときのインパクトや質の高い動画の効果で企業や商品、サービスをイメージを表現しやすいことから、取り入れる企業が増えています。
背景動画から得られるマーケティング効果

背景動画を用いたWebサイトは、「イメージ戦略としての活用」「商品の価値をより明確に伝える」といったマーケティング効果が期待されています。ユーザーがWebサイト訪問時に背景動画が再生されると、自然な流れでその映像を見ることになります。また、閲覧している間はその動画を自然に視聴しているため、商品や企業イメージ、サービスを押し付けでなく伝えることができるのです。
日翔・レジデンシャル（不動産コンサルタント）

まず最初に開けている画にロゴ風にしたキャッチコピーを配置し、視線の誘導をしています。
そこからバナーや、少し動きをつけたリンクに目が行くようになっています。
動画は見ていて飽きないようにひとつひとつのシークエンスを短く収めています。
https://www.nissho-r.com/
ベイビーバッハ（子供向け英語教室）

楽しげなキャッチコピーの飾り付けやページ下部の移動する車など可愛げな見所を多く作っています。
動画自体も子供達が楽しげに勉強している様が伝わるよう構図などこだわっています。
解像度は少し軽めにしつつもドットを敷いて画面の粗さが目立たないようにしています。
http://www.babybach.net/

動画はどこで入手するのか

使用する背景動画の入手方法はいくつかあります。

自分で撮影する

簡単な内容であれば、ご自身で背景動画を撮影した方が効率的です。最近のスマートフォンはカメラ機能が向上していて綺麗に撮影することができますし、思ったように撮影をすることができます。
プロには及ばないとしても撮り直しは気の済むまでできますし、上達が見えた時はモチベーション向上にもつながります。
ただ、好き勝手に撮影した動画を用いてもイメージが的確にユーザーに伝わらないことが考えられますのでWebや本である程度予習してからの方が良いかもしれません。
プロに依頼する

動画の撮影に自信がない方や予算が確保できるのであれば、プロに依頼することも考えてみてはいかがでしょうか。
映像制作会社やフリーカメラマンなどに背景動画の撮影を依頼できます。事前にイメージを作っておくことがポイントになります。簡単な絵として描き出してみたり、先立ってスマートフォンで簡単に動画を撮影しておいたり。商品やプロに依頼することで、背景動画を撮影するだけでなく商品や人物など被写体の見せ方に関するアドバイスもしてもらえるかもしれません。
動画素材を利用する

最近では高品質な写真素材や動画素材を購入することが可能です。
比較的リーズナブルなpixtaからかなり質の高いamanaimagesなど用途に分けて検索すると良いかと思います。
基本的に良いものは有料ですが、無料で動画素材を配布しているサイトもあるので探してみましょう。
無料の動画素材を使う場合、商用のサイト利用の可否、著作権表示などは事後のトラブルを招かないためにも必ず確認してください。

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

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

ポイント1「動画の時間は約20秒」

動画の再生時間が長すぎるとユーザーに最後まで動画を見てもらえなくなりますし、容量も大きくなってしまうため、ある程度短い動画を撮影するよう意識した方が無難です。
しかし短すぎても逆にユーザー目線で見るとあまり良いとは言えません。短い動画がちゃかちゃかと切り替わると最終的に何を見せられたのかわからなくなってしまいます。
情報を詰め込みやすく、見た目も自然な20秒程度の動画がベストです。
ポイント2「音声は流さない」

Webサイトに訪れたと時に音楽が流れるとユーザーは驚いてページを閉じてしまいます。外出先や職場でサイトを閲覧していることを想定すると、音が流れてしまうことが抵抗になり再訪は期待できません。
もしどうしても流す必要がある場合は、ユーザー自身でオン・オフできる仕組みが必要です。スピーカーアイコンなどでわかりやすく表示させておきましょう。
ポイント3「軽いファイルを使用」

PCの処理能力やネットの接続環境にも多少影響されますが、読み込みが終わらないWebサイトはその時点で閉じられてしまいます。1999年頃は「8秒ルール」と言われ8秒間は多くのユーザーが我慢できたようですが、近年は高速化に伴い8秒もかからないのが当たり前になってきているのでより早い時間での読み込みが必要となります。一説には「3秒待てない」と言われています。
せっかく作ったコンテンツも見てもらえなければ意味がありません。そうならないためにも、背景動画ファイルはサイズの軽いものを前提としましょう。
ポイント4「荒い画質はドット画像で対応」

ポイント3と関連しますが、ファイルを軽くした場合画質が荒くなってしまうことが考えられます。そのまま背景動画として流すと、なんだか素人臭い印象になりかねないので、何らかの方策が必要です。
ここで細かいドット柄の画像を組み合わせると、画質の荒さが目立たなくなると同時に良い意味で主張が抑え気味になるのでバックグラウンドとして効果的です。
ポイント5「モバイルデバイスへの対応」

少し前まではPCによる閲覧がほとんどでしたが、最近はモバイルファーストといってほとんどのユーザーがスマートフォンでWebサイトを閲覧している状況です。タブレットも増えてきています。
それらを考慮して作成する必要があるので、スマホなどは読み込み速度に対応するために、静止画を用意してみてはいかがでしょうか。そうすることでユーザーの待機時間をなくし、サイトからの離脱を防ぐことができます。
もちろんスマホでも背景動画再生は可能ですが、離脱を防ぐ手段としては静止画が効果的です。

背景動画はシンプルイズベスト

製品情報や企業イメージ、サービスなどを的確に訴えかけることのできる背景動画ですが、容量が大きすぎたり長すぎたりするとユーザーは閉じてしまうことが考えられます。
動画は20秒ほどに抑え、軽いファイルを使いモバイルファーストにも対応しなくてはなりません。（場合によっては静止画という判断も必要かもしれません。）
あまりにたくさんの情報を詰め込むと見づらい上に言いたいこともブレてしまい何も伝わらなくなってしまいます。それではもったいないのです。
一番伝えたいポイントをしっかり押さえ、シンプルでスムースに視聴できる背景動画を利用することでより的確に製品情報や企業イメージ、サービスなどが伝わりユーザーの印象も変わるでしょう。