お問合せはこちら

コラム

アーカイブ

2017.01.09

背景動画を使ったかっこいいWEBサイト事例集

近年、背景にイメージ動画を使ったWEBサイトが多く見られます。モバイル端末の普及、インターネットの高速化などにより、サイトに大きな動画を表示することができるようになり、集客や販売の効果を上げています。ここでは、WEBサイトに背景動画を設置するメリットや、活用事例などを紹介します。



目次

1 WEBサイトの背景動画とは

2 埋め込み動画と背景動画の違い

 2.1 外部サイト埋め込み動画

 2.2 背景動画

3 背景動画を設置するメリット

4 イメージ戦略としての動画

5 商品を魅力的に見せるための動画

6 海外の背景動画事例

7 国内の背景動画事例

8 モバイル端末の対応

9 まとめ




1 WEBサイトの背景動画とは

数年前から、背景動画を利用したWEBサイトが増えてきました。ブラウザでWEBサイトを開くと、画面いっぱいに動画が再生され、動画の上に社名やサービス名などのロゴ、コンテンツのボタンなどが表示されるようなサイトです。多くの企業のWEBサイトに、背景動画が取り入れられています。

流行の原因はいくつか考えられます。HTML5というWEBサイト記述用の言語が普及し、音声や動画の表示が容易になったことも、その理由のひとつです。また、インターネットの高速化も、WEB動画の普及に貢献しています。現代は、自宅のパソコンのみならず、スマートフォンでも、光速通信で快適に動画を閲覧することができます。

近年、企業によっては、サービスや商品ごとに複数のWEBサイトを持つようになりました。それぞれの商品のイメージに合わせたサイト制作を制作することにより、よりターゲットを絞った販売戦略を立てることができます。




2 埋め込み動画と背景動画の違い

一般的に見かけられるコンピュータグラフィックスの種類は、大きく二つに分類されます。それは「2DCG」と「3DCG」です。

WEBサイトに表示される動画には、いくつかの種類があります。YouTubeなどの外部サイトの動画を埋め込むケースや、自社のサーバー内にアップロードした動画を読み込むケースなどが考えられます。




2.1 外部サイト埋め込み動画

YouTubeやVimeoなどの、動画投稿サイトに、動画をアップロードし、自社のWEBサイトのページに埋め込むことができます。ページの一部に小画面を作り、再生ボタンを押すことによって外部動画が読み込まれ、再生されるケースがほとんどです。自社サーバーに負荷がかからないために、読み込みが重くなりにくいというメリットがあります。

まれに、YouTubeなどの外部動画を、サイトに全画面表示し、ページの読み込みと同時に再生を始めることによって、背景動画のように見せている場合もあります。




2.2 背景動画

一般的には、自社のWEBサイトが置かれているサーバーに、背景用の動画データ置き、そこから読み込んだものを背景動画として利用することが多いです。WEBサイトを訪問したユーザーが、動画を再生するためにボタンをクリックしたりする必要がありません。

あまり高画質で時間の長い動画を背景にしてしまうと、読み込みに時間がかかり、サイト訪問者の利便性が悪くなってしまうので、注意が必要です。




3 背景動画を設置するメリット

背景動画の一番のメリットは、WEBサイト訪問者の感覚に一瞬で訴えることができるところです。たまたまWEBサイトをクリックし、内容を読まないでそのままブラウザを閉じてしまうユーザーでも、動画なら視界に入ります。そこで商品やサービスの魅力を伝えることができれば、サイトにとどまる率も高くなる可能性があります。

また、SEO的に見ても、トップページに動画が掲載されているWEBサイトは、上位に表示される傾向があります。Google検索の表示アルゴリズムは定期的に変更されますが、2016年現在の時点では、動画のタグを読み取った場合、動画のないサイトよりも検索結果の上位に表示されるようです。

電通の調査によると、動画を見ていないユーザーよりも、動画を見たユーザーの方が、二倍に近い購買につながるそうです。

参照元:YouTube投稿動画の広告効果はいかに--電通とグーグルが共同調査




4 イメージ戦略としての動画

