1.背景動画とは

近年ウェブデザインにおいて、ウェブサイトに動画を取り入れる例が増えてきている。さらに、ブラウザいっぱいのフルスクリーンで背景動画を表示させ、その上にレイヤー状にコンテンツを配置するといったデザイン手法も用いられるようになってきた。こうしたデザインは既に海外で広く浸透しているが、2014年後半頃から日本でも一般的なものになりつつある。

背景動画は、LPに商品情報や、サービスの詳細、企業ブランドなど伝えたい情報を動画イメージとして提示することで、ユーザーに分かりやすく、なおかつ印象に残る情報発信を行うのに役立つ。また、ファーストビューで言語化できない情報を伝えることも可能になるので、その分ページ全体をシンプルでスタイリッシュなデザインにすることが容易になる。さらに、背景動画を用いることで、継続的にユーザーの視点をLPに集中させる効果も期待できる。

今回は、この背景動画の基本と活用事例を紹介する。

2.背景動画活用事例12選

上記の基礎知識を踏まえて、ポイント別に背景動画の活用事例12選を紹介する

(1)ブランドイメージを伝える(ブランディング)

APPLE

background-video_1
URL:https://www.apple.com/music/

音楽ストリーミング配信サービスAppleミュージックのLPにおける背景動画活用事例。Appleは、すでにブランドイメージが確立されており、このLPもその他のページのスタイルを踏襲しているが、ミュージシャンがパフォーマンスする背景動画によって、さらにAppleブランドの先鋭的な特長を際立たせている。また、他のApple商品ページ同様にパララックスを用いることによってユーザーを飽きさせないサイトデザインを確立しているのも特徴である。

日清食品

background-video_2
https://www.nissin.com/jp/
(リンク先のページで音声が出る場合がありますので、環境に合わせてボリュームをコントロールしてご覧ください。)

日清食品のウェブサイトは、カップラーメン誕生に隠された秘話などを踏まえたインパクトのあるアニメーションでユーザーを楽しませながら、世界中で愛されるグローバル企業としての“NISSIN”ブランドの特長を際立たせている。

農業生産法人ヤマザキライス

background-video_3
URL:http://www.yamazaki-rice.com/

日本の農業は従来、個人経営が主流であったが、少子高齢化や過疎化などの問題から、法人が経営する大規模農業へとビジネスモデルを転換する必要性が説かれている。この農業生産法人ヤマザキライスのウェブサイトは、大規模農業のダイナミックさを背景動画によって伝えることで、ユーザーに旧来の農業に対するイメージとのギャップを演出し、次世代の農業のあり方をダイレクトに伝えることに成功している。

(2)利用シーンを想像させる

Tracktion

background-video_4
URL:https://www.tracktion.com/

DAW(Digital Audio Workstation)ソフトウェアを開発するTracktionのウェブサイトは、レコーディング風景、ミキシング風景など、実際のソフト利用シーンを想像させる背景動画で、ユーザーの注目を集めるLPを構築している。このサイトも、パララックスによって、下にスクロールごとに様々な活用シーンイメージが展開されるようになっている。

デジハリオンラインスクール

background-video_5
URL:http://online.dhw.co.jp/
 
Web、CG、映像、アプリの通信講座を展開するデジハリオンラインスクールのウェブサイトは、自宅で子育てしながらノートパソコンで学習するシーン、デスクトップパソコンでプロフェッショナルな専門知識を学ぶシーン、屋外でスマートフォン使って授業のコンテンツを活用するシーンなど、様々な学習スタイルを動画でユーザーに想像させることによって、オンラインスクールのメリットをアピールすることに成功している。

(3)臨場感を伝える

gilgul

background-video_6
URL:http://gilgul.co.il/eng.html

料理関連サイト「gilgul」では、画像の一部に動きを取り入れたGIFアニメーションであるシネマグラフ(Cinemagraphs)という手法を用いて背景動画を作成している。動画で料理を作るプロセスが小気味よく流れているので、香りや温かさといったウェブでは伝えられない情報イメージをも喚起させ、食欲が湧く構成になっている。また、GIFなので非常に軽い動画でユーザーが負担を感じずに閲覧することも可能になっており、モバイル端末でもPC同様の背景動画が使われている。さらに、パララックスを用いることによって、楽しげな調理風景のイメージを効果的に伝えることに成功している。

きゃりーぱみゅぱみゅオフィシャルウェブサイト

background-video_7
URL:http://kyary.asobisystem.com

日本の「かわいい」を世界に伝道するアーティスト、きゃりーぱみゅぱみゅのオフィシャルウェブサイトでは、ページにアクセスした瞬間に、きゃりーが歌って踊る映像とアニメーションが融合された背景動画が流されることによって、まるでアーティストのライブ会場にいるかのような臨場感あふれる世界を伝えることに成功している。

(4)サービスの中身を見せる

オースティンレイヴスラシル(株式会社アトラス)

background-video_8
URL:http://atlus-vanillaware.jp/osl/index.html
 
