【便利】HTMLメールとテキストメールの違いやその使いどころを解説

（最終更新日：2023年6月）

✔この記事は次の疑問を抱く方へおすすめです

「HTMLメールってどのように作成するのだろうか？」
「HTMLメールの作り方を知りたい」
「HTMLメールの具体的な例を見てみたい」

✔この記事で解説する内容

HTMLメールの作成方法の基本
HTMLメールの作り方や応用事例
HTMLメールの具体的な例

本記事では、HTMLメールの基本的な作成方法から、様々なオプションを使った応用の仕方まで、実例を交えて詳しく説明します。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

BtoBメール形式：テキストvs HTML

ここでは、「BtoBメール形式：テキストvs HTML」について説明します。

BtoBメールマーケティングでは、どちらの形式が効果的か理解することが重要です。

テキストメールの独自性
HTMLメールの強み

テキストメールの独自性

テキストメールはその名の通り、テキストのみで構成されています。

テキストメールの一番の魅力はそのシンプルさです。

装飾がないため、情報を直接的に伝えられます。

メリット・デメリットはそれぞれ以下のとおりです。

テキストメールのメリット

速度: テキストメールはほぼリアルタイムで相手に届きます。迅速なコミュニケーションが可能です。
コスト効率: テキストメールは電子的な形式であり、送信および受信に追加の費用がかかりません。特に長距離や国際的なコミュニケーションでは費用がかからないため、コスト効率的です。
永続性: テキストメールは電子的な形式で保存されるため、必要に応じて後で確認することができます。情報の記録や文書化に便利です。
一斉送信: テキストメールは一度に多くの人に送信することができます。大規模な受信者グループに対して一斉送信するため、情報の伝達が容易です。

テキストメールのデメリット

非言語的要素の欠如: テキストメールでは声のトーンや表情など、非言語的なコミュニケーション要素が欠けます。相手の感情や意図を正確に把握するのが難しい場合があります。
混乱や誤解の可能性: テキストメールは文字だけで構成されているため、表現が曖昧になることがあります。誤解や混乱が生じる可能性があります。
即時性の欠如: テキストメールはリアルタイムではないため、相手の返信を待たなければなりません。緊急性の高い情報や迅速な反応を必要とする場合には不適切です。
スパムやフィッシングのリスク: テキストメールはスパムメールやフィッシング詐欺の対象となることがあります。不正なメールを避けるために、慎重な対応が必要です。

HTMLメールの強み

一方、HTMLメールは色彩やレイアウトを豊かにすることで、情報をビジュアルに伝えられます。

HTMLメールはブランドイメージを強く打ち出すことが可能で、画像やリンクを含むことでユーザーエンゲージメントを高められるのです。

以下はHTMLを使用している具体例。

Gmail: GmailはHTMLメールをサポートしており、ユーザーは豊富なテキスト装飾、画像の埋め込み、リンク、テーブル、カラムなどを含むHTML形式のメールが送受信可能。さまざまなデザインやマーケティング目的のためにHTMLメールを活用しています。
Amazon SES (Simple Email Service): Amazon SESは、企業や開発者が大量のメールを送信するためのクラウドベースのサービスです。SESでは、HTMLメールを使用して魅力的なメールテンプレートを作成し、顧客にパーソナライズされたコンテンツを送信できます。
Shopify Email: Shopify Emailは、オンラインストアの所有者がショッピング体験を向上させるために利用できるメールマーケティングツールです。HTMLメールを使用してカスタムデザインのメールを作成し、商品のプロモーション、カートの放棄、新着商品の通知などを顧客に送信すできます。

メール種別と形式の選択

次に、「メール種別と形式の選択」について考察します。

メールの目的によって適した形式は異なります。

キャンペーン情報の個別送信
セミナーやイベントの告知
メールマガジンの配信

キャンペーン情報の個別送信

キャンペーン情報の個別送信では、一般的にはHTMLメールが適しています。

商品の画像やキャンペーンのビジュアルを強調し、ユーザーに直接的な呼び掛けを行うことが可能です。

セミナーやイベントの告知

セミナーやイベントの告知には、テキストメールとHTMLメールのどちらも使用可能です。

テキストメール：イベントの詳細情報や日程を分かりやすく伝えられる
HTMLメール：イベントの雰囲気や参加を促すビジュアルを伝えられる

メールマガジンの配信

メールマガジンの配信では、読者が定期的に内容を読むことを期待しています。

そのため、一貫したブランドイメージを持つHTMLメールがおすすめです。

しかし、情報量が多い場合や、読みやすさを優先したい場合は、テキストメールも検討する価値があるでしょう。

マルチパート配信の重要性

