記事に動画は埋め込むか外部リンクか｜読了と速度で選ぶ

「録画や実演の動画がたまってきたので、記事にそのまま埋め込んでいる」「置き方で何かが変わるとは考えたことがなかった」——動画が増えたサイトで見過ごされている判断です。動画の置き方は、見た目の好みで決める話ではありません。表示の速さと読了率の両方に効きます。この記事では、3つの置き方の得失と、読まれる形の選び方を整理します。

動画が増えて置き場所に迷う

最初に、状況を整理します。

ウェビナーの録画、製品の実演、社員の紹介といった動画が増えています。

作った動画は、記事の中でも使いたくなります。

記事に置けば、検索から来た相手にも見てもらえます。

一方で、置き方には複数の方法があります。

そのまま画面の中で再生できる形にするか、別の場所へ案内するかです。

多くの場合、何も考えずに埋め込む形が選ばれます。

しかし埋め込みには、表示速度への影響があります。

動画を読み込む処理は重く、ページ全体の表示に時間がかかります。

表示が遅ければ、読む前に離脱される場合があります。

つまり、動画を見せるために記事を読まれなくする可能性があります。

この兼ね合いを、記事ごとに判断する必要があります。

以降では、置き方の選択肢と、それぞれの得失を整理します。

あわせて、速度への影響を抑える方法も確認します。

最後に、判断の基準をまとめます。

3つの置き方

選択肢を並べます。

置き方	利点	注意する点
そのまま埋め込む	画面を離れずに再生できる	表示速度が落ちる場合がある
押したときに読み込む	速度への影響を抑えられる	実装に手間がかかる
画像とリンクで案内する	速度への影響がほぼない	見られる数は減る
文字で案内するだけ	最も軽い	気づかれにくい
自社の配信の仕組みを使う	計測と表示を制御できる	費用と管理の手間がかかる

上の5つは、速度と再生数の兼ね合いになります。上に行くほど見られやすく、下に行くほど軽くなります。

2行目の方式が、多くの場合で現実的な選択になります。

表示の段階では画像だけを出し、押されたときに動画を読み込む形です。

この方式では、押さなかった相手に読み込みの負担が生じません。

3行目は、動画を主役にしない記事に向きます。

記事を読ませることが目的で、動画は補足という場合です。

4行目は、参考として示す場合に使います。

5行目は、動画そのものが商品に近い場合の選択になります。

会員向けの内容や、視聴の記録を取りたい場合です。

この場合は費用が発生するため、目的が明確な場合に限ります。

以降では、それぞれの詳細を確認します。

埋め込みが速度に与える影響

何が起きているかです。

動画を埋め込むと、ページの読み込み時に動画の仕組みも一緒に読み込まれます。この処理が、表示の時間を押し上げます。

検証では、埋め込みの有無でスマホ向けの評点に差が出たという報告があります。

差が大きくなるのは、複数の動画を1つの記事に置いた場合です。

動画が3本あれば、その分の処理が加わります。

影響が出やすいのは、通信が遅い環境と古い端末です。

会社の中の環境では気づかず、外出先で見ると遅い場合があります。

確認する際は、スマホと遅い通信の条件で見ます。

公開の前に、測定の道具で数値を確認する形も有効です。

速度の低下は、読み手の離脱に直結します。

記事が表示される前に離れられれば、動画も見られません。

さらに、広告から誘導している記事では費用にも影響します。

表示が遅いページは、広告の評価が下がる場合があります。

記事の内容が良くても、速度で機会を失うことになります。

この影響は、置き方を変えれば抑えられます。

遅延して読み込む方法

よく使われる対処です。

画面に表示される直前まで読み込みを遅らせる方法があります。これが遅延読み込みと呼ばれる仕組みです。

この方法が効くのは、動画が画面の外にある場合です。

記事の下のほうに置いた動画は、そこまで読み進めるまで読み込まれません。

結果として、最初の表示が速くなります。

一方で、記事の冒頭に置いた動画には効きません。

最初から画面の中にあるため、すぐ読み込まれます。

つまり、冒頭に大きな動画を置く形は、速度の面で不利になります。

この点は、置く位置の判断に関わります。

多くのCMSでは、遅延読み込みの設定が用意されています。

設定を確認し、有効になっているかを見ます。

画像についても同じ仕組みが使えます。

記事の中の画像が多い場合は、あわせて確認します。

ただし、この仕組みだけでは十分でない場合があります。

