ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  • WEBデザイン

数年前から背景一杯にクオリティの高い画像を使ったホームページを見かけることが多くなりました。伝えたいイメージを表現でき、印象にも残りやすいとして、海外を中心に多くのサイトで使われるデザイン手法になっています。さらに、2014年後半あたりからは、その進化系ともいえる背景に大胆に動画を使ったデザインが増えてきました。

動画を使うメリットは、言葉では伝わらない多くの情報を伝えることができ、その分ページ全体をすっきりとシンプルに、そして印象的にデザインできること。今回はページの背景として動画を効果的に使った日本のサイト10選をご紹介します。自社サイトの制作やリニューアルの参考にしてください。なお、リンク先のページで音声が出る場合がありますので、環境に合わせてボリュームをコントロールしてご覧ください。

制作/マーケティング系企業での活用事例

Re:creation

01http://re-creation.co.jp/

業種:IT系制作会社
サイトの目的:コーポレートサイト
動画の使用ポイント:動画で都会的で先進的なイメージを表現

早い時期から動画を使ったサイトを見ることが多かったのが、先進的であることが重要とされるクリエイティブ業界。このサイトは、夜の渋谷のスクランブル交差点を俯瞰で撮影した映像をファーストビューに持ってくることで、都会的なイメージと先進性を表現した好例です。

CINRA

02https://www.cinra.co.jp/

業種:クリエイティブカンパニー
サイトの目的:コーポレートサイト

動画の使用ポイント:仕事やオフィスの臨場感を動画で伝える

クリエイティブ系のコーポレートサイトで重要なもう1つの要素は、働いている空間や仕事のイメージです。素敵なオフィスで仕事をして、クオリティの高い制作物を世に送り出していることをアピールすることで、クライアントの信用を得たり、優秀な人材を確保したりすることができます。そのような目的のために有効な動画の使い方です。

DESIGN STUDIO L

lhttp://www.e-creators.net/

業種:Web・グラフィック制作会社
サイトの目的:コーポレートサイト
動画の使用ポイント:印象に残るアニメーションでクリエイティビティをアピール

会社のオリジナリティ、クリエイティビティを伝えるのにも映像は最適です。どうしても画一的な見せ方になりがちなWEBサイトのファーストビューに、印象に残るアニメーション動画を使用。写真を中心とした動画とはまた異なる手法で、他との差別化をはかることに成功しています。

momentum

03http://www.momentum.co.jp/

業種:マーケティング会社
サイトの目的:コーポレートサイト
動画の使用ポイント:企業理念や業務内容をインタビュー形式で説明

企業の思いや、文章だけではなかなか伝えづらい業務内容をわかってもらうために、動画を使用するのはとても有効な方法です。このサイトはインタビュー形式で語られるつくりになっていますが、登場する方々のプレゼンテーションスキルが高く、インフォグラフィックを動画で表現していることも注目のポイントです。

メーカー系企業での活用事例

日清食品

04https://www.nissin.com/jp/
(音が出ます)

業種:食品メーカー
サイトの目的:カップヌードルのPR
動画の使用ポイント:世界のブランドであるという国際イメージを効果的に訴求

世界で親しまれている日清のカップヌードル。それができあがるまでの3分間という時間を、飽きずに過ごすことができる動画になっています。さまざまな国の人々がカップヌードルを食べるストップモーションと、各国の言葉でのカウントダウンで構成されており、世界中で愛されるNISSINブランドのインターナショナルなイメージを効果的に訴求しています。

無印良品

05http://sleep.muji.net/ja/

業種:インテリア・生活雑貨・衣料・食品メーカー
サイトの目的:ネッククッションのPR
動画の使用ポイント:ネッククッションのさまざまな用途を伝える

ネッククッションというシンプルな商品の紹介サイト。さまざまなシチュエーションで使える商品であり、短い動画を組み合わせることによって、「心地よく眠れる・休める」という特徴が端的に伝わってきます。静止画のような動画の使い方が、静かさと眠りの心地よさを上手く表現しています。

メルセデス・ベンツ日本

06http://next-a-class.com/animation/

業種:自動車メーカー
サイトの目的:NEXT A-ClassのPR
動画の使用ポイント:実際にある車をアニメに登場させて魅力的にプロモーションしている

マンガやアニメ作品とブランドや商品とのコラボレーション企画は数多くありますが、これは「製品ありき」でそれをアニメ化したというプロモーションです。サイトにアクセスしてクオリティの高いアニメが流れることで、本編をクリックしたいという気持ちにさせられ、プロモーション効果を高めています。

サービス系企業での活用事例

ANA

07http://www.ana.co.jp/int/promotion/haneda-voices/
(音が出ます)

業種:航空会社
サイトの目的:羽田国際線PRサイト
動画の使用ポイント:ANAの国際線で海外旅行に行きたくさせる

空港の搭乗ゲートは、これから旅行に出かけるぞ!という気持ちでワクワクする場所。人々が大きなスーツケースを持って行き交う様子を見ていると、こちらまで旅行に行きたくなってしまいそうです。リアルを見せる動画の力を上手く使っています。

学校関係での活用事例

日本福祉大学

09http://www.n-fukushi.ac.jp/lifestyle/

業種:大学
サイトの目的:受験生向けサイト
動画の使用ポイント:地域の映像を使って入学後の自分を想像させる

学校の受験生向けサイトや企業の採用サイトでは、そこに入った未来の自分が想像できるつくりにしなければ、ターゲットに魅力を訴求できません。そのような目的に映像は非常に有効に使えるということが、このサイトを見ていると理解できます。

万国學生藝術展覧祭

10http://www.gakuten.jp/

業種:アートイベント
サイトの目的:アートイベント「學展」のPR
動画の使用ポイント:ものづくりをする学生たちの魅力の訴求

1つの作品ができあがっていくまでのさまざまな場面をダイジェスト的に見せることによって、見ている人に静止画では伝えづらい「ものづくり」の魅力や躍動感が伝わってきます。この動画を見て、私も出品してみたい!と思わされた方も多いのではないでしょうか。

今回のまとめ

WEBページの背景に大胆に動画を使ったサイトは、まだまだ海外の事例の方が多い段階ですが、WEBデザイントのレンドとして利用が増えて行くことは確実。今回の事例は、すべて日本のものでまとめてご紹介しましたので、参考にしていただきやすかったのではないでしょうか。動画利用の効果は、事例をご覧いただくだけで十分にわかりますよね。あなたのサイトでも、次の機会には、ぜひ検討してみてはいかがでしょう。

<関連情報>
【Webデザイン10選】イラストを効果的に使った完成度の高いサイトまとめ
【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ
【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」