Webサイトの背景動画を作成するポイントや成功事例を紹介!
Webサイトを開いた際、ページの背景で流れる動画に目にした経験はないでしょうか。Webサイトの背景動画は、訪問者の関心を集め、サイト企業のことを知ってもらうために有効な方法の1つです。
ただし、適当な背景動画を作成しても、集客や情報伝達に役立つとは限りません。背景動画の効果を期待するには、背景動画のポイントを押さえた動画でなければなりません。
そこで今回は、背景動画を使用したWebサイトの成功事例の紹介や、背景動画を作成する際のポイントについて紹介します。
目 次
1.Webサイトに背景動画を使用するメリット
サイト上の情報を見てもらうためには、訪問者に関心を持ってもらわなければなりません。Webサイト上に自動再生される背景動画があると、静止画や写真よりも人目を引くことができます。訪問者に興味を持たせることが、成功に欠かせない第一歩です。
新しい商品やサービスの使い方をサイト上で伝えたい場合、テキストや数枚の画像だけでは正しいイメージを伝えられない可能性があります。
動画ならば、ストーリー性を組み立てたり、メッセージを入れたりすることで、より鮮明にイメージを伝えることができます。
景動画はWebサイトの背景に置かれるため、ホームページ上のスペースを大きく取ることがありません。さらに、Webページにすれば数千ページの情報量を、1分程度の動画で伝えることができます。
少ないスペースに多くの情報を入れられるため、伝えたいことが多い場合に有効な方法と言えるでしょう。
2.背景動画を使用したWebサイトの成功事例
●ブライダル系ソーシャルネットサービスを展開するA社
ブライダル系のサイト作りを事業としているA社では、自社事業を分かりやすく背景動画にまとめています。自社スタッフとユーザーの行動を交互に流すことで、サイト利用からマッチング、成婚までがイメージしやすい構成が特徴です。
ブライダルとソーシャルネットの関連を視覚的に表現することで、ユーザーの行動を促しています。動画カラーは白や薄い黄色など明るい配色が多く、ブライダルを連想させる白と雰囲気を合わせていることも、サービスのイメージアップに繋がるポイントです。
●美容室を営むB社
地方の美容室を営んでいるB社は、サイトトップにGIFアニメを繋げた背景動画を流し、美容室の何気ない日常を芸術性ある映像作品にしています。静かな動きと大きな動きを切り替えて、テクスチャや色味調整によりおしゃれなページとなっていることが特徴です。
サイトメニューにも、カーソルを合わせると文字色が段階的に変わる演出を採用しており、サイト訪問者を楽しませます。地方の店であってもサイトを簡素にせず、上品さとユーモアでサイト訪問者に魅力を感じてもらえる努力を行っています。
●スキューバダイビングのレッスンスクールを開催しているC社
ダイビングライセンスの取得コースを提供しているC社は、サイトのファーストビューに海を中心とした背景動画を取り入れています。
動画はスライドショーのように数秒おきで切り替わり、沖縄の風景や海中のシーン、仲間との触れ合いなど、ライセンス取得によるメリットを視覚的に訴えるという内容です。
ダイビングに対する興味が薄い人でも、自然の美しさには引きつけられるため、潜在顧客を見込み客に育てるきっかけ作りができます。
3.Webサイトの背景動画を作成する際のポイント
ここでは、背景動画を作成するためのポイントを3つ説明します。
3-1.①30秒程度の短めの動画にする
訪問者を引きつけるための背景動画は、30秒程度で再生が終わるものを作成しましょう。動画はたしかに視聴者の目を引きつけますが、再生時間が長い動画は飽きられてしまいます。テレビコマーシャルが15~30秒であるように、Webサイトの背景動画も30秒程度に編集するようにしましょう。
30秒の動画では、伝えたいポイントを分かりやすくすることが重要となります。導入となるイントロ部分はもったいぶらずに短くして、要旨やイメージを伝えるメイン部分に秒数を大きく割きましょう。短い動画は記憶しやすいため、効率的に企業イメージを印象付けられます。
3-2.②ファイルサイズを軽量化する
サイトの読み込み速度が遅いページは、訪問者を苛立たせ、ページから離脱されてしてしまう可能性もあります。ページ読み込み速度は検索アルゴリズムの評価にも関係しているため、SEOの観点においても重要です。
トップページに背景動画を組み込むと、Webページ自体の表示速度にプラスして動画コンテンツの読み込みも発生します。Webページの読み込みが長くなり過ぎないように、動画のファイルサイズはできる限り軽量化しましょう。
ファイルサイズを軽量化する方法は、主に3つあります。
- 動画の秒数を短くする
- サウンドを入れない
- 動画ファイル軽量化サービスを利用する
Webサイトの読み込みに大きく影響を与えないためには、背景動画の容量を5MB程度にすることがおすすめです。
3-3.③キャッチコピーやボタンなどとの相性を確認する
Webサイト上には背景動画だけでなく、キャッチコピーやリンクなども配置されています。訪問者の目を引く背景動画も大切ですが、画面に表示されている他要素のマイナスとなっていないか、相性を確認しましょう。以下のようなケースでは、背景動画が他要素に悪影響を与えています。
- 動画のちらつきでキャッチコピーが読めない
- 動画の色とボタン配色が同系統であるため、リンクの位置が分かりづらい
背景動画の制作後に相性を確認すると、ダメだった場合に作り直しのコストがかかります。サイト上にある他要素との相性確認は、背景動画の制作設計段階で行いましょう。
4.背景動画を使用したWebサイトを作成するなら?
前述したように、背景動画は自社の事業を顧客に伝える効果的な方法です。背景動画を使用したWebサイトを作成したい場合、2つの方法があります。
1つは「自分で制作する」ことであり、もう1つは「プロに制作を依頼する」ことです。
最後に、背景動画を使用したWebサイトの作成方法である、自主制作とプロへの依頼それぞれのメリットを紹介します。
4-1.自分で動画を制作する
Webサイトの背景動画は、自分で動画を制作して、Webサイトに組み込むこともできます。サイト上への実装方法は、HTML・CSSやプラグインなどの設定について基本的な知識があれば、そこまで難しくありません。
自分で制作する場合、動画を用意する方法は以下の3つがあげられます。
- ① 自分で動画撮影する
- ② 無料の動画素材を使用する
- ③ 有料の動画素材を使用する
「自分で動画撮影」する①は、手間こそかかるものの、背景動画制作にかかるコストを最も安く抑えられることがメリットです。
②の「無料の動画素材」もコストを抑えられますが、オリジナリティ・クオリティを高くすることは難しくなります。③の「有料の動画素材」も、オリジナリティが低くなる点は同様です。
4-2.動画制作のプロに依頼する
動画制作のプロに依頼すると、クオリティの高い背景動画を制作してくれます。自分で動画を制作することにもメリットはありますが、プロの制作したページに比べると、完成時の見栄えやデザインが大きく異なります。
また、動画制作のプロに依頼するメリットは、動画の質だけではありません。プロに依頼した場合、会社の事業やサービス・商品について細かくヒアリングを行います。ヒアリング内容をもとに、訪問者の目線も含めて動画が設計されるため、訴求力のある背景動画が制作可能です。
動画制作のプロはWebサイト制作ノウハウも持っていることが多く、サイト上の実装まで依頼できる点もメリットといえます。Webサイトに魅力的な背景動画を導入するなら、業界のプロに依頼することがおすすめです。
まとめ
Webサイトの背景動画は、自社のことを知ってもらうための有効な方法の1つです。少ないスペースに多くの情報を入れることができ、自社商品やサービスの情報を正確に伝えられます。既にいくつもの日本企業で取り入れられており、成功事例も多くあります。
Webサイトの背景動画を作成するためには、いくつかのポイントが素材します。背景動画は自分でも作成できるものの、魅力的な動画にしたいならば、プロの制作会社への依頼がおすすめです。
クオリティの高い背景動画で、サイト訪問者に明確なイメージを伝えることが、自社事業における成功のための第一歩です。
シードアシストでは、動画制作をお考えのお客様のご相談を受け付けております。
具体的な制作内容を伺い、お客さまのご予算に見合ったご提案をさせていただきます。
一度お問い合わせください。
動画制作のお問い合わせはこちら
ホームページ制作に関してはこちら