動画をWEBサイトの背景に埋め込みたい！メリットと注意点は？

更新日：2020年05月21日発注カテゴリ：ホームページ制作・デザイン

他社のwebサイトを見ていると、動画を画面の背景いっぱいに使用したデザインを採用したサイトが増えていることに気づくのではないでしょうか。いまや、動画を使うデザインはwebサイトにおいて一般的な手法です。実際、ユーザーへの訴求力が高く、自社の魅力を伝えるのに動画は最適な方法ではあります。しかし、動画を使用する場合、サイト作成においていくつか注意点もあることを忘れてはなりません。そこで、ここでは背景動画を使うことのメリットと、背景動画を使用したwebサイト作成する際に注意すべきことをお伝えします。

ホームページ制作・デザインに対応できる業者を一覧から探す

ホームページ制作・デザインの相談をする

背景に動画を入れたページのメリット

webサイトの背景に動画を入れたデザインはここ数年のトレンドです。高速通信の普及によってページの読み込み時間が短縮できたことが大きな要因でしょう。今後は単なるトレンドではなく、一般的な手法としてさまざまなwebサイトで用いられると考えられます。

ホームページのデザインと動画がうまくマッチすれば、通常のテキストや画像のみのwebサイトと比べてユーザーへの訴求力が格段にアップすることが期待できます。

そこで、背景動画を使用したwebサイトのメリットを具体的に以下で説明しましょう。

多くの情報が伝わる

動画を使うことで、テキストのみのwebサイトよりも一度に多くの情報を伝えることができます。

webサイトのファーストビューで多くの情報を伝えようとすると、テキストのみでは非常にごちゃごちゃした印象を与えますが、動画を一つ用意しておくだけで、シンプルなデザインながら、伝えたい情報を効果的に伝えることができるのです。

世界観やイメージに引き込める

効果的な背景動画を使用することで、webサイトのファーストビューが印象的なものになります。すると、ユーザーはその世界観に一気に引き込まれ、コンテンツへの関心も自然と高くなるのです。

離脱率や直帰率の低下に大きく寄与することでしょう。

また、動画によって自社の商品やサービスのイメージを魅力的に伝えることができるため、効果的なブランディングにもなります。

制作するときに考えておくこと

背景動画を使用したwebサイトには、大きなメリットがある反面、いくつか注意すべき点もあります。制作する段階でぜひとも考えておくべきことを以下にまとめました。

動画の長さ

背景動画はループ再生が基本なので、動画の長さがある程度ないと同じシーンばかり何度も何度も繰り返すことになります。魅力的な動画でも、短すぎると雑な印象を与えてしまいますし、ユーザーが退屈してすぐに離脱することにもなりかねません。

といっても、飽きさせないように再生時間の長い動画を設定すると、ページの読み込み時間が長くなってしまうことが悩ましいところです。短すぎても長すぎても背景動画としては適していません。

動画を背景に使った魅力的なwebサイトをいくつか見てみると、最低でも30秒、しかし、最長でも1分程度がちょうどよい長さだということがわかります。

動画制作に力を入れており、それを見せることを目的にするのであれば、トップページの背景動画ではなく、動画用のコンテンツを作り、そこで見せるようにする方がよいでしょう。

動画の圧縮

テキストや画像のみのwebサイトと比べて、動画を使用した場合、ページの容量が格段に大きくなります。1分程度の動画であってもそのままでは読み込みに非常に時間がかかってしまうので、動画のサイズ圧縮は必須です。

動画の圧縮は、たとえば、「HandBrake」などのフリーソフトで簡単にできるので、労をいとわずできるだけサイズを小さくすることに努めましょう。

サウンド

動画にサウンドを使用する場合、デフォルトの設定ではミュートにしておくことをおすすめします。

今のユーザーはスマフォやタブレットなどを使ってさまざまな環境でネットを利用するため、突然大音量が流れるようなサイトはユーザーへの配慮が欠けていると言わざるを得ないでしょう。

