背景に動画を使ったWebサイトの作り方

thumb_video

2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。


Packのサイトではかわいいわんちゃんの動画が次々に表示されます。画像よりも引きつけられますね。

Packのサイトではかわいいわんちゃんの動画が次々に表示されます。画像よりも引きつけられますね。

theQ cameraは水中でも使えるカメラの販売サイト。実際に楽しそうに水中で使っている動画が魅力的!

theQ cameraは水中でも使えるカメラの販売サイト。実際に楽しそうに水中で使っている動画が魅力的!

動画を用意する

まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。

  1. 自分で撮影する
  2. プロに撮影依頼する
  3. 有料の動画素材を使う
  4. 無料の動画素材を使う

1. 自分で撮影する

一番手っ取り早いのが自分で動画を撮影する方法。自分でイメージする内容をダイレクトに表現することができます。今では高価な機材を揃えなくても、スマートフォンやデジカメで気軽にそれなりのものを撮影可能。ただし、実際にWebサイトとあわせてみると「なんか思ったのと違う…」なんてことも。

2. プロに撮影依頼する

自分での撮影は自信がない・やってみたものの限界を感じた…そんな時に頼りになるのがやはりその道のプロ。映像関連の制作会社や、フリーランスのカメラマンなどに相談してみましょう。詳しいイメージを丁寧にヒアリングし、提案・撮影してくれるはずです。フリーランスのお仕事マッチングサイト「ランサーズ」にて、「動画撮影」で検索をかけてみると、関東を中心にフリーランスのカメラマンを検索できました。

3. 有料の動画素材を使う

動画素材を使うのもひとつの手です。写真素材を販売しているサイト「Fotolia」では動画素材も同様に販売していますよ。他の世界的に人気の素材サイトよりもアジア人モデルが多いと思うのでオススメです。

4. 無料の動画素材を使う

無料で手軽に使用することができる動画を配布しているサイトがいくつかあります。ニコニ・コモンズの動画検索YouTubeのクリエイティブ・コモンズ検索(フィルターでクリエイティブ・コモンズにチェック)が無難ですかね。しかし、3. の有料素材でもそうですが、やはり配布素材ではオリジナリティのあるコンテンツを作りづらいのが欠点です。また、気をつけなければならないのが、各動画のライセンス。著作権表示するのか?商用サイトでも利用できるのか?等、事前に調べておきましょう。

背景動画を実装する際の注意点

コンテンツが多いWebサイトには不向き

背景動画はあくまで背景に流すものであって、動画が主役ではありません。コンテンツの多いWebサイトでは、効果的に動画を表示するのに充分な余白が確保しにくいため、より高度なデザインスキルが必要とされるでしょう。

Whiteboardのホームには多くのテキストや画像が存在しますが、ファーストビュー以外の場所には半透明の黒い背景色を被せることで、主張しすぎない背景動画として扱っています。

Whiteboardのホームには多くのテキストや画像が存在しますが、ファーストビュー以外の場所には半透明の黒い背景色を被せることで、主張しすぎない背景動画として扱っています。

動画の長さ

動画の長さも大切です。長すぎると最後まで見られない上、ファイル容量も無駄に大きくなってしまいます。逆に短かすぎると、常にループしているので、ユーザーは急かされている印象を持ってしまいます。様々なサイトを見たところ、20秒前後が適当な長さかなーと思います。

音楽は流さない

私はWebサイトで許可無く音楽を流すのはマナー違反だと思っています。静かな場所で突然音楽が流れてしまったら、驚いてそのWebサイトを閉じてしまうでしょう(そして二度とそのサイトには戻りません)。たくさんのタブを開いている場合は、どこのサイトから音楽が流れてきているのかもわかりません。どうしても音楽も聞いてほしい場合は、ユーザー自ら音楽をONにできるスピーカーアイコンをわかりやすい場所に設置すべきです。

Spotifyのサイトは音楽を用意していますが、自動再生はしていません。

Spotifyのサイトは音楽を用意していますが、自動再生はしていません。

可能な限りファイルを軽く

読み込みの遅いWebサイトは、すべてを表示する前にユーザーに離脱されてしまう可能性が高くなります。動画、とくにクオリティの高いものはどうしてもファイル容量が大きくなってしまいます。うまく編集するなり、画質が荒くてもオシャレに見せる技(後述)を駆使して、なるべく3MB以下、理想は500KBを目指してファイルを軽減する努力を。