企業イメージアップなどの、ブランディングのための動画は、ユーザーに目的意識がない場合、視聴してもらえることはありません。例えば、ある企業のことを知りたいと思い、WEBサイトを訪問したとしても、わざわざイメージ動画を見てもらえるとは限りません。そのようなユーザーに対しては、背景動画は非常に協力なツールとなります。サイトを見ている間、自動的にイメージビデオを視聴している状態にあるともいえます。

工房や、厨房などで、製品を制作している最中の映像を、ドキュメンタリーのように使用すれば、作り手の顔が見えるということによって、信頼感を得られます。




5 商品を魅力的に見せるための動画

商品やサービスのためのランディングページの場合、その商品そのものの動画、利用している動画などを背景動画にすれば、WEBサイトを閲覧している間に、商品の魅力を感じてもらうことができます。製品の認知度を高め、理解を深める効果があります。

商品を紹介する場合は、画質にこだわりすぎると表示速度が遅なり、レスポンスに影響します。背景動画では商品のイメージを伝えるだけにとどめ、詳細な仕様を伝えたい場合には、別ページで埋め込み動画などを利用した方が良いでしょう。




6 海外の背景動画事例

Lexus
レクサスの海外サイトです。背景動画に加えて、画面をスクロールするとモーションもします。

the Q
デジタルカメラのWEBサイトです。ターゲットの若い女性に絞った動画となっています。

Optimo chicago
帽子店のオンラインショップです。一見静止画の背景のように見えますが、一定の間隔で、背景を車が通り抜けます。

YANAGIU KAMIKO
海外向けの、手すき和紙工房のサイトです。職人のイメージが高級感を演出しています。

SONIA by Sonia Rykiel
ハイセンスなファッションブランドのWEBサイトです。




7 国内の背景動画事例

オーディオテクニカ ATH-MSR7
ヘッドホンの商品サイトです。高級感があり、商品全体の形状も伝わってきます。

トロピカーナ
フルーツジュース、トロピカーナの商品紹介サイトです。果樹園のフルーツを撮影した短い動画が背景になっています。

丸京染色株式会社
短い背景動画の中で、伝統と技術を感じることができます。

logbar
ウエアラブル翻訳デバイスの紹介サイトです。開発時の動画が背景になっています。

GUCCIオフィシャルサイト
ファッションブランドのWEBサイトです。アダムとイブを連想させる、短い背景動画を用いています。




8 モバイル端末の対応

上記で紹介したような、シングルカラムで動画が画面いっぱいに表示されるようなWEBサイトは、スマートフォンの普及とともに増えてきました。数年前まで、多くのWEBサイトでは、トップページに様々な情報が盛り込まれ、サイト内コンテンツへのリンク動線が確保されていました。しかし、スマートフォンが普及しだすとともに、トップページはすっきりとした、シンプルな静止画や動画で、スクロールをして情報を見せるWEBサイトが多くなってきています。

また、インターネット対応のテレビなどでWEBサイトを閲覧する場合も、従来のような情報の多いトップページよりは、スクロールするタイプのWEBサイトの方が便利です。インターネット対応テレビには、マウスが接続されていない場合が多いので、ボタンでスクロールできれば、ユーザビリティーが高いと言えます。

このように、WEBサイトを閲覧する環境がマルチデバイス化されたことによって、それぞれの端末に背景動画を対応させる必要が出てきます。スマートフォンなどのモバイル端末の場合には、軽い動画であればそのまま背景動画として設定することもできます。少し長さのある動画や、高画質のためにデータ量を多く使用する場合、モバイル端末のみの設定を変える必要があります。モバイルのみ静止画表示、モバイルのみボタンで背景動画を表示する、などの選択肢があります。




9 まとめ

インターネットの高速化と、動画制作技術の進んだ現代において、背景動画を利用したWEBサイトの制作は、押さえておきたい技術のひとつです。数秒しかないごく短い動画でも、ブランディングに高い効果が見込まれます。WEBサイトの目的を明確にし、ターゲットに狙いを定めたサイトづくりを意識しましょう。

2017.01.06

ホームページ動画事例集(国内・海外)

ほとんどの企業がウェブサイトを持つ現代、ホームページに掲載された動画には高い効果が見込まれます。多くの人々が、動画を再生できる端末を持っているので、ソーシャルネットワークで話題に上るためにも、動画は効果的です。ここでは、ホームページ動画とその活用事例についてご紹介します。


