Articles

HTML5 and Video in Email

Posted on

Article first published October 2009, updated May 2019

メールマーケティングの競争が激化する中、マーケターは読者の体験を向上させる方法を模索しています。

読者がメールを楽しんでくれれば、オファーを受けてくれる可能性が高くなり、結果的に高いコンバージョン率(そして収益の増加)につながります。

Updated for 2019: The best use of video in E-mail

ここ数年、メールマーケティングに携わってきた方なら、その変化の大きさを理解しているのではないでしょうか。 ひとつには、購読者にメールリストに登録してもらうことは、以前ほど簡単ではありません。

これが、動画がメールで人気を博している理由です。

ただし、HTML5と動画メールは、メールマーケティングにとって新しいものではありません。 マーケターは過去にこの2つを融合させようと試みましたが、結果は散々なものでした(一部のメールクライアントでは悲惨でした)。 しかし、テクノロジーの進歩に伴い、HTML5と動画をメールで使用することが復活してきました。

メールに動画を使用する際は、以下の点に注意してください。

メールに動画があることを読者に知らせる

メールに動画があることを読者に知らせることは、開封率を上げる良い方法です。

シリーズ化する

読者を飽きさせないためには、メールにシリーズ化した動画を作成するのが良いでしょう。 ただし、情報量が多く、面白いものにしてください。

Create video testimonials

試供品ほど行動を促すものはありません。 あなたの最高の顧客に、ビデオによる証言を提供してもらえないか尋ねてみましょう。 これらはプロのスタジオに行かなくても簡単に作ることができます。

ミニチュートリアル

あなたの顧客がいつも質問していることはありませんか? そのようなトピックに沿ってチュートリアルや教育ビデオを作成し、メールに添付してみてください。

ブランド ストーリーを共有する

誰もが良いストーリーを好みますし、あなたの顧客もあなたのストーリーを知りたがっています。 メール、特にウェルカムメールには、ブランドストーリーの動画を埋め込みましょう。

メールでの動画の使い方はたくさんあるので、次のキャンペーンに動画メールマーケティングを採用しない理由はありません。

Approaches to video in email

メールでの動画のサポートについて詳しく調べたのは、今回が初めてではありません。 以前の調査では、サポートしているメール クライアントでは動画を許可し、サポートしていないメール クライアントではクリック可能なフォールバック画像 (ブラウザで動画を再生する) を許可するアプローチを模索していましたが、

結果は残念なものでした。 Apple Mail だけが Flash による適切なビデオ再生をサポートしており、Flash をサポートしていないクライアントに予備のコンテンツを提供する一貫した方法はありませんでした。 これが問題の核心だと思います。 ビデオがうまくいかない場合は、他の人にもうまく機能するようなバックアッププランを用意しておく必要があります。 ほとんどのメール クライアントは、動画を挿入するために使用される <object> タグを削除するため、バックアップ計画は利用できませんでした。

HTML5 を使用したシンプルなアプローチ

Kroc Camen 氏の非常にクールな Video for Everybody を出発点として、ブラウザに対するアプローチはメール クライアントに対するものとは全く異なることが明らかになりました。 つまり、HTML5 <video>が利用できない場合、QuickTime や Flash にフォールバックすれば、ほぼ確実にビデオが動作することが保証されます。

先に述べたコーデックの争いのため、H.264 (Apple と Google がサポート) と Ogg Theora (Mozilla と Opera がサポート) の両方でビデオを提供する必要があります。 しかし、メールの場合はそうはいきません。 Gecko(Firefoxのレンダリングエンジン)を使用している一般的なメールクライアントはThunderbirdのみで、現在のところHTML5ビデオを表示しないことを選択しています。 そのため、Flash/Quicktime のフォールバックと同様に、Ogg Theora も使用できません。

最終的なコード

電子メールによって不要になったすべてのビデオ オプションをカットした後、最良の結果を得た最終的なコードは次のとおりです。

見てわかるように、<video> タグ内にフォールバック画像 (動画をサポートしているメール クライアントでは、再生する前に映画のポスターとして都合よく読み込まれます) と、動画の幅と高さを指定しています。

