Webサイトに背景動画の是非│Web制作会社のWebサイト関連コラム

Columnコラム

Web制作

Webサイトに動画導入は、あり?なし?

Webサイトに動画導入は、あり?なし?

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

こんにちは、デザイナーの藤原です。
昨今、Webサイトの背景に動画を使用しているサイトをよく見かけますよね。
弊社でも、動画を使用したWebサイトのデザインを作成することが増えています。
ただ、改めて考えると、動画を使用するメリット・デメリットって多くありますよね。そのため結局、動画を入れるのは「あり」なのか「なし」なのか迷っている方も多くいるのではないでしょうか。
そこで今回は、Webサイトに動画を導入するようになったきっかけと、動画を入れる時の注意点をご紹介したいと思います。

fujiwara_oto01.jpg

Webサイトに動画を導入するようになったきっかけ

まず、動画を導入するようになったきっかけから見てみましょう。

過去の画面設計

今までは、Webページを表示した時の最初の表示領域(ファーストビュー)が「全て」と言われるほど重要視されており、画面設計もそのような作りがほとんどでした。
なぜ、今までファーストビューが「全て」と言われてきたかというと、ユーザーは興味のあるサイト以外は見ないとされていたためです。そのため、ユーザーがサイトに訪れた時、ファーストビューが興味を持つ内容ではない場合、スクロールをせずに検索ページや他ページへ移動すると考えられていました。

現在の画面設計

現在では、モバイルやタブレット端末、スクロール機能が向上したマウスの登場により「スクロール」という動作自体をユーザーは厭わなくなり、長いページの画面設計も一般化してきています。また、マルチデバイス化によりPCやモバイル対応をしている画面設計も求められるようになりました。

今後の画面設計

それでは今後どうなっていくのか...。
現在でもなりつつありますが、「スクロール動作の向上」と「マルチデバイス化」が進み、フラットデザインとも呼ばれるような、「シンプル」な画面設計が求められるようになってきます。

動画の登場

上記のような、「シンプル」な画面設計が求められるようになり、動画が登場しました。
マルチデバイスなどに対応する場合、最小限のスペースで訴求をしなくてはならなくなるためです。
今までは、動画というと「時間がかかりファーストビューですぐに情報訴求ができない」と言われていましたが、昨今では、「情報をより多く、正確に伝える」ということのほうが重要だと言われてきております。

動画導入時の注意点

実際に、動画を入れるとなった場合、気をつけなければならないことがあります。

情報量の多いサイトには不向き

背景に掲載する動画は、流すためでありメインで動画を見せるという意味ではありません。そのため、各コンテンツが多いうえに、動画も掲載するとなると、ごちゃごちゃしたサイトになりがちです。
どうしても載せたいのであれば、余白を上手く使用しデザインをしていく必要があります。

BGMはなるべく流さない

動画というと、BGMや音声など流すべきものですが、Webサイトで背景に使用する場合はなるべく流さない方が良いです。
サイトに訪れた際にいきなり音楽が流れると驚いてしまい、離脱に繋がりかねません。

データ容量は軽くする

動画が原因でページの読み込みが遅くなると、離脱の原因に繋がってしまいます。とくに高画質の動画を使用するとデータの容量も大きくなっていくでしょう。
そのため、高画質よりもデータ容量を軽くすることを優先に考えることをおすすめします。画質が悪い場合は、薄い黒のドットやストライプ柄を組み合わせることである程度ごまかせます。理想の容量は、1MB以下です。

静止画の用意

PCの場合でも読み込みに時間がかかるため、モバイルの場合は静止画に変更をさせたほうが良いです。また、動画対応していない場合や動画が表示されない場合も踏まえて、静止画を備えておくと安全です。

まとめ

画面設計の経緯を振り返ってみると、大きく変化していっていることがわかります。
今回の題名にあった、「Webサイトに動画導入はあり、なし」ですが、私としては「あり」だと考えています。
製品・商品の良さ、社内・社員の雰囲気、実際に聞ける声、など静止画では伝えることが出来ない「メッセージ性」の部分でとても効果を発揮すると思うからです。
また、動画でのプロモーションも昨今流行っているので、親しみやすい情報訴求の方法でも在ると思います。
ただ、動画を入れることで、良い効果を発揮することもあれば、悪い効果を発揮する場合もあるため、正しく判断をして追加しましょう。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作
Webデザイン制作
モバイルサイト制作

関連コラム

Twitterのプロモーション広告を活用しよう!

text_totop