目次

1 ホームページの目的

 1.1 会社案内としてのウェブサイト

 1.2 ショップとしてのウェブサイト

 1.3 窓口としてのウェブサイト

 1.4 ランディングページ

2 動画の種類

 2.1 ブラウザ埋め込み型

 2.2 外部サイト埋込み型

 2.3 フラッシュ動画

3 リッチコンテンツとは

4 ホームページに動画を設置するメリット

5 動画の持つ効果

6 海外の動画事例

7 国内の動画事例

8 まとめ


1 ホームページの目的

ホームページとは、企業などがインターネット上に持つ、情報サイト、ウェブサイトのことを言います。本来、ホームページとは、ウェブサイトにアクセスしたときに、一番最初に表示されるページの名称ですが、ウェブサイト全体のことを「ホームページ」と呼ぶ人もいます。

現代ではほとんどの企業が自社のウェブサイト(ホームページ)を持っています。ウェブサイトを制作、運営するにあたって、「なんのためにそのサイトを設置するのか」を明確にする必要があります。目的によっては、必ずしもリッチなコンテツにする必要はありませんし、むしろ逆効果になる場合もあります。


1.1 会社案内としてのウェブサイト

企業を紹介する情報が記載されたウェブサイトです。業務内容や企業理念などが記載されます。企業の印象を左右するウェブサイトなので、企業のイメージにあったデザイン、サイト構成にする必要があります。


1.2 ショップとしてのウェブサイト

自社の商品やサービスを販売するためのウェブサイトです。企業情報などは前面に出す必要はなく、商品やサービスのイメージ、メインターゲットの好みを重視します。ショッピングカートや決算システムを利用するため、過剰にリッチなコンテンツにすると、サイトそのものの利便性が損なわれることになります。


1.3 窓口としてのウェブサイト

資料請求や問い合わせなどのためのウェブサイトです。メールフォームを設置しておけば、電話対応を減らす効果もあります。シンプルな構成で、利用者が分かりやすいインターフェイスにする必要があります。


1.4 ランディングページ

ランディングページとは、インターネット広告をクリックしたときに表示されるウェブサイトのことです。企業の全ての情報を入れる必要はなく、一つのサービスや一つの商品の情報を提示する、チラシのようなサイト構成がなされている場合が多いです。

コクヨ
すっきりとしたサイト構成で、動画は小さく埋め込まれるのみとなっています。

ノエビア
化粧品を販売するショッピングサイトですが、使い方などを動画で紹介しています。


2 ウェブ動画の種類

ウェブサイトに掲載される動画は、大きくいくつかの種類に分けられます。ウェブサイトに埋め込まれた動画は、便利で印象も良いですが、YouTubeなどの外部サイトの動画を埋め込んだ場合は、その動画サイトから、自社サイトへの流入も確保することができます。


2.1 ブラウザ埋め込み型

ウェブサイトを記述する言語のHTMLを用いて、動画を直接ウェブサイトに埋め込みます。ウェブサイトを訪問したユーザーは、特別な操作をする必要がなく、自動的に動画が表示されます。ブラウザでの読み込みを必要とするので、長時間の動画や高画質の動画の場合、ページの表示速度が遅くなる問題があるために、適切なサイズと長さで制作する必要があります。


2.2 外部サイト埋込み型

YouTubeやニコニコ動画などの、外部の動画投稿サイトに動画をアップロードし、それを埋め込む方式です。動画を見るためには、ユーザーが再生ボタンを押す必要がありますが、自社サーバーに負担がかからないので、再生速度なども比較的早いですし、長時間の動画を掲載することも容易です。


2.3 フラッシュ動画

アドビシステムズの提供する動画システムで、マウスクリックで変化するなどのリアクションを指定することができますが、iPhoneなど一部のスマートフォンで表示できない問題があります。


3 リッチコンテンツとは

静止画と文字のみの情報にとどまらず、動画、音声、アニメーション、コンピュータグラフィックスなどを取り入れたコンテンツを、リッチコンテンツと呼びます。目的に応じで活用することによって、高い集客効果、イメージアップ戦略を図ることが可能です。

