2019年6月7日 / 最終更新日 : 2019年6月7日 WEB-KING コラム

動画を背景にしたホームページ制作

ホームページに動画を入れるメリット・デメリット

ホームページに動画を使用すると、動画は、文章よりも情報量が多く、うまく使えば伝えたいことををわかりやすく伝えられるので効果的です。情報化社会への移り変わりが加速する今後は、ホームページに動画を使用するサイトが増えてゆくと事となるでしょう。
文章や画像だけでは伝わらない時や強烈な印象を与えたいときなど動画をを入れることをお勧めします。

動画を使用したホームページのメリット

静止画以上にたくさんの情報を伝えられる

例えば商品説明ををするような場面では、文章でダラダラ書くより音声で伝えたほうがもちろんユーザーにはより具体的に伝わります。

雰囲気を伝えられる

使用する動画にもよるのですが、コーポレートイメージをよりかっこよく雰囲気を伝える事ができます。

動画を使用したホームページのデメリット

サイトが重くなる

デバイスの進化により軽く動画を見ることも可能になりましたが、情報量が多い分、画像や文章に比べれば重たいです。ただ、ページ表示までに3秒以上かかると、40%のユーザーがページ表示前に離脱するとも言われてます。
GoogleもPageSpeed Insightsというツールを提供するくらいなのでSEO対策にもマイナスの可能性もあります。

通信量がたくさんかかってしまう

スマートフォンでWIFIのない環境で閲覧するとパケット代金が馬鹿にはなりません。YouTube見てたらあっと言う間に速度制限がかかったという話をよく聞きます。

静止画に比べ撮影が難しい

今ではスマホで簡単に取れますが、プロに頼めばコストはそれなりに掛かります。そのためにドローン買ったり、練習したりも時間もお金もかかります。コーポレートイメージでしたら、販売してるサイトから購入できます。

SEO対策に弱い

SEO対策とは検索エンジン最適化という手法のことですが、動画でいくら喋ろうが検索エンジンに伝わらないので文章ダラダラ書いたほうが検索エンジンの対策には有利だと考えられます。

動画をホームページに使用する方法

※ここからは、私が手持ちのソフトを使用してクライアントに提案した方法です。もっと良い方法があると思いますので読み流していただければ幸いです。
条件として動画の上に、会社のキャッチフレーズを掲載してくださいとのことでした。
クライアントから渡された動画は320MBの大容量ののmovという形式のファイルでした。レンタルサーバーにもよりますが、WordPressは、phpという言語で構成され、アップロードできるファイルのサイズがphp.iniで最大サイズを変更できますが、大抵がデフォルト5MBを20MBまでにあげるくらいです。仮にこのサイズを100MB以上にしたところでサイトが重くなるすぎ、開かないサイトになってしまいます。

ソフトを使用して動画に文字をのせてみる

動画と「動画に文字を乗せる」という文字が書かれた画像をIMovieというmac用のソフトで合成してみました。※白い文字なので実際は黒い背景系のない透過pingを使用しました。

IMovieで動画と文字の静止画像を合成したらファイルの容量が大きくなってしまいWordPressのアップロードサイズの２０Mを越してしまったので、YouTubeを経由して動画を貼ることにしました。ただ、Youtubeのロゴが出てしまうのでクライアントからNGが出てしまいました。

容量を落とし直接動画をアップロード

WordPressも便利になりました。ビジュアルモードで動画をクリック→鉛筆マークから編集ボタンで自動再生や繰り返し再生の選択ができます。
YouTubeにアップした動画は100M でこの動画は17Mです。この小さな画面ではさほど変わりはないのですが、メインのPCフルサイズで見た場合動画が劣化してしまい残念な結果になってしまいそうです。
IMovieで動画編集した場合きれいに動画の容量を落とせないので別の方法を考えます。

いろいろ悩みつつググっていたらOnLine Video Converterというサイトが有り、試してみたところ納得のゆく範囲で容量を落とすことができました。しかし文字を乗せるのに手持ちのソフトは使えません。容量が上がってしまいます。

動画を背景にして掲載する方法

結局たどり着いたのが合成が無理なので、動画を背景にする方法です。静止画なら、backgroundプロパティを使用して楽ちんなのですが動画の場合適用しません。しかしposition プロパティを使用することでできそうです。

relative:相対位置への配置となります。　　文字
absolute: 絶対位置への配置となります。　　動画
スタイルシートで制御します

.video-wrap {
position: relative;
overflow: hidden;
}

.dougaMoji{
position:absolute;
font-size: xx-large;
font-weight: bold;
color: #FFF;
top: 50%;
height: 100%;
width: 100%;
}

<div class=”video-wrap”>
<div class=”dougaMoji”>
<p style=”text-align: center;”>動画に文字を乗せる</p></div>
<div align=”center”><video autoplay loop src=”https://web-king.jp/wp-content/uploads/2019/06/Movie.mp4″ autoplay loop width=”960″ height=”540″ ></video></div>
</div>
<!– /.video-wrap –>

動画に文字を乗せる

この方法で動画と文字を重ねれば、動画を加工しなくてもきれいに掲載できます。文字とともに会社のロゴを入れてもかっこいいと思います。

スマートフォンの場合の動画処理

スマートフォンで動画を見るとパケ代は当然かかります。それをなんとかならないかと考えました。
「そうだ、アニメーションGIFがある。」

私の場合MACユーザーですので、無料で使えるPic Gif Liteというアプリがありました。これで動画をアニメーションGIFに変換してスマホからのアクセスをgifファイルに切り替えます。

/* パソコンで見たときは”pc”のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは”sp”のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

<div class=”video-wrap”>
<div class=”dougaMoji”>
<p style=”text-align: center;”>動画に文字を乗せる</p></div>
<div class=”pc”><div align=”center”><video src=”https://web-king.jp/wp-content/uploads/2019/06/Movie.mp4″ autoplay=”autoplay” loop=”loop” width=”960″ height=”540″></video></div></div>
<div class=”sp”><img src=”https://web-king.jp/wp-content/uploads/2019/06/movie.gif” alt=”アニメーションGIF” width=”960″ height=”540″ class=”aligncenter size-full wp-image-1715″ /></div>
</div>
<!– /.video-wrap –>