ホームページに動画を埋め込みたい!3つの方法と動画を有効活用するポイント

公開日 2023/05/24 18:00
更新日 2023/11/10 10:03
SNS
LINE

「自社サイトや商品ページの動画を埋め込みたい」「自分のブログやホームページに動画を埋め込みたい」など、ホームページに動画を埋め込みたい場面はよくあるものです。

マナブ
マナブ

最近、記事冒頭に動画を埋め込んでいるサイトが増えていますよね。

編集長
編集長

そうだね!動画を活用できるとWeb担当者として、レベルアップできるよ!

近年、動画はトレンドとなっており、ホームページへの動画埋め込みにも様々なメリットが期待できます。

しかし、いくつかのポイントを押さえなければ逆効果になってしまう場合もあるため、諸刃の剣といえるでしょう。

そこでこちらでは、ホームページに動画を埋め込む方法や、動画埋め込みの注意点について解説します。ポイントを押さえて動画を有効活用しましょう。

この記事のレベル

重要度 (5)
初心者度 (3)
難易度 (2)

この記事で学べること

  • 動画埋め込みのメリット
  • 動画埋め込みのデメリット
  • 動画を埋め込む3つの方法
  • 動画を埋め込む際のポイント

ホームページに動画を埋め込むメリット5選

ホームページに動画を埋め込むメリットには、以下の5つが挙げられます。

  1. 多くの情報を短い時間で伝えられる
  2. 視覚的に伝わりやすい
  3. ページ滞在時間が伸びる
  4. 直帰率や離脱率の低下
  5. ホームページ集客に有利

それぞれ詳しく解説します。

MERIT 1多くの情報を短い時間で伝えられる

動画には、非常に優れた伝達能力があります。

その能力の違いを表す表現として、画像はテキストのおよそ7倍、動画ではテキストのおよそ5,000倍もの情報量の差があると示されるほどです。

例えば、洗浄力と静音性に優れた「洗濯機」について考えてみましょう。

この「洗濯機」についてテキストで表現しようと思えば、サイズ・機能性・色味などを事細かに記さなければなりません。

しかし、いくら事細かに記したとしても、テキストは多様な解釈が可能であり、人によってイメージしている洗濯機が異なる可能性があります。

「洗浄力と静音性に優れた洗濯機」と記していても、どれほどの機能を持っているかを正確に伝えることは非常に困難です。

ここで、実際に洗濯機を稼働させている動画があればどうでしょうか。

音から静音性の高さを判断でき、さらにはビフォーとアフターで洗浄力の高さも実演できるようになります。

多くの情報を短い時間で効率的に伝達できるのは、動画ならではの特性です。感覚でしか判断できないようなことを伝えられるのも、テキストや画像にはないメリットでしょう。

近年は動画がトレンドとなっており、需要が増えてきています。これは多くの情報を効率的に得られる動画の特性が、時短や手軽さを求める現代の風潮に上手くハマったことが要因です。

編集長
編集長

これからも動画の需要は増えていくと予想されているから、早めの導入を検討してみよう!

MERIT 2視覚的に伝わりやすい

「人がコミュニケーションを取る際、視覚情報が55%を占める」というメラビアンの法則をご存じでしょうか。

これは、1971年にアメリカの心理学者アルバート・メラビアンが提唱した法則です。ホームページはユーザーが存在することで成り立つものであり、メラビアンの法則が適用されます。

テキスト以外にも視覚的に伝わりやすい動画があると、ユーザーの理解度は格段に向上するでしょう。特に、前述の洗濯機のような商品の使用感やツールの使い方を解説する際に、動画埋め込みは大きなメリットをもたらします。

マナブ
マナブ

ユーザーの理解度が向上するようにホームページを制作することは、集客や検索順位の向上(SEO対策)を図るためには欠かせないですよね!

SEO対策とは、ユーザーの求める有益なコンテンツを提供することで、Googleなどの検索エンジンで上位表示を狙う施策のことです。

上位表示されるとサイトへの訪問者が増え、集客効果や売上の向上を図れるようになります。

ホームページを制作するのであればSEO対策は必ず押さえておきたい部分ですが、その際、動画埋め込みは多様なメリットを生み出すでしょう。

MERIT 3ページ滞在時間が伸びる

編集長
編集長

動画を視聴している間って、スクロールする指は止まるよね?

マナブ
マナブ

はい!それがどうしたのですか?

テキストを読むときのようにスラスラとページを進めることがないため、動画が埋め込んであることでページ滞在時間が伸びやすくなります。

ページ滞在時間が長いほど、Googleはそのページを「良いコンテンツ」として評価します。

ユーザーとGoogleの双方からの評価が重要であるSEO対策において、動画埋め込みはプラスの効果をもたらすでしょう。

