話題

話題

ループビデオ背景を使用した30以上のウェブサイトのご紹介

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、30+ Websites Featuring Looping Video Backgrounds
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

304 views

読了時間 : 約6分17秒

ループビデオ背景は、webデザインで急速に成長している流行のひとつです。デザイナーが映像コンテンツをHTML5で作成する技術を獲得して以来、Webサイトのヘッダーや背景が、静止画像から動画へと移行してきました。

 

webサイト上の動画は、通常、特定のフレームサイズに制限されていますが、ユーザーのモニター全体を使用してみるのはいかがでしょう。かつて、Flashだけが実行することのできる機能でしたが、最近ではJavascriptとHTML5により、ビデオ映像をブラウザウィンドウいっぱいに拡大することができるになりました。

 

本日のウェブデザイン一覧では、大きなループビデオ背景を備えた、30以上の優れたウェブサイトの例をご紹介します。どうやってループビデオが視覚的に印象的な導入を果たしているのか、あるいは、どのようにしてクールなビデオ背景を使用して、巧妙な動きで人の目を惹きつけているのか、その方法をご覧ください。

 

The Build Film

まずはThe Build Filmのwebサイトです。この会社のwebサイトは、カスタムバイク製造の世界を、双方向の形で紹介することに焦点を当てて作成されています。webイトでは、動画を見ている人に、モーターサイクルを紹介するようなショートフィルムシリーズを提供しています。ユーザーのモニターすべてを使用しているこちらの例を、ぜひご覧ください。

 

iuqo

フルスクリーンビデオは、こちらの例のように優雅な方法でご利用いただくことも可能です。こちらのwebサイトでは、会社のロゴ、名前、モットーが添えられた、雲の上の映像を使用しています。感銘を受けるであろうこちらの例を、ぜひご覧ください。

 

El Monstruo

こちらのwebサイトは、児童教育の意識向上のために作成されました。このwebサイトは、ビデオであるとともに、参加可能なIGG DIRECTおよびUNICEFプロジェクになっています。

 

The Y.CO

こちらのwebサイトでは、サイトを訪れた際に最初に流れる一連のショートフィルムをとおして、会社の情熱やヨット遊びについての情報を与えてくれます。これは、あなたのビジネスを推進するとても素晴らしい方法といえます。素晴らしいインスピレーションを受ける可能性のある一見する価値がある例といえます。

 

Aaron Ohlmann

こちらのwebサイトは映画製作者のアーロン・オールマンが作成しているもので、とてもパワフルで意味深いビデオを提供しています。こちらのwebサイトでは、フルスクリーンビデオをとおして、彼の仕事ぶりを見ることができます。ぜひチェックしてみてください。

 

Barrel 2012 Recap

白黒フィルムを使用した例をご覧になりたい場合は、こちらをご覧ください。Barrel Recapは、彼らの会社が2012年から現在まで続いていることを伝えてるために、短い白黒ビデオを使用しています。

 

Various Ways

Various Waysは、訪れた人の注意を惹きつけるために、フルスクリーンビデオを使用したwebデザインのひとつの良い例です。彼らはヘッダーに、様々なサイズの活字を添えています。そのままスクロールして、会社の詳細と彼らが提供しているものを見つけ、彼らの素敵なwebサイトをチェックしてみてください。そして、インスピレーションを得られるかどうか確かめてみてください。訪問者に、コンテンツを提示するユニークな方法になっていますので、詳細に見る価値があります。

 

Oh Land Music

こちらのwebサイトでは、音楽とミュージックビデオの展示をとおして、ミュージックダイアリーを紹介することに焦点をあてています。webサイトを訪れて最初に目に映るのは、ページに紹介されている作品の配列です。さらに見続けるために、スクロールを続けましょう。

 

Black Negative

こちらは、フルスクリーンビデオであるうえに、モットーが白文字のキーワードで記載されるポートフォリオ型のwebサイトです。サイト訪問者の注意を惹く優雅な方法となっています。webサイトをご覧のうえ、インスピレーションを獲得できるか確認してみてください。

 

Piero Milano

Piero Milanoのwebサイトは、優雅な方法でもって彼らのビジネスを紹介するために、白黒ショートフィルムを使用しています。ぜひご覧ください。

 

Gin Lane

白い背景から始まるGin Laneのwebサイトは、女性が左から右へと歩くと「魔法をかけて」のフレーズが表示されます。全体的にすっきりとしたミニマムなデザインで、歩いている女性が完璧に調和しており、webサイトを効果的に魅せています。

 

Films by Brett Johnson

こちらは、フルスクリーン映像やショートフィルムを使用する将来の企画のインスピレーションの源になる可能性がある、追従する価値のある優れたwebサイトのひとつです。ブレット・ジョンソンは素晴らしい仕事をしており、webサイトをとおして、優雅ともいえる方法でそれらを展示しています。これこそまさに、将来見習うべき価値のあるものです。

 

