ホームページに動画を埋め込む方法:ステップバイステップガイド

<p>クーパーは Vimeo のシニアコンテンツストラテジストです。彼女が現在お気に入りで見直しているのは『コンパートメント No. 6』です。</p>
Cooper Savage
Vimeoの動画をホームページに埋め込む方法や、Wix、Shopify、WordPress、Squarespace、Facebookなど各プラットフォームへの追加方法をご紹介します。

テキストだけのウェブサイトよりも、音声付きの動画がある方がはるかに効果的です。動画を埋め込むことで、訪問者の注意を引きつけ、ページ上での滞在時間を長く保てます。プロモーション動画や解説、体験談など、どのような目的であっても、埋め込み動画はテキストよりも視覚的に訴求力があります。

このガイドでは、ウェブサイトに動画を埋め込むメリットや、Vimeoなどのプラットフォームを活用して動画を埋め込む具体的な方法についてご紹介します。

なぜウェブサイトに動画を埋め込むのか?

動画を埋め込むことで、サイト訪問者の関心を引きつけ、より長くページに留まってもらいやすくなります。エンゲージメントが高まることで、登録や購入、またはCTAのクリックといったアクションにつながりやすくなります。

さらに、埋め込み動画にはユーザーとブランドの両方にとって多くのメリットがあります。

動画をアップロードして埋め込む

視聴者のエンゲージメントを向上

埋め込み動画を使えば、視聴者に「登録する」「購入する」「詳細を見る」といったアクションを促すCTAを追加できます。しかも、ページを離れたり再生を一時停止したりする必要はありません。Vimeoに動画をアップロードすれば、さらに多くのメリットが得られます。VimeoはGoogleの動画プレーヤーに関するSEOベストプラクティスに準拠しており、キーモーメントと呼ばれるチャプター機能にも対応しています。これにより、視聴者は自分にとって重要な部分にすぐアクセスできるようになります。

SEOとブランド認知度の強化

検索エンジンは動画コンテンツを好みます。そのため、動画を自社サイトに埋め込むことで、SEOを大幅に強化することができます。さらに、埋め込みコードに詳しいタイトルや説明文、文字起こしを追加することで、検索結果で上位に表示される可能性が高まります。これにより、露出が増えるだけでなく、適切な視聴者にコンテンツを届けやすくなります。

  • たとえば、サムネイルやメタデータを最適化した動画は、検索結果ページで目立ちやすくなり、ユーザーの注意を引きやすくなります。その結果、より多くのトラフィックをサイトに呼び込めます。
  • また、ユーザーが動画内容と一致するキーワードで検索したとき、YouTubeやVimeoなどのプラットフォームがGoogleの動画検索結果に表示されることもあります。これにより、あなたのブランドがより目立つ場所に表示されやすくなります。
  • さらに、動画を自社のウェブサイトに直接埋め込むことで、ブランドの一貫性を保ちつつ、自身のコンテンツであることを明確に示すことができます。さまざまなプラットフォームにおいても、ブランドの存在感を高める手段として有効です。

サービスを魅力的に見せる

動画を埋め込むことは、視聴者の注目を集めながら商品やサービスを効果的に紹介できる、双方にとってメリットのある手法です。

  • 製品紹介動画や、その他の動画マーケティングコンテンツは、顧客の関心を引きつけ、販売促進につながります。
  • 教育機関やeラーニングサイトでは、インストラクション動画を埋め込むことで、学びの内容を視覚的にわかりやすく伝えることができます。
  • イベント主催者は、動画背景を埋め込むことで、期待感を高めたり、プロモーションの一部として活用したりできます。
  • 業界を問わず、チュートリアル動画や顧客の声、紹介コンテンツなどをホームページに加えることで、役立つ情報を提供できます。

今すぐ動画をアップロードして埋め込む

各種プラットフォームへの埋め込み方法

Vimeoをはじめ、他の動画プラットフォームを使う場合でも、ウェブページに動画を追加する方法は共通しています。以下でその手順をご紹介します。

Vimeo動画を埋め込む方法

Vimeo動画を埋め込むのはとても簡単です。Vimeo Starterメンバーであれば、動画プレーヤーのサイズ、テキスト、再生バーの色などをカスタマイズできます。また、ポートレート、署名、動画タイトルの表示・非表示を切り替えることも可能です。有料メンバーは、さらに多くのカスタマイズ機能を動画設定から利用できます。

1. Vimeoの動画ライブラリにアクセスし、埋め込みたい動画の右下にある縦3つのドットメニューをクリックします。

2. もしくは、動画の個別ページに直接アクセスします。

