動画を背景に使ったユーザの印象に残るWebサイトまとめ25選

動画を背景に使ったユーザの印象に残るWebサイトまとめ25選

うらら

うらら

パソコン・スマホの前のみなさんこんにちは。うららです。よく「偽名だよね?」と言われますが、本名です。

昨今のインターネッツにはクオリティの高いサイトが続々と登場しております。背景に動画を用いたサイトもそのうちの1つです。動画を使うだけで、サイトの雰囲気がより伝わるだけでなく、その商品の説明にもなるためユーザーに優しく機能的ともいえます。

今回はそんな背景が動くサイトを「取り扱っているもの」別にまとめてみました。これから作るサイトの参考に、また、見ているだけでもわくわくするようなものばかりですので、娯楽としても楽しんでいただけたら幸いです。

 

サイト紹介の仕方
「サイト」「テーマ」「一言」の3点で紹介していきます。

サイト:どのようなサイトなのか
テーマ:そのサイトの動画のテーマ
一言 :サイトを見た感想

※ 2020/10/13追記
2020年10月現在、下記すべてのサイトがリニューアルまたは閉鎖されており、当時のページを実際にご覧いただくことはできません。あらかじめご了承くださいませ。キャプチャ画像はそのままに、リンクについては非リンク化またはリニューアル後のURLに更新しております。

会社系

Forty

スクリーンショット 2014-08-01 3.49.02
http://forty.co/(閲覧不可)

サイト:企業(ウェブデザイン)
テーマ:仕事の様子
一言 :仕事ができそうな雰囲気がヒシヒシと伝わってきます。

COULEE Creatives

スクリーンショット 2014-08-01 3.45.10
https://www.couleecreative.com/(リニューアル済)

サイト:企業(ウェブ制作)
テーマ:女性が働いている様子
一言 :仕事を頼んだらこの人がやってくれるのかな?と思わせてくる動画です。企業の内側を知れる気がして、親近感がわきます。

Waaac

スクリーンショット 2014-08-01 3.41.59
http://waaac.co/(閲覧不可)

サイト:企業(アプリ・ウェブ制作)
テーマ:仕事風景
一言 :デザインに強そうだなと思わせるような動画が、仕事風景の合間に織り込まれています。もはやセンスしか感じません。

POOLHOUSE

スクリーンショット 2014-08-01 3.38.51
https://poolhouse.co/(リニューアル済)

サイト:企業(広告)
テーマ:風景、人
一言 :映像制作会社ということもあり、流れている映像がきれいです。ここなら任せていいかも、と思わせるのに一役買っていそうです。

Kalexico

スクリーンショット 2014-08-01 3.34.11
https://www.kalexiko.com/(リニューアル済)

サイト:企業(デザイン)
テーマ:社内・仕事の様子
一言 :社内の雰囲気や働いている人の姿を知ることができます。

Q

スクリーンショット 2014-08-01 3.28.43
https://www.q-co.jp/(リニューアル済)

サイト:企業(広告、自社アパレルブランド、ウェブデザイン)
テーマ:旅行の様子らしきものと会社までのアクセス方法(サイトの途中ででてきます)
一言 :サイトのクオリティが素晴らしいのですが、動画も一役買っています。出てくる動画は旅行の様子らしきものなのですが、それだけでこの会社が面白そうだなと思えます。

MASH holdings

スクリーンショット 2014-08-01 3.24.09
http://www.mash-holdings.com/recruit/(閲覧不可)

サイト:2015年度新卒採用
テーマ:この企業で働いている人の様子
一言 :どんな事業を展開している会社なのかが視覚的に分かります。

施設系

日本福祉大学

スクリーンショット 2014-08-01 3.06.15
http://www.n-fukushi.ac.jp/lifestyle/#/introduction/page01(閲覧不可)

サイト:日本福祉大学の受験生向けサイト
テーマ:大学がある地域の様子
一言 :学生と思われる人が歩いている様子が映し出され、「自分がここに受かったらこんな感じか」というのが想像できてしまいます。

GUSTAVE CAFE

スクリーンショット 2014-08-01 3.10.17
http://www.gustavecafe.fr/(リニューアル済)

サイト:カフェ(フランス)
テーマ:店内の様子
一言 :店内の様子を撮影した映像で、写真だけではわからない表情も伝わります。スクロールした先も動くという、お洒落すぎるサイトです。

未来工作ゼミ

スクリーンショット 2014-08-01 3.13.59
https://www.futurecraft.jp/(リニューアル済)

サイト:子ども向けイベント
テーマ:イベントの様子
一言 :「動画を再生」ボタンを押さなくてもイベント映像を観ることができるので、父母にイベントの魅力がより伝わるのではないでしょうか。

いいオフィス

スクリーンショット 2014-08-01 3.20.10
https://ii-office.jp/ueno-by-lig/(リニューアル済)

サイト:コワーキングスペースの紹介
テーマ:建設中の様子
一言 :サイトの全部の背景ではなく、下部のみが動くことにより、個性的なサイトになっているかと思います。

売り物系

無印良品

スクリーンショット 2014-08-01 1.38.45
http://sleep.muji.net/ja/(閲覧不可)

サイト:商品(枕)のPR
テーマ:枕を使用したときの雰囲気や、枕の使い方
一言 :文字を読まなくても使い方が分かり、商品のよさが視覚だけで伝わります。

日清食品

