動画は、静止画以上に見ている人の創造力を掻き立てます。普段なら見逃してしまいがちでも、動きがあることで、あたかもそこにいるかのような感覚になり、つい目が留まってしまいます。

最近は、トップページのメインエリアに据え、来訪したユーザーに最初に見せる手法「サイレントスクイザー」を取り入れたホームページが増えてきました。最初に動画を見せることで、心理的な障壁を低くして、ホームページやサービスに親しみを持ってもらうことができます。

そこで今回は、動画(サイレントスクイザー)を上手に取り入れたホームページをご紹介します。
一般的に、急に音声が流れるとびっくりしてしまうので"無声動画"として見せる場合がほとんどですが、海外を中心に音声が流れるサイトもあります。閲覧の際は、ご注意ください。

来訪者の目を"動き"で釘付けに！注目のホームページまとめ

1. Questant (クエスタント)

questant.png
https://questant.jp/　【音声が流れます】

ネットリサーチ業界で国内実績No.1のマクロミル社のセルフアンケートツールです。
Questant (クエスタント)の背景動画では、スーツを着た男女がスマートフォンで操作している様子や数字を集計している様子が映し出されており、簡単な操作で、簡単に集計できるということが、この後に続く説明文を読まなくても想像することができます。

2. TimeTicket (タイムチケット)

timeticket.png
https://www.timeticket.jp/

TimeTicket (タイムチケット)は、他人に提供できる時間を持つユーザーが、「ホスト」として自分のチケットを登録し、自らが設定した対価でサービスを提供することができるサービスです。このホームページの背景動画は、ホームページのカラーにマッチした緑色に加工されています。サービスを実際に使っているシーンが映し出されており、こんな風にチケットを購入することができるんだ、というのがよくわかります。

3. Coulee Creative

coulee.png
http://couleecreative.com/　【音声が流れます】

アメリカ・ウィスコンシン州のクリエイティブカンパニー「Coulee Creative」では、タイムラプス動画を使った背景動画を活用しています。タイムラプス動画とは、動画を通常の再生速度以上に早回しで再生する動画のことで、スピード感やエネルギーに満ちた活気ある様子を表現できる手法のことです。たくさんのスタッフが集まりにぎわっている職場をイメージさせます。

4. GARDEN

garden.png
http://web-garden.jp/cafe/

京都府西舞鶴駅前にあるカフェ「GARDEN」のホームページでは、ちょっと変わった無声動画を使っています。無声動画は、背景動画として前面に配置するのではなく、ふにゃっとした可愛らしい吹き出しの中で動き出します。一枚一枚丁寧に焼いたピザがとても美味しそうです。

5. The New A-Class.

aclass.png
http://www.aclass-next-stage-with-you.jp/#!/top

メルセデス・ベンツの「A-Class」という車種の紹介ページです。このページでは、ページの3分の2程度の領域を使って無声動画が流れます。まるで映画館にいるかのような臨場感で、A-Classに乗っている様子が映し出されます。

6. @rms (アームズ)

arms.png
https://www.cyberlinks-arms.com/

食品スーパーのクラウド型業務システム「@rms (アームズ)」のホームページでは、実際にサービスを利用しているビジネスシーンが映し出されています。このようなビジネス向けサービスは取扱いになれるまで時間がかかりそうなイメージもありますが、この動画を見るとサポート体制もしっかりしていそうで安心してサービスを使うことができそうですね。「食品スーパーのパートナー」というキャッチコピーにも合っています。

7. HEINEKEN GO PLACES

goplaces.png
http://goplaces.theheinekencompany.com/　【音声が流れます】

オランダのビール製造会社ハイネケンのキャンペーンサイトです。居住地と誕生日を入力することで、キャンペーンページへの扉が開き、ダンスパーティーにいるかのようなポップな動画が流れてきます。

8. Google Presents: The Hidden Worlds of the National Parks

nationalparks.png
http://artsandculture.withgoogle.com/nationalparks　【音声が流れます】

Google Arts & Cultureによるアメリカ国立公園での冒険を疑似体験できるホームページです。トップページでも動画が流れますが、「Adventure (冒険)」が始まると、360度の視界で冒険が始まり、「Ambisonic Audio」と呼ばれる、反響する音声が聞こえてくるので、VRデバイスがなくても仮想現実を体験できます。

9. RE:CREATION

recreation.png
http://re-creation.co.jp/

東京・渋谷の制作会社リ・クリエーションのコーポレートサイトでは、渋谷のスクランブル交差点のタイムラプス動画をトップに持ってきます。すさまじい勢いで進化する街「渋谷」の中で、最新の技術にも対応できそうな信頼感を抱かせます。

10. Coverr (カバー)

coverr.png
http://coverr.co/

Coverr (カバー)は、サイレントスクイザーに活用できる動画を無料で配布しているホームページです。もちろん、Coverrのホームページにもサイレントスクイザーが活用されています。無料で配布されている動画は100種類以上。ページ下部には、JavaScriptやCSSのサンプルコードも掲載されているので、コピー＆ペーストで誰でも無声動画を導入することができます。