株式会社アトラスからリリースされたプレイステーション用の2DアクションRPGソフト「オースティンレイヴスラシル」のウェブサイト。背景動画で、実際のプレー画面の動画を見せることによってゲームの世界観を伝え、潜在顧客ユーザーの興味を惹くサイト構成となっている。以前から、ゲームソフトのウェブサイトには多くの動画コンテンツに含まれていたが、ユーザー全てが動画を再生していた訳ではないと考えられる。しかし、このサイトはファーストビューでコンテンツの中身を見せることで、LPにアクセスした時点でゲームの世界に連れていかれたような感覚になり、ユーザーを飽きさせないことに成功している。

(5)リクルーティングに活用する

ALVION GROUP

background-video_9
URL:http://hiraokai.wix.com/alvionrecruit01

ブラニュー株式会社

background-video_10URL:http://recruit2015.branu.jp/
 
ゲーム制作会社・出版社であるALVION GROUPと、IT系企業のブラニュー株式会社の求人用LP。実際の職場の風景を背景動画で流すことにより、言葉ではなかなか伝えにくい職場環境を伝えることに成功している。求職者にとって給与や福利厚生に関する情報以上に、実際の職場の雰囲気や人間関係といった部分は気になるところである。そうした情報を写真のような作られたイメージとしてではなく、リアルな風景として映し出すことで、求職者が応募したくなるような企業イメージをアピールすることに成功している。

慶應義塾大学

background-video_11
URL:https://www.keio.ac.jp/

早稲田大学

background-video_12
URL:http://www.waseda.jp/
 
2014年11月に早稲田大学が大胆なサイトリニューアルを実施し、背景動画を使ったLPがウェブデザイン業界内で話題を呼んだが、2016年6月に慶應義塾大学も背景動画を効果的に活用したサイトリニューアルを実施。こうした動画を用いた大学サイトのオウンドメディア化は、キャンパスでの学生生活や研究内容などをイメージとして伝え、デジタルネイティブ世代である受験生にアピールするだけでなく、大学のグローバル戦略において海外からの受験生を獲得するためにも効果的であると考えられる。

早稲田大学がスクロールすると見えてくる壁紙として背景動画を配置しているのに対し、慶応大学はファーストビューとしてよりインパクトのある形で背景動画を用いているのも面白い。このように、私学の雄が背景動画を用いたサイトを採用したため、今後他大学も追随して同様のサイトリニューアルが行われることが予想される。

3.背景動画活用において知っておきたいポイント

(1)動画データの容量と長さ

動画データが大きくなると、ユーザーの閲覧環境に負担がかかってしまうため、背景動画を含めて動画ファイルは出来るだけ軽くする必要がある。特に動画の長さの設定は重要である。基本的に自動再生・ループ再生に設定されている背景動画だが、動画の尺が短すぎると反復的でしつこく感じさせてしまう可能性もあるので、その調節には十分な検討が必要だ。
 
参考までに、上記で紹介した動画の長さと容量は以下の通りとなっている。
 

サイト サイズ 長さ 容量
APPLE 1980 x 1080 17秒 4MB
ヤマザキライス 1280 × 738 1分36秒 71.7MB
デジハリオンラインスクール 1980 x 1080 1分7秒 30.3MB
ALVION GROUP 1980 x 1080 30秒 21.7MB
ブラニュー 1280 × 720 1分12秒 10.8MB

また、YouTubeやVimeoといった動画共有サービスを動画枠や再生ボタン等を消すなどといったカスタマイズを行った上で利用するケースもある。更に、モバイル端末で動画容量を軽くする、スマホやタブレットのブラウザフレームサイズに合わせる、タップでの動画再生に切り替えるといったモバイル環境に最適化させることで、背景動画をPCと使い分けて採用しているサイトも増えてきている。
 
実際に、上記で紹介したこれらのサイトでもYouTubeが利用されている。
日清食品
きゃりーぱみゅぱみゅオフィシャルウェブサイト
オースティンレイヴスラシル
慶應義塾大学
早稲田大学

(2)音声

背景動画の音声が再生される例もあるが、オフィスや屋外での閲覧環境を意識して、基本的に背景動画は音声がないもの、もしくはデフォルトでミュートされた動画が利用されるケースが多いので、音がなくても分かるような作りが求められる。

(3)レイアウト

背景動画はあくまで背景に流すもので、動画がメインでないということを常に意識してLPを構築する必要がある。あくまでも、従来の静止画像を扱うのと同様に、動画をコンテンツの一つとして活用していくという視点で捉えていくことが重要である。

また、パララックス(視差効果:複数の画像背景をレイヤー状に重ねてスクロール速度を変え、擬似的に奥行きを感じさせたり、スクロールに合わせて様々な視覚要素が加わることで動きを作り出したりする効果のこと)などのスクロールエフェクトを用いることで、シンプルな操作だけでユーザーを楽しませながら見せたい情報を提示していくといった工夫も重要になってくる。

動画を用いたリッチなLPは、関心や目的を持ってサイトを訪れた潜在顧客や見込顧客などにも商品やサービスの詳細や雰囲気をより効果的に伝えることが可能だ。最終的にはコンバージョン獲得にも貢献しうるので、こうしたポイントを踏まえつつ、ぜひ背景動画にチャレンジしてみてはいかがだろうか。

Pocket