今回はWEBサイトのトップページに背景動画を使うことのメリットと注意点をご紹介します。トップページの中で、ほとんどのユーザーが目にするファーストビュー(FV)でユーザーの注意を引くことはサイト全体の改善にも役立ちます。・より多くのユーザーにサイトを見て欲しい・魅力的なホームページにしたい・WEBサイトの直帰率を改善したいなど、WEBサイトの効果を高めるために動画を検討している方必見です。目次ファーストビューに動画を使うファーストビューって大事なの?ファーストビューに動画を使うメリットFV動画のデメリットFVに動画を使う際の注意点まとめファーストビューに動画を使うこんにちは、動画制作担当の宇野です。WEB制作会社で動画を担当していると、「WEBサイト内で使用する動画」を制作させてもらう機会も多々あります。その中でもこの「ファーストビュー動画」は、考えるべきポイントも多くあり、非常に難しい動画の一つです。設計をして制作しないと期待した効果が得られない、最悪の場合サイトの評価が落ちてしまう、なんてこともあります。動画自体のクオリティーはもちろんですが、今回はWEBサイトの観点からみるFV動画のメリットと注意点をまとめてみました!ファーストビューって大事なの?トップページの一番目につくファーストビューはサイトを訪問したユーザーのほとんどが目にするいわば看板です。この看板を見てユーザーは、欲しい情報が手に入るサイトかどうか?を判断します。どんなに有益なサイトでも、入り口の時点で欲しい情報がないと判断されてしまうと、サイトを見てもらうことはできません。ファーストビューでユーザーの関心をつかむことがWEBサイトの役割を最大限に伸ばす方法の一つです。サイトイメージを伝えやすい前述のように、訪問者が最初に目にするのがFVです。「このサイトで得られる情報」や「サイトの世界観」「ブランドイメージ」を映像イメージで伝えることで、ユーザーの関心度を高め、さらには感情に訴えて共感を得られることもあります。□短時間で多くの情報が伝わる動画で伝わる情報量は1秒あたりにWEBページ3600ページ分と言われています。サイトに訪れたユーザーにできるだけ短い時間で、できるだけ多くの情報を伝えることによって、サイトへの関心を高めることができ、詳しく知って欲しい情報へとユーザーを誘導できます。動きでユーザーの注意をひく人は動いているものを目で追ってしまう性質があります。そのため強調したい内容や伝えたいイメージを動きによって目立たせることができます。サイトの世界観や有益な情報を得られる期待感によって、ユーザーの関心を惹き、より詳細な情報へ誘導することで早期の離脱を防ぐことができます。FV動画のデメリットFVを動画にするデメリットももちろんあります。目的に沿った選択をすることが必要です。◻︎サイトが重たくなってしまう最大のデメリットは、サイトが重たくなってしまうということです。FVに動画を使用した場合は、サイトトップへ訪問時に必ず読み込まれることになります。WEBサイト表示速度は直帰率に大きく影響し、読み込みに3秒以上かかると40%以上のユーザーが離脱するというデータもあります。表示されるのに時間がかかり、不信感を抱いたユーザーや待てないユーザーが離脱してしまったら本末転倒です。FVに動画を使用する際は、必ずWEBサイト診断で表示速度を測ることをお勧めします。WEBサイト診断にオススメのツールは下記記事でご紹介しているのでぜひ合わせてお読みください。◻︎「動画を使うこと」が目的になってしまい、本当の目的が薄れてしまう。前述の通り、伝える情報量やイメージを伝える上では有効な手段です。伝えたいものによっては写真やグラフィックの方が伝わりやすい場合もあります。・動画のファイルサイズを抑える近年では、サイトの読み込み速度がGoogleのサイト評価基準に大きく影響すると言われています。そのため、看板動画もできるだけ軽いものにする必要があります。基本的には5MB以下、大きい場合でも10MB程度を基準にするのが良いかと思います。解説しています!・見せたい情報を精査するサイトを訪れたユーザーにとって、FVは文字通り玄関となります。初めましてのお客様にできるだけ多くの情報を伝えたい!という気持ちになってしまいがちです。ユーザー目線で考えた時に情報量が多すぎてしまわないか?を意識する必要があります。「もっと知りたい」という気持ちにさせることが理想ですね!・尺を短くする多くの情報を伝えられるからといって、動画が長すぎてしまうとユーザーは飽き、サイトから離脱してしまいます。30秒を目安にし、伝えられない情報は別ページへ誘導できる導線を設置しましょう。・PC用とスマートフォン用どちらも用意するPC用は横長の比率(1920*1080)、SP用は縦長の比率(1080*1920)を用意しておくことでデバイス毎の表示の差異を減らすことができます。レスポンシブデザインが当たり前となりましたが、動画の比率は変更が効きません。テキストを用いる場合などは特に、PC/SP/タブレットなどのどの端末で閲覧しても、見切れないような範囲内にテキストを収める必要がある点には注意してください。・画質に注意するファイルサイズに気を使っていると、気づけば動画の画質が落ちすぎていた...!というのはよくあることです。見ている人にちゃんと情報が伝わらなければ元も子もないので、画質には注意が必要です。してもファイルサイズとの兼ね合いが取れない場合、尺を短くしたりメッシュを入れるなど別の方法を試してみましょう。・サウンドをオフにするスマートフォンが普及した今では、ユーザーがどんな場所でサイトを閲覧しているのかわかりません。そのため、急に音がなってしまわないように、FV動画の音声は基本的にオフにしておきます。・サイトデザインと整合性をとるWEBサイトの背景として動画を使う際には、サイトデザインとの整合性を保つ必要があります。テキストは動画内に入れるのかWEBサイト側で表示するのか、などサイトのデザインとの兼ね合いも考える必要があります。まとめ今回はファーストビュー動画のメリットと導入する際の注意点を解説しました。ファーストビューのクオリティを上げることはもちろんですが、まずは成果から逆算して「なぜファーストビューを動画にするのか」を考えることで、優先度を絞りやすくなりより効果的なファーストビューにすることができます。ホームページ・ECサイト運用に関する情報をメルマガで配信中!WEB担当者様向けのお役立ち情報を無料でご案内しております。通販システム開発など、WEB戦略をトータルで支援する福岡のWEB制作・コンサルティング会社です。成果報酬でのご提案、補助金を利用したサイトの制作も行っております。お気軽にご相談ください。