Web担当者になったら知っておきたい「基本」が学べる Web担ビギナー

Step 3-10 Webページで使う「動画」の基礎知識

Step 3-10 で知ってほしいことは、Webページで使う動画を掲載する際の注意ポイントを知ることです。

Web担ビギナーの目次を知りたい方はこちら

クイズ

ある家電メーカーが掃除機の新商品を出すにあたり、特徴や使い方、画期的な技術について詳しく解説した30分の動画を作成しました。それをそのまま商品の紹介ページに掲載しても良いでしょうか?

自信をもって売り出す新商品ですから、訴えたいこと、伝えたい思いはたくさんあると思います。しかし、Webサイトで長尺の動画はユーザーに嫌われます。たとえば、法人向け、個人向け、それぞれ紹介すべきポイントは異なりますから、両方に訴えたいことをそのまま掲載しても効果はありません。求めている情報がすぐに表示されないと、ユーザーはすぐに離れてしまいます。

もし長尺動画を作成した部署から、Webページに掲載してほしいと依頼があった場合は、ニーズごとに分割し、別動画として編集して掲載し、長尺版はYouTubeチャンネルに置いておくことも考えましょう。もちろん、分割・編集の前に依頼のあった部署の承諾を得てください。

  • 長尺動画をそのままWebページに掲載する
  • 長尺動画を分割して、Webページにふさわしい長さ・内容に編集する

3-10では、Webページに埋め込んで使う動画ファイルの基本知識を紹介します。

動画のファイル形式と特徴

動画のファイル形式で、Web担当者が覚えておいてほしいのは、MP4(エムペグフォー)と、WebM(ウェブエム)です。これらは動画データを圧縮する形式で、圧縮することで容量を下げ、インターネット経由でも再生できるようにしています。

  • MP4 拡張子は.mp4
    圧縮率が高いながらも高画質で、現在のWebで使われる動画の主流となっているファイル形式です。さまざまなプラットフォームやプレーヤーに対応しており、多くのサイトで使われています。
  • WebM 拡張子は.webm
    GoogleがWeb上での再生にフォーカスして開発した動画ファイル形式です。現在では、Chromeだけでなく、主要ブラウザでも視聴できるようになりました。

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

動画をWebページで表示する際はVideoタグを使います。たとえば、videofile.mp4という動画ファイルを無音で自動再生させるには、ソースコードに次のように記述します。

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

自動再生ではなく、再生や停止、音量ボタンを表示させたい場合は、次のようにします。

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

YouTubeを利用する方法

Webページに埋め込むのではなく、YouTubeに動画をアップロードし、それをWebページから視聴できるようにする方法もあります。

YouTubeへのアップロード

YouTubeへのアップロード方法は、YouTubeのヘルプページに説明があります。

YouTubeヘルプ 動画のアップロード
https://support.google.com/youtube/answer/57407

パソコンであれば、YouTube Studioにログインし、[作成]→[動画をアップロード]をクリックして、アップしたい動画ファイルを選択するだけです。

YouTube動画のWebページへの埋め込み

YouTubeにアップロードした動画をWebページで視聴できるようにする方法についても、YouTubeのヘルプページに掲載されています。

YouTubeヘルプ 動画と再生リストを埋め込む
https://support.google.com/youtube/answer/171780

アップロードした動画を表示し、「共有」→「埋め込む」で、次のような<iframe>タグのコードが表示されますので、それをWebページのソースコードにコピー&ペーストすればOKです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/〇〇〇" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

なぜ、動画なのか?

近年は動画によるマーケティング活動に取り組む企業が増え、トップページのメインビジュアルとして動画を埋め込むケースも増えています。確かに動画は目を引きますが、Webへの掲載にあたっては、「この動画は本当にWebページに必要なのか?」を検討してください。

動画制作には、企画立案からシナリオ作成、ロケハン、撮影、編集などさまざまな工程がありますし、人手もかかります。当然それなりの予算を必要とします。また、動画はユーザーの目を引きますが、サイトの表示スピードは確実に遅くなります。

動画だらけで重いサイトでは、ユーザーのためになりません。掲載にあたっては、「なぜ動画でなければならないのか?」「本当に写真やテキストではだめなのか?」を今一度考え、慎重に行いましょう。

◇◇◇

3-10では、Webページで使う動画の基礎知識を解説しました。3-11では、Web制作で気を付けたい著作権について紹介します。

ポイント
3-10 「Webで使う動画の基礎知識」のポイント
  • 長尺動画はあまり視聴されない
  • Webでは、MP4、WebMといったファイル形式がよく使われている
  • Webページに動画を埋め込むのではなく、YouTubeに動画をアップし、それをWebページから視聴できるようにする方法もある
やってみよう
  • 自社のWebサイトに掲載している動画を視聴して、どれくらいの長さなのか、その動画が何のために使われているかを確認してみよう。
本記事の監修者

白石 裕一朗(しらいし ゆういちろう)

株式会社キノトロープ コンサル部 副部長
ディレクター、コピーライター

25年以上にわたる専門誌の編集業を経て、キノトロープへ入社。
年間で500本以上の「成果に結びつく」コンテンツを監修。
企業セミナー・大型セミナーの講師も務める。

デザイン:三苫慧子
この記事が役に立ったらシェア!
これは広告です
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

O2O
O2Oは「Online to Offline」の略で「On2Off」と表現される ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]