画面に入った時点で重い処理が始まるため、そこで動きが止まることがあります。

より効果が大きいのは、次に述べる方式になります。

押したときに読み込む方式

影響を最も抑える形です。

表示の段階では画像と再生の記号だけを置き、押されたときに動画を読み込む方法があります。押さなければ、動画の処理は始まりません。

この方式で、表示までの時間が大きく短縮したという報告があります。

操作できるまでの時間についても、改善が報告されています。

多くの読み手は、記事の中の動画を再生しません。

再生しない相手に読み込みの負担をかけない点が、この方式の利点です。

見た目は、埋め込みとほとんど変わりません。

画像の上に再生の記号が乗った状態になります。

押せば、その場で再生が始まります。

実装には、専用の部品や仕組みを使います。

CMSの機能や追加の仕組みで対応できる場合があります。

導入の前に、他のページへの影響を確認します。

既存の埋め込みが動かなくなる場合があります。

1つの記事で試してから、全体に広げる形が安全になります。

画像は、動画の内容が分かるものを選びます。

押す判断は、この画像で決まります。

リンクにする場合の得失

外に出す判断です。

動画を記事の中で再生させず、別の場所へ案内する方法もあります。速度への影響は、ほぼなくなります。

一方で、押して別の場所に移る相手は減ります。

記事を読んでいる途中で、別の場所に移るのは手間になります。

そのため、動画を見てもらいたい場合には向きません。

向くのは、動画が補足の位置づけである場合です。

記事の内容を読めば足りるが、詳しく見たい人には動画もある、という形です。

この場合、リンクの文言で内容と長さを示します。

何分の動画かが分かれば、押す判断がしやすくなります。

別の窓で開く設定にすると、記事に戻りやすくなります。

ただし、この設定は環境によって挙動が変わります。

画像を添えてリンクにする形も有効です。

画像1枚であれば、速度への影響は小さくなります。

動画の場面を切り出した画像を使えば、内容が伝わります。

この形は、実装の手間もかかりません。

既存の記事に後から追加する場合にも適しています。

動画のファイルを自社のサイトに直接置く方法もあります。ただし、この方法は負担が大きくなります。

動画のファイルは容量が大きく、通信の量も増えます。

多くの人が同時に見た場合、サイト全体の表示が遅くなる場合があります。

端末や通信の状況に応じて画質を変える仕組みも、自前では用意しにくくなります。

そのため、外部の配信の仕組みに置き、記事から呼び出す形が一般的になります。

会員向けの内容など、公開したくない動画の場合は別の判断になります。

この場合は、視聴を制限できる仕組みを使います。

見られる数はどう変わるか

再生の数への影響です。

置き方によって、再生される数は変わります。画面の中で再生できる形が、最も多く再生されます。

押して別の場所に移る手間が、そのまま減少につながります。

ただし、再生の数だけを目的にはできません。

記事を読ませることが目的であれば、速度のほうが重要になります。

目的を先に決めることが、判断の順番になります。

動画を見せることが目的の記事では、埋め込みまたは押して読み込む方式を選びます。

記事を読ませることが目的であれば、リンクや画像での案内にします。

どちらも達成したい場合は、押して読み込む方式が中間になります。

動画の置き場所によっても、再生の数は変わります。

記事の冒頭にあれば目に入りますが、速度の面では不利になります。

中盤に置く形が、多くの場合で釣り合います。

記事を読み進めた相手は、関心が高くなっています。

その位置に置けば、再生される割合も上がります。

この判断は、記事の構成と合わせて決めます。

読了への影響

読まれ方が変わります。

動画を記事の中に置くと、読み方が変わります。再生した相手は、その後の本文を読まない場合があります。

動画で内容が分かれば、文章を読む必要がなくなります。

これは、動画で伝えたい場合には望ましい結果になります。

一方で、記事の後半に重要な内容がある場合は、読まれなくなります。

そのため、動画の後に何を置くかを考えます。

動画で全体を説明し、その後に詳細を置く構成が1つの形です。

逆に、文章で説明してから動画で補う構成もあります。

どちらが適しているかは、内容によって変わります。

手順を説明する内容では、動画のほうが伝わりやすくなります。

判断の基準や考え方を説明する内容では、文章のほうが適します。

両方を並べる場合は、役割を分けます。

同じ内容を繰り返す形は、どちらも中途半端になります。

動画には実演を、文章には基準を置く形が分かりやすくなります。

この設計を、記事を書く段階で決めておきます。

