ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

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

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【WEBデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ

  • WEBデザイン

広告と連動したランディングページなどで、動画が使われているのを見ることが増えてきました。
動画を使うことでコンバージョンが上がったなどというケースも出てきており、少しでも効果を高めたいキャンペーンサイトやプロモーションサイトでは、動画が不可欠な要素になりつつあります。

とはいえ、一口に動画活用と言っても使い方は様々。そこで今回は、企画の参考になりそうな、動画を効果的に使ったキャンペーンサイト、プロモーションサイトを選んでご紹介していきたいと思います。

動画をうまくとりいれたプロモーションページ事例

ウォーターサーバーのある新生活

01
http://www.aquaclara.co.jp/newlife2016/

業種:清涼飲料水
サイトの特長:ワンカラムデザイン、グリッド、レスポンシブWebデザイン
動画の活用ポイント:商品のある生活のイメージを訴求

ウォーターサーバーのアクアクララと、ホテルCLASKAがコラボレーションした、生活提案サイトです。「ウォーターサーバーのある新生活」という固定表示のタイトル文字の背景で、新生活を始めた若者たちの動画が自動再生されていきます。ついついじっと見入ってしまい、「こんな暮らしがしてみたい」いう思いを高める、魅力的なプロモーションページに仕上がっています。商品を売る時に、商品自体を訴求するのではなく、その商品がある生活を提案するというやり方はよくありますが、ライフスタイルをイメージさせるためには動画が効果的だということがよくわかるサイトです。

さわろう。ふだんプレミアム インタラクティブムービー

02
http://panasonic.jp/fudan/interactive/

業種:電気機器
サイトの特長:ワンカラムデザイン、レスポンシブWebデザイン
動画の活用ポイント:商品のある生活のイメージを訴求

「ふだんを宝物にする」というコンセプトでつくられたパナソニックのプロモーションサイト。家電のある暮らしを映像で訴求した、ムービー集のような作りが魅力的です。さまざまな生活の場面で商品が登場。クリックすることでその商品に関連するグッズの詳細が見られたり、マウスのドラッグを促して動画の動きと連動させたり…など、インタラクティブ性をプラスすることで、ストーリーがぐっと身近に感じられ、動画で展開される生活の中に自分も一緒にいるような感覚が味わえます。細かい部分までよく考えられた、参考になるサイトです。

さわる知リ100 Supported by オロナインH軟膏

03
http://shiri100.jp/

業種:医薬品
サイトの特長:タイルレイアウト
動画の活用ポイント:SNSと連携したバズ動画

「知リ100」として、シリーズで実施されているオロナインH軟膏のプロモーションサイト。動画中には商品は出てきませんが、サイトのコンセプトが「さわる」ということ、そして、さわることには危険が伴うという点で商品とうまく結びつけたものになっています。100種類のものをさわった投稿動画には、面白いもの、かわいいもの、不思議なものなどがあり、SNSでのシェアやいいね!につながっています。若い層では知る人が少なくなってしまったことが課題だったオロナインですが、これによってブランド知名度もアップしたという動画活用企画です。

Reveur(レヴール)

04
http://www.reveur-hair.com/

業種:美容
サイトの特長:ワンカラムデザイン、レスポンシブWebデザイン
動画の活用ポイント:商品PV

世界初の酸化しない生シャンプー「レヴール」のプロモーションサイトです。写真を見せられるだけでは他との違いや特徴がわかりにくいシャンプーという製品。それを補うために、このサイトでは動画を有効活用しています。ファーストビューでは「酸化しない真空容器で鮮度を守る」という特徴をタイポグラフィーでダイナミックに訴求する動画、その下には、2種類のプロモーション動画が流れる作りになっています。明確な差別化ポイントを動画でさらに強調することで、商品への理解を深めるだけでなく、印象にも残るサイトになっています。

G’ZOX公式 ガラス系コーティング

05
http://www.gzox.com/

業種:自動車
サイトの特長:レスポンシブWebデザイン、カードレイアウト
動画の活用ポイント:イメージ動画、説明動画

車のボディのコーティングサービスの紹介サイトです。トップページの真ん中あたりでは、ガラスコーティングされた車の美しいボディのイメージ動画を自動再生。そして下の方には、コーティング剤についての説明テキストを補足する形で動画を設置。こちらはクリック再生にして、関心のある人がより詳しく知ることができるようにしています。大きさや再生方式など、イメージ的な動画と説明的な動画を上手く使い分けることも、動画活用のひとつのポイントです。

エリア86鈴鹿 4周年イベント

06
http://www.mie-toyota.co.jp/lp/area86_anniv/

業種:自動車
サイトの特長:ワンカラムデザイン、レスポンシブWebデザイン
動画の活用ポイント:レポート動画

エリア86鈴鹿 4周年イベントのプロモーションサイトです。イベント自体は既に終了。開催時の様子を伝え、次の開催への期待を高めるイベントレポートサイトになっています。自動車レースの臨場感は、写真だけではなかなか伝わらないものですが、このようにファーストビューで動画を見せられるとインパクト抜群。ついつい惹き込まれてしまい、他のコンテンツも見てみようという気にさせられます。

失恋にフィリピンが効く。

07
http://shitsuren-philippines.com/

業種:観光
サイトの特長:ワンカラムデザイン、グリッドレイアウト
動画の活用ポイント:ドラマ仕立てのフィリピンのPV

日本人観光客を増やすためのフィリピン政府観光省のプロモーションサイトです。単なる観光紹介では面白みがありませんが、このサイトでは「失恋にフィリピンが効く」というテーマを設定。傷心旅行としてドラマチックに見せつつフィリピンの観光名所を紹介するという仕立てにして、これまでとは違った魅力をアピールしています。背景動画に加えて、GIFアニメーションをたくさん使って楽しさを演出。オブジェクトに動きがあるだけで、情報量は何倍にも拡大します。企画から動画の使い方まで、学べる点が多いサイトです。

カンパイ!広島県\(▽?\(?▽?)/?▽)/

08
http://hiroshima-welcome.jp/kanpai/

業種:観光
サイトの特長:グリッドレイアウト
動画の活用ポイント:タレントを使った地方PR

「カンパイ!広島県\(▽?\(?▽?)/?▽)/」と名付けられた、広島県のプロモーションサイト。ファーストビューに、広島出身のアーティストである「奥田民生」が県内の各地を巡るスペシャルムービーが使われています。サイト内には、観光や食に関するコンテンツが豊富に提供されていますが、どこから見ればいいのかわからない人も多いはず。タレントを使った動画という話題づくりだけでなく、動画の中から興味や関心のきっかけを見つけてもらうという役割も果たしています。

清水へ参る道

09
http://feel.kiyomizudera.or.jp/

業種:観光
サイトの特長:ワンカラムデザイン
動画の活用ポイント:清水寺のPV、そこでの行事の紹介動画

ページに接続すると全画面表示の美しい動画が自動再生。ファーストビューが印象的な、清水寺のプロモーションサイトです。音を効果的に使ったクオリティの高い動画と、縦書きの白い文字で書かれたメッセージが高度に調和し、思わず「行ってみたい!」と思わせる力があります。トップページをクリックした先にも美しい映像がふんだんに使われており、バーチャルトリップしたような気分を味わうことができます。説明するのではなく感じさせるサイトという作り方は、購買意欲を高める時などにも使えそう。参考になります。

ぼーっと沖縄

10
http://boot-okinawa.com/

業種:観光
サイトの特長:ワンカラムレイアウト
動画の活用ポイント:沖縄の自然映像

コンセプトとしてサイト内にも書かれている通り、「ぼーっと沖縄」は沖縄の自然映像を、ただぼーっと眺めるだけのサイトです。コンセプトも作りもごくシンプルなサイトですが、確かに海の動画を見て波の音を聴いているとリラックスした気分になり、癒されてくるように感じます。このような効果は、動画ならではのもの。実はこのサイト、沖縄のWEB制作会社が作ったもので、意図したものかどうかは分かりませんが、動画活用の企画力をアピールするいわば一種のプロモーションサイトのような役割も果たしています。TV番組などでも紹介されPR効果も十分な様子です。

今回のまとめ

以上、効果的に動画を使ったキャンペーンサイト、プロモーションサイトを見てきました。いかがでしたか?今回、ピックアップするために多くのサイトを見ましたが、さまざまな業界で動画を使ったサイトが一気に増えていることをあらためて感じました。WEBサイトで、じっくり時間をかけて文字を読んでもらうのは難しいことですが、動画にした場合でも、長いものを最後まで全て見てもらえるということはなかなかありません。

その意味で、サイトにアクセスした時点で再生され、短時間で訴求したい内容や魅力、特長を伝えることができるような動画の使い方は、広告と連動したキャンペーン型のページやプロモーションページなどで、これからも増えて行くと思います。文字、写真などの情報に加えて、適材適所で動画を使ってみる…今回の10選をそんな時の参考にしていただければと思います。

<関連記事>
【WEBデザイン10選】出そろった2017年度新卒採用サイトから注目デザインを厳選!
【WEBデザイン10選】春間近!ピンク色を効果的に使ったサイトまとめ
【WEBデザイン10選】丸を効果的に使ったデザインのサイトまとめ

seleQt

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  7. 7

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  8. 8

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

  9. 9

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

  10. 10

    歯科クリニックのホームページを徹底調査!24サイトに見る集患力のポイントとは?

総合

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

エムハンドブログ編集部

  • 編集長みつむね

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

  • 伊藤 高啓

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

  • 新棚幹太

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

  • 島田

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

  • ヨネクラ

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

  • キクチ

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

  • 池田仮名

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

最新記事

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

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND