つなweB事例ウォッチング！　イメージ動画を印象的に使ったWebサイト事例5選

最近は、イメージ動画を埋め込んだWebサイトが増えてきました。動画要素は、たくさんの情報量で見た人に強い印象を与えることができます。しかし、せっかく印象的な動画を作成したのであれば、Webサイトの中で最大限に活かしたいところ。ここでは、イメージ動画を印象的に見せているWebサイト事例を5つご紹介します。

埼玉県にある平成国際大学のWebサイト。Webサイトにアクセスするとイメージ動画が最初に全画面で表示されます。動画にストーリー的な組み立てはありませんが、授業や部活動の光景など数多くのシーンが取り上げられているため、キャンパスライフを具体的にイメージさせてくれます。スクロールを始めると他のエリアが動画の上に重なっていきますが、エリアの下地が半透明になっているため、動画要素が常にうっすらと透けて再生され続けます。控えめながらも、ページを見終わる最後までイメージ動画によるアピールが活きるというわけです。なお、動画が表示されるのはPC版レイアウトのみで、スマートフォンでは静止画スライドショーに変わります。

先進性が伝わるクールなアニメーション
BRANU （ブラニュー）

建設業界向けのクラウドソリューションを提供するBranuのコーポレートサイトです。トップページは大きくわけて5つのセクションで構成されており、すべてのセクションでアニメーション動画が流れている構成です。各セクションの動画は短めの動画をリピート再生しており、次のセクションに切り替えると動画が別のシーンに切り替わります。しかし分析してみると、実は複数の動画が配置されているわけではなく、1本の動画をスクリプト制御し、セクションごとに再生する時間の長さを変えていることがわかりました。こうした制御によって、次のセクションに移ったときに動画をスムーズに別のシーンへと切り替えることができます。さらに1つのファイルにすることで読み込み時間を抑えることにもつながっています。イメージ動画を利用するための高度な技術によって、訪れた人の印象に強く残るWebサイトが実現しています。

 

つなweBエディターの注目ポイント

1本の動画をスクリプトで制御

事例詳細はこちら

---

心を掴むアイデアと技術力
株式会社Plumrise（プラムライズ）

大阪府にあるWeb制作会社、Plumriseのコーポレートサイト。トップページの下のほうにある「私たちについて」エリアの背景に動画が使われています。自然の中を1羽のハチドリが縦横無尽に飛び回っている動画ですが、見ていると突然、背景動画の手前にあるはずの白い文字ボックスのさらに前側にハチドリが回ってきます。まるで背景動画から飛び出してきたような演出で「どうなっているんだろう？」と驚かされます。実は、白い文字ボックスまで含めた動画になっているのですが、意外性のある心憎い演出です。

 

つなweBエディターの注目ポイント

意外性を形にするための動画編集力

事例詳細はこちら

---

抽象イメージのアニメーションがCOOL！
Rondomark

こちらは北海道にあるWeb制作会社、Rondomarkのコーポレートサイトです。トップページにアクセスすると、画面センターに社名ロゴが表示されます。このロゴの中が、抽象的なイメージが揺らめく動画になっているのが印象的です。背景にも抽象的イメージの動画アニメーションが使われているのですが、ロゴ内の動画と背景動画は別のもの。技術的には、ロゴの形で動画をマスキングして、背景動画の上に重ねて配置しています。2つの似て非なるイメージを重ねることで、なんだか不思議な魅力が滲み出ている気がします。

 

つなweBエディターの注目ポイント

動画をマスキングすることでインパクトがアップ

事例詳細はこちら

---

コミカルなオールドムービーがオシャレ
HATCH Inc.

広告制作プロデュースやクリエイティブコンサルティングなどを行うHATCH Inc.のコーポレートサイトです。トップページにアクセスするとウインドウいっぱいに動画が表示され、その動画のクオリティに度肝を抜かれます。古い手書きアニメをイメージしたコミカルな動画で、この動画だけでもかなりの時間をかけているのではないかと想像します。全体的にはモノクロですが、ところどころに色付きのマークが挟み込まれます。実は社内にある複数の事業部ブランドのロゴなのですが、アニメーションにのストーリーにうまく絡み合っていると感じました。他の要素はあえて抑え目に配置して、動画にしっかりと目がいくようなレイアウトもポイントです。また、動画を見終わってページをスクロールしていくと、動画内に出てきたキャラクターのGIFアニメも配置されています。トップ動画以外にも動きのある要素を入れることで、Webサイト全体でつながり感が出ています。

 

つなweBエディターの注目ポイント

動画にしっかりと注目が集まるレイアウト

事例詳細はこちら

---

動画を埋め込んでいるWebサイトはたくさんありますが、中には動画コンテンツだけが唐突に存在しているような印象を受けるケースもあります。イメージ動画を印象的に見せるには、それ以外の場所にもちょっとしたアニメーションを取り入れて、ページ全体で動きを出すと調和していきます。また、動画にオリジナルのフレーム（枠）をかけるといった演出もユニークです。せっかく動画をつくったのなら、それがより印象的に伝わるようアイデアを凝らしてみてはいかがでしょうか。