HTMLマルチパート配信とは、1つのメール内で複数の形式（テキストとHTML）のコンテンツを提供する手法です。

これにより、受信者のメールクライアントの設定や環境に応じて、最適な形式でメールを表示することが可能となります。

メリットとしては以下が挙げられます。

可読性と視覚的な魅力の向上：HTMLを使用することで、色彩豊かなデザイン、画像、リンク、テーブルなどの要素をメールに組み込める
レスポンシブデザインとモバイルフレンドリー：受信者が異なるデバイス（デスクトップ、タブレット、スマートフォン）でメールを閲覧している場合でも、最適な表示がされる
メッセージの効果的な伝達：テキストだけでは伝えにくい要素（ハイライト、見出し、箇条書き）や、重要なポイントを強調するためのビジュアル要素を入れられる

HTMLメールの特性

この章では、「HTMLメールの特性」について深く探求します。

HTMLメールの利用には一定の知識が必要です。

効果検証の可能性
“標準的なHTMLメール”の不在
受信環境のバリエーション
ウェブHTMLとの違い

効果検証の可能性

HTMLメールでは、リンククリック数や開封数など、さまざまな行動を追跡できます。

メールの内容やデザインが受信者にどれだけ影響を与えたかを具体的に分析可能なのです。

HTMLメールでトラッキングをおこなうためには、リンクに特別なタグ（UTMパラメータ）を追加してください。

これにより、リンクのクリックがトラッキングされ、アクションが記録されます。

“標準的なHTMLメール”の不在

さて、HTMLメールには“標準的な形式”が存在しないという特徴があります。

これは、受信者のメールクライアントやデバイスにより、同じHTMLメールでも異なる表示となることがあるからです。

受信環境のバリエーション

受信環境のバリエーションは、多種多様。

デスクトップメールクライアント
ウェブメール
スマートフォンメールアプリ

これらの違いは、HTMLメールのデザインや機能に大きな影響を与えます。

ウェブHTMLとの違い

ウェブHTMLとHTMLメールは、表面上は同じHTMLを使用しているように見えますが、その実態は大きく異なります。

ウェブHTMLでは新しいHTML5の要素や高度なCSSを使用できますが、HTMLメールでは互換性の問題から基本的なHTMLとCSSしか使用できません。

HTMLメールの構成を学ぶ

続いて、「HTMLメールの構成を学ぶ」について説明します。

HTMLメールの作成にはいくつかの特殊な設定やテクニックが必要となります。

DOCTYPEの設定
テーブルレイアウトを活用
タグ利用の注意点
CSSの埋め込み形式
マージンの問題
フォント指定の制限
容量オーバーの予防

DOCTYPEの設定

DOCTYPEはHTML文書の種類を指定するもので、HTMLメールでは特に「XHTML 1.0 Transitional」を設定するのが一般的です。

これは、古いメールクライアントでも適切に表示されるようにするためです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTMLメールサンプル</title>
</head>
<body>
  <h1>HTMLメールのサンプル</h1>
  <p>こんにちは、これはHTMLメールのサンプルです。</p>
</body>
</html>

テーブルレイアウトを活用

ウェブデザインではテーブルレイアウトはほとんど使われなくなりましたが、HTMLメールでは依然として有効です。

特に、複数のメールクライアントで一貫したレイアウトを保つためには、テーブルレイアウトの使用が必要となります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTMLメールサンプル</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>注文明細</h1>
  <table>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
    <tr>
      <td>商品A</td>
      <td>¥1000</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>¥2000</td>
    </tr>
  </table>
</body>
</html>

タグ利用の注意点

HTMLメールでは、一部のHTMLタグが制限されています。

例えば、スクリプトやフォーム要素は、ほとんどのメールクライアントでブロックされます。

また、背景画像やフロートなどのCSSスタイルも一部のクライアントでは表示されません。

CSSの埋め込み形式

CSSの埋め込みには、インラインスタイルとスタイルタグの二つの形式があります。

一般的にはインラインスタイルが推奨されますが、スタイルタグも一部のメールクライアントでは有効です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTMLメールサンプル</title>
  <style>
    h1 {
      color: red;
      font-size: 24px;
    }
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>HTMLメールのサンプル</h1>
  <p>これはCSSを埋め込んだHTMLメールのサンプルです。</p>
</body>
</html>

マージンの問題

メールクライアントによっては、マージンやパディングの設定が無視されることがあります。

