1. トップページ
  2. コラム
  3. 【動画圧縮】Webサイトに埋め込む動画を軽量化する方法【おすすめソフト紹介】

【動画圧縮】Webサイトに埋め込む動画を軽量化する方法【おすすめソフト紹介】

動画を比較的簡単に制作できるようになり、WEBサイトに動画を埋め込むことが当たり前になってきました。
今回は、WEBに動画掲載する方法と注意点をご紹介します!

適切な埋め込みができていないと、せっかくの動画の効果が半減してしまうのでぜひチェックしてみてください。

 

WEBサイトに動画を埋め込む

 

動画ファイルサイズの目安

基本的に動画ファイルは容量が大きいため、そのままWEBサイトに掲載することはお勧めできません。
Videoタグで埋め込む場合には、目安として10MB以下に、できれば5MB以下のファイルサイズに抑えたいところです。

 

動画の埋め込み方法

  • ・YoutubeやVimeoなどにアップロードして外部リンクとして埋め込み
  • ・HTMLのVideoタグで埋め込み

Youtubeにアップした動画であればファイルサイズなどは気にする必要はありません。
ですが外部リンクとなるため、可能であれば直接埋め込みたい!

 

そこで、サイトトップ(FV)動画や、サイト背景などはVideoタグによる埋め込みが一般的に使われます。
動画の埋め込みは埋め込んだ動画のファイルサイズによってサイトが重くなってしまい、表示が遅くなってしまうことがあります
ユーザーが動画を見始める前に離脱してしまう可能性も…。

 

”動画圧縮”は埋め込みにおいて最重要

30秒程度の動画でも200MBを超えてしまうこともよくあります。
前述しましたが、できれば動画ファイルサイズは5MB以下におさえたいところです。
そこでファイルサイズを小さくするために必要なのが、動画圧縮です!
ですが、サイズを小さくするあまりに画質が落ちてしまい、せっかく作った動画の質が落ちてしまうことも…

 

圧縮に失敗した時のデメリット

ファイルサイズが大きすぎると・・・
  • ・サイト読み込み速度が低下
  • ・ユーザーにとってストレス
  • ・SEOにも悪影響

 

画質が劣化しすぎると・・・
  • ・動画内容が伝わらない
  • ・動画制作に費やした時間が無駄に

 

ユーザーは快く思わず、サイトには悪影響を及ぼし、工数まで無駄になるなんて散々ですよね…

 

 

おすすめソフト『HandBrake』

私が主に使っているのは、 HandBrake というソフトです。
いくつか他のソフトも触ってみた中では、一番画質を保ちつつ軽量化できました。
設定項目は多いですが、設定内容をプリセットに保存しておくことができるので、一度設定してしまえばあまりいじる必要はありません。

設定内容については次回ご紹介しようと思います!

 

どうしても軽量化できない時の対策

動画のファイルサイズが落とせない場合は以下を検討しなおしてみてください。

 

videoタグ埋め込み方法の確認

もしかしたら容量だけでなく、ファイル形式や適切な埋め込み方ができていない可能性もあります。

一度 videoタグでの埋め込み方の再確認をしてみてください。

 

外部リンク埋込みの検討

サイトにVideoタグを用いて埋め込むのではなく、YoutubeやVimeoにアップロードした動画リンクを埋め込んで表示する方法です。

動画のファイルサイズを機にする必要がなくなるので、一番実用的です。

Youtube埋め込みであれば、自動再生やタイムバー非表示なども可能ですのでぜひ調べてみてください。

 

GIFやJPEGなどのファイル形式を使用する

簡単なアニメーションやインタラクティブなサイトであれば、動画ではなく画像データやGIFアニメーションが使われることもあります。

GIFはフォトショップなどでも作成できるため、手軽にアニメーションを入れたい時には重宝します。

 

動画の尺を短くする

動画の構成自体が変更になるため、サイトの要件を確認した方がよい場合が多いです。

アニメーションやテキストで情報を補足するなども可能ですが、サイトデザインとの兼ね合いを確認しないと、WEBサイト上でみた時にうるさい動画になってしまったりすることもあるので注意が必要です。

 

ローディングページを追加

サイト読み込みの際にローディングページを追加する方法です。

どうしてもファイルサイズの大きい動画を直接埋め込まなければならない場合にはこの方法が有効です。

サイト読み込み速度が遅い場合にユーザーが感じるストレスを軽減することができます。

ただし、実際の表示速度は変わっていない点には注意です。

 

 

まとめ

大前提として埋め込み動画は、WEBサイトの成果を上げるために使用します。
めちゃくちゃ良い動画を制作しても、適切な埋め込みができないと効果が半減してしまうので注意が必要です!
どんなに良い動画でも、サイトが重くなってしまったり、動画の内容が伝わらなかったら本末転倒です。
動画を扱う際は、今回ご紹介したHandBrakeを使ってみてください!

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

宇野 凌平

クリエイティブ & ディベロップメント Division