ここ最近、背景やメインイメージに動画を使用したウェブサイトが増えてきています。当ホームページのトップページでも、メインイメージの背景に動画を使用しています。

HTML5の登場で動画挿入が簡単に

この傾向の最大の要因は「HTML5」の存在にあります。HTML5とは、ウェブサイトを構築する基本的な言語である「HTML」の最新バージョンで、表現力を向上させる新しい機能を想定して作られていることが特長です。
これまでウェブサイトに動画を挿入するには、複雑なスクリプト(プログラムの一種)を記述する必要がありましたが、HTML5の機能を活用することで、大幅に簡略化できるようになりました。

動画をデザイン要素のひとつとして

動画を背景に使用することも簡単になったため、例えば製品写真の背景に動画を使用したり、当ホームページのように上に重ねたコンテンツをスライドショーにする、といったこともできるようになりました。
また、あらかじめ動画にキャッチコピーなどのエレメントを組み込んでおくと、動画の画質が低い場合ボケて視認性が落ちてしまいますが、動画とエレメントを別々にしておくことで、画質に左右されることなく表示することができます。

注意点としては、ユーザーがHTML5の動画機能に対応していない古いタイプのブラウザを使用している場合と、表示が変わってしまう一部スマートフォンへの対策です。この場合動画ではなく、代替えの静止画を用意しておく必要があります。