3.「共有」をクリックします。

4. 共有用のモーダルが表示されたら、「埋め込み」タブを選択します。

5.「埋め込みコードをコピー」ボタンをクリックし、貼り付けたい場所にコピー&ペーストします。

動画の公開設定が「限定公開」または「公開」になっていることを確認してください。詳しくはヘルプセンターをご覧ください。

Embed a Vimeo video

YouTube動画を埋め込む方法

YouTubeでは、動画を「限定公開」に設定した場合、埋め込み動画経由のトラフィックは許可されません。これは、視聴者を他サイトへ誘導するのではなく、自社プラットフォーム上にとどめておきたいというYouTubeの方針によるものです。そのため、動画の検索エンジンでの見つけやすさも制限され、埋め込んだ動画から自社サイトへのアクセスを得ることができません。VimeoとYouTubeの動画SEO機能の比較はこちら

YouTube動画を埋め込む手順は以下の通りです。

1. 埋め込みたいYouTube動画のページを開きます。

2. 動画の下に表示されている「共有」ボタンをクリックします。

Some alt text for this image
Embed a YouTube video

3.「埋め込む」を選択し、表示されたコードをコピーして、任意の場所に貼り付けます。

YouTubeでは、プレーヤーの設定もカスタマイズできます。開始時間、自動再生、言語、ループ再生などのパラメータを、iframeの埋め込みコード内で直接調整できます。

YouTube embed code

FacebookまたはInstagramの動画を埋め込む方法

FacebookまたはInstagramの動画をウェブサイトに埋め込むには、以下の手順に従ってください。

1. ブラウザから埋め込みたい動画を見つけます。

2. 右上の3点メニューをクリックし、「埋め込む」を選択します。投稿のキャプションも表示させたい場合は、該当するボックスにチェックを入れてください。

3. 表示された埋め込みコードをコピーして、自分のウェブサイトに貼り付けます。なお、埋め込み可能なのは公開設定された動画のみです。

Instagram video embed code

Animotoの動画を埋め込む方法

Animotoの動画をウェブサイトに埋め込む方法は以下の通りです。

1. 埋め込みたい動画を見つけ、右上の3点メニューをクリックします。

2. 表示されるメニューから「共有」を選びます。


Embed an Animoto video

3. 次に「埋め込む」をクリックします。

4. プレーヤーのサイズ(全幅または固定サイズ)、解像度(720pや1080pなど)、ループ再生(自動で繰り返すかどうか)などの設定を調整します。

5. 設定が完了したら、表示された埋め込みコードをコピーしてウェブエディターに貼り付けます。

ウェブサイトに動画を埋め込む方法

どのプラットフォームを使っているかによって、動画の埋め込み方法は異なります。ここでは、HTMLを使った埋め込み方法のほか、WordPress、Wix、Shopifyなどのホスティングプラットフォームでの埋め込み方法をご紹介します。

HTMLで動画を埋め込む方法

HTMLは、カスタマイズの自由度が最も高く、特にデザイン重視のウェブサイトに適しています。ただし、この方法ではHTMLの基本的な知識が必要になります。

HTMLで動画を埋め込むには、タグを使用します。プレーヤーのサイズは「width」と「height」属性で指定し、動画のURLを「src(ソース)」属性に設定します。ほとんどの動画ホスティングプラットフォーム(YouTubeやVimeoなど)では、埋め込みコードが自動で生成されるため、ダブルクォーテーションマークの間にコピーして貼り付ける(例:"埋め込みコード")だけで使用できます。

WordPressに動画を埋め込む方法

柔軟でパーソナライズされたデザインを実現するには、本来コーディングのスキルが求められますが、WordPressなら直感的に使えるインターフェースと豊富なカスタマイズ機能により、プロセスをシンプルにしてくれます。

WordPressで動画を埋め込むには、以下の3つの方法があります。

1. 埋め込みコードを使う:WordPressの自動埋め込み機能では対応できない動画やカスタマイズが必要な場合は、埋め込みコードを使用します。WordPressのテキストエディターに切り替えてHTMLを表示し、動画を表示させたい場所に埋め込みコードを貼り付けてください。その後、「公開」または「プレビュー」をクリックして、正しく表示されているか確認します。

2. URLをコピー&ペーストする:YouTubeやVimeoなどの動画ホスティングプラットフォームでは、埋め込みコード全体を使わなくても、動画のURLをそのままWordPressのHTMLエディターに貼り付けるだけで埋め込みが可能です。コーディングの必要はありません。

