ウェブサイトの印象を高めるにはビジュアルな表現にこだわるのが基本です。企業や団体であれば魅力的なロゴを使ったり、個人ならオリジナリティあふれる写真を乗せたりするのがおすすめです。その中でも、背景動画に注目が集まっています。ページの背景が動くので、まるで映画でも見ているようなインパクトがあるからです。WordPressでサイトを運営している人の中にも背景動画に興味を持っている人も多いでしょう。この記事では背景動画を設置しているサイトの事例や、比較的簡単にできる背景動画の挿入方法を紹介していきます。
目次
背景動画を挿入しているサイト事例
実際に背景動画が挿入された魅力的なサイトの例をタイプ別に3つ紹介します。1つ目は、株式会社TOKYO BASEのサイトです。このサイトは、企業としての顔となる「コーポレートサイト」と呼ばれるタイプといえます。自社ブランドやセレクトショップを展開しているTOKYO BASEの商品イメージを全面に押し出すため、背景動画が効果的に使われています。取り扱っている服は、アクティブとエレガンスが共存する都会的なものです。実際に着こなしたときのイメージが強烈に伝わるように、動きのある背景動画が特徴的なデザインといえます。
2つ目は、嬉野茶時公式オンラインショップのサイトです。このサイトは「ECサイト」というタイプにあたります。佐賀・嬉野町の伝統文化を広めるためのプロジェクトである嬉野茶時の魅力を伝えるために、お茶をいれるプロセスを背景動画に用いているのです。お茶をいれる人物の手元にフォーカスした映像は、まるで目の前にいるかのような臨場感が味わえます。また、おしゃれなカフェ風の場所で、西洋料理のシェフのような格好をした人物がお茶をいれるという演出は、伝統的な商品の現代的な解釈といえるでしょう。商品イメージに新しい付加価値を加えるという意味で、効果的な背景動画の使い方になっています。
3つ目は、500色の色えんぴつ TOKYO SEEDS｜FELISSIMOのサイトです。このサイトは、毎月商品を届ける「FELISSIMO」が提供し、毎月20本ずつ色鉛筆が届く「TOKYO SEEDS」の「ブランドサイト」という位置づけです。背景動画には、500種類の色のバリエーションがわかる工夫が随所に盛り込まれています。一部の文字にはアニメーションで動きが加えられて、ページ全体に躍動感が溢れているのです。また、スライダーを動かすと、すべての色が確認できるインタラクティブな動的ページと組み合わされて、ユーザーの購買意欲を刺激します。どんな商品を紹介しているのかが直感的にわかる、インパクトのある背景動画を活用したサイトといえるでしょう。
プラグインを使用しない場合の実装方法
ウェブページに背景動画を実装するにはいくつかの方法があります。基本は、HTML・CSS・JavaScriptを編集する方法です。HTMLはHyper Text Markup Languageの略で、ウェブページの基本的な枠組みを作ります。HTMLだけでもページは成立しますが、そこに装飾的効果を加えるのがCSSです。CSSはCascading Style Sheetsの略で、単にスタイルシートと呼ぶこともあります。CSSを使うと、複数のHTMLで書かれたページで構成されたサイトに対して、共通のデザインを使って統一したイメージを与えることができます。
また、ウェブページを動的な効果で演出したいときには、JavaScriptを使います。たとえば、ページのロゴにマウスをかざすと表示が変わったり、背景画像をスライドさせたりするときに必須のものです。ただし、JavaScriptを最初から記述するのは相当のスキルが要求されます。そのため、JavaScript扱いやすくするために考えられたJQueryを使うという方法が一般的です。JQueryには、WordPressと同じような多数のプラグインが公開されています。うまく組み合わせることで比較的簡単に動的効果をもったウェブページを作ることができるのです。
なお、HTMLのタグを使って、ウェブページに動画を埋め込みたい場合には、iframeタグを使います。iframeとはinline frameの略です。インラインフレームとは、1つのページの中に、他のページ（これをフレームと呼びます）を表示することを指しています。動画を読み込むには、YouTubeなどの動画共有サイトに動画をアップロードしておき、そのURLをsrc属性で指定する方法が最も簡単でしょう。
ここで、URLとはUniform Resource Locatorの略で、インターネット上の住所のようなものです。「https://www.」などで始まる動画などの情報が置かれている場所を示します。iframeタグの属性の1つであるsrc属性は、このURLをページに導入する役割を果たすのです。読み込んだ動画をブラウザのフルサイズ背景動画として表示するには、「tubular」などのjQueryプラグインを導入します。
背景動画を設置する方法
背景動画を設置する準備として、まず動画を用意しましょう。動画を入手するには大まかに4つの方法があります。1つ目は、自分で撮影する方法です。撮影する機材にこだわらなければ、スマートフォンでも撮ることができます。自分で撮るので、最もイメージに近いものができる可能性があり、また最も手軽にできる方法です。2つ目は、プロに撮影を依頼する方法があります。自分で撮影してみても、納得の行く動画ができなかったときにはおすすめです。料金は発生しますが、相応のクオリティの動画が得られることでしょう。
3つ目は、既存の有料動画素材を用いる方法です。写真などの画像を有料で販売するサイトで、動画を扱っているところもあります。キーワードで検索してみて、イメージが合えば、クオリティの高い画像をコストパフォーマンス良く手に入れることができるでしょう。4つ目は、無料動画素材を使う方法です。ネット上で無料で提供される素材については、著作権について注意する必要があります。著作権フリーであることを確認してから利用しましょう。
HTMLの標準タグを使って実装するには、HTML5から実装されている「videoタグ」を使用すると便利です。videoタグには動画の再生をコントロールできる属性がいくつか用意されています。たとえば、＜video src=” 動画ファイルとそのパス ” autoplay loop＞とコーディングすると、ブラウザが開いた時に、動画の自動再生が繰り返されます。ここで使われるautoplay属性は自動再生を、loop属性は繰り返し再生を指定しているのです。なお、背景画像ではあまり使わないかもしれませんが、再生・一時停止・ボリュームなどのコントローラーを表示できるcontrols属性も役に立つ場合があります。
背景動画を設置するメリット
ビジュアルイメージには静止画と動画があります。たとえば、見たものをそのまま映すメディアとして、写真などは静止画、ビデオカメラで撮影したムービーなどは動画です。同じ対象を映した場合でも、インパクトがあるのは動画です。人には動く対象を目で追ってしまうという動物的な習性があります。背景動画はこの本能的ともいえる性質を利用しているのです。もちろん、静止画にしか表現できない世界観はあります。ただし、ウェブサイトでユーザーの興味を引きつけるという目的を考えると、動画のほうがより効果的なメディアといえるのです。
企業のイメージを映像で表現したいときなどに背景画像は有効です。たとえば、企業のコンセプトは「人に優しい企業」や「社会に貢献する組織」などのように、通常はテキストで表現されます。このテキストの背景に、社員がボランティア活動をしているシーンなどの動画を流すと、企業のコンセプトが豊かなイメージとして伝えることができるのです。また、とくにメリットが高いのが、商品やサービスを紹介するサイトです。どのような商品やサービスが提供されるかどうか、テキストによる説明だけではわかりにくい時があります。その場合には、テキストの背景に、実際に使用している商品や受けられるサービスを流します。要するに、動画を視聴覚補助資料として使うのです。
背景動画を挿入するのに不向きなサイトとは？
背景動画が入っているウェブページでは、ユーザーの意識が動画に向かいます。インパクトを重視する背景動画であれば、全画面表示にすることが多いため、動画の内容への意識がさらに強くなるのです。ここで、ひとつの矛盾が起こります。ウェブサイトを提供する側は、自社の商品やサービスに関しての情報提供の場としてサイトを運営しています。それは主に文字情報で提供されますが、背景動画のインパクトが強すぎると、本来の目的である情報への関心が薄れてしまう危険があるのです。
また、ページごとのコンテンツの多いサイトでは、動画を表示するスペースの確保が難しい場合もあります。動画には、なるべく広いスペースを確保したほうがインパクトが強くなります。ところが、情報量が多いページでは、小さなスペースにするか、背景動画にするかの選択になるのです。また、背景動画を採用するにしても、その上に文字コンテンツをかぶせながら、動画と文字のバランスをとる表現は簡単ではありません。より高度なデザインスキルが必要とされ、コストも上がります。
さらにいえば、メインとなるユーザーが使っている表示デバイスの問題です。総務省がまとめた平成29年度版の情報通信白書では、インターネットへアクセスするデバイスの利用率が、パソコンからスマートフォンへ移行する傾向が指摘されています。とくに、40代以下の世代ではスマートフォンの利用率が高いのです。たとえば、このような世代を対象としたECサイトなどでは、多くのユーザーはスマートフォンでアクセスしてくることが考えられます。その場合に、凝った背景動画が自動再生されるようになっていると読み込みに時間がかかり、ページが表示される前に離脱する可能性があるのです。
スマートフォンやタブレットなどのモバイルデバイスからのアクセスを考慮して、デバイスごとの最適な表示を考慮したウェブサイトデザイン手法があります。これを「レスポンシブデザイン Responsive Design」と呼びます。レスポンシブなサイトにするためには、背景動画の表示はパソコンなどからのアクセスに留めましょう。スマートフォンなどモバイルデバイス用には、背景動画と同じイメージが表現できる静止画を用意するのです。
背景動画を挿入する際の注意点
背景動画を挿入する際には、いくつかの注意点があります。ポイントはユーザーの立場でデザインされているかどうかという点です。最もデリケートな問題の1つが、背景動画のBGMです。魅力的な映像には、相応のBGMを添えたほうがユーザーに与えるインパクトは強まります。そのため、いくつかのウェブサイトでは、背景動画に合わせたBGMが流れる設定になっているケースがあるのです。これが問題になることがあります。たとえば、自宅ではなく図書館などの静かな場所でアクセスしてきたユーザーなら、突然流れる音楽に驚いてしまうかもしれません。
そうなると、そのページから即座に離脱してしまうことも考えられます。また、ブラウザのタブをたくさん開いている場合は、BGMを流しているサイトのタブがどれか迷うこともあるでしょう。ユーザーフレンドリーなサイトであることを第一に考えるなら、ページのわかり易い場所に音量コントローラーを表示しておきます。もしくは、初期設定ではBGMの自動再生をオフにしておくほうが好ましいケースもあります。
【おすすめプラグイン】1.Elementor
多機能さで注目されているWordPress用のプラグインであるElementorは、背景動画を挿入するときにも便利に使えます。背景動画に関しては、インスタントドラッグアンドドロップページビルダー・即時ライブ編集・インスタントページロードなど、サイトデザインを容易にする機能が充実しているのです。インストール後に有効化すると、新規にページを追加するときの編集画面に「Elementorで編集」ボタンが表示されるようになります。ここからElementorの編集画面に移行するのです。編集画面は2つのエリアで構成されていて、左側のコラムには「編集要素」と呼ばれるボックスが並んでいます。
この中に、今回の記事のテーマになっている背景動画が挿入できる「動画」ボックスが用意されているのです。操作は、このボックスを右側に表示されたページ表示イメージの枠の中にクリック＆ドラッグするだけです。すると、右にはサンプル画像、左には動画の編集・設定画面が表示されます。表示させたい動画ファイルはメディアライブラリにアップロードしておいたものを選択します。YouTubeなどの外部ソースにリンクを張ることも可能です。
まとめ
ウェブページへの背景動画の挿入は、HTMLやCSS、JavaScriptなどのコーディングから始めるには相応のスキルが必要になります。ところが、WordPress用に提供されるさまざまなプラグインを活用すれば、比較的簡単に背景動画を扱えるようになるのです。
コメントを残す