販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

Webサイトに背景動画を実装する方法と厳選事例まとめ

こんにちは、あやかです。

最近制作しているサイトに、背景として動画を実装するケースが多いので、今回はサイトに背景動画を実装する方法と、個人的に良いな〜と思った背景動画を実装したサイトをご紹介します。

背景動画の実装方法


背景動画を実装する際には、HTML・CSS・JavaScriptを編集する必要がありますが、スマホ版での表示や対応するブラウザ、自社のコーディングルールによって実装方法が異なってきます。

これからご紹介する実装方法で自社サイトに合った方法を選択するために、まずは自社のサイト制作に関するルールをご確認いただくことをおすすめします。

iframeタグを使って埋め込む

iframeはInline Frameの略です。(中略)ウィンドウの中に独立して表示される形式のインラインのフレームが作成できます。
引用:HTMLタグリファレンス

YoutubeやVimeo等にアップされている動画を直接ページ内に埋め込む際にはifameタグを使用します。ブラウザによってはiframeタグが推奨されていないブラウザ(アプリ内ブラウザ等)もあるのでご注意を。

また、フルスクリーンで背景動画を表示させることができて、ほとんどのブラウザで対応している「tubular」等のjQueryプラグインを併せて使用することをおすすめします。

videoタグを使って埋め込む

videoタグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、 HTMLからシンプルに動画を扱えるようになります。 感覚的にはimgタグで画像を扱うような感じです。
引用:HTMLタグリファレンス

背景動画を実装しているサイトを見ると、HTML5のvideoタグを使用しているケースが多いです。

ブラウザについては、IE8以降とOperaのみサポート外ですが、ほとんどのブラウザで実装可能です。ただし、動画ファイルを直接読み込むので、ファイルサイズにはご注意ください。

またスマホ版は、JavaScriptで判別し代替画像を使用する場合が一般的なようです。

gifアニメを表示する

ページの表示速度を上げたい場合やスマホでも背景動画を実装したい場合には、gifアニメを表示すると良いと思います。gifアニメとは、複数のgif画像をつなげることでパラパラ漫画のようにWebサイト上に動きのある表現ができる手法です。

古くからある手法ですが、ブラウザや端末を問わず表示することができ、Flashの人気低迷後に活用頻度が高まっています。

また、無料で簡単に動画をgifアニメにするサービスもあるようなので、気になった方は調べてみてください。

背景動画を効果的に使用している事例

ここからは、背景動画を実装しているサイトをご紹介します。ご参考までにぜひ!

1. 株式会社TOKYO BASE

自社ブランドやセレクトショップを展開しているTOKYO BABEのコーポレートサイトです。
取り扱っているハイセンスな服に負けない動画が特徴的です。

また随所にパララックスを使用している点も素敵ですね。

こちらもおすすめ▶︎スマホの特性を活かしたLP事例10選|パララックス・動画など

2. 嬉野茶時公式オンラインショップ

佐賀・嬉野町の伝統文化を広めるためのプロジェクトである嬉野茶時のECサイトです。
動画の尺は10秒と若干短いですが、こだわりの商品を効果的に演出している動画なので思わず見入ってしまいますね。

全体的にシックなデザインで統一しているので、動画がより引き立ちます。

3. 500色の色えんぴつ TOKYO SEEDS|FELISSIMO

FELISSIMOの「TOKYO SEEDS」のブランドサイトです。
どんな商品を紹介しているのか?ということが直感的にわかるインパクトのある動画ですね。「世界をぬりかえよう」というコピーも効いていています。

4. 宮古島の初心者向けダイビングショップ|ガイド屋さん

宮古島の初心者向けダイビングショップ「ガイド屋さん」のサイトです。
海の中の幻想的な映像も特徴的ですが、音声のオンオフボタンやキャンペーン情報、予約ページへのバナーなど、動画でユーザーを引きつけつつ、次のアクションを誘導するような仕組みが秀逸なサイトです。

5. INDEN-YA|印傳屋

バッグや小物を製造販売している「印傳屋」のサイトです。
こちらも音声のオンオフボタンやスクロールを促すボタン等が効果的に配置されています。

背景動画だけでなく、ページをめくるようなパララックスでストーリー性のある構成になっているところも素敵です。

こちらもおすすめ▶︎背景動画を利用したWebサイトの効果とポイント

最後に

いかがでしたでしょうか?
まずは、どんな商品・サービスを、どのような表現すれば、ユーザーの心は掴めるか?コンバージョンにつながるのか?を考えた上で、背景動画の実装をご検討いただければと思います。

それでは、また次回!

▶︎動画制作・Web制作についてのお問い合わせはこちらから
▶︎ジーエークロッシングの動画料金表はこちらから

The following two tabs change content below.
あやか
これは本当の話ですが、組織図の中で私だけ肩書きがありません。 実家は代々漁師で生計を立てていますが、私の代で漁師業はストップしますので、 ご先祖様に顔向けできるように、産業が大きく変わるこの時代の節目で 良い働きができたらと思っています。
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする