【Webデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ
広告と連動したランディングページなどで、動画が使われているのを見ることが増えてきました。 動画を使うことでコンバージョンが上がったなどというケースも出てきており、少しでも効果を高めたいキャンペーンサイトやプロモーションサイトでは、動画が不可欠な要素になりつつあります。
とはいえ、一口に動画活用と言っても使い方は様々。そこで今回は、企画の参考になりそうな、動画を効果的に使ったキャンペーンサイト、プロモーションサイトを選んでご紹介していきたいと思います。
動画をうまくとりいれたプロモーションページ事例
ウォーターサーバーのある新生活
http://www.aquaclara.co.jp/newlife2016/
業種：清涼飲料水 サイトの特長：ワンカラムデザイン、グリッド、レスポンシブWebデザイン 動画の活用ポイント：商品のある生活のイメージを訴求
ウォーターサーバーのアクアクララと、ホテルCLASKAがコラボレーションした、生活提案サイトです。「ウォーターサーバーのある新生活」という固定表示のタイトル文字の背景で、新生活を始めた若者たちの動画が自動再生されていきます。ついついじっと見入ってしまい、「こんな暮らしがしてみたい」いう思いを高める、魅力的なプロモーションページに仕上がっています。商品を売る時に、商品自体を訴求するのではなく、その商品がある生活を提案するというやり方はよくありますが、ライフスタイルをイメージさせるためには動画が効果的だということがよくわかるサイトです。
さわろう。ふだんプレミアム インタラクティブムービー
http://panasonic.jp/fudan/interactive/
業種：電気機器 サイトの特長：ワンカラムデザイン、レスポンシブWebデザイン 動画の活用ポイント：商品のある生活のイメージを訴求
「ふだんを宝物にする」というコンセプトでつくられたパナソニックのプロモーションサイト。家電のある暮らしを映像で訴求した、ムービー集のような作りが魅力的です。さまざまな生活の場面で商品が登場。クリックすることでその商品に関連するグッズの詳細が見られたり、マウスのドラッグを促して動画の動きと連動させたり…など、インタラクティブ性をプラスすることで、ストーリーがぐっと身近に感じられ、動画で展開される生活の中に自分も一緒にいるような感覚が味わえます。細かい部分までよく考えられた、参考になるサイトです。
さわる知リ100 Supported by オロナインH軟膏
業種：医薬品 サイトの特長：タイルレイアウト 動画の活用ポイント：SNSと連携したバズ動画
「知リ100」として、シリーズで実施されているオロナインH軟膏のプロモーションサイト。動画中には商品は出てきませんが、サイトのコンセプトが「さわる」ということ、そして、さわることには危険が伴うという点で商品とうまく結びつけたものになっています。100種類のものをさわった投稿動画には、面白いもの、かわいいもの、不思議なものなどがあり、SNSでのシェアやいいね！につながっています。若い層では知る人が少なくなってしまったことが課題だったオロナインですが、これによってブランド知名度もアップしたという動画活用企画です。
Reveur（レヴール）
業種：美容 サイトの特長：ワンカラムデザイン、レスポンシブWebデザイン 動画の活用ポイント：商品PV
世界初の酸化しない生シャンプー「レヴール」のプロモーションサイトです。写真を見せられるだけでは他との違いや特徴がわかりにくいシャンプーという製品。それを補うために、このサイトでは動画を有効活用しています。ファーストビューでは「酸化しない真空容器で鮮度を守る」という特徴をタイポグラフィーでダイナミックに訴求する動画、その下には、2種類のプロモーション動画が流れる作りになっています。明確な差別化ポイントを動画でさらに強調することで、商品への理解を深めるだけでなく、印象にも残るサイトになっています。
G’ZOX公式 ガラス系コーティング
業種：自動車 サイトの特長：レスポンシブWebデザイン、カードレイアウト 動画の活用ポイント：イメージ動画、説明動画
車のボディのコーティングサービスの紹介サイトです。トップページの真ん中あたりでは、ガラスコーティングされた車の美しいボディのイメージ動画を自動再生。そして下の方には、コーティング剤についての説明テキストを補足する形で動画を設置。こちらはクリック再生にして、関心のある人がより詳しく知ることができるようにしています。大きさや再生方式など、イメージ的な動画と説明的な動画を上手く使い分けることも、動画活用のひとつのポイントです。
エリア86鈴鹿 4周年イベント
http://www.mie-toyota.co.jp/lp/area86_anniv/
業種：自動車 サイトの特長：ワンカラムデザイン、レスポンシブWebデザイン 動画の活用ポイント：レポート動画
エリア86鈴鹿 4周年イベントのプロモーションサイトです。イベント自体は既に終了。開催時の様子を伝え、次の開催への期待を高めるイベントレポートサイトになっています。自動車レースの臨場感は、写真だけではなかなか伝わらないものですが、このようにファーストビューで動画を見せられるとインパクト抜群。ついつい惹き込まれてしまい、他のコンテンツも見てみようという気にさせられます。
失恋にフィリピンが効く。
http://shitsuren-philippines.com/
業種：観光 サイトの特長：ワンカラムデザイン、グリッドレイアウト 動画の活用ポイント：ドラマ仕立てのフィリピンのPV
日本人観光客を増やすためのフィリピン政府観光省のプロモーションサイトです。単なる観光紹介では面白みがありませんが、このサイトでは「失恋にフィリピンが効く」というテーマを設定。傷心旅行としてドラマチックに見せつつフィリピンの観光名所を紹介するという仕立てにして、これまでとは違った魅力をアピールしています。背景動画に加えて、GIFアニメーションをたくさん使って楽しさを演出。オブジェクトに動きがあるだけで、情報量は何倍にも拡大します。企画から動画の使い方まで、学べる点が多いサイトです。
カンパイ！広島県＼(▽?＼(?▽?)／?▽)／
http://hiroshima-welcome.jp/kanpai/
業種：観光 サイトの特長：グリッドレイアウト 動画の活用ポイント：タレントを使った地方PR
「カンパイ！広島県＼(▽?＼(?▽?)／?▽)／」と名付けられた、広島県のプロモーションサイト。ファーストビューに、広島出身のアーティストである「奥田民生」が県内の各地を巡るスペシャルムービーが使われています。サイト内には、観光や食に関するコンテンツが豊富に提供されていますが、どこから見ればいいのかわからない人も多いはず。タレントを使った動画という話題づくりだけでなく、動画の中から興味や関心のきっかけを見つけてもらうという役割も果たしています。
清水へ参る道
http://feel.kiyomizudera.or.jp/
業種：観光 サイトの特長：ワンカラムデザイン 動画の活用ポイント：清水寺のPV、そこでの行事の紹介動画
ページに接続すると全画面表示の美しい動画が自動再生。ファーストビューが印象的な、清水寺のプロモーションサイトです。音を効果的に使ったクオリティの高い動画と、縦書きの白い文字で書かれたメッセージが高度に調和し、思わず「行ってみたい！」と思わせる力があります。トップページをクリックした先にも美しい映像がふんだんに使われており、バーチャルトリップしたような気分を味わうことができます。説明するのではなく感じさせるサイトという作り方は、購買意欲を高める時などにも使えそう。参考になります。
ぼーっと沖縄
業種：観光 サイトの特長：ワンカラムレイアウト 動画の活用ポイント：沖縄の自然映像
コンセプトとしてサイト内にも書かれている通り、「ぼーっと沖縄」は沖縄の自然映像を、ただぼーっと眺めるだけのサイトです。コンセプトも作りもごくシンプルなサイトですが、確かに海の動画を見て波の音を聴いているとリラックスした気分になり、癒されてくるように感じます。このような効果は、動画ならではのもの。実はこのサイト、沖縄のWeb制作会社が作ったもので、意図したものかどうかは分かりませんが、動画活用の企画力をアピールするいわば一種のプロモーションサイトのような役割も果たしています。TV番組などでも紹介されPR効果も十分な様子です。
今回のまとめ
以上、効果的に動画を使ったキャンペーンサイト、プロモーションサイトを見てきました。いかがでしたか？今回、ピックアップするために多くのサイトを見ましたが、さまざまな業界で動画を使ったサイトが一気に増えていることをあらためて感じました。Webサイトで、じっくり時間をかけて文字を読んでもらうのは難しいことですが、動画にした場合でも、長いものを最後まで全て見てもらえるということはなかなかありません。
その意味で、サイトにアクセスした時点で再生され、短時間で訴求したい内容や魅力、特長を伝えることができるような動画の使い方は、広告と連動したキャンペーン型のページやプロモーションページなどで、これからも増えて行くと思います。文字、写真などの情報に加えて、適材適所で動画を使ってみる…今回の１０選をそんな時の参考にしていただければと思います。
＜関連記事＞ 【Webデザイン10選】出そろった2017年度新卒採用サイトから注目デザインを厳選！ 【Webデザイン10選】春間近！ピンク色を効果的に使ったサイトまとめ 【Webデザイン10選】丸を効果的に使ったデザインのサイトまとめ
