• HOME >
  • ブログ一覧 >
  • 【Web制作】スマホのブラウザでも動画を自動再生する方法

2016.11.28

【Web制作】スマホのブラウザでも動画を自動再生する方法

特に最近、PCサイトを開くとメインビジュアルに動画が自動再生されるサイトをよく見かけます。動画制作も広く浸透してきている影響もあり、流行りつつあります。Webサイトやアプリなどで広くサービスを提供する会社では当たり前の手法となってきました。参考までに2つ、同手法が取られているサイトをご紹介します(閲覧時はパソコンのブラウザで確認すると自動で動画が再生されるサイトが見られます)。

例1. MFクラウド

MFクラウドのサイトトップページでの動画再生

例2. 石垣島を感じる52の物語

「石垣島を感じる52の物語」のトップページの動画再生

動画の自動再生は現状パソコンサイトばかり

現状、iOSではmp4ファイルを自動再生できません。MFクラウドも石垣島のサイトも、スマホサイトだと写真がスライドするかプレイボタンをクリックしないと動画が再生されません。おそらくこれが今のサイト制作のトレンドです。しかし、弊社はWebと動画の制作、ひいてはそれらを掛け合わせたプロモーションを得意としているため、どうしても動画を再生したかったので、どうやったらこれを実現できるか模索しました。

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

そこで考えたのが、GIFアニメでした。GIFアニメなら写真を配置させる概念と全く同じ。これならiOSでもAndroidでもプレイボタンをクリックせずにGIFアニメが自動で「表示」されます。

GIFアニメがいいとされるもう一つの理由「ファイルサイズ」

スマホサイトでは4GやLTEなど環境下で開かれることがほとんどです。となると、動画ファイルの容量があまりにも大きすぎると読み込みに時間がかかり、かつパケット通信量へも負担をかけてしまうという、ユーザー目線から考えると最悪です。そのため、スマホサイトではできるだけサイズを小さくすることがユーザーファーストとして大切であり、その概念からしてもGIFアニメは容量を小さくすることができるのでいいところ尽くめです。

例えば、弊社のPC用サイトのトップページ動画のmp4ファイル容量は約70MBですが、スマホ用サイトのGIFアニメは12MB、約83%容量削減できました!(削減のコツはまた別記事にてご紹介します)

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

そもそもGIFアニメにするためにはどうしたらいいの?っていうご質問をよくいただきますが、非常に簡単です。いろんなアプリやソフトなど試しましたが、筆者が行き着いた最高のサービスはApowersoftの動画からGIFアニメに自動変換してくれるオンラインサイト。動画ファイルをアップロードして変換されたGIFファイルをダウンロードするだけです。PC上にソフトをダウンロードするプロセスは必要ですが、変換速度も速く、フレーム数も1から15fpsまで選ぶことが可能。自動的に容量縮小してくれるため、グッとファイルサイズを節約することが可能です。

apowersoft

参考:https://www.apowersoft.jp/free-online-video-converter

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

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

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

記事を書いたひと

superstarkei

森本 圭

代表取締役 CEO

Web周りすべてのコンサルタント・ディレクターとしてご相談を承ります。デザイン、コーディングそしてインターネット広告の運用も私自身が手掛けておりますので、内容の濃いコンサルティングが可能です。