後から動画を追加すると、構成が崩れます。

記事の中のどこに置くか

位置の判断です。

動画を置く位置は、目的と速度の両方に関わります。冒頭に置けば目に入りますが、表示が遅くなります。

最初の表示に含まれる要素は、速度の評価に影響します。

大きな動画を冒頭に置くと、この評価が下がる場合があります。

そのため、冒頭には画像を置き、動画は中盤以降に置く形が扱いやすくなります。

中盤に置く場合は、関連する説明の直後にします。

文脈が合っていれば、押される割合が上がります。

末尾に置く形もあります。読み終えた相手に、次の行動として示す形です。

この位置では、再生される数は少なくなります。

複数の動画を置く場合は、間隔を空けます。

連続して並べると、どれを見ればよいか分かりません。

それぞれに説明を添え、内容の違いを示します。

動画の前後には、見出しを置くと構成が分かりやすくなります。

目次からも辿れる形になります。

スマホでの表示も確認します。横幅に収まるかを見ます。

収まらない場合は、横にはみ出して読みにくくなります。

動画の情報を機械に伝える

検索への配慮です。

記事に置いた動画の情報を、機械に伝える形式があります。動画の題名、説明、公開日、長さなどを構造化して書く形です。

この記述により、検索結果で動画として扱われる可能性が生まれます。

記述する内容には、サムネイルの画像の場所も含まれます。

自社で配信している動画の場合、この記述の価値が大きくなります。

外部の場所に置いた動画では、その場所の情報が使われる場合があります。

そのため、必ずしも記述が必要とは限りません。

記述する場合は、実際の内容と一致させます。

記事の内容と関係のない動画を記述する形は避けます。

動画の内容を文章でも書いておく価値があります。

動画の中の情報は、機械には読み取れません。

要点を文章で書いておけば、検索からも見つかります。

書き起こしを掲載する方法もあります。

そのまま載せると読みにくいため、整えてから使います。

この作業は、記事の内容そのものを厚くします。

動画の二次利用として、有効な使い方になります。

字幕と音のない再生

見られ方の前提です。

記事の中の動画は、音を出さずに見られる場合があります。職場で開いている場合、音を出せません。

字幕がなければ、内容が伝わりません。

そのため、記事に置く動画には字幕を付けます。

字幕は、自動で生成した内容を修正して使う形が現実的です。

専門用語や社名は、誤って変換されやすくなります。

この部分だけを直せば、実用になります。

画面の中の文字も確認します。小さい表示では読めません。

スマホで見た場合を想定し、文字を大きくします。

自動で再生する設定にする場合は、音を出さない設定にします。

音が突然鳴ると、読み手を驚かせます。

自動の再生は、通信の負担にもなります。

見るかどうかを読み手が決められる形が望ましくなります。

動画の長さも示します。何分かかるかが分かれば、判断できます。

長い動画は、章に分ける方法もあります。

見たい部分だけを選べる形になります。

スマホでの見え方

多くの読み手の環境です。

記事を読む環境は、スマホが中心になっている場合があります。動画の見え方も、スマホで確認します。

横幅に収まっていない動画は、読みにくさの原因になります。

画面の幅に合わせて縮む設定になっているかを見ます。

縦横の比率も確認します。上下に余白が出る場合があります。

縦長の動画は、スマホでは見やすくなります。

ただし、パソコンでは細長い表示になります。

どちらの環境を優先するかを、読者の傾向で決めます。

通信の量にも配慮します。動画は容量が大きくなります。

外出先で見ている相手には、負担になる場合があります。

押したときに読み込む方式であれば、この負担も避けられます。

再生の操作が押しやすい大きさかも確認します。

小さすぎると、意図せず別の場所を押してしまいます。

実際にスマホで開いて、操作してみます。

画面の写しだけでは、操作の感触は分かりません。

この確認を、公開の前に行います。

どこまで見られたかを測る

成果の確認です。

動画を置いた効果は、測っておく価値があります。再生された数と、どこまで見られたかを見ます。

外部の場所に置いた動画では、その場所の分析の画面で確認できます。

記事に埋め込んだ場合も、記事ごとの数が分かる場合があります。

自社のサイトの分析でも、動画の操作を記録できます。

再生の開始と、一定の割合まで見た時点を記録する形が一般的です。

この記録により、記事ごとの効果が比べられます。

再生の数が少ない記事では、位置や説明を見直します。

途中で離脱が多い動画は、内容や長さを見直します。

