スマホサイトの背景に自動再生する動画を設置する方法

スマホでも通信環境が強くなってきていることから、多くのコンテンツがスマホでも動画を再生するアプリが増えてきました。2018年6月にインスタがリリースしたIGTVは縦型の長編動画を再生することが前提となっており、今後どのようにYouTubeと対抗し合っていくのかが注目されるなか、スマホサイトはどうでしょうか？Webサイトをスマホのブラウザで開く環境下での動画コンテンツを積極的に表示するサイトは少ないですが、ちらほらとWebサイトのトップに動画を再生するスマホサイトも出てきているように思います。

インスタの新アプリ『IGTV』どう使う？

2018.06.22

弊社では、SEO対策など様々な要因から基本的に制作するサイトは動画を入れることを推奨しており、スマホにもできるかぎり読み込み速度に影響のない形で入れています。動画制作を行う会社なら、この動画ファイルをできるかぎり容量を削ることは可能ですが、すでに完成している動画の容量をどう削ったらいいのか、方法が分からない企業様も少なくないと思います。今回はそういった完成された動画における、スマホサイトのトップ動画を設置する方法をいくつかご紹介いたします。
参考：Google検索結果で1ページ目になる確率が53倍!?

人材採用サイトは特に効果大！スマホサイトに背景動画を設置しているサイト

例1. ASUE株式会社 人材採用サイト

新卒・中卒の人材採用・リクルーティング専用サイトのメインビジュアルの背景に動画が設置されています。約1分の尺で、社員が働く様子を展開し、求職者に会社で働くイメージを具体的に連想させています。

「企業イメージアップとして動画を作ることが目的でしたが、嬉しいことに応募してくる人にも意外な変化が起きました」とのこと。

動画をトップに設置したAsueの人材採用サイトの効果

採用動画で応募のミスマッチを減らす（Web広告代理店の事例）

2017.08.25

例2. 株式会社夢楽染 人材採用サイト

背景動画が会社の雰囲気を無意識的に見ることで、会社のイメージをなんとなく理解できる効果があります。「応募者数が多くなりました。それに加え、ひとつひとつの面接の質が上がりました」と語る田中次長。

夢楽染の動画と人材採用サイトの企画・制作エピソード

採用動画をトップページに配置してインパクトを残す

2016.09.05

スマホサイトに背景動画を設置

動画の自動再生は現状PCサイトばかり

容量の大きさが理由で、スマホサイトに背景動画を設置するサイトは非常に少ないです。大手企業のサイトでも、一時は背景動画を設置していたのですが、Googleがページ読み込み速度もSEOに影響を与えることを公表してからは、静止画を背景に戻すサイトをたくさん見てきました。でも、例えば採用サイトならユーザーのほとんどが大学生や20代と想定されます。パソコンではなくスマホで就活するユーザーが多いことを考えると、スマホサイトのトップ背景に動画を設置し、企業のイメージにインパクトを与えたいものです。設置できない理由はスマホの回線速度の問題。まだ4G回線では動画の重くてサイトがなかなか表示されない、なんてことがあるかと思います。つまり、動画の容量を最小限に落とすことができれば、スマホサイトでも背景動画を設置できるということになります。

スマホサイトへの設置方法

一昔前まで、iOSでは自動再生ができなかったのですが、iOSとAndroidともに自動再生が可能になりました。ただし、safariやchromeが古いと再生されないのはもちろんのこと、音声なしのミュートでないとだめということ。スマホサイトの背景動画に音声を出したいというニーズはなかなかないと思いますが、あらゆる状況に応じ、考えられるふたつの選択肢をご紹介します。

YouTubeを背景動画にする

動画をYouTubeにアップロードし、それを背景動画として使うという手法です。YouTube IFrame Player APIにて日本語のリファレンスがあるので実装も簡単です。上述で問題になったミュート再生や、繰り返し再生、各種表示を非表示にするなど、あらゆるオプションを関数で制御できます。

MP4ファイルの「再生」ではなくGIFアニメを「表示」させる

GIFアニメなら、JPEGやPNGと設置方法は同じになるため、あたかも静止画像を背景にするような方法で設置可能となります。

GIFアニメすることのメリット

• 容量をかなり落とすことが可能
• 自動再生が可能

GIFアニメにすることのデメリット

• 音声がない
• どうしても画質が荒れる

音声がどうしても必要な場合はGIFアニメは選択肢から外れますが、ほとんどのスマホサイトでは音声を出さないと思います。画質が荒れることに対しては、ドット（斑点）でごまかしたり、動きが遅い動画ならフレームレートを落としてもその変化に気付きません。

動画をGIFアニメに変換する方法

動画ファイル（MP4やMOV）からGIFアニメへの変換ができるオンラインサービスはたくさんありますが、PC上にアプリをインストールするのは面倒でセキュリティ的にも問題があるので、アプリのインストールなしで動画をGIFアニメに変換できるオンラインサイトを5つピックアップしておきました。動画の尺や編集したいニーズに合わせてお選びいただけたらと思います。

70MB→12MBに容量削減成功。動画ファイル→GIF変換サービスの使いやすさNo1は「ACONVERT」

動画をGIFアニメに変換できるオンラインサービス5選（アプリインストール不要）

2018.05.17

一番大事なことは、動画を制作する一番最初の段階

どうしてもすでにある動画の容量を削ることに一生懸命になりがちですが、一番大事なのは動画を制作する段階にあります。すでに制作された動画の容量を大きく削ることは技術的に可能（また別記事にてご紹介します）ですが、それでも限界があります。サイトに埋め込む動画を作ることが目的なのであれば、弊社では容量を極力抑えられるよう企画・撮影するようにしています。

もし外部委託せず会社内で動画を内製したい場合はこちらをご参考ください。

自社内で動画を作る時に準備したい機材とコスト感

2017.01.13

自社内で動画を作る時におさえておきたい3つのポイント

2017.01.13

YouTube向けの動画をそのまま使っていいのか…？

YouTubeにすでに自社のプロモーション動画をアップされているのであれば、それを流用することは可能です。ただし、YouTube向けの動画とサイト上に自動表示する動画は別物と考えたほうがベターです。理由としては、サイトを開いた瞬間に何を事業とする会社なのか、サービスなのかがすぐに分からないと、ユーザーはすぐスクロールしてしまう、最悪の場合サイトから離脱してしまいます。他には、動画とその上に配置するテキストとのコントラストやポジションなど様々な要因が適合しないことがほとんどだからです。サイトを開いた瞬間にうわっすごい！っというインパクトを与えるには、それ専用の動画を表示させるのがベストです。また、容量を削減するのにも限界が生じてしまうのも理由のひとつです。とはいえ、やはり動画制作にはコストもかかるので、ケースバイケースで対応するとよいでしょう。

弊社ではサイトのトップページに再生させる動画のみの制作依頼も承っておりますので、お気軽にお問い合わせくださいませ。