3. 動画プラットフォームのプラグインを使う:VimeoやYouTubeなどの動画プラットフォームに対応したWordPressプラグインを使えば、動画を直接埋め込むことができます。時間のないプロフェッショナルや、不慣れな方でも簡単に扱える便利な方法です。

WordPress Vimeo video embeds

Wixウェブサイトに動画を埋め込む方法

Wixには、動画を埋め込むための2つのやり方があります。

1. 埋め込みコードを使う方法:動画の埋め込みコードをコピーし、Wixエディタを開いて「その他」を選択します。HTMLのiframeにコードを貼り付け、「保存」をクリックしてください。HTMLのiframeを使うと、より細かいカスタマイズが可能ですが、初心者にはやや扱いづらいかもしれません。

2. コピー&ペーストで追加する方法:Wixエディターで「+」アイコンをクリックし、「動画」を選択。動画プラットフォームを選んで、動画のURLを貼り付けるだけでOKです。技術的な知識がほとんどなくても、手軽に使える方法です。

Shopifyに動画を埋め込む方法

1. Vimeo、YouTube、Facebookなどから動画の埋め込みコードをコピーします。

2 Shopifyの管理画面で、埋め込み先のページを開き、リッチテキストエディターを表示して、ツールバーの動画アイコンをクリックします。

3. 埋め込みコードを貼り付け、「動画を挿入」をクリックすれば完了です。

VimeoはShopifyと連携しており、動画のURLをページビルダーに貼り付けるだけで埋め込みが完了するため、さらに簡単です。

Squarespaceに動画を埋め込む方法

Squarespaceへの動画の埋め込みは簡単です。

1. 埋め込み先のページに動画ブロックを追加します。

2. 次に、動画の埋め込みコード、または動画URLを貼り付けます。

動画をSquarespaceに追加する前に、動画ホスティングプラットフォーム側で表示設定(再生サイズや自動再生など)をカスタマイズしておくことで、自分の意図通りに動画を表示させることができます。

Embed a video on Squarespace

よくある質問

ウェブサイトに動画を埋め込む最適な方法は?

動画をレスポンシブ対応で埋め込むと、すべてのデバイスでシームレスな視聴体験を提供できます。たとえばVimeoなどのプラットフォームでは、CSSを使った方法(<iframe>を<div>で囲み、アスペクト比を保つためにパディングを適用するなど)がよく使われます。このコンテナ内でiframeの幅と高さを100%に設定すれば、レイアウトに合わせて動画が適切に拡大・縮小されます。レスポンシブ対応で埋め込むことで、ユーザーの利便性はさらに向上します。

動画の埋め込みとは?

動画の埋め込みとは、Vimeoのようなホスティングプラットフォームにある動画を、別のウェブページやSNSに直接表示させることです。外部リンクに飛ばすのではなく、そのページ内に動画プレーヤーを表示することで、ユーザーが離脱せずにそのまま視聴できるようにします。

ウェブサイトに動画を追加する最も簡単な方法は?

Vimeoのようなプラットフォームから動画を埋め込むのが、もっとも手軽な方法のひとつです。高速で、大容量ファイルを自分のサーバーに置く必要がなく、安定した再生も保証されます。

動画のアップロードと埋め込みの違いは?

アップロードは、動画ファイルを自分のホスティングサーバーに直接保存する方法です。これによりストレージを消費し、サイトの表示速度が低下する可能性があります。一方、埋め込みは外部の動画ホスティングサービスへのリンクを使うため、通信量を節約でき、再生品質も向上し、カスタマイズの選択肢も広がります。

動画を変換して埋め込む方法は?

動画を変換して埋め込むには、まず動画をホスティングプラットフォームにアップロードし、埋め込みコードをコピーして、自身のウェブサイトのHTMLやウェブエディターに貼り付けます。なお、動画の変換については、ほとんどの場合気にする必要はありません。ほとんどのホスティングプラットフォームは、自動で最適化してくれます。

埋め込みコードとは何ですか?

埋め込みコードの形式は、動画ホスティングサービス(たとえばVimeoなど)によって多少異なります。単なるリンクではなく、埋め込みコードを使うことで、動画プレーヤーをウェブページやSquarespace、Wixなどのプラットフォーム内に直接表示し、複数のソースからの動画を簡単にウェブコンテンツとして組み込むことができます。

Vimeoなら埋め込みがさらに簡単に

Vimeoを使えば、ウェブサイトへの動画の埋め込みがさらに簡単になります。SquarespaceやWordPressなど、プラットフォームにかかわらず、スムーズな再生、洗練された動画体験を視聴者に提供できます。

まずは無料で動画をアップロード