Webサイトにおける動画の活用について

月間10億――

この数値は、何の集計結果だと思いますか？これは、毎月Youtubeにアクセスしているユニークユーザーの数です。Youtubeだけでなく、動画をvimeoやニコニコ動画などのプラットフォームで閲覧したり、FacebookやTwitter、LineなどのSNSでシェアしたりすることは日常の行為になっています。また、動画特有のメッセージ性などの特徴から、企業のマーケッターにも注目されており、「動画マーケティング」があらゆる業界で展開されています。

もはや動画の存在感を無視できなくなっている中、動画をデザイン要素として活用するWebサイトは海外を中心に広まってきています。HTML5の普及で動画を取り入れることがより簡単になり、この傾向に拍車をかけています。今回のコラムでは、Webサイトにおける動画の利用について、国内外の事例とともにご紹介します。

動画の強みとは

• 表現力と情報量に優れている

  言葉ではうまく伝えられないニュアンスや雰囲気、文章だけでは伝えきれない魅力や特徴など、動画なら直感的に、的確に伝えることが可能です。商品やサービスの説明は細部まで行うと冗長になったり、省略するとわかりづらかったりしますが、動画ならより全面的かつ簡単に伝えられる利点があります。

• 訴求力と想起性に優れている

  伝えたいメッセージやコンセプト、ブランドイメージなどを、想起させるシーンや物語性のある動画を通じて、いわゆる「ストーリーテリング」という手法で、相手に強く印象付けることができます。動画は動きがある分、単なる文字や画像より視線を集めやすく、滞在時間も伸ばしやすいため、ユーザーにより集中的に訴求することができ、記憶に残りやすくなります。日常生活の中のあらゆるきっかけでその記憶が喚起されたり、生活シーンと重ね合い勝手に脳内で再生されたりすることで、商品やサービス、ブランドの再認識に繋げることができます。

Webサイトにおける動画利用のパターン

動画が持っている強みをWebサイトのデザインや構成に活用するケースが増え続けるのは、インターネット環境の高速化や利用端末の高性能化などにも関係しています。技術の壁が取り払われていくとともに、動画の利用はアイディア次第で変化の幅が無限大とも言えますが、Webサイトにおける動画の比重・役割から以下の3つのパターンに分類してみました。（※サイト名をクリックすると別ウインドウで開きます）

■メインイメージとして使用

【NEW KAIYUKAN はじまる】

こちらは、大阪の水族館「海遊館」が2013年3月にリニューアルオープンした際の特設ページです。フルスクリーンで一面に海底や氷原の世界を繰り広げ、大自然の美しさや動物の可愛さ、生命の尊しさなどを、動画ならではの迫力と繊細さのある表現で再現し、我々を別世界へ誘います。右側のメニューと下にある「ENTER」の表記が誘導機能を果たし、インパクトだけでなく、リニューアルの状況や関連知識、館内の様子など、必要な情報を揃えています。

【theQ camera】

こちらのサイトは、利用シーンを綴った動画を通じて、商品のカメラがもたらす様々な体験を見せるとともに、水中や夜の場面によって防水やフラッシュなどの機能面もさり気なくアピールしています。画面中央の再生ボタンを押すと長いバージョンの動画が閲覧でき、より商品の使用するイメージが湧いてきます。このサイトは動画以外も、フィルターの体験や比較による実物サイズの表現など、商品機能・特徴の訴え方が独特であり、分かりやすく情報を伝達する工夫が施されています。

■背景として使用

【Whiteboard】

こちらはオフィスの日常風景を動画にして流しているサイトとなります。メインイメージとしても使われていますが、スクロールしていくと、動画がサイト全体の背景になっていることが分かります。シンプルデザインとなっておりコンテンツはかなり少ないのですが、背景が動画となっているため、余白の多さによる寂しい印象が全くなく、コンテンツの内容がうまく引き立ち、より目立たせます。また、コントラストの処理も程よくされており、背景としての動画が主張しすぎず、ちょうどいい存在感と役割を発揮しています。