これを避けるためには、テーブルセルのパディングを使用すると良いでしょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTMLメールサンプル</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
    }
    th {
      background-color: #f2f2f2;
      text-align: left;
    }
    td {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>商品一覧</h1>
  <table>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
    <tr>
      <td>商品A</td>
      <td>¥1000</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>¥2000</td>
    </tr>
    <tr>
      <td>商品C</td>
      <td>¥1500</td>
    </tr>
  </table>
</body>
</html>

フォント指定の制限

フォントの指定もHTMLメールでは難しく、ウェブフォントはほとんどのメールクライアントでサポートされていません。

そのため、一般的にはウェブセーフフォントを使用することが推奨されています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTMLメールサンプル</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    p {
      font-family: Verdana, Geneva, sans-serif;
    }
  </style>
</head>
<body>
  <h1>HTMLメールのサンプル</h1>
  <p>ウェブセーフフォントを使用したHTMLメールの例です。</p>
</body>
</html>

容量オーバーの予防

メールの容量が大きすぎると、以下のようにデメリットがあります。

ダウンロードに時間がかかる
メールクライアントやサーバーによっては受信自体が拒否されてしまう

そのため、画像の最適化や不要なコードの削除などにより、メールの容量をできるだけ抑えることが重要です。

HTMLメールの作成ステップ

さて、「HTMLメールの作成ステップ」について見ていきましょう。

ここでは具体的な作成手順と注意点をご紹介します。

コーディング注意事項
テンプレート作成ステップ
スマートフォン対応の手法
ブラウザ向けHTMLの準備

コーディング注意事項

まずはHTMLメールのコーディングについての注意事項を見ていきましょう。

HTMLメールはウェブページと異なり、特殊な環境下で表示されるため、特に注意が必要です。

インラインCSSを使用：外部のCSSファイルは一部のメールクライアントで正しく表示されない
ウェブセーフフォントを使用す：メールクライアントは特定のフォントをサポートしていない
テーブルレイアウトを活用する:：メールクライアントの互換性や整形の制約を考慮
イメージの最適化と代替テキストの提供：イメージを適切なサイズとフォーマットに最適化
クロスブラウザとクロスデバイスのテスト：メールクライアントやデバイスごとに表示が異なる
トラッキングとプライバシーの配慮：データプライバシーに配慮し、適切な情報とオプトアウトオプションを提供
サイズ制限に注意する：一部のメールクライアントはメールのサイズ制限を設けている

テンプレート作成ステップ

次に、HTMLメールのテンプレート作成手順を紹介します。

テンプレートを作成しておくことで、効率的にHTMLメールを作成し、一貫性を保つことができます。

レイアウトの設計：ヘッダーやフッター、メインコンテンツの配置
HTMLファイルの作成：適切なテキストエディタやHTMLエディタを使用
必要な要素の追加：レイアウトに基づいて、HTMLファイルに必要な要素を追加
スタイルの追加：インラインCSSを使用して、テンプレートのスタイルを指定
テキストと画像のプレースホルダーの追加：プレースホルダーテキストやダミー画像を使用して、コンテンツの配置を確認
リンクやボタンのスタイルと動作の設定：リンクやボタンにスタイルを適用し、必要な動作を設定
テンプレートの保存と再利用：テンプレートを保存し、再利用可能な形式で保持

スマートフォン対応の手法

現代ではスマートフォンからのアクセスが多いため、HTMLメールもスマートフォン対応が必須となっています。

スマートフォンでの閲覧に適したHTMLメールを作成するための手法を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>スマートフォン対応HTMLメール</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* メディアクエリでスマートフォン向けのスタイルを指定 */
    @media screen and (max-width: 600px) {
      body {
        padding: 10px;
      }
      h1 {
        font-size: 20px;
      }
      p {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <h1>スマートフォン対応HTMLメールの例</h1>
  <p>スマートフォンでの閲覧に最適化されたHTMLメールのサンプルです。</p>
</body>
</html>

ブラウザ向けHTMLの準備

最後に、HTMLメールをウェブブラウザで表示させるための準備について説明します。

これにより、メールが正しく表示されない場合でも、ブラウザから内容を確認できるでしょう。

HTMLファイルの作成: テキストエディタやHTMLエディタを使用して、HTMLファイルを作成します。ファイルの拡張子は「.html」を使用します。
必要な要素の追加: HTMLファイルに、メールのコンテンツとなる要素（テキスト、画像、リンクなど）を追加します。適切なHTMLタグを使用して要素を囲みます。
CSSの追加: 必要な場合はCSSスタイルを追加し、メールのデザインやレイアウトを指定します。インラインCSSを使用することが一般的です。
ブラウザで表示: 作成したHTMLファイルをウェブブラウザで開きます。ファイルをダブルクリックするか、ブラウザのメニューから「ファイルを開く」オプションを選択してファイルを選びます。
プレビューとテスト: ブラウザ上でHTMLメールのプレビューを確認し、表示が正しいかどうかを確認します。リンクやボタンのクリックなど、アクションの動作もテストしてください。