Webデザインに動画を上手く取り入れたハイセンスなWebサイト10選

Webデザイナー必見！動画をうまく使ったデザインサイト10選

車 - Lexus

Lexus
収録動画本数 5本（5 MB ~ 10 MB程度／本）

LEXUS のパフォーマンスを紹介する web サイトで、パララックス＋動画でキレイにまとまっているWebデザインです。一見すると1枚の HTML ファイルのように思いますが、14枚の HTML ファイルが一つにつながっています。ファイル容量が大きくなる動画も巧みなパララックス技術で解決できる好例といえるでしょう。Web デザインの大いなる可能性を感じることができるWebサイトですね。

メーカー - Natural Food & Beverages

Natural Food & Beverages
収録動画本数 2本（各 0.7 MB 程度）
こだわりのワインやブランデーをプロデュースするNATURAL FOOD & BEVERAGE。トップページの読み込み完了までの待機時間に動画を割り当て、ユーザーに退屈な時間を与えない様に工夫されています。各動画は軽量に設定されていて、ストレスなくページ移動することができます。

ブランド - Giorgio Armani

アルマーニ
収録動画本数 7本（0.9 MB ~ 25 MB 程度／本）
アルマーニのメガネ特集のページになります。デザイナーらしいモダンなページデザインとなっており、パララックス・デザインとも動画がうまく調和しています。20 MB を超える大容量の動画も差し込まれていますが、ページ自体のサイズは 1.4 MB と軽量でうまく編集されています。動画以外にも高いデザイン性の SVG アニメーションも参考になるサイトです。

情報 - DADAAB STORIES

DADAAB STORIES
収録動画本数 8本（2 MB ~ 5 MB 程度／本）
世界最大の難民キャンプ DADAAB の現状を発信するWebサイト。なんと一つの HTML ファイルの中に動画が 8 本も納められていて、DADAAB の様子が無意識のうちに目に入ってきます。ページサイズはさすがに 13MB と重いですが、各カテゴリーをタブ形式に納め、その中に各動画が納められている仕様です。世界中の人に訴えかけるメッセージ性の高いWebデザインとなっています。

コーポレート - PayPal

PayPal
動画ファイル　10 MB
グローバルに決済サービスを展開する PayPal の公式サイト。提供しているサービスの内容が動画からスッと伝わってきます。コーポレート系に使えそうな「シングルぺ―ジ＋動画」の参考サイトになります。

イベント - 万国學生藝術展覧祭2016

万国學生藝術展覧祭2016
動画ファイル　4.2 MB
2016 年 8月に開催予定の万国學生藝術展覧祭の公式 Webサイトになります。内容が分かり易く、カッコイイデザインのWebサイトで、WordPress をベースに制作されています。動画についてはAdvanced Responsive Video Embedderというフリーのプラグインを活用することで制御しています。

観光 - 小笠原ベストマッチ

小笠原ベストマッチ
動画ファイル　4.9 MB
小笠原村観光局が発信する小笠原観光をサポートするホームページになります。WordPress をベースに制作せれていて、動画はプラグインを使わずにうまく組み込んでいます。スマホサイズではスクリーンセーバー風に画像が切り替わり、小笠原ならではのゆっくりとした雰囲気を感じることができますね。

人文 - LENOVO YOGA

LENOVO YOGA
動画ファイル　0.9 MB
Lenovo が販売している Yoga シリーズを PR するための企画ページになります。トップページにはフラッシュでの演出、キャラクター選択画面では背景に動画、キャラに画像ロールなど、動画以外にも動きのあるWebテクノロジーがうまく調和しているデザインです。

寺 - 清水へ参る道

清水へ参る道
動画ファイル　8.6 MB
京都・清水寺のプロモーション・サイトになります。jQuery の backgroundSize.js を活用し、デバイスレスに対応し、キレイに仕上げています。動画＋文字テロップからは、ユーザーを引き込む力を感じさせられます。スマホ画面では画像がスクロールし、動画に近いナチュラル感が演出されています。

美容 - M’s factory

M’s factory

ヘアメイク事務所 M’s factory のホームページになります。冒頭のインパクトのある動画は、YouTube を利用してデザインされています。ページの読み込みが速く、ユーザーにストレスを感じさせないデザインとなっていますね。

まとめ

Webデザインにおける動画の可能性を再認識していただけましたでしょうか？トップに動画を持ってくるケースが多いですが、背景に動画を取り込むデザインもユニークですね。以下のjQueryのプラグイン・ページ等が参考になります。
http://dfcb.github.io/BigVideo.js/

デザイナーさんによっては動画ファイルの制作も担うケースがあると思いますが、時間が無い時はWordPressやjQueryの動画系プラグインを活用してかっこいいサイトをリリースしていきたいですね。