あわせて、記事の読了や次の行動も確認します。

動画を再生した相手が、その後どう動いたかを見ます。

問い合わせや資料の請求につながっていれば、効果があると判断できます。

再生の数だけでは、成果は分かりません。

記録の設定は、置き方を決めた後に行います。

方式によって、記録できる内容が変わります。

押して読み込む方式では、記録の設定に工夫が必要な場合があります。

あわせて確認したいのが、読み手の情報の扱いです。外部の動画を埋め込むと、その事業者にも通信が発生します。

同意を得る仕組みを入れているサイトでは、この点が問題になります。

同意を得る前に読み込みが始まる形は、方針と矛盾します。

押したときに読み込む方式であれば、同意の後に読み込む形にしやすくなります。

配信の事業者側に、追跡を抑える設定が用意されている場合もあります。

この設定を使う判断もあります。

自社の方針とサイトの表示を、一度突き合わせて確認します。

同意の仕組みを入れた後に、埋め込みを見直していない場合があります。

判断の基準

どちらを選ぶかです。

• この記事の目的は、動画を見せることか記事を読ませることか
• 動画は記事の主役か、補足の位置づけか
• スマホと遅い通信の条件で、表示速度を確認したか
• 動画に字幕を付け、音を出さずに内容が伝わる状態か
• 記事の中の位置は、関連する説明の直後になっているか
• 再生の数と、その後の行動を記録する設定があるか

この6項目で、置き方が決まります。1行目と2行目が、最初の判断になります。

目的が決まれば、速度と再生数のどちらを優先するかが決まります。

3行目は、公開の前に必ず確認します。

会社の環境だけで確認すると、遅さに気づきません。

4行目は、見られる前提の確認になります。

音を出せない環境で見られることを想定します。

5行目は、押される割合に影響します。

文脈の合わない位置では、再生されません。

6行目がなければ、効果を判断できません。

次の記事の判断のためにも、記録を残します。

この6項目を、記事を作る手順に入れておきます。

公開の直前に思い出すのでは、間に合いません。

やりがちな失敗

実際に起きている例です。

• 記事の冒頭に大きな動画を埋め込み、最初の表示が遅くなる
• 1つの記事に動画を3本並べ、表示速度が大きく落ちる
• 字幕を付けず、音を出せない環境では内容が伝わらない
• 会社の環境だけで確認し、外出先での遅さに気づかない
• 動画と文章で同じ内容を繰り返し、どちらも中途半端になる

1行目は最も多い失敗です。冒頭には画像を置き、動画は中盤以降にします。

2行目は、押して読み込む方式にすれば影響を抑えられます。

3行目は、職場で音を出せない前提で作ります。

4行目は、確認の環境の問題です。スマホと遅い通信で見ます。

5行目は、構成の問題です。動画には実演、文章には基準を置きます。

どれも、記事を書く段階で決めておけば防げます。

進める4工程

順番に進めます。

• 自動で再生する設定にする場合は、音を出さない設定にする
• 遅延読み込みの設定が有効になっているかを確認する
• 動画の要点は文章でも書き、機械にも読める形にする
• 1つの記事に置く動画は、原則1本から2本に抑える
• 既存の記事に後から追加する場合は、構成の見直しも行う

この4工程と5つの注意で、判断が形になります。

1工程目を飛ばすと、置き方の判断ができません。

目的が決まっていない状態では、速度と再生数の優先を決められません。

2工程目は、実装の手間との兼ね合いになります。

手間をかけられない場合は、画像とリンクの形から始めます。

3工程目は、見られる前提を整える作業です。

4工程目は、次の判断のための材料になります。

記録がなければ、置き方が正しかったか分かりません。

まとめ

記事に動画をそのまま埋め込むと、ページの読み込み時に動画の仕組みも一緒に読み込まれ、表示の時間が長くなります。検証では、埋め込みの有無でスマホ向けの評点に差が出たという報告があります。表示が遅ければ、読む前に離脱される場合があります。

影響を抑える方法は、押されたときに読み込む方式です。表示の段階では画像と再生の記号だけを置き、押した相手にだけ動画を読み込みます。この方式で、表示までの時間と操作できるまでの時間が改善したという報告があります。

判断の順番は、記事の目的を先に決めることです。動画を見せることが目的なら埋め込みや押して読み込む方式、記事を読ませることが目的なら画像とリンクにします。あわせて字幕を付け、音を出せない環境でも内容が伝わる状態にします。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。