Webサイトのヒーローセクションなどで背景動画を使うケースは増えています。そこでよく出てくる疑問が「PCとスマホで同じ動画を使うべきか、それとも別々に用意するべきか」という点です。
結論から言うと、多くの場合はPC用とスマホ用で動画を分けて用意するのが望ましいです。
なぜ動画を分ける必要があるのか
理由は主に3つあります。
1つ目は画面の比率がまったく違うためです。
PCは横長の16:9や21:9に近い比率ですが、スマホは縦長の9:16です。同じ動画を使うと、スマホでは重要な部分が切れてしまったり、無駄な余白が生まれたりします。
2つ目は通信量とパフォーマンスの問題です。
PC用の動画は解像度が高く、ファイルサイズも大きくなりがちです。それをそのままスマホで読み込むと、ページ表示が遅くなりユーザー体験を悪化させます。スマホでは解像度を落とした軽量な動画を使う方が合理的です。
3つ目は演出の最適化です。
PCでは広い画面を活かした引きの映像が効果的ですが、スマホでは被写体が小さく見えてしまいます。スマホ用では被写体に寄った構図にするなど、演出自体を調整することもよくあります。
実務ではどうしているのか
実際の制作現場では、次のようなパターンが多いです。
PC
横動画（16:9）
スマホ
縦動画（9:16）
そしてCSSのメディアクエリやJavaScriptで、画面幅に応じて読み込む動画を切り替えます。
同じ動画を使うケースもある
もちろん、必ず分ける必要があるわけではありません。
例えば次のような場合は、同じ動画でも問題ないことがあります。
・背景が抽象的な映像
・中央に重要な被写体がある
・トリミングしても問題ない構図
ただしその場合でも、スマホ用に解像度を落とした動画を用意することはよくあります。
背景動画で一番大事なこと
背景動画は主役ではありません。
サイトの内容を邪魔せず、雰囲気を作るための要素です。
そのため、動画を豪華にすることよりも
・ページ表示を遅くしない
・文字が読みやすい
・ユーザー体験を壊さない
この3つを優先することが重要です。
背景動画は見た目のインパクトがある一方で、使い方を間違えるとサイトのパフォーマンスを大きく落とします。
だからこそ、PCとスマホの違いを理解したうえで設計することが大切です。
