Webサイトにおける効果的な動画の活用方法

こんにちは。デザイナーの斎藤です。
近年YouTubeやTikTokの台頭によって、動画が私たちにとって身近な存在になりましたね。
難しい内容を伝える時やイメージを正しく伝えたい時、動画だとより分かりやすく伝えることができるように思います。

今回は中でもWebサイトにおいて、どのように動画を用いられてるものが効果的なのか事例を用いながらご紹介したいと思います！

効果的に動画を用いる4つの手法と事例

1.メインビジュアルを動画にする

サイトを訪れて一番最初にユーザーが目にするメインビジュアルエリアに動画を用いることで、短時間で内容を訴求できたり強いインパクトを与えることができます。

（参考：「衣・食植・住」展　特設サイト）

こちらのサイトでは動画を用いて、タイトルのコピー文「植物が命を守る家となり、命を繋ぐ食となる」の内容を一連の流れで過程を見せて説明し、どのような内容なのかを分かりやすくしています。
一枚の写真では表せられないことを動画にすることによって具体的に伝えることができていますね。
また人間は動いてるものに目がいく性質を持っているため、サイトを訪れて一番最初に目にするメインビジュアルエリアを動画にすることで、内容を見てもらいやすくなり非常に効果的だと思いました。

2.背景に動画を入れる

背景に、サイトの内容に関連する要素の動画を入れることで、より世界観や内容を想起させることができます。

（参考：BOTANIST ブランドサイト）

こちらのサイトでは、背景に葉っぱがゆっくり揺れている動画を背景に用いており、自然や植物・環境に関連するサイトだとすぐに分かるようになっています。

（参考：数理計画 コーポレートサイト）

こちらのサイトでは、メインビジュアルエリアの背景にそれぞれのスライドの内容に合わせて動画が配置されており、よりどのような内容が書かれているのかがビジュアルからも想起させられるようになっています。

スライド1つ目では、出版にちなんで本がめくれるような動画、2つ目では持続可能な社会にちなんで植物が揺れているような動画、3つ目ではテクノロジーにちなんで分子の動画になっています。

3.写真をレイアウトしてる中に動画も混ぜる

1枚の写真だけでは伝わらないことを動画にまとめることで、より魅力や体験をユーザーに伝えることができます。

（参考：THE BUTTER CAKE　スペシャルサイト）

個箱を開けた時の個箱や包装のデザイン、ケーキをフォークに通した時の感触、食べてる時の贅沢な時間が動画に詰まっていて、より商品や商品を通じて得られる魅力的な体験が伝わりやすくなっています。

4.説明する際のアイコンを動画で書き出す

説明するエリアのアイコンに動きをつけることで、エリアに視線を誘導できたり、難しい内容やシーンを分かりやすく伝えることができます。

（参考：FiTO 縫製料金の自動見積りサービスサイト）

Webサイトに動画を入れる際の注意点

1.可能な限り動画を軽くする

動画のファイルサイズが大きいと、サイトの読み込みが遅くなってしまいその間にユーザーに離脱されてしまうリスクがあります。そのため動画を使用する際はできるだけ動画の長さを短くしたり、Hand Brakeなどの動画軽量ソフトを使用するなどして、可能な限り動画を軽くするようにしましょう。（5MB以下が目安）

2.動画を長くしすぎない

動画が長すぎてしまうと、見終わる前に離脱されてしまうリスクがあるため、動画で伝えたい内容やビジュアルをあらかじめ厳選しておき20秒前後に収まるようにしましょう。また、動画が表示されない事態に備えて代わりに表示する画像を用意しておくと安心です。

おわりに

今回のブログでは、Webサイトにおける効果的な動画の活用方法についてご紹介しましたが、いかがでしたか？
動画は短時間で多くの情報を効果的に伝えることができるため、複雑な概念やプロセスを分かりやすく説明したい時や、世界観やストーリー性のある内容を具体的に伝えたい時に適しています。
私も動画の容量などに注意しながら活用してみたいと思っています。
それでは、また。

参考文献

• 背景に動画を使ったWebサイトの作り方
• Webサイトに動画を埋め込む際のサイズと軽量化方法