Working Element

Working Elementは、webサイトに入ってすぐに白黒のフルスクリーン映像みることができます。背景は黒で、運動している人物が登場します。オーバーレイされているユニークなメニューバーをご覧になることができます。この素晴らしいwebサイトをご覧になり、あなたの探し求めているインスピレーションを見つけてください。

 

Brightly Preflight Nerves

ヴィンテージフィルムに興味がおありか、もしくはこちらの例に似た企画に携わっている方でしたら、インスピレーションを得ることができる素晴らしい情報源を見つけたことになるかもしれません。ぜひご覧ください。

 

Epopee

Epopeeはフルスクリーンモードで十分な量のショートフィルムを展示するwebサイトです。書体とカラーパレットを適切に組み合わせることで、webサイトの外観をより良くしています。

 

The Twelve

こちらは、webサイトを訪れた人たちが最初に見る画面にフルスクリーン映像を使用した別のwebサイトです。このおかげで、当webサイトでは、会社やビジネスのことを伝える優雅な方法を備えているといえるでしょう。

 

Novembro

最後になりましたが、Novembroは、次なるインスピレーションを得る情報源の良い例です。もしあなたが同様のプロジェクトで働くのであれば、こちらの例についてもっと詳しく知りたいとお考えになるでしょう。

 

Dadaab Stories

Dadaab Stories は、ダダーブ難民キャンプの双方向マルチメディアプラットフォームです。こちらのwebサイトでは、webサイトのメッセージに添った高品質のループビデオ背景があります。

 

ONY Russian Agency

こちらのRussian agencyのwebサイトは、柔らかいぼかしのオーバーレイを使用した、芸術的なループビデオ背景が特徴となっています。どうぞご覧ください。

 

My Provence

このサイトをみれば、あなたはマルセイユを訪れたくなるはずです。ループビデオ背景では、港のカモメの鳴き声が流れています。

 

Y.CO

こちらのwebサイトでは、セピア色のオーバーレイが使用された大きなフルスクリーンビデオからなる効果的でシンプルなスプラッシュスクリーンがご覧いただけます。

 

Media Boom

こちらの代理店のホームページでは、会社のキャッチコピーを使ったシンプルなスプラッシュスクリーンと、ブランドに合わせて彩度を落としたループビデオ背景をご覧になれます。

 

Off Radio

こちらのラジオwebサイトデザインには、暗いテーマと、ぼかしを施したフルスクリーンビデオ背景がご覧になれます。

 

Seidenstrasse

こちらのwebサイトを開くと、面白いフルスクリーンビデオが表示されます。忍耐力を持って最後までご覧ください。その価値があります。

 

Marisa Passos

こちらのwebサイトのフルスクリーンビデオ背景は実に魅力的です。インクと水に落ちた染料の美しい動きをご覧ください。

 

Project Skin

この美しくエレガントでしかも現代的なwebサイトデザインは、サービスを紹介するために高品質のビデオ背景を使用しています。

 

DUNCKELFELD

こちらは、サイトでもっとも重要な部分に注意を惹きつけるために、オレンジ色をアクセントカラーとして使用した暗さがテーマとなったwebサイトです。背景では注目を惹くループビデオが再生されています。

 

Kalexiko

こちらは、会社のチームを紹介するビデオ背景を使用したプレゼンテーション型のwebサイトです。

 

Cobble Hill

平穏かつ美しい。このループビデオ背景を説明するもっとも適切な言葉といえるでしょう。

 

Build Films

こちらのwebサイトでは、左側に白い背景を使ったサイドメニューがあり、右側には大きなビデオが配置されています。

 

Fresh Design Studio

スプラッシュページだけでなく、色付きのオーバーレイがビデオ背景に頻繁に使用されています。これらの技術の素晴らしい例が、こちらでご覧いただけます。

 

Strijp-S

太く背の高いフォントは、ビデオが届けるメッセージを強調するようにビデオ背景と連携しています。

 

Final Elements

こちらは広告代理店のためのプレゼンテーション型のwebサイトです。モノクロビデオ背景、太く白いフォント、簡単なCTAを使用したシンプルなスプラッシュページがあります。

 

High Tide

こちらのwebサイトビデオとデザインは、バケーションを思い起こさせます。このビデオを目立たせるためにデザイナーがどのようにカラーオーバーレイを使用しているか、一度ご自身でご確認ください。

 

BKWLD

こちらのwebサイトホームページは、3つの異なるビデオを特徴としており、それぞれがサイトのひとつのセクションになっています。余白部分は白く、アクセントカラーを省いています。

 

Spry

こちらではスプラッシュスクリーンとビデオ背景の両方を使用しています。サイトのホールドエリアのすぐ上に、シンプルで創造的なCTAを使用しています。

 

Optimo Hats

こちらのwebサイトの背景にあるビデオはとても狡猾で気付きづらくなっているため、まるでシネマグラフのようになっています。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