MERIT 4直帰率や離脱率の低下

動画の埋め込みは、全体のアクセス数のうち最初に訪問したページだけで離脱してしまう割合を示す「直帰率」と、あるページにおけるアクセス数のうちそのページが最後に訪問したページになった割合を示す「離脱率」を低下させるメリットがあります。

これは、動画の埋め込みによって短時間で効率良くユーザーを引きつけられるようになるためです。

博報堂が2019年に行った「動画生活者®統合調査 2019」によると、動画視聴後に何らかのアクションを起こす人の割合はおよそ60%に及びます。

商品検索や購入などによりホームページを回遊するユーザーが増えれば、直帰率や離脱率も下がるものです。これらの数値の低下はGoogleのサイト評価につながるため、SEO対策としての効果も見込めるでしょう。

参考:株式会社博報堂「動画生活者®統合調査 2019」調査概要

MERIT 5ホームページ集客に有利

ホームページへの流入を増やすためには、検索順位で上位表示されることが非常に大切です。

なぜなら、検索順位別でクリック率に大きな差が生じるためです。

seoClarityが実施した2021年の検索順位別のクリック率調査では、以下のような結果が出ました。

1位 13.94%
2位 7.52%
3位 4.68%
4位 3.91%
5位 2.98%

引用:seoClarity「2021 CTR Research Study」

順位が1つ下がれば、それだけの機会損失が発生しているということです。上記の数値をご覧いただくと分かるように、検索順位はホームページ流入に大きな影響を与えます。

検索順位で上位に表示されてホームページへの流入が増えると、競合との差別化実現・ブランド認知・売上アップ・広告収入の獲得などにつながります。

前述のように、ホームページへの動画埋め込みは、上手に活用できればSEO対策でプラスの効果を得られるようになるため、ホームページ集客に有利といえるでしょう。

ホームページに動画を埋め込むデメリット3選

ホームページへの動画埋め込みでは様々なメリットが享受できる一方、注意しておきたいデメリットもあります。具体的なデメリットは以下の3つです。

  1. 動画制作に時間がかかる
  2. 動画制作コストがかかる
  3. ページの読み込みが遅くなる

それぞれ詳しく解説します。

DEMERIT 1動画制作に時間がかかる

ホームページへの動画埋め込みは、もちろんただ動画を埋め込めば良いというわけではありません。まずはきちんとサイトと関連性があり、ユーザーへの訴求力が高い動画を制作しなければなりません。

動画を制作するには、以下の4つのステップを進めていく必要があります。

  1. プロジェクトを立ち上げ、目的・予算・納期を決める
  2. 企画構成を考える
  3. 動画を撮影する
  4. 撮影した動画を編集する

4つに分けて簡単に記しましたが、1つ1つが非常に重いアクションであることがお分かりいただけるでしょう。質の高い動画を制作するにはそれなりの時間がかかるのです。

特に、動画制作では撮影外のステップで非常に時間がかかります。

例えば、会社紹介などのPR動画を制作するケースを考えてみましょう。

5分間の動画制作には平均1〜1.5ヶ月ほど、10分間の動画制作には平均1.5〜2ヶ月ほど、15分間の動画制作には平均2〜3ヶ月ほどかかります。

編集長
編集長

動画制作では、スケジュールに余裕を持つことが大切なんだ!

MERIT 2動画制作コストがかかる

昨今、動画制作におけるハードルは以前よりも下がってきています。しかし、質の高い動画を制作するにはそれなりのコストがかかるのが現状です。

例えば、機材など何もない状態で必要なコストは、以下のようになります。

  • カメラやレンズ、三脚などの機材費
  • キャスティング費
  • 動画ソフトの導入費

最近では無料の動画編集ソフトや素材があるものの、人件費や機材費がコストになります。

自社にリソースがない場合には外注を検討することもできますが、その場合には費用はより高くなることに注意しましょう。

動画制作を外注する場合には、平均30〜50万円程度の費用が必要です。演出にこだわったり、アニメーション動画にしたりすると、100万円程度必要になる場合もあります。

動画制作にはテキストよりも多くのスキルや情報が必要になるため、それなりのコストがかかることを押さえておきましょう。

「まずは自社で動画を撮影してみたい!」という方は、こちらを参考にしてください。

動画撮影に必要な機材&プチテクニック紹介!

動画撮影に必要な機材&プチテクニック紹介!

YouTubeやTikTok、Instagramなど日常生活で動画を目にする機会が多い昨今、「動画撮影したい!」「カッコいい映像を撮りたい!」「思い出を映像で残したい!」…そう思う方も多いはず。

MERIT 3ページの読み込みが遅くなる

動画ファイルはテキストよりも情報量が多いため、非常に重くなります。その結果、ページの処理にかかる負担が増えて、読み込みが遅くなる可能性があるでしょう。

