「トップページの背景に、この動画を流したいです」
クライアントからこんな要望があったとき、動画を使ったデザインはイメージできても、「ページが重くならない？」「スマートフォンでも自動再生できる？」と、実装面で迷うことはありませんか。
背景動画は、サイトの雰囲気やサービスの魅力を視覚的に伝えられる表現です。ただし、動画の素材や再生方法によって、表示速度やスマートフォンでの見え方が変わります。
デザインを作り込んでから「この方法では難しい」とならないように、受注前に確認しておきたいポイントを整理します。
まずは、動画で何を伝えたいのか
最初に確認したいのは、動画を使う目的です。
たとえば、店舗の雰囲気を伝えたいなら、店内の様子を数秒ずつ見せる背景動画が合うかもしれません。
一方、サービスの使い方を説明したい場合は、背景で繰り返し流すより、再生ボタンを押して視聴できる動画のほうが適していることもあります。
クライアントには、こんな聞き方ができます。
「動画はサイトの雰囲気を伝えるためのものですか？ それとも、内容をしっかり見てもらいたい動画ですか？」
目的が分かれば、背景として使うのか、独立した動画コンテンツとして配置するのか、提案の方向性が決めやすくなります。
動画が短くても、ページが軽いとは限らない
「10秒くらいの動画なので、重くならないですよね？」
こう聞かれても、再生時間だけでは判断できません。
動画の読み込みに影響するのは、主に次のような要素です。
- ファイル容量： 動画そのもののデータ量
- 解像度： フルHDや4Kなど、映像の細かさ
- 圧縮方法： 画質を保ちながらデータを小さくする方法
- 読み込み方法： ページを開いたときに、動画データをいつ、どの程度読み込むか
たとえば、同じ10秒の動画でも、高解像度のまま書き出したものと、Web掲載用に圧縮したものでは、ファイル容量が大きく異なることがあります。
そのため、動画を使用できるか判断するときは、実際のファイルを確認するのが確実です。
すでに素材があるなら、クライアントから動画ファイルを共有してもらいましょう。
まだ動画が完成していない場合は、素材の形式や容量が確定していないことを伝え、実装方法や費用については確認後に判断する形にしておくと安心です。
スマートフォンでも同じように再生できる？
パソコンでは問題なく見えていても、スマートフォンでは同じ動作になるとは限りません。
特に注意したいのが、自動再生です。
一般的なブラウザーでは、音声付き動画の自動再生が制限されています。背景動画は音声をミュートして自動再生させる方法がよく使われますが、端末の設定や利用環境によって再生が制限される場合もあります。
また、パソコンの横長画面で作った動画をスマートフォンに表示すると、左右が大きく切れてしまうこともあります。
たとえば、人物が画面の端に映っている動画なら、スマートフォンではその人物が見えなくなるかもしれません。
デザイン前に、次の点を考えておきましょう。
- スマートフォンでも動画を再生する必要があるか
- 画面が縦長になっても、見せたい部分が残るか
- 動画が再生されない場合に、代わりの画像を表示するか
スマートフォンでは静止画像に切り替える、パソコンとスマートフォンで別の動画を用意するなど、見せ方を変える選択肢もあります。
ただし、どの方法が適しているかは、動画素材やサイトの構成によって異なります。
動画が止まっていても成立するデザインにする
背景動画を使う場合、動いている状態だけを想定してデザインすると、思わぬ問題が起こることがあります。
たとえば、動画の上に白いキャッチコピーを重ねるデザイン。
暗い場面では読みやすくても、明るい場面に切り替わると文字が見えにくくなるかもしれません。
また、動画が再生されなかったときに、背景が真っ黒になったり、見せたい情報が伝わらなくなったりするのも避けたいところです。
対策としては、動画の上に半透明の暗いレイヤーを重ねて文字を読みやすくしたり、動画の代わりに表示する画像を用意したりする方法があります。
特にトップページのファーストビュー（最初に画面に表示される範囲）では、動画を見なくても、何のサイトなのか、どこから問い合わせればよいのかが分かるようにしておきたいものです。
動画はあくまで演出のひとつ。必要な情報まで動画に頼らない設計が大切です。
クライアントにはどう返答すればいい？
動画を使いたいと言われても、その場で実装できると約束する必要はありません。
たとえば、こんな返答であれば、希望を受け止めながら確認を進められます。
背景に動画を使うことは可能ですが、動画の容量やスマートフォンでの表示方法によって、実装方法が変わります。
まずは使用予定の動画を確認させてください。表示速度なども考慮して、どのような見せ方が適しているか検討します。
そのうえで、技術担当へ相談するときは、次の情報があると話が進めやすくなります。
- 使用予定の動画ファイル、または参考動画
- 動画を表示したい場所
- パソコンとスマートフォンで希望する見せ方
- 自動再生やループ再生の希望
- 動画の編集や圧縮も依頼したいか
すべて決まっている必要はありません。未定の項目は、そのまま伝えて問題ありません。
動画を前提にデザインを固める前に相談できます
背景動画の実装は、動画を配置するだけで終わるとは限りません。
素材によっては圧縮や編集が必要ですし、スマートフォン用の表示調整や、動画が再生されない場合の対応も検討する必要があります。
こうした作業をどこまで見積りに含めるかは、受注前に整理しておきたいところです。
「この動画を背景に使える？」「スマートフォンでは画像に切り替えたほうがいい？」「動画の加工も含めて見積もれる？」
そんな段階からでも、技術的な相談はできます。
動画の素材と希望する見せ方が分かれば、実装方法や必要な作業を一緒に整理できます。
デザインを確定する前に判断に迷ったら、記事下の相談ボタンから、分かっている範囲をお知らせください。