※2016年8月2日記事を更新しました。

2016年7月29日にリリースしましたORIONでは、美しい映像をファーストビューで伝え、あっという間にサイトの虜にします！

ORIONのデモサイトは、世界的なラグジュアリーリゾートなホテルのツアーサイトをイメージして作成されています。
https://tcd-theme.com/tcd037

美しさとラグジュアリー感であっという間に虜にされること間違いありません。

このテーマのように、背景に動画を使うだけで、サイトの雰囲気ががらっと変わり、オリジナリティを伝えることができます。一番のおすすめはORIONを使用していただくことですが、従来のTCDテーマにも背景動画を使用したいという人向けに記事を作成しました。ご活用ください。

canvasを用いた動画背景のカスタマイズ手順

今回は、従来TCDテーマに背景動画を組み込む方法の紹介いたします。
また、従来のテーマでも動画背景を行いたいという方には、、canvasを用い、動画背景のデモサイトを構築する方法を紹介します。

今回作成したサイト
douga01
http://demo.tcd-theme.com/sample01/

動画背景のカスタマイズ手順

それでは動画を背景にしたサイトの手順を解説していきます。作業としては下記の２点です。

  1. 背景にする動画素材を用意する
  2. 動画をサイトに記述する

動画を背景にすることは難しそうですが、案外簡単にできます。

背景にする動画素材を用意

動画素材を用意

動画を用意するには、下記の４つの方法があります。

  • 動画を自分で撮影する
  • 動画をプロに撮影してもらう
  • 有料動画を購入する
  • 無料動画を使用する

動画を自分で撮影する
まず最初に思いつくのは自分で撮影する方法です。自分でイメージするサイトをそのまま伝えることが出来ます。現在ではiPhoneなどの解像度も上がって来ていますので、スマートフォンやデジカメで気軽にそれなりのものを撮影できます。ただし、自分のイメージ通りにとるというのは結構難しいです。

動画をプロに撮影してもらう
確実ですが、お金はかかります。クラウドワークスなどでお願いしてみてもいいかもしれませんが、しっかりとしたイメージがなければ、希望の動画は作れないかもしれません。

有料動画を購入する
写真素材を販売しているサイトの「Fotolia」などでは動画の販売もしています。有料だけあり、いいものが揃っていますので、早く希望のものを手に入れたい場合はこちらを活用してもいいかもしれません。

無料動画を使用する
最近では無料でも良い動画素材があったりします。今回のデモサイトでは「Mazwai」の動画をお借りしました。商用も可能なので、こちらを活用するのもおすすめです。

動画素材の選び方

「短い、静か、軽い」が動画選びのコツです。

動画の長さは短く
長い動画はファイルサイズが大きくなる上に、最後までみられません。また逆に短過ぎると焦りを感じてしまします。様々なサイトを参考にしましたが、動画は長くても20秒〜30秒程度が良さそうです。

動画は静かにする
サイトを訪れた時にいきなり音が鳴るのはマナー違反です。どうしても音声を流したい場合は、選択できるようにしましょう。また先ほど紹介した「Mazwai」などは音声も入っていますので、音声データを削除する加工などが必要です。ムービーメーカやimovieなどを使うと簡単にできますので、極力音声データは削除しましょう。

動画は極力軽くする
読み込みの遅いWebサイトは、ユーザーの離脱率が高くなります。動画のサイトはどうしても容量が大きくなってしまいます。可能な限り軽いファイルにしましょう。

動画をサイトに記述する

それでは上記に気をつけ用意した動画をサイトに組み込んでいきます。

まずは画像と動画ファイルをワードプレスへアップロードします。
「メディアライブラリ」より「新規追加」でファイルをアップロードします。
douga02

以下のようなコードをタグ直下内に書けばOKです。

<video autoplay loop poster="http://demo.tcd-theme.com/sample01/wp-content/uploads/2016/05/douga.jpg" id="bgvid">
  <source src="http://demo.tcd-theme.com/sample01/wp-content/uploads/2016/05/douga.mp4" type="video/webm">
</video>

今回のcanvasでは下記のファイルを書き換えました。
編集するファイル:index.php
編集する箇所:
編集前

<?php $options = get_desing_plus_option(); if (!is_paged()): get_header(); ?>

<?php if (!empty($options['index_main_image1'])) { ?><img id="slider_base" src="<?php esc_attr_e( $options['index_main_image1'] ); ?>" alt="" /><?php }; ?>
<div id="slider">
 <?php for($i = 1; $i <= 3; $i++): ?>
 <?php if (!empty($options['index_main_image'.$i])) { ?><img src="<?php esc_attr_e( $options['index_main_image'.$i] ); ?>" alt="" /><?php }; ?>
 <?php endfor; ?>
</div>

↓
編集後

<?php $options = get_desing_plus_option(); if (!is_paged()): get_header(); ?>
<video autoplay loop poster="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.jpg" id="bgvid">
  <source src="http://demo.tcd-theme.com/sample01/wp-content/uploads/2016/05/douga.mp4" type="video/webm">
</video>

合わせてCSSの記述も追加しています。この内容はstyle.cssに記述しても大丈夫です。

<style type="text/css">
video#bgvid {
  min-width: 100%;
}</style>

スマートフォンへの対応

レスポンシブ対応を行う為には、下記を追加します。
編集するファイル:style_sp.css
追加コード:

video {
  width: 100%;
}

以上を設定すると、動画背景のサイトが完成します。
douga01
http://demo.tcd-theme.com/sample01/

まとめ

難しそうに思える動画背景のサイトですが、やり方さえわかってしまえば簡単に実装はできます。ただし、ファイルが重くなる事や見えにくくなることも考慮すると導入するには検討が必要です。とにかくインパクトを与えたいといったサイトでは良いかもしれませんね。