バックグラウンドに動画を使う手法は、数年前に出てきたデザイントレンドですが、デザイナーの中でも議論され続けています。
この方法は、関心の薄いオンラインユーザーの注目を集めることができます。押しつけがましい印象を与えずにバックグラウンドで再生でき、サイトの訪問者のエンゲージメントを高めることもできます。
しかし、このテクニックに否定的な人たちは、見た目のためにユーザビリティを犠牲にしていると主張しています。GIFやFlashで溢れかえる懐かしいホームページを思い起こさせますが、今日のスタンダードから考えると派手で安っぽい印象を受けます。
しかし私は、きちんとした方法でバックグラウンドに動画を使えば、UXに躍動感を与え、空間を生き生きとさせ、結果としてより長期的なエンゲージメントを見込むことができるものだと思います。より詳しく説明しましょう。
このバックグラウンドの動画はSmithのホームページです。
コインの表と裏
物事には、どちらの面にも利点があります。どちらの方が、自分のWebサイトにとって価値が高いかという視点から考察することが重要です。
バックグラウンド動画の長所
視覚的なアピールができる
静的なホームページが大多数を占める中で、バックグラウンド動画は目を引きます。第一の長所として、そのユニークさからサイト訪問者の関心を引きつけて長期的なエンゲージメントを期待できることにあります。
ビデオを使ったWebサイトは、新鮮で技術的にも先進的な印象を与えられます。ページを訪れたときにほんの数秒間の躍動感のある時間を設けることで、訪問者の信頼を獲得し、最も重要なエンゲージメントの向上を見込むことができます。
複雑なサービスを説明することができる
ブランドの中には、体験型マーケティングで利益を上げているものもあります。消費者にポジティブな体験を提供することで、ブランドとのつながりを作ることができます。
バックグラウンドの動画は、ポジティブな体験を提供するのに役立ちます。バックグラウンド動画はサイト訪問者にブランドメッセージを伝えることができます。
さらに、より説明が必要となる複雑製品においても、バックグラウンド動画は有効です。
サイト訪問者はテキストよりも動画を好むことを、頭に入れておいてください。短い動画でサービスの説明をしたり、Webサイトの使い方を説明したりすることで、製品の紹介を簡単に行うことができます。
SEOを強化できる
動画を複数のプラットフォームに投稿することで、WebサイトのSEO強化をすることができるでしょう。特にシェアする価値がある動画だとユーザーに思われれば、動画の閲覧回数が増えて、検索エンジンのランキングが上がるでしょう。
また動画の説明を適切なキーワードを使ってすることで、検索エンジンが動画コンテンツを読み取りやすくなります。
Standard Filmのホームページのバックグラウンド動画
バックグラウンド動画の短所
読み込み時間が遅くなる
動画ファイルは、ページの読み込みの時間を遅くする傾向があります。動画を最適化してパフォーマンスが改善する方法はいくつかありますが、画像と比べると動画の読み込みには時間がかかります。
読み込みが遅いWebサイトの場合、サイト訪問者がすぐに去ってしまうという問題があります。人間が注意を払う時間は、金魚よりも短いことを覚えておいてください。
モバイルフレンドリーでない
iOSやAndroidのモバイルブラウザでは、動画は自動再生されません。これらのOSでは、動画の機能がブロックされています。ユーザーが特定エリアをタッチすることで動画が再生されるようにしても、それではまだ効果的ではないでしょう。直感性のないデザインだとユーザーはうまく反応できず、ユーザーはそのエリアをタッチしないでしょう。
さらに大抵の場合、モバイルユーザーはデータ制限のプランにしています。動画を再生するとより多くの回線容量が使われ、データをたくさん消費することになります。このような良くない体験をしたユーザーは、Webサイトを去ってしまうでしょう。
ページ中の要素が多すぎる
ファーストビューのすべてを埋め尽くすようなバックグラウンド動画と解読困難なテキストで構成されているようなページの場合、訪問者はそのメッセージをなかなか理解できないでしょう。
大きいことが常によいとは限りません。要素が多すぎるとまとまりのない印象になります。ユーザーの気持ちをうまくとらえてブランドについて伝える前に、ユーザーはWebサイトの混沌とした状態に気をとられてしまうでしょう。
Hurtigrutenのホームページのバックグラウンド動画
適切なバックグラウンド動画
バックグラウンド動画は、すべての人のためになるというわけではありません。単にそれが「かっこいい」や「流行り」だからトレンドを追うのでは、クライアントやサイト訪問者のためにはなりません。
しかしここまで長所・短所を強調したあとで、バックグラウンド動画が自分のサイトにふさわしいという確信がもてるのなら、以下の点を確認してください。
ブランドのメッセージに沿って使う
動画は、ブランドがメッセージや個性を伝える媒介であることを忘れてはいけません。その主要な目的は、ブランドが伝えるべきものをサポートすることです。たとえば、動画の配色や明暗は、サイト全体のテーマを阻害してはいけません。
きちんとしたパフォーマンス
動画の作成にはコストがかかります。効果的な動画でなければ使う意味はありません。以下のポイントを確認しましょう。
- ハイクオリティ―動画のサイズや長さに関わらず、（内容の面で）つねに高品質でなくてはいけません。ユーザーは見たくなくても動画を見ることになるので、見る価値があるものでなくてはなりません。
- 圧縮率―ビデオの読み込み状態はユーザー体験を損ない、Webサイトの表示が遅いという印象を与えます。24fpsか25fpsのフレームレートで、画質を720pに設定して再生できるようにしてみましょう。またビットレート750K～1250Kの間でテストしてください。
- オーバーレイ―これは低画質の動画や、高画質すぎて再生できるかどうか分からないような動画を改善する方法として効果的です。オーバーレイは適切なカラーやパターンを与えることにより、不完全さを紛らわせる役割があります。動画の直後にはdivタグを付けましょう。::afterの擬似要素を使うこともできます。また動画上ユーザーが右クリックで操作できる状態にもしておきましょう。
バックグラウンドとしての目的のみで使う
バックグラウンド動画は、あくまで背景です。Webサイトの焦点となるポイントではありません。さりげないアプローチ法を守って、メインのコンテンツへのユーザーの意識をそらさないようにしましょう。
- より少ない動き―スムーズに動画が切り替われば、目ざわりでなくなります。早い速度の切り替えやブレの多い動画は避けましょう。
- テキストとは対照的なカラー―動画の上にテキストを配置する場合は、正しいカラーコントラストや陰影を用いて読みやすくしましょう。また明度を抑えて微調整することも可能です。
- 無音の動画―サイト訪問を阻害するもっとも分かりやすい例が、オートプレイでサウンドが流れることです。音声なくすかミュート状態にしましょう。
短時間の動画で、ループ回数を制限する
動画は長編ムービーではありません。長時間の動画とは、再生時間が遅くダウンロードしなくてはならないことを意味します。この２つのことをユーザーは嫌います。
動画は10～15秒の長さに制限し、長くても30～40秒に収めましょう。理想的なサイズは６MB未満です。動画用のリソースが手元に無ければ、ループ再生に使えそうな素材映像をオンラインで見つけることができます。
無限再生される動画は避けましょう。ユーザーのCPUを消費するだけで、サイトの表示時間を遅くします。長い動画の場合は、ループのオプションを取り除いて１回限りの再生にします。短い動画のループには、JavaScriptを用いて数回動画が再生されたらループが止まるように設定しましょう。
モバイルユーザーを考慮する
56％のオンライン通信は、モバイルユーザーによる利用であることを覚えておきましょう。モバイルのブラウザは動画を再生しなくとも、これらの閲覧者に応じた作業をしなくてはなりません。今のところ次善策は存在しないため、モバイル端末では動画ではなく画像に置き換えると良いでしょう。
ここまで述べてきたように、バックグラウンド動画を用いることは、誰にでも有効なことではありません。あなたのWebサイトとって動画が有益だと思っても、正しく使うためには注意をせねばなりません。正しく用いるためにも、サイトの全体で実行する前に、代替ページをデザインしてユーザーがどのような反応を示すかを観察して、段階的なテストを行うようにしましょう。きちんと実行することで、それに見合う利益をきっと得ることができるでしょう。
