BLOG

HTMLメールの作成方法とは？特徴やテキストメールとの違いも解説！

コラム・TIPS

HTMLメールの作成方法とは？特徴やテキストメールとの違いも解説！

UPDATE:2024/03/27

記事トップ

HTMLメールは、メルマガの配信などにおいて利用頻度が多い形式です。しかし「HTMLメールとはどのようなものなのか分からない」という方は多いでしょう。

そこで本記事では、HTMLメールの特徴や作成の方法、テキストメールとの違いなどの内容について解説します。

HTMLメールとは

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、主にWebサイトやWebページを制作する際に使用される言語形式です。このHTML形式で制作されたメールのことをHTMLメールといいます。

HTMLメールであれば、文字のフォントやサイズ、色などを変更でき、動画などのデジタルコンテンツへの挿入も可能です。テキストメールよりも手間やスキルは求められるものの表現の幅を広げられるため、視覚的な訴求力を高められます。

ちなみに、HTML形式に対応したテキストエディタの「HTMLエディター」を利用すれば、専門知識不要で簡単にHTMLメールを作成できます。弊社でも「Mail Publisher HTML editor」というツールを提供していますので、ぜひ参考にしてみてください。

専門知識不要でかんたん操作！HTMLメールエディター
Mail Publisher HTML editor

テキストメールとの違い

テキストメールとは、文字のみで構成されたメールです。ビジネスシーンなど多くの方が日常的に使用されている形式は、このテキストメールとなります。

テキストメールの作成は、文字・記号の入力や段落分け、飾り文字などを入力するだけです。そのため、HTMLメールに比べてスキルや手間を要しません。また、文字入力で作成できるため、レイアウトが崩れにくい点も特徴といえます。

なお、HTMLメールとテキストメールとの違いは次の動画で詳しく紹介しています。

【動画】専門知識不要でかんたん操作！HTMLメールエディター『MailPublisher HTML editor』

HTMLメールのメリット

HTMLメールを使用するメリットは次の4つです。

商品の画像や動画を貼り付けて視覚的な訴求が可能
開封率を計測できる
リンクなどを違和感なく挿入できる
画像を繰り返し送ることで記憶に残すことが潜在的なニーズに訴求できる

商品やサービスを訴求したい場合やメールの開封率を効果測定に利用したい場合には、HTMLメールの利用を検討してみてください。

HTMLメールのデメリット

HTMLメールを使用するデメリットは、以下の5つです。

専門スキルや手間が必要
正常に表示されるかはメールソフトなど受信者の環境次第
受信側の設定次第ではHTMLタグが見える
メール容量がテキストメールよりも大きくなる
配信数や配信画像が多いとサーバー負荷が大きくなる

テキストメールよりも訴求力を上げられるものの、正常に表示されるかは受信者の環境に依存します。そのため、状況に応じた使い分けが必要です。

HTMLメールが適しているケース

レイアウトが必要な場合

本文内のレイアウトが必要な場合には、HTMLメールが適しています。セミナーの概要など、ユーザーが見やすいメールにするにはレイアウトが欠かせません。

前述のとおり、HTMLメールは開封率が確認できます。よって、セミナーなどへの参加人数が乏しく再集客したい場合「一度メールを開封した方に限って再送する」といった施策にも活用可能です。

また、開封率が低い場合はタイトルやレイアウトを再編集することで、開封率のアップも目指せるのです。このように、効果測定も兼ねてレイアウトを編集ができるのがHTMLメールの大きな特徴といえます。

ひと目で興味を引きたい場合

ファーストビューで興味を引きたい場合にも、HTMLメールに適しています。ファーストビューとは、メールを開封してから最初に目に入る冒頭部分のことです。

定期配信するメルマガなどは、ファーストビューで興味を引くことが特に重要です。なぜなら、どんなに魅力的なタイトル付けをしても、ファーストビューで訴求できなければ最後まで本文を読んでもらえないからです。

ひと目で興味を引ける訴求力の高いメールを作成したい場合は、HTMLメールの利用を検討してみてください。

HTMLメールの作成方法

【初心者向け】HTMLメール作成機能を利用する