代替画像を準備

動画表示に対応していないブラウザーや、なんらかの理由で動画が表示されない事態に備えて、代わりに表示する静止画像を用意しておくとよいでしょう。

モバイルデバイスの対応

ただでさえ読み込みに時間がかかってしまう背景動画。スマートフォンやタブレットだと余計表示が遅くなる可能性も。そんな時のために、モバイルデバイスでは静止画像で対応するなどの工夫が必要です。

レスポンシブに対応しているExponent PRのWebサイトは、ブラウザーの幅が狭くなると動画部分を静止画像に差し替えて表示しています。

レスポンシブに対応しているExponent PRのWebサイトは、ブラウザーの幅が狭くなると動画部分を静止画像に差し替えて表示しています。

基本的な実装方法

HTML5の video タグを使用。autoplay で自動再生、loop で繰り返し再生します。

HTML

<p>Brilliant Blue</p>
<video src="http://webcreatorbox.com/sample/images/jewellery.mov" autoplay loop>
  <img src="http://webcreatorbox.com/sample/images/jewellery.jpg" alt="Placeholder">
</video>

CSSでは positionz-index で動画とコンテンツを重ねあわせ、レイヤーにして表示します。

CSS

body {
  background: #000;
}
video {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}
p {
  font-family: serif;         
  color: #fff;
  font-size: 400%;
  margin: 50px;
  position: relative;
  z-index: 2;
}


こんな感じ。

画質が荒くてもオシャレに見せる

動画ファイルを軽くしようとすると、どうしても画質が落ちてしまいます。画質が荒くてもオシャレに見せる技として、ストライプやドットの画像を組み合わせて表示する方法があります。video タグの前に空の div を用意し、CSSで用意しておいたストライプやドット画像(PNGやGIF形式)を背景画像として設定。荒い画像もごまかすことができます。

先ほどのサンプルに横縞をプラス。荒い部分が目立たなくなっていい感じです。

 ファッションショーのランウェイの動画を背景にしているHolly Fulton。細かいドット模様を被せています。

ファッションショーのランウェイの動画を背景にしているHolly Fulton。細かいドット模様を被せています。

ストライプやドットの画像を使わなくても、divbackgroundrgba で半透明色を指定して被せると、同様に背景動画と溶け込みます。

jQueryプラグインを使った実装方法

より手軽に実装するなら、jQueryプラグインを使う方法があります。

BigVideo.js

Bigvideo

BigVideo.jsをダウンロードデモ
表示したい動画を用意し、必要なjQueryプラグインファイルを読み込んで、以下の設定でOK。

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('video.mp4',{ambient:true});
});

複数の動画をプレイリストとして表示するならこんな感じ。

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['video1.mp4','video2.mp4','video3.mp4'],{ambient:true});
});

jquery-tubular

jquery-tubular

jquery-tubularをダウンロードデモ
jquery-tubularなら表示したい動画をYoutubeにアップロードし、必要なファイルを読み込んでYoutube動画のID(http://www.youtube.com/watch?v=N8G4YgQyEMk ←この例なら watch?v= 以降の英数字)を記述するだけ。

$().ready(function() {
    $('#wrapper').tubular({videoId: 'N8G4YgQyEMk'}); // YoutubeのID
});

背景に動画を使っているWebサイト

Joe San Clothing

Joe San Clothing

Coulee Creative

Coulee Creative

メルセデス・ベンツ日本公式サイト

メルセデス・ベンツ日本公式サイト

MediaNovak

MediaNovak

Lattrape rêve

Lattrape rêve

Whiteroom

whiteroom

WAAAC

waaac

Poolhouse

poolhouse

Dadaab Stories

Dadaab Stories

Het wordt een meisje

Het wordt een meisje


前述のとおり、多くのコンテンツがあるサイトでは取り入れづらいデザインだと思います。サイトをシンプルに、わかりやすくすることを頭にいれて、素敵な背景動画を実装してみてください!

シェアする

コメント

  • TZK

    背景全画面動画のページ試作で、このページが大変役に立ちました。ありがとうございました。http://www.ariz.jp/garage/demo/bgvideo/

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)