【動画メール】メルマガにも使える!動画メールの作り方5種類と、それぞれの特徴を解説

【動画メール】メルマガにも使える!動画メールの作り方5種類と、それぞれの特徴を解説

  • このエントリーをはてなブックマークに追加

※この記事は、Vmailラボが寄稿しています。

 

前回の記事では、埋め込み型動画メールとは何か、そしてなぜ今注目されているかについて解説しました。

【動画メール】メール上で動画が自動再生、「埋め込み型動画メール」が注目される4つの理由

 

今回は、動画メールの具体的な作成方法について解説します。

メールで埋め込み表示が可能な動画には、「MP4形式やMOV形式などのフル動画」と「GIFアニメ形式の動画」の2種類があります。
また、この他に、「動画に遷移する静止画リンク」なども広義の動画メールとして捉えられることがあります。
そこで、これらの動画をメールに埋め込み表示させる5種類の方法と、それぞれのメリット/デメリット、対応メールソフトなどについて説明します。

なお、ここで作成するメールはHTMLメールであることを前提としています。

 

  • 方法1:VIDEOタグ+フル動画
  • 方法2:IMGタグ+GIFアニメ(読込型)
  • 方法3:IMGタグ+GIFアニメ(添付型)
  • 方法4:再生マークをつけた静止画リンクを使用
  • 方法5:埋め込み型動画メールサービスを利用
  • 番外編:Youtube動画の埋め込みはできる?

 

方法1:VIDEOタグ+フル動画

開封時にMP4、MOVなどの動画ファイルをWEBサーバーから読み込み、HTML5のVIDEOタグで表示させる作成方法です。
表示できるメールソフトが限られますが、動画メールの中で最も高画質で表示されます。

手順

(1)MP4、MOVなどの動画ファイルをWEBサーバーにアップロードします。

(2)HTMLメールを作成し、「ソース編集」画面に切り替えて、動画を挿入する部分に以下のように記述します。

<video autoplay controls preload="none" src="[手順(1)でアップロードした動画のURL]" type="audio/mpeg">
</VIDEO>

[]の部分は、手順(1)でアップロードした動画ファイルのURLに変更してください。

また、必要に応じて以下の項目を変更・追加してください。

  • スタイル(style)の追加
  • 「poster」でポスター画像を追加
  • 「type」「autoplay」「controls」「preload」などの属性を変更

※「autoplay」属性を記述しても、ユーザーのメールソフト設定によっては動画が自動再生されない場合があります。

(3)通常のHTMLメールと同様に配信します。

メリット

  • 最高画質の動画をメール内でインライン再生させることができる

デメリット

  • 動画ファイルを置くためのWEBサーバーが必要
  • 対応するメーラーが限られるため、対象のユーザーのみをセグメント化するのが難しい
  • VIDEOタグ非対応のメールソフトで見た場合、動画は表示されない

対応するユーザー環境

  • HTML5のVIDEOタグに対応しているメールソフト
  • 動画をネットから読み込み表示できる環境

対応メーラーの例

  • Mac mail
  • Thunderbird
  • Outlook2011/2016(Mac版)

…など

※受信側の設定によっては動画が再生されない場合があります

 

方法2:IMGタグ+GIFアニメ(読込型)

開封時にGIFアニメーションファイルをWEBサーバーから読み込んで表示させるタイプの動画メールです。
比較的高画質のGIFアニメを使用でき、対応するメールソフトの種類も多いのが特徴です。

手順

(1)MP4、MOVなどの動画ファイルをGIFアニメーションに変換します。

Photoshopなどの画像編集ソフトやWEBサービスを利用して、動画ファイルからGIFアニメを作成します。

(2)GIFアニメーションファイルをWEBサーバーにアップロードします。

(3)HTMLメールを作成し、「ソース編集」画面に切り替えて、GIFアニメを挿入する部分に以下のように記述します。

<img src="[手順(2)でアップロードしたGIFアニメのURL]"/>

[]の部分は、手順(2)でアップロードしたGIFアニメーションファイルのURLに変更してください。

また、必要に応じてスタイルや属性を追加してください。

(4)通常のHTMLメールと同様に配信します。

※画像添付型/画像読込型が選択できるメール配信サービスの場合、手順(2)~(3)の部分については「画像読込型」で作成してください。

メリット

  • 添付ファイルのサイズ制限を受けず、メール内でGIFアニメをインライン再生させることができる
  • 対応するメールソフトが比較的多い

デメリット

  • GIFアニメーションファイルを置くためのWEBサーバーが必要(メール配信サービスによっては不要)
  • 動画ファイルをGIFアニメに変換する手間が必要
  • 動画をそのままGIFアニメに変換すると元のファイルよりサイズが大きくなってしまうため、場合によっては画質を落としたり再生時間を短くするなどの加工が必要にある

対応するユーザー環境

  • HTMLメールのGIFアニメーション再生に対応しているメールソフト
  • GIFアニメーションファイルをインターネットから読み込み表示できる環境

対応メーラーの例

  • iPhone/iPad(docomo/au/SoftBankのキャリアメーラー)
  • Android(au/SoftBankの一部の端末のキャリアメーラー)
  • Gmail(iPhoneアプリ/Androidアプリ/WEBブラウザ版)  …など

※受信側の設定によってはGIFアニメが再生されない場合があります

 

方法3:IMGタグ+GIFアニメ(添付型)

GIFアニメーションファイルをメールに添付して送信し、メール内に埋め込み表示させる方法です。
HTMLメールが表示できるメーラーであれば、ほとんどのメールソフトで表示できます。
ただし、GIFアニメーションファイルのサイズが受信者側の添付ファイルの容量制限を超えないようにする必要があります。
また、受信者側の容量制限を満たしている場合でも、複数の宛先に同時送信する場合などには発信者側で制限がかかる場合があります。

