こんにちは。NAKAIです。
最近、背景動画を導入したWEBサイトが珍しいものではなくなりました。
弊社でもリニューアル・新規案件問わずトップページに背景動画を使ったWEBサイトの依頼は増えており、その制作の過程で気がついた点をまとめたいと思います。
はじめに 背景動画を導入するメリット
動画は文章・写真よりも多くの情報を短時間で訴求することができます。また動きがある＝目にとまりやすいということなので「背景動画」を1st viewで使用することはサイトの直帰率を下げる効果的な方法の1つです。
例えば、コーポレートサイトであれば、サービス内容や企業イメージを細かに書くまでも無く簡潔に伝えることができます。
採用サイトであれば、学生さんなど求職者に対して、「働いたらこういう感じ」という具体的な社内のイメージを感じてもらえます。
現に、YouTubeなどで動画を視聴するということは誰もが当たり前のように行っており、
Twitter、FacebookなどSNS上でも動画のプロモーション広告を大変よく見かけます。
WEBサイトのトップページに限らず、動画でキャンペーンする・プロモーションするということは一つの流行りでしばらくこの流れは続いていくと思います。
具体的な方法は？
導入するにあたって以下の3つ方法が主に考えられます。
videoタグを使う
HTML5で追加された<video>タグを使用するやり方です。
動画データを自前のサーバーに置き、読み込みます。javascriptの知識があまりなくてもHTML5の知識で扱えますし一番シンプルなやり方です。
ただ自前のサーバーに置くので安心感がある反面、負荷がかかる可能性があります。
具体的な実装方法は弊社ブログ
HTML5のvideoタグを使った動画再生に関するまとめ
を御覧ください。
YouTubeを使う
YouTube Player APIを使い実装する方法です。YouTubeは日本のネット人口の80％以上が視聴しているというデータもあるほど巨大なプラットホームでGoogleに次ぐ検索エンジンとしての側面もあるためSEOの観点からも使わない手はありません。それも無料でできます。
デメリットとしてはこれだけ巨大なプラットホームなので動画の数も膨大で競争率が高いのと、企業・学校・公共施設によっては閲覧制限していることがあるため見ることができないユーザーが出てくる可能性があります。
また、当たり前といえば当たり前なのですが、YouTubeに動画をアップロードする際にはGoogleアカウントが必要です。
つまり、
- クライアント側がもともと使用しているものを使うのか、新しくそれ用のアカウントを制作側で作るのか。
- また動画を「公開」状態にするのか、「限定公開」で検索では表示させないようにするのか。
- 動画にコメントできるようにするか、しないのか。
など決めておかなくてはなりません。
特にどのアカウントを使うのが最善か？ということはクライアントによって異なるはずですので注意が必要です。
Vimeoを使う
Vimeo（ヴィメオ）の場合、カスタマイズ性に優れている点がメリットとしてあげられます。プレイヤーの見え方も自由度が高くYouTube以上に色々な設定をすることが可能です。
また、Vimeoの理念としてアップする動画に関して、ゲームプレイ動画や転載動画など自分自身で制作した作品以外の投稿を禁止しています。クオリティの高いクリエイティブな動画がたくさんあるプラットホーム、Vimeoを使用すれば、他のサイトと差をつけることができるでしょう。
ただしYouTubeに比べると圧倒的に知名度が低く、無料プランでは機能が物足りない可能性があります。
Vimeo公式サイト
詳しくは公式サイトをご覧いただければと思います。
制作時に注意すべき点
背景動画を導入することは非常に魅力的である反面、注意すべきこともあります。
やってみると分かるのですが、結構苦労することが多く、お客様に提案する際も含めて制作する際は慎重になったほうがいいと言えます（あとあとになって、できると思ったけどできなかった...というようなことにならないように気をつけたいところです...）。
実際に作業していて気になった点・こうすればよかったとあとから反省した点を以下にまとめました。
使用する動画の長さを考える。
背景動画に使用する動画は基本的にループ再生することを前提としているため、短すぎると何度も何度も同じシーンが流れてしまいサイトが雑な印象になってしまいます。かといって、長くしすぎるのと容量が膨大になり、読み込みに時間がかかってしまいます。
あくまで背景動画は「背景＝イメージ」として機能するということを考慮すべきで、それを考えると30秒～1分ぐらいがちょうどいいのではないかと思います。
こだわって制作したある程度長さのある動画を使用したい！という場合は、むしろ動画コンテンツページを別で作り、動画をメインで見せるようにしたほうがいいサイトができると思います。
動画をできるだけ圧縮する。
動画は文章や画像と比べ物にならないくらいの容量です。そのため、作ったままの大きさで使ってしまうととんでもなく読み込みに時間がかかってしまいます。
その対策として、HandBrakeといったツールでできるだけ軽くすることをおすすめします。
以下のLIGさんのブログが大変参考になったのでぜひ御覧ください。
筆者も、背景動画を扱う案件でHandBrakeを使ってみたのですが、そこまで画質を落とすことなく容量をかなり圧縮させることができましたので、ぜひ試してみてください。
音について。
ユーザーがどのような場所でも開いても大丈夫なように音声は無音・ミュート状態であることが望ましいです。
音を流したい場合、「音声が流れます」等トップページでアナウンスするなど対策が必要です。
スマホで表示が難しい。
なんといっても、これでしょう。
そもそもの問題としてPCは横長で見るのに対して、スマホは基本縦です。
つまりPCで背景いっぱいに動画を使ったとしてもスマホも同じような見え方にするというのは難しいのです。
そのための対策として
- スマホのときはあらかじめ用意したスマホ用動画にUser agent等で切り替える。
- PC動画をスマホ用にうまくトリミングする。
- スマホでの動画表示を諦める。
が考えられます。1、２でうまくいかない場合は
手段として、3のスマホで動画再生を諦め、画像に差し替えるというのもありです（現にこのように対策しているWEBサイトも多く見受けられます）。
さらにいうとスマホはPCと違って常に持ち運ぶものなので、様々な場所で見ることができるという想定で制作しなくてはなりません（通信環境があまり良くない場所でのことも考えなくてはなりません）。そう考えたときに、通信に負荷がかかる背景動画がトップページにあるとユーザーによっては読み込みに何秒も時間がかかり、逆に動画が原因で離脱してしまうというようなことも考えられます。
またiPhone、Androidで見え方が違ってきたりするのでそれぞれ対応しなくてはなりませんし、動画が再生できないユーザーに対しても対策（代わりに画像を表示させたり）する必要があります。
つまり、制作側はきちんと検証する時間を作り、想定外のトラブルが発生しても対処できるようにしなくてはなりません。
終わりに
確かに、背景動画を使うことは魅力的であり、この流行りは続いていくと思います。むしろ1st viewに背景動画を使用することはWEB制作のスタンダードになっていくかもしれません。
しかし、スマホを持っていたとしても、再生環境が整っていないユーザーがいるように
すべての人に同じ状態で背景動画を導入したサイトをきっちり見せるということは難しいのが現状です。
そのため制作側も工夫し、試行錯誤する必要があります。
5Gの時代が来るとまた状況は変わってくると思いますが、かっこよく魅力的なものを作りたいという欲望に縛られず、あくまでユーザー目線で制作していくことを心がけたいところです。
最後までお読み頂きありがとうございました。