最後に、HTML5 をサポートしていないメール クライアントに表示させたいバックアップ コンテンツを <video> タグ内に追加します。

結果

Mac で作業していた私は、まず Apple Mail を使用しました。 ビデオは完璧にレンダリングされました。

次に、人気のあるウェブベースのメール クライアントを試してみました。 Yahoo! 残念ながら、ウェブベースのメールクライアントは、HTML5 ビデオの再生を無効にしているようです。 これにはがっかりしましたが、悪いことばかりではありません。 ビデオの代わりに、提供されたバックアップコンテンツを表示することができました。この場合は、自分のウェブサイトのビデオにリンクできるクリック可能なフォールバック画像です。

テストを続けたところ、PC のデスクトップ メール クライアントでも同じ結果になりました。 ビデオは再生されませんでしたが、私がテストしたすべてのクライアントで予備のオプションが表示されました。 以下がその結果です。

tr

デスクトップの電子メールクライアント 結果
Apple Mail ビデオが再生されます
Entourage 2008 ビデオが再生されます
Lotus Notes 6, 7と8です。5 ✘フォールバックコンテンツを表示
Outlook 2007 ✘フォールバックコンテンツを表示
Outlook 2003 ✘フォールバックコンテンツ 表示される
Thunderbird ✘ Fallback content displayed
Windows Mail ✘ Fallback content displayed
Web-?ベースのメールクライアント 結果
AOL Web ✘ フォールバックコンテンツが表示される
Gmail ✘ フォールバックコンテンツが表示される
ホットメール ✘フォールバックコンテンツが表示される
モバイルミー ビデオが再生される
マイスペース ✘フォールバックコンテンツが表示される
モバイルのメールクライアント 結果
iPhone ビデオが再生される

See it in action

HTML5ビデオが一般的なメールクライアントでどのようにレンダリングされるかを知ってもらうために、いくつかのスクリーンショットを紹介します。 ここでは、私がテストしたスクリーンショットをいくつか紹介します。

Apple Mail 4

Apple Mail でメールを開くと、poster 属性で指定した予備の画像が表示され、同時にムービーのストリーミングが始まりました。

iPhone 3.1.2

iPhone はブラウザやメール クライアントでのビデオ ストリーミングをサポートしておらず、ポスター画像をクリックするとムービーを見ることができるという明確なプロンプトが表示されます。 画像をクリックすると、iPhoneのQuickTimeプレーヤーにムービーが読み込まれます。

Outlook 2007

HTML5 ビデオをサポートしていないすべての電子メール クライアントと同様に、Outlook 2007 は、video タグ内で指定した予備のコンテンツを表示します。 このコンテンツは、任意の HTML を使用でき、1 つの画像に限定されません。 ほとんどの場合、これはムービーのスクリーンショットで、おそらく受信者が画像をクリックしてブラウザでビデオを見るように誘うための再生アイコンが重ねて表示されるでしょう。

結果は、HTML5 動画をサポートしていないすべてのメール クライアントで同じでしたので、すべての受信者に一貫したエクスペリエンスを提供する便利な方法です。

Can you embed video in Campaign Monitor?

新しくて使いやすいドラッグ&ドロップ式のEメールビルダーで、ビデオコンテンツブロックをクリックして、Eメールにビデオを埋め込みたい場所にドラッグします。 次に、以下の例のように、動画のURLを追加します:

Source: Campaign Monitor

この 2 つの簡単なステップだけで、HTML5 動画をメールに埋め込むことができます。

この手法を使うべきか

この手法は、すべてのメール クライアントで動作するフォールバック コンテンツを確実に提供できるため、動画をメールに含めるための最良の選択肢であると思われます。

この方法が適しているかどうかの判断は、実際には購読者のリストにかかっています。 たとえば、私たちの顧客リストの 50% は、サポートされている Apple の電子メール クライアントのいずれかを使用して月刊ニュースレターを開いています (便利な電子メール クライアント レポートを使用して、自分のリストについて調べることができます)。

まとめ

メールで HTML5 動画を使用することは、特に Campaign Monitor のユーザーであれば、難しいことではありません。

メールで動画を使用する方法については、How to Use Video in Email Marketing をご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です