ホームページにYouTube動画を埋め込む方法。動画サイズ、アスペクト比、レスポンシブ対応とは

動画マーケティング

本稿は2021年05月24日公開の「動画の埋め込み位置でユーザー行動が変わる!?適切なサイズと位置を徹底解説」を加筆修正したものです。

自社のマーケティング戦略のひとつとして、YouTube動画を活用する企業が増えています。

自社ホームページにYouTube動画を埋め込んで、ユーザーに閲覧してもらうという方法が一般的ですね。だけどどうやってホームページに埋め込むのか、どの位置に埋め込めばいいのかは意外と知られていません。

今回は、ホームページへのYouTube動画の埋め込み方法についてわかりやすく解説します。

YouTube動画を埋め込むメリット

自社ホームページにYouTube動画を埋め込むには、大きくわけて2つの方法があります。

  1. 自社サーバーに動画をアップしてvideoタグというHTMLコードで埋め込む
  2. YouTubeなどの動画共有サイトに動画をアップして埋め込みタグを取得する

より簡単なのは、2のYouTubeにアップして埋め込みタグを取得する方法です。自社サーバーに動画データを置かないことで余計な負荷を減らせますし、YouTubeからの流入も期待できるようになります。

ただし、YouTube動画のメリットを活かすには、埋め込み方法を正しく知っていなければ意味がありません。YouTube動画の埋め込み方はもちろん、動画サイズやアスペクト比、レスポンシブ対応、動画の埋め込み位置についての基礎知識も知っておくようにしましょう。

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

YouTubeに動画をアップロードしたあとは、「埋め込みコード」を取得するだけでOKです。以下の手順で埋め込みタグを取得しましょう。

1.埋め込みたい動画の「共有」をクリック

2.「埋め込む」をクリック

3.「埋め込みタグ」をコピーしてホームページに埋め込む

※開始位置のチェックを入れると、指定の場所から再生できます。

YouTube動画のサイズについて知っておきたい基礎知識

ホームページに動画を埋め込む前に、動画のサイズの基礎知識について把握しておきましょう。

サイズの単位や表し方を理解できれば、漠然としたイメージではなく、かなり具体的に動画サイズについて理解できるようになります。

アスペクト比とは

アスペクト比とは、縦横の比率のことです。横向き動画は16:9、縦向き動画は1:1や9:16などが自然なアスペクト比です。

YouTubeの標準アスペクト比は16:9です。動画のアスペクト比が16:9ではない場合は、動画サイズとデバイスに合わせて自動で最適なサイズに変換されます。

アスペクト比を変更することも可能ですが、投稿するプラットフォームごとに推奨アスペクト比が存在するため、むやみに変更することは以下のリスクがあるため、おすすめしません。

  • 動画が縮んだり伸びたりする
  • 上下左右に余白が生じる
  • プラットフォームによってアスペクト比が自動調整され、画質が荒くなる

ちなみに、以下の動画のアスペクト比は16:9で作られています。

SNS動画広告専門配信サービス「Nayuta TV」

埋め込みタグを見てみると「width=”560″ height=”315″ 」といった記述があります。これは幅560px、高さ315pxを意味し、アスペクト比幅16:9の動画であることがわかりますね。

解像度とは

解像度とは画素数のことであり「ピクセル」という単位で表されます。

【動画で主に用いられる解像度】

  • 1080P(横1920×縦1080ピクセル)
  • 720P(横1280×縦720ピクセル)

ピクセルとは、映像最小単位の小さな点のことです。数値が高ければ高いほど、きめ細かな高画質の画像になります。特に、PCモニターなどの大型画面で視聴される際には、解像度が低いと視聴者にストレスを与えるケースがあります。

ただし、解像度は高ければよいというものでもありません。解像度に比例してファイルが重くなるため、高解像度になるとネットワークの速度が遅くなったり、スマホでの閲覧者に重いパケット負担をかけてしまったりするためです。

必要以上に高画質を求めるリスクについても理解しておきましょう。

レスポンシブ対応とは

レスポンシブ対応とは、画面のサイズに合わせて動画サイズを自動調整する機能です。動画をレスポンシブで埋め込むことで、スマホやタブレット端末など、幅広いユーザーに対して最適な環境で視聴してもらうことが可能です。

上記で説明した「動画埋め込みタグ」は、サイズが固定されています。そのためホームページに埋め込んだYouTube動画をスマホで閲覧すると、はみ出して表示されることがあります。

解消するには埋め込みコードに追加の記述が必要になります。詳しくはYouTubeヘルプを確認してみましょう。

YouTubeの推奨サイズ、推奨アスペクト比は?

YouTubeの推奨サイズと推奨アスペクト比について、わかりやすくまとめました。解像度と合わせて確認しておきましょう。(※2021年9月の情報です。詳細はYouTubeヘルプもご確認ください。)

推奨される解像度とアスペクト比

解像度サイズ(幅×縦)アスペクト比
2160p3840×2160ピクセル16:9
1440p2560×1440ピクセル16:9
1080p1920×1080ピクセル16:9
720p1280×720ピクセル16:9
480p854×480ピクセル16:9
360p640×360ピクセル16:9
240p426×240ピクセル16:9