スクリーンショット 2014-08-01 1.53.06
https://www.nissin.com/jp/(リニューアル済)

サイト:カップヌードルができ上がるまでの3分間をカウントするサイト
テーマ:ヌードルを食べている人や食材を切るシーン
一言 :動画によって美味しそうに食べている人の表情をさまざまな角度から眺めることで、カップヌードルをこれから食べる人の気分を盛り上げてくれそうです。

the Q camera

スクリーンショット 2014-08-01 1.59.08
http://www.theqcamera.com/(閲覧不可)

サイト:商品(カメラ)のPR
テーマ:カメラを使用したときの様子
一言 :水中を泳ぎながらカメラを構えている人のシーンも出てきますので、水中にも対応しているカメラ、ということが言葉を使わなくても伝わります。

Prong

スクリーンショット 2014-08-01 2.04.04
https://prong.com/(閲覧不可)

サイト:商品(充電できるiPhoneケース)のPR
テーマ:ケースを使用したときの様子
一言 :「どこでも使える」ということが動画で伝わります。

ファッション

OPTIMO

スクリーンショット 2014-08-01 2.26.02
https://optimo.com/(リニューアル済)

サイト:帽子を作っている店(シカゴ)
動画 :背景が動く
一言 :帽子は動かさず、たまにバックで車が走るという動画を使っています。夜の店の雰囲気が伝わってきて、とてもお洒落です。

 

AURIA

スクリーンショット 2014-08-01 2.29.45
http://auria-london.com/spring-summer-2014-collection/(閲覧不可)

サイト:AURIAの2014春夏コレクション
テーマ:新作を着たモデルの動画
一言 :服の紹介というよりは雰囲気を作り出している動画のような気がします。とにかく、お洒落です!

SONIA

スクリーンショット 2014-08-01 2.34.53
http://ss14.soniaby.com/fr/home(閲覧不可)

サイト:SONIAの春コレクション
テーマ:モデルの撮影風景
一言 :音楽と合わせて動画が切り替わり、さまざまな服が登場します。写真を眺めなくても動画で服のコレクションを把握できそうです。

STORQ

スクリーンショット 2014-08-01 2.37.13
https://storq.com/(リニューアル済)

サイト:妊婦さん向けの服・洗面用具・化粧品サイト
テーマ:服を試着している女性の動画
一言 :カメラの前でポージングする女性から、服を着るわくわく感が伝わってきます。また、現場での自分の姿をイメージしやすくなると感じました。

NEW YORK BLUE

スクリーンショット 2014-08-01 2.43.55
http://newyorkerblue.com/(閲覧不可)

サイト:ファッションブランドのサイト
テーマ:洋服を着ている人たちの日常を再現したもの
一言 :あえてスローモーションの動画を使っているため、洋服をじっくりと眺めることができます。

GLOBAL WORK

スクリーンショット 2014-08-01 2.58.11
http://www.point.jp/cp/globalwork/fukufukufuku/(閲覧不可)

サイト:ファッションブランドのサイト
テーマ:日常の様子
一言 :GLOBAL WORKに出演している長澤まさみさんや大沢たかおさんも動画に出演しています。ランダムに流れる動画で、より情報が欲しくなり下にスクロールしたくなります。

LEGEND WORLD WIDE

スクリーンショット 2014-08-01 2.55.43
http://www.legendww.com/#/sr(閲覧不可)

サイト:ファッションブランドのサイト
テーマ:街でブランドの服を着ている人の様子
一言 :ブランドのファッションが街にとけ込んでいる様子が容易に伺えます。

音楽系

Serph

スクリーンショット 2014-08-01 2.09.32
http://www.noble-label.net/cmi/(閲覧不可)

サイト:コンサートの特設サイト
テーマ:音楽に合った雰囲気の風景(山、川、森)
一言 :音楽のと動画が相成って、曲の雰囲気作りに一役買っています。

岡村靖幸(音楽アーティストのサイト)

スクリーンショット 2014-08-01 2.12.34
https://okamurayasuyuki.info/info/(リニューアル済)

サイト:アーティスト岡村靖幸さんのサイト
テーマ:『BU-SHAKA LOOP』のPV
一言 :音楽とともに動画が流れます。一瞬で飲み込まれ、動画から目を離せなる、かも。

Spotify(音楽アプリ)

スクリーンショット 2014-08-01 2.17.44
https://www.spotify.com/jp/(リニューアル済)

サイト:音楽アプリ『Spotify』
テーマ:音楽のある日常生活(スポーツ、睡眠、ペットとの散歩など)
一言 :「Music for every moment(音楽をすべての瞬間に)」という一言とイメージが合っている動画で、アプリの使いどころがより伝わります。

まとめ

いかがでしたか。動画の再生ボタンを押さなくても自動的に流れる映像は、ユーザーにとってお手軽でかつ、文字のみの情報もより伝わるという点で、一石二鳥だと思います。背景が動くだけでサイトの雰囲気もがらっと変わりますし、この機会にあなたのサイトにも動画を取り入れ、よりユーザーを楽しませてみてはいかがでしょうか。

サイトを作ったら、ぜひ私に教えてくださいな!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

LIGにはインターンから参加して丸3年いました。DevRel記事担当のエディターで、IoTなことしています。読書(森博嗣)とうどんが好き。IoTのECサイトをやってます :) 詳しくはこちら:dotstud.io

このメンバーの記事をもっと読む