ページの読み込みに時間がかかると、その間にユーザーが離脱してしまうかもしれません。これは動画埋め込みで避けられない大きなデメリットといえます。

また、ページ読み込み速度の遅さはGoogleのサイト評価にも悪影響を与えてしまいます。

SEO対策に良くないため、ホームページに動画を埋め込む際は、読み込み速度の低下を防ぐ施策を取り入れましょう。

具体的には以下のとおりです。

  • <video>タグを使用せず、サイトから<iframe>タグで動画を持ってくる
  • 直接動画を埋め込むのではなく、リンクなどで動画サイトへ移動するようにする
  • プラグインを使って、ユーザーの画面上の動画読み込みを優先させる

通常、サイトではページにある動画を一気に処理しようとするため、読み込み速度がより遅くなる傾向にあります。

編集長
編集長

上記の施策を使い分けることで改善をはかろう!

ホームページに動画を埋め込む方法

マナブ
マナブ

どのように動画を埋め込めばいいのでしょうか?

それでは、実際にホームページに動画を埋め込む方法について確認しましょう。ここでは3つの方法を解説します。

YouTubeを埋め込む方法

YouTubeからの動画埋め込みは、タグをコピペするだけの簡単な手順で動画を埋め込めること・読み込み速度の低下を防げることがメリットです。

しかし、YouTube上に動画がアップロードされていることが前提のため、アカウント作成や動画のアップロードなどのワンクッションが必要になります。

YouTubeからWordPressに動画を埋め込む際には、以下の手順で進めましょう。

STEP 1

YouTubeの動画をクリックし、「共有」をクリック

STEP 2

リンクの共有にある「埋め込む」を選択し、動画の埋め込みタグを取得

STEP 3

先ほどコピーした<iframe>タグをWordPressの任意の場所にペースト

編集長
編集長

その他、多くの無料ホームページ作成ツールでもyoutube動画の埋め込みが可能だよ!

Vimeoを埋め込む方法

Vimeoとは、クリエイター向けの動画共有サイトです。Vimeoに動画をアップロードした動画をホームページに埋め込むことができます。

加入しているプランによりますが、「動画の視聴可能な範囲を詳しく設定」「埋め込みコードをカスタマイズすることで自動再生・ループ再生なども可能」になるのが特徴です。

ただ、無料プランの場合にはVimeoのロゴが入ってしまうため、非表示にするには有料プランに加入するなどのコストが必要になります。

VimeoからWordPressに動画を埋め込む際には、以下の手順で進めましょう。

STEP 1

Vimeoの動画をクリックし、「共有」をクリック

STEP 2

埋め込みコードの欄から<iframe>タグをコピーし、WordPressの任意の場所にペースト

直接ホームページにアップロードする方法

制作した動画を直接ホームページにアップロードすることも可能です。外部リンクを貼り付ける必要がなく、ホームページのデザインを崩すことなく埋め込めるメリットがあります。

一方で、動画の容量が大きいほど読み込み速度が遅くなるため、画質よりも容量を重視しなければならないケースも出てくるでしょう。

WordPressに直接動画を埋め込む際には、以下の手順で進めましょう。

STEP 1

画面左上の「+」ボタンをクリック

STEP 2

ブロック一覧のメディアの中から「動画」を選択

STEP 3

動画ブロックが表示されたら任意のファイルをアップロード

テキストエディタから以下の<video>タグを埋め込むことで動画を反映させることもできます。


<video src="動画のファイル名"></video>
  

<video>タグを用いると、カスタマイズ次第で開始画面の画像を設定したり、インライン再生を可能にしたりできて非常に便利です。

ホームページに動画を埋め込む際の3つのポイント

編集長
編集長

ホームページに動画を埋め込む際は、デメリットを加味した上で押さえておきたいポイントがあるんだ!

  1. 適切な動画本数を考える
  2. できるだけ短い動画を使う
  3. 埋め込む目的を明確にする

それぞれ詳しく解説します。

POINT 1適切な動画本数を考える

同じページの中に複数の動画が配置されていると、ユーザーは「動画をみないと理解できない」と判断して離脱してしまう可能性があります。

1ページの中に、最高でも1〜2本程度に抑えておきましょう。

動画をホームページの主体にするのではなく、あくまでテキストでは理解が難しい部分の補足として活用するという考え方が重要です。

POINT 2できるだけ短い動画を使う

埋め込む動画は、できるだけ短い動画にしましょう。長い動画であるほど、途中で視聴を止めるユーザーが続出します。

昨今ショート動画が流行っているように、短い動画で簡潔に伝えられる動画の方が好まれることを押さえておきましょう。

編集長
編集長