YouTube動画の埋め込み位置とサイズ

これまでの内容を踏まえて、最適な動画の埋め込み位置とサイズについてチェックしていきましょう。

ここでの「最適」とは、離脱されることなくユーザーから動画が視聴され、ブランド力の向上や商品の購入などの成果につながる動画を意味します。

コンテンツページに商品紹介動画を埋め込む

会社紹介や商品紹介などのコンテンツの一部として動画を埋め込む場合は、動画にコンテンツの補完性をもたせることが重要です。ニュースリリースに動画を利用するケースも同様です。

動画での集客や販売促進に意識が集中すると、動画を目立たせたることに意識が集中してしまいます。しかし、「押しつけ」感の強いホームページは、ユーザーからネガティブな印象をもたれてしまいがちです。

  • 商品やサービスの理解を高められること
  • 商品やサービスに興味のあるユーザーに対して、必要な情報を届けること

上記の2点を意識して、最もユーザーの理解を深められる位置に動画を埋め込みましょう。

従って、「必ずページ冒頭がよい」「ページの最後に動画を埋め込むべき」など決まった位置があるわけではなく、ホームページのなかでユーザーにとって最も必要な位置に置くことがベストです。

【株式会社RABO『Catlog』の商品紹介動画 】

参考:https://rabo.cat/catlog/

トップページにブランディング動画を埋め込む

ブランディングに使用する動画は、インパクトや洗練されたイメージをもたせることが大切です。YouTube動画を埋め込むとYouTubeのロゴが残ってしまうので注意が必要です。

ブランディングのための動画は、ホームページの上部や最下部など、ユーザーにとってわかりやすい位置が最適です。以下はYoutube動画を埋め込んだものではないですが、魅力的なブランディングムービーの例として紹介します。

【コーセー『ESPRIQUE』のブランディングムービー】

参考:https://www.kose.co.jp/esprique/

複数の動画を一覧表示して埋め込む

自社の動画コンテンツを、目次のようにして一覧表示させる手法もあります。

この場合、重要な点はユーザーが知りたいことを知るためにどの情報にアクセスをすればよいのかを表示することです。一つひとつの動画サイズを少なくして、できるだけ画面を動かさずに必要な情報が得られるようにする工夫が求められます。

ただし、一つひとつのサイズを小さくしすぎると、何についての動画なのかがわかりづらくなってしまうため、必要最小限のサイズをクリアしているか否かのチェックは不可欠です。

動画を並べると同時に、それぞれの詳細ページへの動線を設置しておくと、ユーザビリティが高まります。

【エコモット株式会社『現場ロイド』おすすめ製品紹介】

参考:https://www.gembaroid.jp/movie

埋め込み動画の効果を高める3つのポイント

埋め込み動画の効果を最大限に高めるには、動画コンテンツ自体の作成にも工夫が必要です。この章では、埋め込み動画の効果を高めるための3つのポイントを解説します。

動画にストーリーを持たせる

最適な位置に動画を設置しても、動画の内容が魅力的でなければまったく意味がありません。そして、魅力的な動画であるための大きなポイントは「ストーリー性」です。ユーザーが思わず親近感を抱くようなストーリーを演出しましょう。

  • いかにして商品やサービスが生まれたのか?
  • サービスを利用すると、ユーザーにどんな変化が生まれるのか?
  • どのようなビジョンで、企業活動をしているのか?

わかりやすいサムネイル

動画を再生してもらうためには、サムネイルをみれば何についての動画なのかがわかるようにしておく必要があります。

ただわかりやすいだけではなく、興味を惹きつけるものであると印象づけできれば、より効果的です。ユーザーの多くは、サムネイルの内容によって、動画を再生すべきか否かをチェックします。

  • 動画の内容を端的に説明したタイトル(フォントにもこだわる)
  • 色調やロゴなどのトーンを統一する
  • ホームページ背景との親和性や見やすさを意識する
  • 誇張表現は避ける
  • 動画情報が右下または左下に表示されることが多いので被らないように配置する

テキストの活用と消音設定

ユーザーがホームページを視聴する環境・状況はさまざまです。再生時に音楽や音声が大音量で流れて、迷惑となる場合もあります。

義務ではありませんが、初期設定でミュート設定にしておくのもよいでしょう。同時に、ミュートにしても内容が確認できるように、動画内の字幕や動画内容について説明するテキストコンテンツを用意しておくことで、動画を見てもらいやすくなりますね。

まとめ

ホームページに動画を埋め込むと、自社商品やサービスをわかりやすくユーザーに訴求できます。そして、そのメリットを最大限に活かすには、動画サイズやアスペクト比、埋め込み位置の意識も重要です。

YouTube動画の埋め込み方は簡単ですが、ホームページの管理方法によっては、自社サーバーにアップする方が良い場合もあります。あらゆる状況を想定して、効果的な動画マーケティングを展開しましょう。

NayutaColumnへのお問い合わせはコチラ


◆お知らせ

LINE公式アカウントをはじめました!最新記事の公開情報など好評配信中です!
友達登録お待ちしております。QRコードの読み取り または 下のボタンから登録可能です。

友だち追加

ピックアップ記事

関連記事一覧