近年では動画での訴求を行なっていく事例も増えております。html内にvideoタグで動画を埋め込めばいいというわけではなく、そこには最適な方法があります。WEBサイトのトップページの最初に表示される部分(ファーストビューといったりします)に自社にとって伝えたい理念や自社の雰囲気などが表示されればユーザーの目を引き、ブランディングにも繋がりますよね。今回はその動画を埋め込むことによっての基本的な知識・メリットと、TIPSをお伝えしたいと思います。VIDEOタグでの埋め込み今回の主題ですが、mp4やogvなどの動画ファイルを直接HTMLに読み込む方法です。この場合、動画埋め込み箇所のレイアウトや表現方法の縛りが少なく、自由に動画を表示する事が可能です。埋め込むが故にファイルサイズを気にしたり、調整の必要が多くあったりと工数に影響がでたりします。YOUTUBEでの埋め込み自身でYOUTUBEチャンネルを解説し、そこにアップロードした動画を埋め込む方法です。いわゆるストリーミングといわれる読み込み形式なので、WEBサイトへの負荷(重くなったりなど)が少ないのですが、ユーザーが意図的に再生しなければならなかったり、そもそもYOUTBEのサービスに依存しているので、YOUTUBEに障害が起きたときなどは閲覧ができなくなったりします。埋め込んだ動画にはYOUTUBEのアイコンやシークバーなどが最初から表示されたりと、表現できる幅がせまくなってしまいます。javaScriptでのモーション正確には一般的な動画と意味合いが違ってくるのですが、事前に用意したアニメーションの素材等をjavaScriptと呼ばれる言語で動かすパターンもあります。こちらも表現の幅は広がり、容量もmp4などと比べると少なめに住みますが、実装するコストが多くかかったりしてしまいます。そもそも容量が多いとどうなるのか?WEBサイトを閲覧する際に負荷がかかり、サイトへのアクセス速度が遅くなってしまいます。アクセス速度が遅いと、SEO(検索順位)に影響が出たり、直帰率(ユーザーが1ページだけ閲覧してすぐサイトを閉じてしまう割合)が増えてしまいます。関してはこちらの記事、そもそもの動画制作から見直したい方はこちらの記事がおススメです。サイトの表示速度を知りたいサイトのアクセス速度を知りたい場合、Webサイト診断をしてみることもおすすめです。WEBサイト診断にオススメのツールは下記記事でご紹介しているのでぜひ合わせてお読みください。動画のファイル形式videoタグがサポートしているファイル形式は、以下の3つになります。動画ファイルは上記3つを用意しておきましょう。src="sample.webm"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p></video>この例の場合、mp4が優先して再生されますが、mp4が再生できなかったらwebmが再生されるといった仕組みになっています。動画を人に見てもらいたい時、より画質の良い映像を見てもらいたいと思うのが人ってもんですが、時には画質より容量を気にしなければなりません。容量が大きい動画ファイルだと表示されるまでめっっちゃくちゃ時間がかかります。加えて、容量が大きい動画を埋め込んだサイトに同時に大量のアクセスされると、サーバーが落ちます。サーバーに負荷がかかりすぎて耐えきれなくなり、サイトが表示されなくなります。これは個人的所感にはなりますが、直で読み込む場合には画質より容量を優先した方がいいと考えてます。サーバーが落ちて機会損失に繋がるよりは、画質が良くなくてもユーザーにちゃんと見てもらって訴求を行う方が大事だと思います。理想としては1MB〜5MBぐらいでしょうか。画質を落としても再生時間が長い場合は容量を削減しきれない可能性がありますので、どうしても容量を落としきれない動画を載せたい場合はyoutubeにアップロードしてyoutube動画の埋め込みを行った方が良いと思われます。youtubeの動画を埋め込むケースのメリットとしては、サイト自体の読み込みとは別に、youtube側で読み込みを行うのでサーバーの負荷が軽減されるのです。デメリットとしてはyoutube動画はインターフェースを完全に非表示できなかったりするので、videoタグもyoutube埋め込みも一長一短ではあるのですが...。videoタグとyoutube埋め込みそれぞれのメリットデメリットでは、ここでvideoタグとyoutubeの動画表示のメリットデメリットを紹介していきましょう。・動画の差し替えも新しい動画を上書きするだけで容易に可能videoタグのデメリット・容量によってはサーバーに負荷がかかり、サイトの品質に影響する・ブラウザによっては実装できない機能があるyoutube埋め込みのメリット・ストリーミングで動画を読み込む為、サーバーへの負荷が少ない・ブラウザ関係なく再生が可能youtube埋め込みのデメリット・配信サービス依存のため、障害等が起こった場合再生が出来なくなる・実装できる機能が限られている・動画の差し替えの際、都度アップロードし直さなければならない手間があるおおよそはこんな感じでしょうか。上記2点が主な理由となります。ページの表示が遅いと閲覧しているユーザーはストレスに感じますよね。アメリカのアクセスツール会社の統計によると、3秒以上表示を待たされるだけで40%のユーザーが離脱してしまうそうです。加えて、SEO(検索結果の表示優先度)にも影響があります。検索エンジンは、サイトを一つ一つ巡回してサイトを評価していきます。検索エンジンから「このサイトは表示速度が遅い」と判断されてしまえば、それだけで検索結果の順位が低くなってしまうのです。なると当然閲覧者の低下に繋がりますよね。要件や環境、状況を考え、動画を埋め込む際にはvideoタグなのかyoutube埋め込みなのかをしっかり考えて実装しなければならないのです。まとめ今回は技術的な点は度外視して、基本的な事を記しました。今回は基本的な事だけをお伝えしました。大事な事は大きく分けて2つ、ファイル形式と容量です。この前提をクリアして初めて、色々カスタマイズができるのだと思います。技術的なことはまた改めてお伝えしようと思います。ホームページ・ECサイト運用に関する情報をメルマガで配信中!WEB担当者様向けのお役立ち情報を無料でご案内しております。アクセス解析・データ分析2023/04/28【ページ表示速度】SEO対策/直帰率・離脱率/売り上げアップ...。通販システム開発など、WEB戦略をトータルで支援する福岡のWEB制作・コンサルティング会社です。成果報酬でのご提案、補助金を利用したサイトの制作も行っております。お気軽にご相談ください。