やっぱりイケてる!動画背景をトップページに使ったWEBサイトを紹介

動画背景をトップページに使ったWEBサイトを紹介!






トップページに動画背景を使ったサイトが数年前に流行ってましたけが、最近のムーブメントとしてはどうなんでしょうか?

SEO的にサイトの読み込み速度が重要になったためか、一時期に比べると減っているように感じますが、それでも動画背景を使ったサイトを目にする機会はまだまだ多い気がします。

そんなわけで今回は、トップページに動画背景を効果的に使ったサイトをいくつか紹介したいと思います。

背景動画を使ったサイトを紹介

それでは早速、トップに動画背景を使ったサイトを紹介してまいりますが、英語サイトを含めると紹介する数が多くなりすぎるので、基本的に日本語サイトにスポットを当てました。

くまもと田崎市場


くまもと田崎市場

なかのいいおじょうさん


なかのいいおじょうさん

  • http://ojousan.com/
  • なかのいいおじょうさん
  • 群馬県吾妻郡中之条町 女性限定ツアー ランディングページ
    正直、ツアー紹介なのか、モデルで登場するアイドルユニットの紹介なのか…
    どっちかわからないけど、可愛いから許すと思えるページ。

ホットヨガスタジオ LAVA


ホットヨガスタジオ LAVA

  • http://recruit.yoga-lava.com/
  • ホットヨガスタジオ LAVA公式採用サイト
  • 採用サイトと動画って相性良いと思います。
    そして何より重要なのは、お姉さん達がステキという事!

ダイハツ TOCOT


ダイハツ TOCOT

JTEKT


JTEKT

  • http://jtekt-sp.com/
  • JTEKT
  • アップで出ている女の子が印象的な背景動画。
    髙橋ひかるさんというらしい。可愛い。というか天使!?
    髙橋ひかるさんもだけど、サイトのコンセプト自体がステキなサイト。

クリスプ・サラダワークス




  • https://www.crisp.co.jp/
  • クリスプ・サラダワークス
  • 東京都にあるサラダ専門店のサイト。
    可愛い女の子は出てこないけど、サラダのシズル感や店内の雰囲気がバリバリ伝わってきます。一度行ってみたい。

丸京染色株式会社


丸京染色株式会社

  • http://www.marukyou-mk.co.jp/
  • 丸京染色株式会社
  • トップの背景動画にかかっているオーバーレイの色が、徐々に変化していく効果が染色を表現していて面白い。

株式会社リブセンス


株式会社リブセンス

  • https://recruit.livesense.co.jp/
  • 株式会社リブセンス 採用情報
  • 株式会社リブセンスの採用情報ページ。
    社員紹介とまでいかなくても、やっぱり採用ページに背景動画があると、企業側と転職希望者の距離がグッと近づく気がする。

名城大学


名城大学

  • https://www.meijo-u.ac.jp/
  • 名城大学
  • 名古屋では超有名な名城大学。
    受験生に「こんなリア充生活送りてぇ〜!」と思わせるには、やっぱり動画が効果的。
    自分らの時はWEBサイトすらなかった事を考えると、今の学生さんは恵まれてますね。

Re:creation, Inc


Re:creation, Inc

  • https://re-creation.co.jp/
  • Re:creation, Inc
  • 東京都内のスクランブル交差点を俯瞰で撮影した背景動画。
    早回しの効果が秀逸で、ワラワラと歩道を渡る人々が小さな虫に見えるのも印象的でした。

NSynth Super


NSynth Super

  • https://nsynthsuper.withgoogle.com/
  • NSynth Super
  • 海外のサイトなので、詳しくわからないけども、音楽関係の製品紹介サイト。
    製品の操作を背景動画で見せる事で、何に関するサイトなのかが日本人の私にもなんとなくわかる事を考えると、やっぱり動画すごいなぁと思います。

ちょっと待った!動画背景を使う前に考えておくべき事

その動画背景を使う前に考えておくべき事

動画背景をトップページに使ったサイトを紹介した後でなんですが、動画背景をWEBサイトに使用する際に気をつけておくべき事があります。

トップページに背景動画を使えば、文字と画像だけのデザインよりもイメージやサービスの内容が圧倒的に伝わりやすくなりますが、逆に言えばイメージやサービスが伝わるような動画を配置する必要があるという事で、ただ動画背景を使えば良いというわけではないんですね。

例えば、今回紹介した飲食店のWEBサイトの場合、ユーザーが来店してから注文〜料理〜食事〜退店までの一連の流れを背景動画で表現しています。見てるだけで店の雰囲気やメニュー・客層が伝わってくるので「一度行ってみたいな」と思える動画に仕上がっています。

これぐらいのクオリティの動画を作ろうとすると、それなりの時間とコストがかかります。
大体カーボンのロードバイクが一台買えるぐらいの金額かなぁ…。
それならば自分達で動画を作ろうか!と思い立ってもクオリティの低い動画が出来上がる可能性が高く、しっかりとブランディングを考えた動画でないと、動画背景を使っても集客効果は変わらないけどサイトの読み込みは遅くなりました!なんて事もあり得ます。

そんなわけで「背景動画を使う理由は?」「本当に背景動画が必要なのか?」をしっかり考えた上で、コストと時間と相談しながら動画背景の採用を決める事をオススメします。
画像とテキストでも効果的なサイトトップは作る事ができますので「なんとなくカッコイイから」という理由で動画背景にするのは避けた方が良いと思います。

まとめ

やっぱり動画背景があるとサイトのイメージが伝わりやすいし、なんとなく親近感も湧いてくる気がするのは気のせいかな?

とは言え、動画制作には結構なコストがかかるし、少なからずサイト読み込みも遅くなるので導入には検討が必要だと思います。ただ動画データは他メディアでの流用ができるので、背景動画のために動画を作るのではなく企業紹介動画などの一部を流用するという、ワンリソースマルチユース的な発想でコストカットが可能なのも動画の特徴と言えますね。

まぁ深い事を考えなくても、印刷やWEBの時みたいに数年先には価格競争が起きて、動画制作の敷居が下がる可能性もありますけどね…。

「やっぱりイケてる!動画背景をトップページに使ったWEBサイトを紹介」でした。

CSSだけで実装可能!画面いっぱいに動画背景を表示する方法

2018.01.21






動画背景をトップページに使ったWEBサイトを紹介!