【POS system-Wallmob】

こちらのサイトでは機能の説明文の背後に動画を配置し、一般的にテキスト＋静止画像の商品説明を動画で拡張しているような作りになっています。再生ボタンをクリックするとフルバージョンの動画が閲覧できます。この背景のようなショートバージョン動画から内容がある程度想像付き、関心度の高いユーザーのクリックする動作を後押しする一方、そこまで詳しく見なくていいというユーザーに対しても最低限の情報の伝達ができています。

■メインコンテンツとして使用

【Project RUSHMORE】
（※音が出ますのでご注意ください）

こちらは、まるでハーレーに乗っているような感覚が味わえる映像となっています。動画の中で機能紹介の内容が時々表示され、動画が一時的に止まります。その際に「SEE MORE」をクリックすれば、更に詳細ページが表示され、読み終えたらまた元の画面に戻り、旅を続けます。動と静をうまく利用し、商品によって得られる体感をアピールしつつ、しっかりと機能性を訴求することで、商品の良さを感性と理性の両面からユーザーに印象付けます。まさに「動くカタログ」のようなサイトとなっています。

動画を利用する際の注意点

• 動画自体について

  利用する場面にもよりますが、動画の長さを考慮する必要があります。長すぎると途中飽きてしまい離脱したり、ファイルが大きくなりすぎて閲覧に支障が出たりする恐れがあります。しかし逆に短すぎると、動画の良さが発揮できない上、常に同じ内容をループしていれば、ユーザーは急がされる印象を持ってしまい、不快感を抱えてしまう可能性があります。

  また、音楽の使用にも注意が必要です。動画の魅力を最大限に発揮するために音楽が不可欠な場合もありますが、いきなり音楽が流されてびっくりしてしまったり、複数のサイトを同時に開いてどのサイトから音楽が出ているか困惑したりするかもしれません。ユーザー自ら音楽をON/OFFにできるボタンを分かりやすい場所に設置するなどの配慮が重要です。

  更に、ファイルの大きさと画質も動画の利用にあたり大切な要素となります。ファイルサイズは動画の読み込み速度に影響しており、画面が表示されるまで時間がかかり過ぎると、ユーザーが離脱するリスクが大きくなるのは容易に予想できます。そして画質は動画のイメージ、ひいてはブランドイメージに良くも悪くも影響を与えてしまいます。画質が荒い場合はドットや網模様と重ねるなどオシャレに見せる工夫が必要です。（例【HOLLY FULTON】）

• 閲覧環境への配慮

  ブラウザによって閲覧できる動画の形式が異なる場合や動画に対応しない場合、何らかの理由で動画が表示されない場合などの事態に備え、複数の動画データを用意する、代わりの静止画像を用意するといった対策を取っておいたほうが良いでしょう。

  それに、スマートフォンやタブレットで閲覧する際に、通信速度の制限で動画の表示がかなり遅くなるなどの可能性も十分配慮し、マルチデバイスに対する柔軟な対応が必要となります。（例【Exponent PR】 レスポンシブ対応。ブラウザが一定の幅になると動画が静止画に入れ替わります。）

まとめ

動画を通じて何を伝えるか、動画を見て何を感じて欲しいか、見終わった後にユーザーにどんなアクションを取って欲しいかを意識し、最適な活用方法を選ぶことは何より大切です。Webサイトの目的を明確にし、動画ならではの価値を活かしうまく融合させることで、Webサイトを通じて得られる効果を最大化することに貢献できるでしょう。

■関連コラム記事（※別ウインドウで開きます）
Webサイトにも普及が進む「フラットデザイン」
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは

■本コラムの元記事はこちら（※別ウインドウで開きます）
Webサイトにおける動画の活用について

Webやアプリに関するコラムを配信しています！

■株式会社マイクロウェーブ

株式会社マイクロウェーブは、Webを活用した事業戦略立案、マーケティング、
Webサイト構築、Webシステム開発から、スマートフォン/タブレット用アプリ
ケーションの開発等を行っています。

HP： http://www.micro-wave.net/