どうしてもサウンド付きにしたいとしても、そのことをトップページに表記するなどユーザーへの配慮が必要です。

スマフォ表示の難しさ

現在はデバイスが多様化したため、パソコンだけでなくスマフォなどの小さな画面でも閲覧できるwebサイトが求められます。実際、モバイルファーストやレスポンシブデザインといった考え方が広まっており、webサイトの設計はシンプルな方向へと進んでいるのが現状です。

スマフォの限られたスペースで最大限に情報を伝える方法として動画は最適ではありますが、作成する際はパソコン用とスマフォ用で分けて考えた方が良いでしょう。横長のパソコンの画面いっぱいに表示される動画では、縦長のスマフォの画面では同じように見えません。

パソコン用とスマフォ用の動画を用意しておくか、「User-Agent Switcher」などのツールを使って、さまざまなブラウザや端末での見え方を確認しておくようにしましょう。どうしても難しい場合は、スマフォ用サイトには動画ではなく画像を用いるという対策もあります。

また、スマフォの場合、どこにでも持ち歩けるため、あらゆる場所で閲覧されるという想定でサイトを制作する必要があります。つまり、通信環境の良くない場所でもスムーズに閲覧できるように制作する必要があるということです。

あまり読み込みに時間がかかるような背景動画をトップページとすると、それが原因でユーザーが離脱してしまいます。

また、今でも動画を再生できない古い機種を使っているユーザーもいますから、そのようなユーザーに対しても画像を代わりに表示するなど配慮しなければなりません。

このように、背景動画を使用したwebサイトを制作する場合、さまざまなケースを想定して入念に検証する必要があるのです。

まとめ

ユーザーへの訴求力という大きなメリットがあるため、背景動画を使用したwebサイトは今後さらに増えていくと予想されます。

しかし、再生環境の異なるすべてのユーザーが同じようにサイトを閲覧できるようにすることはなかなか難しいことです。

今後、さらに通信技術が進歩すれば今と状況が変わることは確実です。背景動画を使用したwebサイトが一般的になり、パソコンでもスマフォでも同じように快適に閲覧できるようになるでしょう。

しかし、現状ではユーザーの閲覧環境には大きな差があります。それを考えると、デザインに凝り過ぎたwebサイトでは、思うような効果が得られないこともあり得ることです。

背景動画を使用したwebサイトには大きなメリットがありますが、デザイン性を追求するよりも、あらゆるユーザーが快適に閲覧できるように配慮することを重視するべきではないでしょうか。

ホームページ制作・デザインに対応できる業者を一覧から探す

ホームページ制作・デザインの相談をする

比較ビズへ掲載した受注者インタビュー

比較ビズで仕事を受けるために掲載した受注者様のインタビュー記事となります。受注者としての掲載をご希望の方は「資料請求フォーム」よりお問い合わせください。

インタビューの一覧を見る

ホームページ制作・デザインの案件一覧

ホームページ制作・デザインのお見積り案件の一覧です。このような案件に対応したい場合は「資料請求フォーム」よりお問い合わせください。

東京都

新着案件人気案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【案件進行状況】発注確定【最終発注者】自社【検討基準】品質重視【作成するホームページの種類】企業・店舗サイト【対象となるお客さんの層】その他

総額予算50万円まで (11/30まで)
高知県

新着案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【相談内容】必要な費用が安いほうが優先的に対応頂きたいです。【案件進行状況】企画中【最終発注者】自社【検討基準】価格重視【作成するホームページの種類】企業・店舗サイト

総額予算予算上限なし
滋賀県

新着案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【相談内容】 ECサイトでの販売を考えておりますが、初めての試みです。素材がクロコダイル等エキゾチックレザーのバック、財布等で、高級品になります。ECサイトに繋がるホームページ作製をお願い致します。{ …

総額予算70万円まで