HTMLに関して初心者の方には、HTMLメール作成機能の利用がおすすめです。HTMLメール作成機能を利用すれば、HTMLの知識がない方でも手軽に作成できます。

大量のメールを効率よく配信できる「メール配信システム」などを導入する際は、特にこのHTMLメール作成機能の有無について事前に確認しておきましょう。

【経験者・有識者向け】自力で作成する

経験者や有識者であれば、自力でHTMLタグを使用したHTMLメールも作成できます。HTMLタグとは「半角の不等号（< >）」で囲まれたテキストのことです。

HTMLタグを使用することで文字のフォントやサイズ、色を変更できます。また、画像や動画の挿入も可能です。

ただし、HTMLメールはWebサイトとは異なり、標準化された規格がありません。Webサイト構築では標準化されている「<div>」が使用できなかったり、受信者の環境によってサポートしていないタグがあったりします。

閲覧環境によってレイアウトが崩れるケースもあり、Web開発とは異なるマークアップが必要です。

HTMLメールの作成手順

ひな形の作成

HTMLメールのベース作成には「DOCTYPE宣言」を行います。HTMLメールのDOCTYPEは以下の2つです。

XHTML 1.0
HTML4.01

いずれもHTMLメールを作成できますが、初心者の方はレイアウトしやすく、デザインが崩れにくいといった特徴のある「HTML4.01」がおすすめです。「HTML4.01」における「DOCTYPE宣言」のサンプルは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">
<meta http-equiv="Content-Language" content="ja">
<meta charset="shift_jis">
<title></title>

メールの中身をマークアップ

ひな形が完成したら、メールの中身をマークアップします。本来、表組みのデータを表すための要素を使用してレイアウトを行う「テーブルレイアウト」でのマークアップ方法は、次のとおりです。

<table border="0" width="" cellspacing="0" cellpadding="0" style="width: 100%;">
  <tr>
    <td>テキスト</td>
  </tr>
</table>

CSSを直接指定してスタイリング

メールの中身をマークアップした後は、CSSを直接指定してスタイリングします。Web開発の場合、CSSは外部読み込みが一般的です。

一方、メーラーではCSSの外部読み込みをサポートしていないため、HTMLメールの場合はCSSの「インライン形式」もしくは「埋め込み式」でスタイリングする必要があります。各形式の特徴は次のとおりです。

インライン形式：各HTMLタグ内にCSSを記述し直接指定する形式
埋め込み形式：headタグ内にまとめてCSSを記述する形式

どちらの形式でもスタイリングできますが、印刷するとCSSが削除されて表示が崩れるケースがあります。印刷も考慮してHTMLメールを作成する場合は、インライン形式がおすすめです。

エラーのチェック

HTMLメールの作成後は、メールが正しく表示されるかのエラーチェックを行いましょう。スマホやパソコン、タブレットといった異なるデバイスの表示幅でレイアウトが崩れていないか確認します。

次にOutlookやGmail、Yahoo!メールなどのメーラーごとにチェックしましょう。前述のとおり、HTMLメールはメーラーによって表示形式が崩れるケースも多くあるためです。

マルチパート配信の実施で安心

マルチパート配信とは、HTMLメールとテキストメールを両方で送れる配信方法のことです。メール配信にHTMLメールを採用している場合、受信側の環境によって十分な効果が得られない可能性があります。

しかし、マルチパート配信にすれば事前に設定したテキストメールも自動で配信され、HTMLメールを受信できない方に対しても確実にメールを届けられます。

まとめ

HTMLメールの利用は訴求力を高め、開封率の計測にもつながります。しかし、受信側の環境次第ではレイアウトが崩れるといったデメリットもあります。

そのため、HTMLメールの作成後はデバイスやメーラーごとにエラーのチェックが必要です。ただし、どんなに入念にチェックをしても、肝心のメールが受信されていなければ意味がありません。

HTMLメールを利用する場合は、テキストメールも送ることができるマルチパート配信の利用も視野に入れ、確実にメールを届けられるよう工夫してみてください。

HTMLメールの作成方法とは？特徴やテキストメールとの違いも解説！

目次

記事トップ