手順

(1)MP4、MOVなどの動画ファイルをGIFアニメーションに変換します。

Photoshopなどの画像編集ソフトやWEBサービスを利用して、動画ファイルからGIFアニメを作成します。

(2)HTMLメールを作成し、手順(1)で作成したGIFファイルをメールの文面に貼り付けます。

画像添付型HTMLメールの静止画を貼り付ける手順と基本的には同じです。貼り付けるファイルとしてGIFアニメーションファイルを選択します。

(3)通常のHTMLメールと同様に配信します。

※画像添付型/画像読込型が選択できるメール配信サービスの場合、手順(2)の部分については「画像添付型」で作成してください。

メリット

  • オフライン状態でもメール内でGIFアニメをインライン再生させることができる
  • HTMLメールが表示可能なほとんどのメールソフトに対応している
  • 動画ファイルを置くためのWEBサーバーが必要ない

デメリット

  • 動画ファイルをGIFアニメに変換する手間が必要
  • GIFアニメーションファイルのサイズを受信側の添付ファイル容量制限以下に抑える必要があるため、低画質・短時間の動画しか送れない
  • 複数の宛先に同時送信する場合などに、発信側で制限がかかる場合がある(メール配信サービスからの一斉配信では特に注意が必要)

対応するユーザー環境

  • HTMLメールのGIFアニメーション再生に対応しているメールソフト

対応メーラーの例

  • HTMLメールを表示できるほとんどのメールソフトで表示可能

※受信側の設定によっては動画が再生されない場合があります

 

方法4:再生マークつき静止画リンクを使用

方法1~3のいずれも使用できない場合は、静止画像のリンクをユーザーにクリックしてもらい、WEB上の動画に遷移して観てもらう方法があります。
この方法は、メール上で動画がインライン再生される「動画メール」ではありませんが、GIFアニメの再生が不可能なメールソフトもカバーすることができます。
この場合は、リンクに使用する静止画に「再生マーク」を重ねることでクリック率を高めることができます。
「円に右向き三角形」の再生マークは、さまざまな動画配信サービスや動画再生プラットフォームで共通に使用されており、リンク先が動画であることをユーザーが一目で認識できるためです。

【再生マークつき静止画リンクの例】

videomail_2_1_183x375

手順

(1)動画の一場面をキャプチャして静止画を作成し、加工して再生マークを重ねた画像にします。

(2)作成した静止画を、HTMLメールに画像リンクとして挿入します。リンク先のURLには、動画ファイルや動画配信サイトのURLを指定します。

(3)通常のHTMLメールと同様に配信します。

メリット

  • HTMLメールを表示可能な全てのメールソフトに対応している

デメリット

  • ユーザーが画像をクリックしてリンク先に遷移しないと、動画が再生されない(動画メールではなく、静止画リンクのため)

対応するユーザー環境

  • HTMLメールが表示できるメールソフト

対応メーラーの例

HTMLメールを表示可能な全てのメールソフト

 

方法5:埋め込み型動画メールサービスを利用

埋め込み型動画メールサービスを利用して動画メールを作成することもできます。
この方法は、受信者のメール環境を判定し、上記の方法1~4の表示を自動的に出しわけて表示させられる点などが特徴です。

手順

(1)埋め込み型動画メールのサービス管理画面から動画をアップロードします。

(2)動画の長さやループ回数などの項目を設定し、動画再生タグを発行します。

(3)メールのHTMLソース編集画面で動画再生タグを貼り付けます。

(4)通常のHTMLメールと同様に配信します。

メリット

  • 受信側のメールソフトを自動判定し、最適な種類・画質の動画を自動再生できる
  • 動画ファイルからGIFアニメが自動的に生成される
  • 動画を表示できない環境の場合、自動的に静止画が表示される
  • さまざまなデバイスやメールソフトのユーザー宛に、同じソースコードで一斉送信できる

デメリット

  • 有料サービスである

対応するユーザー環境

  • HTMLメールが表示できるメールソフト

対応メーラーの例

HTMLメールを表示可能な全てのメールソフト

 

番外編:Youtube動画の埋め込みはできる?

YouTubeの動画をWEBページで埋め込み表示する際は、YouTubeの埋め込み用コードをコピーしてHTMLソースに貼り付けます。
では、同じ方法を利用して、HTMLメールにYouTubeの動画をインライン表示できるのでしょうか?
残念ながら、この方法でメールにYouTube動画を埋め込むことはできません
YouTubeの動画埋め込みコードには、iframeとJavaScriptが使用されています。
一部のメールソフトがiframeの表示には対応していますが、セキュリティ上の理由から、JavaScriptを有効にできるメールソフトはほぼ存在しません。

【メールにYouTubeの埋め込みコードを使用した場合の表示】

videomail_2_2_715x443

メールソフトではこのような表示になります。
代替方法としては、YouTube動画の一場面をキャプチャして静止画リンクを作成し、クリックしてYoutube動画を開いてもらうという方法があります(上記の方法4を参照)。
ただし、この方法ではYoutubeでの動画再生後に自社サイトに誘導できないめ、購買行動や自社コンテンツ閲覧にはつながりにくいという弱点があります。

 

以上、 動画メールの具体的な作り方について解説しました。
次回は、この記事で紹介した5種類の動画メールについて、最適な用途とそれぞれの特徴をまとめます。

 

>>メールマーケティングの最新情報をお届け! メルラボ / 配配メールのメルマガに登録する

 

メール配信のお悩み配配メールで解決!無料資料をプレゼント
The following two tabs change content below.
  • このエントリーをはてなブックマークに追加

関連するおすすめ記事

  • 配配メールバナー