すべてのカテゴリ

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

Webサイトの第一印象を決める「ヒーローセクション」。最近では、静止画像ではなく背景動画を使うサイトも増えています。しかし、ここでよく悩まれるのが「動画は何秒くらいが適切なのか」という点です。結論から言うと、ヒーローセクションの背景動画は5〜10秒程度に収めるのが最もバランスが良いとされています。この記事では、その理由と適切な動画の作り方について解説します。なぜ長すぎる動画はよくないのかヒーローセクションの目的は、ユーザーに最初の印象を与えることです。映画のようにストーリーを見せる場所ではありません。もし動画が30秒や1分ある場合、次のような問題が起こります。まず、ページの表示速度が遅くなるという問題があります。動画は画像よりもデータ容量が大きいため、長い動画ほどサイトが重くなります。ページの読み込みが遅くなると、ユーザーは離脱しやすくなります。また、ユーザーは動画を最後まで見ないという点も重要です。多くのユーザーはページを開いて数秒でスクロールするため、長い動画を用意しても実際にはほとんど見られません。つまり、長い動画は制作コストが高いわりに効果が低いケースが多いのです。理想は5〜10秒のループ動画ヒーロー動画でよく使われるのが、短い動画をループ再生する方法です。5〜10秒ほどの動画であれば、次のようなメリットがあります。・ファイルサイズを抑えられる・ページ表示が速い・ユーザーが一瞬で内容を理解できる・自然にループさせやすい特に重要なのは、ループしても違和感がない動画にすることです。例えば次のような内容がよく使われます。・風景や街並みの映像・作業している様子・人が歩いているシ