HTMLメールテンプレートに画像・動画・音声を追加してエンゲージメントを高める方法

前回の記事「レスポンシブHTMLメールテンプレートの作成方法」では、さまざまなデバイスやメールクライアントで美しく表示されるシンプルなHTMLメールテンプレートの設計とコーディングの基礎を学びました。

その後、「HTMLメールテンプレートへのメディア追加はどうすればいいのか?」という質問をいくつかいただきました。

そこで本記事では、その基礎をもとに、HTMLメールテンプレートにメディアを追加するさまざまな方法をご紹介します。画像、動画、音声といったメディアを効果的に取り入れることで、コミュニケーションのエンゲージメントと成果を大きく高めることができます。

必要なもの

• シンプルなHTMLメールテンプレート(前回のガイドに沿って作成できます)

画像を追加する方法

画像は、メールに組み込まれる最も一般的なメディアです。HTMLメールテンプレートに画像を追加する手順を見ていきましょう。

• 画像を追加する前に、Web用途に適したサイズへ調整し、最適化しておくことが重要です。一般的には幅を600ピクセル以下に収めると、ほとんどのメールクライアントで拡大縮小なしに表示できます。この例ではストック画像を600×750ピクセルにリサイズして使用します。

今回アップロードする画像

• 画像を信頼できるWebサーバーまたはCDN(コンテンツデリバリーネットワーク)にアップロードします。メール内で参照するためには、安定したURLが必要です。

この例では、無料の画像ホスティングサービス「imgbb」を使用します。「Start Uploading」をクリックして画像を選択してください。

imgbbは無料で利用できる画像ホスティングプラットフォームの一つ

使用する画像を選んだら、ドロップダウンから「Don't Autodelete」を選択し、「Upload」をクリックします。

ドロップダウンからDon't Autodeleteを選択

アップロードが完了するとURLが自動生成されます。ドロップダウンを開き、「HTML full linked」を選びましょう。

生成された埋め込みコード

• 生成されたHTMLコードをコピーし、メールテンプレートの任意のセクションに挿入します。

<a href="https://ibb.co/XpRp2N8">
 <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>

他の埋め込みコードのオプションも試して、画像がメールテンプレート上でどのように表示されるか確認してみてください。

以下は、画像を挿入した結果です。

メールテンプレートへの画像挿入に成功した様子

注意: 画像が表示できない環境に備えて、必ずalt属性で代替テキストを指定しましょう。

動画を埋め込む方法

ほとんどのメールクライアントは動画の直接再生に対応していません。代わりに、オンラインでホストされている動画へリンクする「クリック可能なサムネイル」を埋め込むのが定番の手法です。

• サムネイルを作成する: 動画から1フレームをキャプチャするか、動画の内容を表すオリジナルのグラフィックを作成します。これがプレースホルダーとして機能します。この例では同じ画像をサムネイルとして使用します。
• ドロップダウンから「HTML thumbnail linked」を選択し、コードをコピーしてメールテンプレートに貼り付けます。

<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>

• 動画にリンクさせる: 上記のコードを修正し、サムネイルをクリックすると動画URLへ移動するようにします。
• <a href="">内のURLを、以下のように動画のリンクに書き換えます。

<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
 <img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>

このHTMLスニペットは、枠線のないリンク付き画像を生成します。メールテンプレートでは次のように表示されます。

リンク付きサムネイルの表示例

YouTube動画を埋め込む方法

別の方法として、YouTube動画をメールテンプレートに直接埋め込むこともできます。手順は以下のとおりです。

• YouTubeにアクセスし、埋め込みたい動画を選択します。
• 共有 → 埋め込む をクリックすると、iframeコードが生成されます。以下はその例です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

• iframeをコピーし、HTMLメールテンプレートコードの<td>セクションに貼り付けます。すると次のような表示になります。

メールテンプレート内に埋め込まれたYouTube動画の例

音声を追加する方法

音声ファイルをメールに直接添付する機能も、ほとんどのメールクライアントではサポートされていません。動画の場合と同様に、音声ファイルへのリンクを含める方法が有効です。

• 音声ファイルをホストする: 音声ファイルを適切なプラットフォームやサーバーにアップロードしましょう。Google Drive、自社サイト、YouTube、SoundCloudなど、選択肢は多数あります。
• この例では「audio.com」というプラットフォームを使用します。「join now for free」をクリックしてアカウントを作成するか、すでにアカウントをお持ちの場合はサインインしてください。

「Upload」をクリックして.mp3ファイルを選択すると、アカウントに保存されます。アップロードが完了したら、共有アイコンをクリックします。

• リンクのコピー、または埋め込みコードの取得など、いくつかのオプションが表示されます。

「Embed」をクリックすると、音声の表示イメージをプレビューで確認できます。コードをコピーして、メールテンプレートの該当セクションに貼り付けましょう。

audio.comが生成する、メールテンプレートに埋め込み可能なコード

divを省略してiframeだけを使うこともできます。また、表示したくない要素を削除したり、好みに合わせてカスタマイズしても問題ありません。

コードは以下のとおりです。

<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
 style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>

以上の実装結果はこちらです。

メールテンプレートでの音声の表示例

audioタグを使う方法

埋め込みのほかに、audioタグを使って音声ソースのURLを直接指定する方法もあります。

 <p>Audio added via audio tag</p> <br><br>
 <audio controls="controls">
 <source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
 <p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
 </audio>

URLをご自身のaudio urlに変更するだけでOKです。すべての修正を加えたメールテンプレート全体は、このようになります。

修正後のHTMLメールテンプレート

注意: HotmailおよびHTML5非対応のメールクライアントでは動作しないのでご注意ください。

互換性とユーザー体験を最適化するためのポイント

HTMLメールにメディアを組み込む際は、以下の点を意識することで、互換性とユーザー体験を大きく向上させられます。

• 絶対URLを使う: 画像・動画・音声には必ず完全な絶対URLを指定し、すべてのメールクライアントで正しく読み込まれるようにしましょう。
• メールをテストする: メールクライアントによってHTMLの表示方法は異なります。LitmusやEmail on Acidなどのツールを活用し、各プラットフォームでのレンダリング結果を事前に確認しましょう。
• 読み込み時間に配慮する: メディアファイルのサイズを最適化し、メールが素早く表示されるようにしましょう。受信者の注意を維持し、エンゲージメントを高めるうえで重要です。
• アクセシビリティを考慮する: 画像には説明的なaltテキストを、音声・動画コンテンツにはキャプションや文字起こしを用意しましょう。

メールクライアントが対応できる範囲には限りがありますが、動画や音声にはリンク付き画像を活用することで、ほとんどのプラットフォームで機能するユーザーフレンドリーなソリューションを実現できます。

常にメールを入念にテストし、ベストプラクティスに従うことで、スムーズで魅力的なユーザー体験を提供しましょう。

それでは、Happy Coding!