先日、企業案件でWordpressでつくるHPの背景に動画をつくるお仕事をやりました。その際につかったWordpressテンプレートや、簡単にできる動画の埋め込み方法などをお伝えしていきます。
目次
背景に動画を埋め込むHPのつくり方
昨今、企業のコーポレートサイトにもWordpressを使う企業が増えてきました。増えてきたというか、もうほとんどの場合がそうだと思います。HPの制作に関しては、製作会社に頼むとどんなに安くても30万円をきるところはあまりなく、相場は50万円〜となっています。
一方で、中小企業だったりスタートアップだったりすると、「HPにそこまでお金をかけられない」というパターンも多いと思います。最近は、Wordpressのテンプレートがとても充実しているので、個人レベルでも1日でそれなりのクオリティのサイトがつくれるようになってきました。
企業HP向けのテンプレートも色々あるのですが、今回はそのなかでも「背景に動画を埋め込みたい」という企業さん向けの記事となっています。
動画撮影はどうするの？ということなのですが、これはまた別の記事で解説します。
[memo title=”MEMO”]企業HPの背景に動画を埋め込む前には、まず埋め込むための動画をご用意ください。おすすめの長さは体感ですが、30秒から1分くらいが妥当かと思います。自動再生・ループ再生されることも考慮して動画をつくってみましょう。[/memo]
また、今回使うテンプレートはVimeoかYoutubeにアップした動画のURLをコピペすることで再生できるようになります。そのため、HPの背景に使用したい動画はVimeoまたはYoutubeのどちらかにアカウントを作成し、あらかじめアップロードを完了しておいてください。
１．Wordpressテーマを選ぶ
HPの背景に動画を使うといっても色々とありますが、今回は主にサイトのヘッダー部分に埋め込む方法を解説します。背景に動画を埋め込みみはいくつか方法があります。
[list class=”ol-circle li-accentbdr acc-bc-before”]
- デフォルトで動画を埋め込む設定ができるテンプレートを使うこと。
- Jqueryを使ってhtmlに直接書き込むなどのコード変更を行うこと。
- 動画を埋め込む用のプラグインを使うこと。
[/list]
以上が、私が調べた結果、考えうる「動画の埋め込み方法」です。で、2番と3番はぶっちゃけプログラマーでもない普通のひとには難しいです。最も簡易にやろうと思ったら、迷わず1番のデフォルトで動画を埋め込む設定ができるテンプレートを使うこと」を選択てください。
先程も言いましたが、最近ではWordpressのテンプレートがかなり充実していまので、わざわざ難しい方法を選択する理由はありません。
というわけで色々と調べまして、私が今回使用したテンプレートの紹介と使い方を次から解説していきます。
２．DigiPressさんのVoyageurをインストール
私が今回使用したテンプレートは、DigiPressさんの「Voyageur」というテンプレートになります。こちらのテンプレートは、はじめから背景に動画を埋め込むことを想定してつくられたテーマなので、まず設定がとても楽です。あと、それ以外にもコーポレートサイトに適した設定が数多くあります。
また、価格もリーズナブルで通常版は
[list class=”li-yubi”]
- 1ライセンス – ¥7,880
- 3ライセンス – ¥12,880
[/list]
となっています。普通は会社のHPをいくつもつくることはないと思うので、1ライセンスで充分かなと。約8,000円程度で会社の動画入りHPがつくれるわけなので、すごいですね。
[memo title=”MEMO”]「ライセンス」というのは、1つのテンプレートを購入することで1サイしか使えない制限のことを指します。従来のWordpressテンプレートはZipファイル形式だったので、一度テンプレートを購入すると何度でも・いくつでも使いまわすことができました。
しかし、最近のテンプレートではそこに制限をかける代わりに1ライセンスごとのテンプレート料金はリーズナブルになってきています。[/memo]
ということで、まずはVoyageurを購入します。購入したら、すぐにテーマをインストール→ライセンス認証手続きを済ませてしまいましょう。ここまでできたら、次にカスタマイズに入っていきます。
３．Voyageurに動画を埋め込む方法
次に、背景に動画を埋め込む方法を解説します。テーマをインストールすると、ダッシュボードのなかに「DigiPress」というメニューが表示されるようになります。ここから「ビジュアル設定」へ。
ビジュアル設定に移ると設定項目がたくさん出てきます。背景に動画を埋め込む設定をするには、「背景デザイン／モバイルヘッダーカスタマイズ」へと進みます。
あとは、YoutubeまたはVimeoの動画IDを記入するだけで完了です。とても簡単。
[box class=”box33″ title=”Vimeoか、Youtubeか？”]Voyageurでは、VimeoかYoutubeにアップロードした動画を埋め込むことで動画を再生することができます。VimeoとYoutubeどちらがおすすめかということなのですが、どちらでも大差はないですが、Youtube動画のほうがオススメ。
最初、Vimeoを使っていたところ原因不明のエラーが起きて、動画が突然非表示に。そこでYoutubeに変更してみたらすぐに直り、そこから大きなエラーは起きていません。
若干の仕様の違いなのでしょうけども、こういうものはとりあえず大手サービスを選んでおいた方が無難です。[/box]
また、Youtube動画を埋め込む際には動画のIDをコピペするのですが、特定の動画のIDを探す方法を追記しておきます。アップロード済みの動画を再生すると、以下のようなURLが表示され、末尾に「v=◯◯◯◯◯◯◯◯」という感じでランダムにアルファベットが記載されていると思います。
これをコピーして、先程の「ビデオURLまたはID」の空欄にペーストしましょう。
４．スマホ用トップページも設定しておこう。
ここまで終われば、PCからホームページを見た際の背景動画は無事に表示されているはずです、。続いてスマホ用トップページに関して。
Voyagerは、スマホからのアクセスの場合には背景動画を表示させない設定になっています。というのも、スマホからのアクセスの際に動画を使ってしまうと、どうしても電波などの状況により読み込みに時間がかかってしまうからです。
なので、スマホからのアクセスの場合のトップページは、別で設定をし直さなければなりません。
[list class=”list-raw”]
- 何も表示しない
- スライドショー
[/list]
の3つのなかから選択します。個人的には、「スライドショー」にしておいて、静止画を使った動画のダイジェスト版みたいなものを何枚か設定しておくと良いのではないかと思います。
まとめ
以上が、Wordpressのテーマを使って企業HPの背景に動画を埋め込む方法でした。DigiPressにはVoyageur以外にも動画を背景に使えるテーマがたくさんあります。動画の埋め込み方法や設定画面などは基本的におなじなので、他のテーマでも興味があるものがあればぜひぜひお試しください。
このように、テンプレートをうまく使うことで、クオリティが高くスタイリッシュなサイトをつくることができます。