可能であれば5分以内、長くても15分以内を目指すことがおすすめだ!

POINT 3埋め込む目的を明確にする

動画を埋め込む際は、必ず目的を明確化しておきましょう。

「読者の分かりやすさ向上を目指しているのか」「商品の使い方を説明したいのか」「サービスの概要を理解して欲しいのか」など、目的に応じて適切な動画の尺度・企画内容・埋め込む場所などは変わってきます。

ゴールが定まっていることで、動画埋め込みによるメリットを最大限に引き出せるようになりますので、最初の時点で明確化しておくことが大切です。

ホームページに動画を埋め込む際のよくある質問

ホームページに動画を埋め込みたいです。ファイルはmp4が最適ですか?

直接ホームページにアップロードしたい場合には、mp4が推奨されます。
最もシンプルなコードは以下のとおりです。


<video src="video.mp4"></video>
  

ホームページに動画を埋め込みたいときの最適な容量は?

ホームページに動画を直接埋め込むと、読み込み速度が遅くなることが懸念されます。目安ではありますが、10MB以下まで軽量化しておくと良いでしょう。画質を求めないのであれば、5MB以下に抑えられるとより読み込みが軽くなります。

画質を落としたくない場合には、前述のYouTubeやVimeoを活用して、外部から<iframe>タグを取得して埋め込む方法がおすすめです。

ホームページに動画を埋め込みたいときの最適なサイズは?

一般的な動画サイズは1920×1080です。YouTubeショート・Instagramのリール・TikTokなどのショート動画は縦型ですが、そのまま埋め込んでも問題はありません。動画を埋め込んだ後は、必ずパソコンやスマホなどの媒体で正しく再生されるかを確認しましょう。

YouTube以外に動画の埋め込み方法はありますか?

あります。今回ご紹介したVimeoなどの動画プラットフォームを活用したり、mp4などの動画ファイルをホームページに直接アップロードしたりすることも可能です。

ホームページに動画を埋め込みたいのですが、自動再生はできますか?

カスタマイズ次第では自動再生も可能になります。以下のタグを埋め込みましょう。


<video src="video.mp4" autoplay muted></video>
  

無音を意味する「muted」が記載されていますが、GoogleやSafariなどの特定のブラウザではこの「muted」がないと自動再生されません。

音ありにしたい場合には、コントロールパネルを表示させる以下のタグも併用しましょう。


<video src="video.mp4" controls></video>
  

まとめ

動画は、テキストだけでは伝えきれない情報をユーザーへ視覚的に訴えられるようになる便利なツールです。ホームページ集客やSEO対策の観点からも、動画を上手く活用することで売上アップやブランディングも可能になります。

一方で動画制作に時間やコストがかかったり、サーバーへの負荷が大きかったりと、懸念すべき事柄も多くあります。この記事でご紹介したポイントを押さえ、動画を有効に活用しましょう。

この記事を書いた人

SEOタイムズ 編集部

SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。

"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。

ランキング

  • デイリー
  • ウィークリー
1
【2024年2月最新】X(旧Twitter)の使い方!アカウントの作成手順から基本・応用まで紹介【初心者向け】
2023/12/22 06:00
SNS
2
ボタンデザインはCSSで作ろう!使えるボタンデザイン27選!
2023/06/27 09:00
Webデザイン
3
【2024年最新】企業キャッチコピー78選!(業界別まとめ)
2023/12/15 09:00
Webマーケティング
4
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
アクセス解析
#アナリティクス
5
Googleアカウントからログアウトする方法をAndroid・iOS別で解説!
2023/11/11 12:00
Webの基礎知識
1
【2024年2月最新】X(旧Twitter)の使い方!アカウントの作成手順から基本・応用まで紹介【初心者向け】
2023/12/22 06:00
SNS
2
Googleアカウントからログアウトする方法をAndroid・iOS別で解説!
2023/11/11 12:00
Webの基礎知識
3
【cssコピペでOK】見出しデザイン37選!cssで好みの見出しを作ろう!
2023/08/01 09:00
Webデザイン
4
Brave(ブレイブ)ブラウザとは?4つの特徴や注意点・使い方を徹底解説
2023/10/25 09:00
Web
5
【2024年最新】企業キャッチコピー78選!(業界別まとめ)
2023/12/15 09:00
Webマーケティング

SEOタイムズとは?

SEOタイムズとは?

SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは”AI時代のSEO対策”。

AIとの共存が求められる時代。検索エンジンまわりにおいては、利便性がさらに高まり進化を続けていますが、人々の行動から“調べる”という行為はなくなるものではありません。

SEOの本質は変わらず、時代に合った良質なコンテンツを発信することで集客効果が得られる環境は継続されます。
SEOタイムズが、あなたのWebマーケティング戦略を成功に導きます。