ウェブサイトで音楽を流すことについては、賛否両論があります。音楽は人の感情を揺さぶることができるので、うまくいけば非常に高い効果が得られます。しかし、ウェブサイトを閲覧する状況は人それぞれです。学校や職場でなにげなく開いたウェブサイトから、突然音楽が再生されれれば、人はすぐにそのウェブサイトをとじてしまいます。そのため、表示と同時に音楽が再生されるのではなく、「音楽が再生されます」と警告表示され、数秒経ってから動画の始まるサイト、音声ボタンを押すまで音声が再生されないサイトなど、様々な工夫がなされています。


4 動画の持つ効果

動画は、文字や静止画のみの情報よりも人の目を惹きつけ、かつ記憶に残るという効果があります。文字情報が能動的な情報だとすれば、動画は能動的にも、働きかけることが可能です。ウェブサイトを訪問したユーザーに、無意識のうちに企業イメージや、商品の品質などを植え付けることができます。

現代では、個人のパソコンの普及、スマートフォンの普及により、ウェブサイトの動画を視聴することが容易になりました。掲載された動画がユニークであれば、視聴したユーザーがSNSなどに投稿し、口コミで訪問客が増えるというメリットもあります。

現在、小学生の将来なりたい職業の上位には、「YouTuber(ユーチューバー)」がランキングされています。火付け役の、ヒカキン、はじめしゃちょーなどの投稿動画は、そのほとんどが「商品を紹介する動画」「ゲームなどのサービスを紹介する動画」です。人気のYouTuberに紹介された商品は、爆発的に売れ、品切れになる場合もあります。「動画で紹介された商品を購入する」という行為が、今の子供たちには当たり前のことになっているのです。

売り切れ続出のスタバプリンは美味いのか!?
人気YouTuberによる商品紹介動画です。子供たちに絶大な人気があります。


5 ホームページに動画を設置するメリット

問い合わせのためのウェブサイトなど、一部にはリッチにする必要のないウェブサイトもあります。しかし、商品やサービスを販売するためには、ウェブサイトに動画を掲載することによって、高い効果が見込まれます。

商品の販売サイトそのものに動画を埋め込むことによって、利便性が損なわれることが心配な場合は、商品を紹介するためのランディングページを別個に制作するのも一つの手です。動画を用いたランディングページで、商品への期待値と理解を高め、販売サイトへの動線をつなげます。


6 海外の動画事例

ARMANI.com
ファッションブランド、アルマーニのウェブサイトです。モノクロの動画で、ハイセンスなイメージを感じさせます。

UCC
UCCの海外サイトです。日本のUCCのサイトとは印象の違う、コーヒーにまつわる動画が再生されるサイトです。

Discover bagigia
バッグのオンラインショップです。スクロールすると、バッグがくるくるとモーションします。

sweetleaf
商品イメージに合わせた、楽しいアニメーション動画が用いられたウェブサイトです。

Melanie.F
フランスの靴メーカーのショップサイトです。ムービーを読み込むときのカウントダウン表示さえもおしゃれにデザインされています。


7 海外の動画事例

日清食品
モノクロの斬新な動画アニメーションが埋め込まれたウェブサイトです。クリックすると、YouTubeの動画が再生されます。

MUJI TO RELAX
無印良品のウェブサイトには、YouTubeの埋め込み動画が利用されています。

MOSUDO!
ドーナツやハンバーガーの動画を画面いっぱいに表示し、商品の魅力を伝えているウェブサイトです。

iRobot
自動掃除機ルンバの紹介サイトです。クリックするとモーションしたり、フローティングします。

ル・クルーゼ
YouTubeの埋め込み動画が用いられています。また、サイト全体もスクロールすることによりモーションします。


8 まとめ

ホームページ動画を活用することによって、企業のイメージアップを図ったり、商品についてのより詳しい情報を、ユーザーに知ってもらうことが可能です。どのような目的でウェブサイトを作るのかを明確にし、その目的に沿った動画の制作を依頼することで、より高い効果を得ることができます。

これからの先の時代には、「商品の紹介動画で育ってきた子供たち」がユーザとなります。ウェブサイトの目的や方向性が決まれば、サイトの利便性を損なわずにホームページ動画を導入することができます。

ページの先頭へ