お問合せ
03-4400-6494ファーストビュー動画とは？取り入れるメリットや活用のポイントをわかりやすく解説
2023.08.09 
2023.11.28 
ビジネスにおける動画の代表的な活用方法の一つである、ファーストビュー動画。
ファーストビュー動画の導入や活用に興味を持っているという企業も多いのではないでしょうか？
今回は、幅広いジャンルの動画制作をおこなってきたkey MOVIEが、そんなファーストビュー動画についてわかりやすく解説します。
ファーストビュー動画を上手く取り入れている企業の事例を交えながら、概要や取り入れるメリット、効果を最大化するためのポイントなどについて詳しく紹介していくので、ぜひ参考にしてみてください。
動画制作の費用相場が気になっている方は、以下の制作相場ガイドブックをご覧ください。
▼動画制作費の相場資料を配付中▼
動画制作費の相場資料をダウンロード（無料）
Contents
Webサイトにアクセスしたときに最初に表示される部分を「ファーストビュー」と呼びますが、ファーストビュー動画は、このファーストビューの部分に表示される動画です。
Webサイトにアクセスした際、ファーストビューを見て離脱してしまうユーザーは意外と多く、ファーストビューでユーザーをいかに離脱させないかが重要になります。
その、ユーザーの離脱を防ぐ施策の一つがファーストビュー動画の導入です。
Webサイトにおける重要な部分であるファーストビューに動画を埋め込んで表示させることで、ユーザーの興味や関心をひき、離脱を防げるようになります。
企業がWebサイトにファーストビュー動画を取り入れることで期待できるようになる主なメリットは、以下のとおりです。
- 興味関心をひき離脱を防ぐ
- 短い時間で多くの情報を伝えることができる
- 企業や製品、サービスのイメージが伝わりやすい
Webサイトにアクセスしたときのファーストビューで映像が流れ始めると、大抵のユーザーは手をとめ、動画を視聴します。
この効果により、アクセス直後の離脱を防ぐことができるようになりますし、ユーザーの興味関心をひき、Webサイトのコンテンツに目を通してもらいやすくなります。
短い時間で多くの情報を伝えられる点も、ファーストビュー動画を取り入れるメリットの一つです。
テキストだと伝わりにくい内容も、動画であればしっかり伝えることができますし、理解してもらいやすくなります。
また、製品を実際に使っている様子やサービスを利用している様子を映像として伝えられるので、製品やサービスのイメージが伝わりやすいというメリットもあります。
Webサイトにファーストビュー動画を取り入れて活用する上で参考になるのが他社の事例です。
他社の事例を参考にすることで用意するべき動画や効果的な活用方法のイメージがわきやすくなるので、積極的にチェックして参考にするべきです。
ここでは、特に参考になりそうな3社の事例をピックアップして紹介していきます。
株式会社アユムホーム
群馬県にあるハウスメーカー、「アユムホーム」。
アユムホームのWebサイトには、マイホームを中心とした家族の思い出を連想させるファーストビュー動画が取り入れられています。
子どもが生まれるタイミングや子どもが成長して大きくなるタイミングはマイホームの購入を検討し始めるタイミングでもありますが、そのことを意識したターゲットユーザーに刺さる内容の動画となっています。
株式会社グラスト
北海道から沖縄まで、全国各地に支店を展開している東京の人材派遣会社、「株式会社グラスト」。
株式会社グラストもファーストビュー動画を上手く取り入れている企業の一つです。
株式会社グラストのWebサイトにアクセスすると、気持ちいいテンポで編集されたスタイリッシュなファーストビュー動画が再生されます。
いきいきと働いている人物が印象的な動画で、「この会社なら自分が輝ける職場を紹介してもらえるかも…」と思わせてくれる動画に仕上がっています。
小柳建設株式会社
新潟県を代表する建設会社、「小柳建設株式会社」。
小柳建設株式会社は、建築事業だけでなく、次世代のコミュニケーションツールであるHolostructionという製品の製造・販売もおこなっていますが、そのHolostructionのサービスページでもファーストビュー動画が効果的に活用されています。
掲載されている動画は、Holostructionを実際に使っている様子を中心に構成されていて、「この製品を使えばこういったことが実現できます」ということをイメージさせてくれます。
豊富なパターンが見れますので是非参考にしてください。
https://webdesignday.jp/gallery/technique/background-movie/
ファーストビュー動画を作成する際の流れは、会社紹介動画や製品紹介動画、サービス紹介動画など他の動画の作り方とほとんど変わりません。
企画を立てて構成を用意し、構成を確認しながら必要な映像を撮影して編集していきます。
動画を制作する段階で注意するべきポイントとしてあげられるのは、動画のファイルサイズが大きくなりすぎないことを意識しながら制作することぐらいです。
動画制作は専門家である制作会社に外注するのが一般的ですが、費用を抑えたいのであれば内製するという方法もあります。
制作した動画はHTMLでWebサイトに実装し、CSSで見栄えを整えていきます。
具体的には、HTML5のvideoタグを使用します。その際に、ブラウザによっては、video srcに【muted】【playsinline】属性を含めないと再生されないケースもあるので入れておきます。
ページを開いたときに自動再生させるには、video srcに【autoplay】属性を、ループ再生なら【loop】も入れます。
※cssでも表示させるための設定を追加します。
ファーストビュー動画は、ただ取り入れるだけで効果が期待できるようになるものではありません。
重要なのは、取り入れつつ、その効果を最大化することです。
そこで把握しておきたいのがファーストビュー動画の効果を最大化するための活用ポイントですが、主なポイントとしては以下の4点があげられます。
- 再生したくなる・視聴したくなる工夫を取り入れる
- どの端末でも快適に動画を視聴できるようレスポンシブに対応させる
- 動画のファイルサイズが大きくなりすぎないようにする
- 勝手に音声やBGMが流れてしまわないようにする
それぞれのポイントについて詳しく解説していきます。
再生したくなる・視聴したくなる工夫を取り入れる
Webサイトにファーストビュー動画を取り入れるのであれば、導入した動画をしっかりと視聴してもらわなくてはいけません。
そのために必要になるのが、ユーザーに手を止めて動画を視聴してもらうための工夫です。
ユーザーが思わず見入ってしまうようなインパクトのある映像を動画の最初で取り入れるなど、しっかりと動画に目を通してもらった上でWebサイトのコンテンツを見進めてもらえるようにしましょう。
どの端末でも快適に動画を視聴できるようレスポンシブに対応させる
せっかくWebサイトにファーストビュー動画を導入しても、快適に視聴できないのであれば意味がありません。
最近はPCではなくスマートフォンやタブレットなどでネットを閲覧するユーザーも増えてきているので、どういった端末でも快適に動画を視聴できるような状態にしておく必要があります。
Webサイトをレスポンシブに対応したものにして、PCはもちろん、スマートフォンやタブレットでアクセスしたときでもファーストビュー動画が適切な大きさで表示されるようにしておきましょう。
動画のファイルサイズが大きくなりすぎないようにする
Webサイトにファーストビュー動画を埋め込む際は、動画のファイルサイズについても注意しなくてはいけません。
動画のファイルサイズが大きくなりすぎてしまい、再生されるまでに時間がかかったり、再生中に動画がとまるようだとユーザーを離脱させてしまいかねません。
また、ファイルサイズが大きくなってページの読み込みに時間がかかるようになるとSEOにも悪影響をあたえてしまう可能性があるので、ファイルサイズが大きくなりすぎるのは避けるべきです。
動画の時間を短くまとめるなどして、ファイルサイズが大きくなりすぎないようにしましょう。
勝手に音声やBGMが流れてしまわないように設定する
ナレーションなどの音声やBGM，SEなどの効果音は、動画を構成する重要な要素の一つです。
ただ、Webサイトにファーストビュー動画を取り入れる際は、勝手に音声やBGMが流れないように設定するなど細心の注意を払わなくてはいけません。
Webサイトを閲覧する環境や状況は人それぞれで、自宅などプライベートな空間で見ている人もいれば、電車の中や屋外など公共の場で見ている人もいます。
公共の場にいるときにいきなり音声やBGMつきで動画が再生されると、ユーザーに不快感をあたえてしまいかねません。
動画が自動で再生されること自体は問題ありませんが、音声やBGMつきで再生するかどうかはユーザーに判断を委ねるべきです。
ユーザーに不快感をあたえてしまうと、製品やサービス、企業に対して不信感や不快感を抱かせてしまいかねないので、音声やBGMが勝手に流れてしまわないよう設定して対処するようにしましょう。
次にファーストビュー動画自体の制作ポイントを紹介します。
ポイントは下記3点です。
- 尺は短くする
- サイトデザインに合わせて制作する
- 直感的に伝わる映像にする
尺は短くする
WEBサイトは基本的に何かの目的があって流入します。そのためファーストビューからスクロールせずに、ずっと見ていられることは無いです。
なので、動画の尺は極力短くし、短い時間でもしっかりと訴求できる構成で制作すると効果的です。
感覚的には20秒以内、長くても30秒以内が適切かと思います。
サイトデザインに合わせて制作する
ファーストビュー動画は、動画の上や周りにサイトのコピーや装飾など様々な要素が被ります。
そのため、よくある失敗例として動画とサイトデザインのトンマナがあっていなかったり、ファーストビューがごちゃつきすぎてしまうケースがあります。
しっかりと、サイトデザインをふまえて動画も企画することが重要です。映像や装飾は基本的にシンプルなものにするとサイトデザインに合わせやすいです。
直感的に伝わる映像にする
まず、音はほぼ無しで再生されます。そのため、音無しでも伝わる映像にします。
また、サイト流入直後のユーザー心理として、説明的な細かい情報は一般的には求められないです。ファーストビューは直感的に興味を引く、端的に興味を引くようになっていることが重要です。動画も変わらずこの点を意識して制作することは非常に重要です。
ファーストビュー動画は、Webサイトにアクセスしてきたユーザーの興味をひきつけ、製品やサービスのことを知ってもらったり、Webサイトに掲載しているコンテンツに目を通してもらうための効果的な施策の一つです。
背景に動画が流れるWebサイトはインパクトがあり、ユーザーの興味や関心をひく手段としては非常に有効なので、積極的に活用するべきだと言えます。
ファーストビュー動画の作り方には制作会社に外注する方法と内製する方法があると紹介してきましたが、クオリティを求めるのであればプロに依頼するのが一番です。
弊社では、戦略に基づいた効果の出る動画を制作しています。
ユーザーの離脱を防ぐのはもちろん、興味を持ってもらい、Webサイトのコンテンツを見進めてもらえるようなファーストビュー動画の制作をサポートさせていただきますので、ぜひお気軽にお問い合わせください。
動画制作の費用相場が気になっている方は、以下の制作相場ガイドブックをご覧ください。
- 小林 稜介
- 動画マーケティングコンサルタント
広告代理店のクレオとデジタルアイデンティティにて幅広いマーケティング支援に従事した後、key MOVIEに参画。サイト改善や広告運用など動画の活用面から逆算した動画企画の提案・制作をしています。
