エンゲージメントの強化:HTML 電子メール テンプレートに画像、ビデオ、オーディオを追加する

前回の記事「レスポンシブな HTML 電子メール テンプレートを作成する方法」では、さまざまなデバイスや電子メール クライアントに美しく適応する、シンプルな HTML 電子メール テンプレートの設計とコーディングの基本について説明しました。

HTML メール テンプレートへのメディアの追加に関して、いくつか質問がありました。

その基礎に基づいて、HTML 電子メール テンプレートにメディアを追加するさまざまな方法を説明します。画像、ビデオ、音声などのメディアを追加すると、コミュニケーションのエンゲージメントと効果が大幅に向上します。

要件

• シンプルな HTML メール テンプレート。このガイドに従って作成できます。

画像は、電子メールに追加される最も一般的なメディアの種類です。 HTML メール テンプレートにこれらを含める方法は次のとおりです。

• 画像を追加する前に、画像のサイズが適切で、ウェブでの使用に最適化されていることを確認してください。一般的な方法は、拡大縮小せずにほとんどの電子メール クライアントに適合するように、画像の幅を 600 ピクセル未満に保つことです。この特定の例では、以下に示すようにストック画像を 600 x 750 ピクセルにサイズ変更しました。

これがアップロードする画像です

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

この例では、imgbb Web サイトを使用して画像をアップロードします。 「アップロードを開始」をクリックします。 をクリックして画像を選択します。

imgbb は無料の画像ホスティング プラットフォームの 1 つです。

使用する画像を選択した後、「自動削除しない」を選択し、「アップロード」をクリックします。

ドロップダウンから [自動削除しない] を選択します

アップロード後、URLが生成されます。ドロップダウンをクリックして、「HTML 完全リンク」を選択します。

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

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

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

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

以下は、挿入された画像の結果です:

画像がメール テンプレートに正常に挿入されました

注意 :alt を必ず含めてください。 画像を表示できないシナリオに代替テキストを提供する属性。

メール テンプレートにビデオを埋め込む方法

ビデオの直接再生は、ほとんどの電子メール クライアントではサポートされていません。代わりに、オンラインでホストされているビデオにリンクするクリック可能なサムネイルを埋め込むことができます。

• サムネイルを作成する :ビデオからフレームをキャプチャするか、ビデオ コンテンツを表すカスタム グラフィックを作成します。これはプレースホルダーとして機能します。この例では、同じ画像をサムネイルとして使用します。

• ドロップダウンから、リンクされた HTML サムネイルを選択します。コードをコピーして、メール テンプレートに貼り付けます。

<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 をコピーします。 それを <td> に貼り付けます。 HTML 電子メール テンプレート コードのセクション。次のようになります。

これはメール テンプレート内の YouTube ビデオの例です

メール テンプレートに音声を追加する方法

音声ファイルを電子メールに直接追加することも、ほとんどの電子メール クライアントではサポートされていません。ビデオと同様に、オーディオ ファイルへのリンクを含めることができます。

• 音声ファイルをホストする :音声ファイルを適切なプラットフォームまたはサーバーにアップロードします。 Google ドライブ、独自のウェブサイト、YouTube、サウンド クラウドなど、オーディオ プラットフォームは数多くあります。
• この例では、audio.com というプラットフォームを使用します。 [今すぐ無料で参加] をクリックしてアカウントを作成するか、すでにアカウントをお持ちの場合はログインしてください。

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

• これにより、リンクをコピーするか、単にリンクを埋め込むことができるいくつかのオプションが表示されます。

「埋め込み」をクリックすると、オーディオがどのように表示されるかプレビューが表示されます。コードをコピーして、電子メール テンプレート セクションに貼り付けます。

電子メール テンプレートに埋め込むことができる、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 に変更するだけです。 。変更全体は次のようになります。

変更された HTML メール テンプレート

注: Hotmail と HTML5 をサポートしていないクライアントは動作しません。

メディアを HTML メールに統合する場合は、互換性とユーザー エクスペリエンスを最適化するために次のヒントを考慮してください。

• 画像、動画、音声がすべてのメール クライアントに正しく読み込まれるように、常に完全な絶対 URL を使用してください。
• メールをテストする:メール クライアントによって、HTML コンテンツがさまざまな方法で表示されます。 Litmus や Email on Acid などのツールを使用して、さまざまなプラットフォームでメールがどのようにレンダリングされるかをテストします。
• 読み込み時間を考慮する:メディア ファイル サイズを最適化して、メールがすぐに読み込まれるようにします。これは、受信者の注意を引きつけてエンゲージメントを向上させるために重要です。
• アクセシビリティを考慮する:画像には説明的な代替テキストを、音声や動画のコンテンツにはキャプションやトランスクリプトを提供します。

電子メール クライアントがサポートできるものには制限がありますが、ビデオやオーディオ ファイルにリンクされた画像を使用すると、ほとんどのプラットフォームで機能する使いやすいソリューションが提供されます。

常にメールを徹底的にテストし、ベスト プラクティスに従って、スムーズで魅力的なユーザー エクスペリエンスを確保してください。

コーディングを楽しんでください!

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう