動画を比較的簡単に制作できるようになり、WEBサイトに動画を埋め込むことが当たり前になってきました。
今回は、WEBに動画掲載する方法と注意点をご紹介します！
目次
WEBサイトに動画を埋め込む
WEBで動画を使用する際の注意点です。
適切な埋め込みができていないと、せっかくの動画の効果が半減してしまうのでぜひチェックしてみてください。
動画ファイルサイズの目安
基本的に動画ファイルは容量が大きいため、そのままWEBサイトに掲載することはお勧めできません。
Videoタグで埋め込む場合には、目安として10MB以下に、できれば5MB以下のファイルサイズに抑えたいところです。
動画の埋め込み方法
- ・YoutubeやVimeoなどの外部リンクで埋め込み
- ・HTMLのVideoタグで埋め込み
Youtubeにアップした動画であればファイルサイズなどは気にする必要はありません。
ですが外部リンクとなるため、可能であれば直接埋め込みたい！
しかし、動画の埋め込みは動画ファイルサイズによってサイトが重くなってしまい、表示が遅くなってしまうことがあります。
ユーザーが動画を見始める前に離脱してしまう可能性も…。
動画を高品質で届けたいのに、WEBサイトとしての利便性が落ちてしまうと本末転倒です。。
すでに動画を埋め込んでいるなら
すでに動画を埋め込んでいるけど、自分のサイトは大丈夫…？と思った方もいらっしゃるのではないでしょうか？
一度、Webサイト診断をしてみることもおすすめです。
WEBサイト診断にオススメのツールは下記記事でご紹介しているのでぜひ合わせてお読みください。
【1分でOK】WEBサイト診断ツール「Website Grader」をご紹介
埋め込みするなら”動画圧縮”は必須！
30秒程度の動画でも200MBを超えてしまうこともよくあります。
前述しましたが、できれば動画ファイルサイズは5MB以下におさえたいところです。
そこでファイルサイズを小さくするために必要なのが、動画圧縮です！
ですが、サイズを小さくするあまりに画質が落ちてしまい、せっかく作った動画の質が落ちてしまうことも…
動画圧縮に失敗した時のデメリット
ファイルサイズが大きすぎると・・・
- サイト読み込み速度が低下
- ユーザーにとってストレス
- SEOにも悪影響
画質が劣化しすぎると・・・
- 動画内容が伝わらない
- 動画制作に費やした時間が無駄に
ユーザーは快く思わず、サイトには悪影響を及ぼし、工数まで無駄になるなんて散々ですよね…
おすすめ動画圧縮ソフト『HandBrake』
私が主に使っているのは、 HandBrake というソフトです。
いくつか他のソフトも触ってみた中では、一番画質を保ちつつ軽量化できました。
設定項目は多いですが、設定内容をプリセットに保存しておくことができるので、一度設定してしまえばあまりいじる必要はありません。
設定内容については次回ご紹介しようと思います！
どうしても軽量化できない時の対策
動画のファイルサイズが落とせない場合は以下を検討しなおしてみてください。
videoタグ埋め込み方法の確認
もしかしたら容量だけでなく、ファイル形式や適切な埋め込み方ができていない可能性もあります。
一度 videoタグでの埋め込み方の再確認をしてみてください。
外部リンク埋込みの検討
サイトにVideoタグを用いて埋め込むのではなく、YoutubeやVimeoにアップロードした動画リンクを埋め込んで表示する方法です。
動画のファイルサイズを気にする必要がなくなるので、一番実用的です。
Youtube埋め込みであれば、自動再生やタイムバー非表示なども可能ですのでぜひ調べてみてください。
（2023/2/24追記）
最近の調査で、Youtube埋め込みで自動再生やリピート再生が活用でき、Videoタグで埋め込まなくてもとても自然にWEBサイトに表示できそう…ということがわかりました。
調査がまとまり次第記事更新したいと思います！
GIFやJPEGなどのファイル形式を使用する
簡単なアニメーションやインタラクティブなサイトであれば、動画ではなく画像データやGIFアニメーションが使われることもあります。
GIFはフォトショップなどでも作成できるため、手軽にアニメーションを入れたい時には重宝します。
コードで動画を再現する
（2023/2/24追記）
アニメーションなどの場合、JavaScriptなどのコードに動画を変換するツールが存在するようです。
現在調査中で、テスト中なので、ぜひ次回記事更新までお待ちください！
動画の尺を短くする
動画の構成自体が変更になるため、サイトの要件を確認した方がよい場合が多いです。
アニメーションやテキストで情報を補足するなども可能ですが、サイトデザインとの兼ね合いを確認しないと、WEBサイト上でみた時にうるさい動画になってしまったりすることもあるので注意が必要です。
ローディングページを追加
サイト読み込みの際にローディングページを追加する方法です。
どうしてもファイルサイズの大きい動画を直接埋め込まなければならない場合にはこの方法が有効です。
サイト読み込み速度が遅い場合にユーザーが感じるストレスを軽減することができます。
ただし、実際の表示速度は変わっていない点には注意です。
結局、WEB設計が最重要！！
適切に動画活用するためのルールをご紹介しましたが、結局のところ動画活用するためのWEB設計が最重要です。
WEBサイト設計がしっかりとなされていれば、動画も設計通りに制作することができます。
構成やデータ容量など制作時点で決まっていればWEBで活用する際にも問題なく使用することができ、動画の効果を最大限に発揮でき亜mす。
まとめ
適切な埋め込みをすることで、動画の効果を最大限に発揮することができます
大前提として埋め込み動画は、WEBサイトの成果を上げるために使用します。
動画を扱う際は、今回ご紹介したHandBrakeを使ってみてください！
