Webデザイントレンド定点観測 ウィンドウいっぱいの背景動画を活用したデザイン
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
「Webデザイントレンド定点観測」の第5回は、「ウィンドウいっぱいの背景動画を活用したデザイン」というテーマでお届けしていきましょう。
Webサイト上でユーザーに「よりリッチな経験」を届けることが可能な環境が整うにつれ、ウィンドウいっぱいの動画を背景として利用しているサイトを多く見かけるようになってきました。
自前のサーバに動画を置くだけではなく、YouTubeやVimeo等の動画共有サービスを使っているケースも多いようです。その場合はカスタマイズして、サービスの枠や再生ボタン等を消しています。
いずれの場合でも、あたかも静止画像を使うがごとく、動画をウィンドウサイズ全面に広げて使っているのが特徴です。
ページが読み込まれると背景動画は自動再生されます。特にオフィスからの閲覧で嫌われがちな音声は、付いていない場合がほとんどです。この点からも、動画をメインのコンテンツというよりは「背景」として利用している印象が強まります。
PCからサイトにアクセスする場合には、ある程度速い回線を確保できていることを前提に、背景動画を利用しているものと考えられます。モバイル端末から閲覧した場合には代替の静止画像が表示されるケースがほとんどで、スマートフォン等の回線を無駄に利用しないよう配慮されていることがうかがえます。
また、PC環境でも、短い動画をループして再生したり、動画共有サービスでのストリーミングを利用したりすることによって、動画の重さの軽減が図られています。
では、収集した10個のサイトをご紹介していきます。
UX Design Firm | Forty
アリゾナ州にあるUXデザインの会社のサイトです。
おそらく会社のスタッフであろう人々が、会議や仕事をしている様子の動画が背景として利用され、ループ再生されています。動画には薄く色がかぶっており、上に乗せられた白抜き文字とのコントラストが確保されるように考慮されています。
この背景動画は<video>タグを使って実装されていて、mp4形式、ogv形式、webm形式と、各ブラウザ向けに3種類の形式のデータが用意されています。また、モバイル端末での閲覧時には、.png画像に差し替えるように設計されています。
「Watch our video」をクリックすると別のYouTube動画（音声付きの会社紹介ビデオ）の再生が始まり、会社の理念やスタッフの雰囲気をリアルに伝えてくれます。
CAST83 | Still & Moving Pictures
メリーランド州ボルチモアにある、スチルとムービーカメラマンの2人組ユニットのサイトです。
こちらのサイトでは、ページを読み込んだ直後に、iframe内に読み込まれたYouTubeの無音動画が自動再生されます。それが終わると、静止画像が数秒ごとに入れ替わるスライドショーに移り変わります。
これらの動画と静止画がそのまま彼らの作品集になっているという点で、とても効果的な実装です。
CAST83 | Still & Moving Pictures
Electrik Company – Software Development & Design – Austin, TX
テキサス州オースティンにあるUXデザインの会社のサイト。
<video>タグを使い、Vimeoからmp4形式の動画を読み込んで、ループ再生しています。モノクロの画像が、会社のロゴマークのビビッドな黄色を際立たせます。また、動画に薄い斜めストライプが入っていることで、圧縮した動画の荒れた感じを目立たなくさせています。
Electrik Company – Software Development & Design – Austin, TX
Hyperakt | A social impact design studio based in New York City
ニューヨーク市ブルックリンにある、ブランディング／デザイン会社のサイト。
<iframe>タグで、Vimeoの動画を読み込んでいます。会社のロゴマークが縫い取られた赤い旗がたなびく動画が、鮮烈な印象を残します。
Hyperakt | A social impact design studio based in New York City
User Experience Design – Product Design | Digital
カリフォルニア州サンディエゴにあるデザイン事務所のサイトです。
この会社のサイトでも、社内の仕事風景と思われる動画が、少しクラシックな色調で再生されていきます。他のサイトと違うところは、トップページ右上の「MANIFESTO」というボタンをクリックすると、男性の声で話し始めることです。動画と音声を同時に見ていると、どこかの会場でプレゼンテーションを見ているような気分になってきます。
今日ご紹介したサイトの中で唯一、WISTIA http://wistia.com/ という動画ホスティングサービスを利用して、動画を読み込んでいました。
User Experience Design – Product Design | Digital Telepathy
HughesLeahyKarlovic | A Creative Agency
ミズーリ州セントルイスにあるクリエイティブエージェンシーのサイト。
<video>タグを利用し、mp4形式かwebm形式の動画を読み込んでいます。笑顔の人々のクローズアップが次々と切り替わっていき、背景というよりは人物紹介のような、非常に強い印象を与えます。
また、右上のメニューボタンをクリックすると、各カテゴリへのナビゲーションが画面全体に広がります。その各カテゴリにマウスカーソルを重ねたときにも、動画が再生されるようになっており、個性的な印象を与えます。
HughesLeahyKarlovic | A Creative Agency
The Charles NYC – Full service creative and digital agency
ニューヨークのクリエイティブエージェンシーのサイト。
PCからサイトにアクセスすると、白い背景にインクが広がる動画が自動再生され、インクが広がると白いロゴや文字が見えてくる面白い作りになっています。
<video>タグを利用し、各種ブラウザ向けに、mp4形式、ogv形式、webm形式の動画を読み込んでいます。
このサイトがちょっと変わっているのは、スマートフォンから閲覧した場合。他のサイトは、PC向け動画の1シーンを切り取った静止画を表示させるケースが多い中、このサイトでは、まったくイメージの異なるgifアニメ（道を歩いている脚のアニメ）が表示されるのです。
The Charles NYC – Full service creative and digital agency
PRPL | Purple, Rock, Scissors: A Digital Creative Agency in Orlando
フロリダ州オーランドにある、クリエイティブエージェンシーのサイト。
ここまで挙げてきたいくつかのパターンとほぼかぶっており、<video>タグを利用して、mp4形式とwebm形式の、オフィスの風景と思われる動画を読み込んでいます。
PRPL | Purple, Rock, Scissors: A Digital Creative Agency in Orlando
Vancouver Cosmetic and Laser Skin Care Centre
ここまで見てきたのは、ほとんど「アメリカのクリエイティブエージェンシー」的なサイトばかりでしたが、こちらはバンクーバー（カナダ）のスキンケアやレーザー治療の治療院のサイトです。
院内や施術の様子などを動画で見せるため、潜在顧客にはとても良いアピールになり得るでしょう。
<video>タグでVimeoからmp4形式の動画を読み込んでおり、ループ再生しています。
Vancouver Cosmetic and Laser Skin Care Centre
Ditto Residential | Fine Residential Developments
最後に、比較のため少し違うパターンのサイトをご紹介しておきましょう。ワシントンDCの不動産開発会社のサイトです。
このサイトで使われているのは、背景としての動画ではありません。三角形の再生ボタンをクリックすると音声付きのVimeo動画が再生され、男性が淡々とした調子で語り始めます。これが、トップページにおけるメインのコンテンツです。
背景として動画を利用する場合、文章では表現しにくい「空気感」「雰囲気」のようなものを伝える感覚が強くなり、途中でページを遷移したりスクロールしたりしてもあまり気になりません。しかし、音声付き動画を明確に再生させるのは、「コンテンツ」としての動画の役割が強くなってくることが、比較して感じられるのではないでしょうか。
なお、スマートフォンで閲覧しても、この動画の再生は可能です。
Ditto Residential | Fine Residential Developments
動画は、テキストや写真だけでは伝わらない「場の空気感」や「非言語情報」を伝えるために、非常に有益な素材です。そのため、これまでも「クリックして再生させる音声付き動画」がWebサイトに掲載されることは、非常に多く見られました。
それがさらに洗練され、無音の動画を背景として、さながら「環境映像」のように流しておく手法が増えてきていますので、チェックしてみてはいかがでしょうか。
（了）