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



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

プロモーション・サイトには欠かせない存在となった「動画」。モニター越しに発信する動画情報は、ユーザーに分かり易く、且つ印象的に情報を発信できるとして、世界中の Webデザイナーが採用しています。現在は、編集度の高い HTML 5 形式の動画がWebデザインでは主流となってきています。

そこで今回は、Webデザインのトレンドともいえる「動画」にフォーカスし、参考になるWebサイトをご紹介していきます。各サイトで様々な工夫がされていて、一言で「動画」といっても奥が深いことに気付くでしょう。

image

目次
  1. Webデザイナー必見!動画をうまく使ったデザインサイト10選
  2. 車 - Lexus
  3. メーカー - Natural Food & Beverages
  4. ブランド - Giorgio Armani
  5. 情報 - DADAAB STORIES
  6. コーポレート - PayPal
  7. イベント - 万国學生藝術展覧祭2016
  8. 観光 - 小笠原ベストマッチ
  9. 人文 - LENOVO YOGA
  10. 寺 - 清水へ参る道
  11. 美容 - M’s factory
  12. まとめ

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

車 - Lexus

lexusLexus
収録動画本数 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

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

コーポレート - PayPal

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

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

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

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

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

人文 - LENOVO YOGA

yogaLENOVO 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の動画系プラグインを活用してかっこいいサイトをリリースしていきたいですね。

image

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp