背景動画サイトを手間をかけずに製作する方法
ハローエブリワン、ジェイだ。
夏本番真っ盛りになり、気分も最高潮になってきた。
この最高のfeelを思い出に残すために、カメラ片手にくり出す機会も増えて来たんじゃないだろうか。
思い出を残すには動画が最高だ。動画は写真に比べ、より多くのシーンを保存することができ、見返した時にその場のストーリーを実感することができる。写真だけでは伝えきれない感情や風景を動画は残すからな。
Web製作の現場でも動画を取り入れたものが増えてきた。というより、だいぶ当たり前になってきた。特に背景をいっぱいに使った動画は、その企業が持つイメージを伝えたり、そのブランドの気品を漂わせたりすることができる。ドワンゴクリエイターズブログもドワンゴデザイナーが働いている環境を伝えたいと思い、アイキャッチに背景動画を利用させてもらっているよ。
このように背景動画は製作側が伝えたい多くのイメージや情報をユーザーに届けることができ、ユーザーがスクロールするときの期待感を煽ることができるんだよな。
トゥデイはこの背景動画を簡単に実装する方法をエブリワンに伝えたい。ちなみに動画の製作方法はドワンゴクリエイターズブログの以下の記事で紹介させてもらっているから、動画製作に興味をもったら以下も参考にしてくれ。
背景動画の参考サイト
まずは実践に入る前に背景動画が実際に使われているサイトを紹介したい。
どれも背景動画を利用することでサービスイメージや、ブランドイメージ、店舗・企業イメージをダイレクトに伝えることができている。
LEGEND WORLD WIDE
ファッションブランドのサイト。時期によって動画を変更しており、シーズンごとのテーマがそれぞれ伝わってくる。
http://www.legendww.com/#/sr
the Q
カメラのPRサイト。ファッショナブルで様々なシーンで楽しく利用できることが伝わる。特に水中や夜間でもオールラウンドに気軽に思い出が残せる手軽さがすごく印象的だ。
http://www.theqcamera.com/
VOUS ÊTES AU GUSTAVE CAFÉ
フランスにあるカフェのサイト。店内の様子がその場にいなくても伝わってくる動画を背景に、スクロールを促すマウスのアイコンがなんとも愛らしい。スクロールするとドリンクメニューやフードメニューも動いているので、こちらの食欲を沸き立たせてくれる。
http://www.gustavecafe.fr/
Forty
アメリカにあるWeb制作会社のサイト。動画をみると対応してくれる人がわかり、一緒に仕事出来るイメージが打ち合わせをしなくともできてくる。スマートでありながら、フレンドリーさを感じさせてくれるサイトだ。
http://forty.co/
DADAAB STORIES
ダダーブというケニアの北東州にある町であり、世界最大級の難民キャンプを紹介している。その場の現状が文章を読まなくてもヒシヒシと伝わってくる。
http://www.dadaabstories.org/
bideo.jsを使って制作
参考になる背景動画サイトを紹介させてもらったところでいざ実践だ。
今回はbideo.jsというスクリプトを使って制作するぜ。
bideo.jsは動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトなんだぜ。レスポンシブ対応するから、様々なデバイスに対応させなきゃいけない今の時代にはぴったりだ。そう、どんな場所でも輝く俺のようにな。
デザインを製作
まずはデザインを制作しよう。
背景動画をデザインする際には、デザイン的に良い部分をキャプチャーし、画像にして制作するといいぜ。
以下が今回制作したデザインだ。
bideo.jsの使い方
1.bideo.jsをダウンロード
以下よりbideo.jsをダウンロードしてほしい。GitHubからダウンロード可能だ。
https://rishabhp.github.io/bideo.js/
2.スクリプトの読み込み
ダウンロードした「bideo.js」と「main.js」を読み込もうぜ。bodyの閉じタグの前に記述だ。
<body> ... コンテンツ ... <script src="bideo.js"></script> <script src="main.js"></script> </body>
3.動画ファイルの設定
「main.js」の「src: ‘video/sea_town.mp4’,」の行を自身が設定した動画ファイルに変更しよう。
(function () {
var bv = new Bideo();
bv.init({
// Video element
videoEl: document.querySelector('#background_video'),
// Container element
container: document.querySelector('body'),
// Resize
resize: true,
// Array of objects containing the src and type
// of different video formats to add
src: [
{
src: 'video/sea_town.mp4',
type: 'video/mp4'
}
],
// What to do once video loads (initial frame)
onLoad: function () {
document.querySelector('#video_cover').style.display = 'none';
}
});
}());
4.HTMLの記載
下記のソースをbody内に記述しよう。
<div id="container"> <video id="background_video" loop muted autoplay></video> <div id="video_cover"></div> <div id="overlay"></div> <section id="main_content"> <!-- コンテンツの内容 --> </section> </div>
5.CSSの記述
動画設置に必要なスタイルを記述して完了だ。
「video_cover」のクラスに背景画像を設定しよう。
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background_video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
#video_cover {
position: absolute;
width: 100%; height: 100%;
background: url('../img/sea_town.jpg') no-repeat;
background-size: cover;
background-position: center;
}
6.完成
動画背景のカッコイイサイトが簡単に出来上がったぜ。これを応用すれば様々な見せ方ができると思うぜ。
さいごに
今回は簡単に背景動画を実装できる方法を紹介させてもらった。
よりイメージを具体的に掴んでもらいたい時や、リッチに見せたいときはぜひ利用してほしい。
それではまた次回に。
アディオス。
