HTMLメールの作り方【手順と作成ポイント】

HTMLメールの正しい作り方を理解することは、効率よくメールマガジンを配信するために重要なポイントです。

メールマガジンの配信を始めたばかりであれば、以下のような疑問が生じると思います。

『HTMLメールの作り方は？どうすればいい？』
『HTMLメール作成の注意点やポイントを知りたい』

今回のコラム記事では、メールマガジンの配信を始めたばかり、これから始めようとしているメルマガ担当者様に向けて、HTMLメールの作り方や作成手順だけでなく、作成する上での注意点やポイントについても解説をしていきます。

HTMLメールとは

HTMLメールとは、Webページを作成するためのマークアップ言語であるHTMLを用いて作成されたメールを指します。

テキストメールと異なり、HTMLメールであればメール内に画像を埋め込んだり、CSSでデザインを施したりできます。

通常のメールマガジンだけでなく、セミナーやイベントの案内、キャンペーンのお知らせなどでHTMLメールを用いることにより、効果的なメール配信が可能になります。

HTMLメールを作成するときのポイント

HTMLメールは、Webページと同じマークアップ言語であるHTMLを用いて作成されています。
しかし、Webページと同じようにHTMLを記述すると、デザインの崩れなどが発生してしまいます。

HTMLメールを作成するときには、以下のポイントを押さえておきましょう。

• テーブルレイアウトで作成する
• 一部のHTMLタグは使わない
• 使用できるCSSスタイルのみ使用する
• HTML属性とCSSでコーディングする
• CSSは埋め込み式
• 容量は小さいサイズに収める
• 画像の拡大・縮小の設定をする
• 画像にはalt属性を設定する
• 横幅を設定するときの注意点
• マージンは正しく動作しない前提で作成する
• フォントの一括指定プロパティは使用しない
• 絶対パスで指定する

テーブルレイアウトで作成する

HTMLメールは、基本的にはtableタグを使用して記述します。

過去にWebページでも「テーブルレイアウト」と呼ばれる、tableタグを用いたレイアウトの調整が行われていました。
現在では、CSSを用いてデザインを施すことが一般的になりました。

しかし、HTMLメールの場合は対応していないCSSの要素が多いため、デザインが崩れるといったトラブルが発生します。

そのため、HTMLメールでは、tableタグを用いてデザインの調整を行う必要があります。

一部のHTMLタグは使わない

Webサイトでよく使われている一部のHTMLタグは、HTMLメールでは使わないようにしましょう。
具体的には以下のタグになります。

• hタグ
• sectionタグ
• asideタグ

上記のタグをHTMLメールに使用すると、メールソフトによって適切に表示されずにデザインが崩れるケースがあります。

前述のようにtableタグを用いれば、メールソフト上で問題なく表示されます。

なお、tdタグに対して、HTML属性やCSSなどのデザインを適用することにより、tdタグが見出しや本文に見えるように見た目を調整できます。

使用できるCSSスタイルのみ使用する

前述のHTMLタグと同様に、CSSもメールソフトによって対応状況が異なります。

The Ultimate Guide to CSSというWebサイトでは、メールソフト別にCSSのサポート状況を確認できます。

パソコン、スマートフォンの主要なメールソフトが対応しているCSSスタイルを用いて、HTMLメールの作成をしましょう。

HTML属性とCSSでコーディングする

CSSよりもHTML属性のほうが、より多くのメールソフトに対応しているため、HTML属性を用いてスタイルを指定し、CSSはHTML属性の補助として使用しましょう。

なお、HTML属性とCSSの両方で指定した場合、CSSに対応したメールソフトであればCSSの内容が優先されます。
CSSが適用されなかった場合には、HTML属性で指定したスタイルが適用されます。

CSSは埋め込み式

HTMLメールにCSSを用いる場合には、以下3種類の方法があります。

• 外部読み込み式
• 埋め込み式
• インライン形式

現在、CSSを用いてHTMLメールを作成する場合には、埋め込み式とインライン形式を併用するスタイルが主流になりつつあります。

これら3種類のCSSの記述方法に関して、くわしく説明します。

外部読み込み式の特徴

外部読み込み形式とは、HTMLファイルが外部に保存されているCSSファイルを読み込むことを指します。

HTMLファイルが外部に保存されたCSSファイルを読み込み、CSSに記述されたデザインが適用されます。

多くのメールソフトでは、外部CSSファイルへの読み込みをブロックしてしまうため、CSSに記述されたデザインがHTMLメールに反映されない問題が発生します。

そのため、HTMLメールの場合は外部読み込み式を使用せず、埋込み式やインライン形式を用いることが一般的です。

埋め込み式の特徴

埋め込み形式とは、HTMLのheadタグ内にstyleタグを作成しCSSを記述することを指します。

HTMLメールの場合は、CSSを外部ファイル化してしまうと読み込まれない場合があるため、headタグ内にCSSを埋め込むことでデザインを適用させられます。

インライン形式の特徴

インライン形式とは、HTMLのタグに直接スタイルを記述することを指します。

さまざまなメールソフトにインライン形式が対応しているため、HTMLメールの作成ではインライン形式でCSSを記述することが一般的でした。

しかし、インライン形式はCSSの記述に時間がかかるだけでなく、変更する場合も手間がかかるといったデメリットがありました。

そのあと、Gmailを始めとした埋込み式のCSSに対応したメールソフトが増えたため、埋め込み式で適切に表示されない場合のみ、インライン形式でCSSを適用させるという使い方が増えてきています。

容量は小さいサイズに収める

HTMLメールをスマートフォンでも閲覧するケースが増えてきたため、メールの容量は小さいサイズに収めることをおすすめします。

とくに、Gmailだとメールの容量が102KBを超えると「メッセージ全体を表示」というリンクが表示され、クリックしないとHTMLメールの全体が表示されなくなります。

なお、Gmailの102KBという制限は、画像の容量を除いたソースコードのテキスト量によって判断されます。

HTMLの記述はシンプルになるように注意し、容量を小さいサイズに収めるように努めましょう。

画像の拡大・縮小の設定をする

スマートフォンでHTMLメールを開いた際に、ぼやけた画像が画面いっぱいに表示された経験はないでしょうか。

パソコン用の解像度の小さな画像が、スマートフォンで表示した際に引き伸ばされると、粗いぼやけた画像がスマートフォンで表示されます。

ぼやけた画像の表示を回避するには、以下のCSSを記述します。

img { 
width: 100%; 
max-width: 100%; 
}

上記のコードをCSSに記述することで、元の画像以上のサイズには拡大しないように指定できます。

画像は絶対パスで指定する

HTMLメールの場合は、相対パスだと画像が読み込まれず表示されないため、絶対パスで記述する必要があります。

相対パスの例

<img src="/img/image.png">

絶対パスの例

<img src="https://example.com/img/image.png">

なお、画像以外のリンクも絶対パスで記述しましょう。

画像にはalt属性を設定する

企業で使用しているパソコンでHTMLメールを受信した場合は、画像が初期状態では表示されず「画像を表示する」をクリックしないと表示されない設定になっているケースがあります。

画像にalt属性を設定していなければ、どのような画像がHTMLメールに掲載されているかわからないため「画像を表示する」がクリックされない恐れがあります。

また、HTMLメールの最初に表示される領域（ファーストビュー）に、画像だけでなく文字も載せることで、画像が表示されなかった場合でも重要なメッセージを伝えられます。

alt属性の例

<img src="画像のURL" alt="画像の説明">

横幅を設定するときの注意点

HTMLメールをレスポンシブ対応にしない場合は、パソコンでもスマートフォンでも見やすいデザインにする必要があります。

メールの横幅は480px程度で指定し、1カラムのレイアウトでシンプルなデザインにすることをおすすめします。

マージンは正しく動作しない前提で作成する

CSSプロパティであるmargin（マージン）は、Outlookを始めとした複数のメールソフトで適切に動作されません。

CSSでmarginを使用する場合は、marginが適用されなくても大きくデザインが崩れないようにコーディングする必要があります。

もしくは、marginと併せてline-heightやcellpaddingなどのCSSプロパティを指定しましょう。

フォントの一括指定プロパティは使用しない

フォントの一括指定プロパティとは、フォント関連のプロパティを以下のようにまとめて指定する方法を指します。

font : 8px/12px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

フォント一括指定プロパティに対応しているメールソフトが少ないため、使用しないことをおすすめします。

HTMLメール作成手順

これまでに説明したHTMLメール作成のポイントを踏まえながら、実際にHTMLメールを作成する手順を説明します。

1. DOCTYPEの設定
2. 文字コードの設定
3. ベースの枠組みを設定
4. ヘッダー・フッターの追加
5. 見出しの追加
6. アイキャッチ画像の追加
7. テキストの追加
8. ボタンの追加
9. 罫線の追加
10. 2カラム画像の追加
11. Outlookの表示対策

①DOCTYPEの設定

まずはDOCTYPEの設定を行います。

DOCTYPEとは、文章の冒頭に記載する情報で、DTD（Document Type Definition＝文章型の定義）を指します。

HTMLメールにDOCTYPEを指定することで、この文書がHTMLであること、どのバージョンのHTMLで作成されているのか、プログラムに知らせることができます。

HTMLメールの場合、HTMLのバージョンを冒頭に記載します。

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML4までは、SGML（Standard Generalized Markup Language) に基づいて作成された言語であるため、DTDの指定を行っていました。

HTML5以降は、SGMLに基づいた言語ではなくなったため、DTDの指定は必要なくなりました。
ただし、以下のようにDOCTYPE宣言は必要です。

<!DOCTYPE html>

②文字コードの設定

metaタグを用いて、文字コードを設定します。

以前までは、メールソフトが「UTF-8」に対応していなかったため「iso-2022-jp」を設定していました。
現在は、ほとんどのメールソフトが対応しているため、以下のように「UTF-8」で設定して問題ないでしょう。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

また、metaタグでCSSと言語に関しても指定します。

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-language" content="ja">

③ベースの枠組みを設定

HTMLメールのベースとなる枠組みを、テーブルレイアウトで記述します。

HTMLメールを枠組みするときに、よく使われるHTMLタグは以下になります。

▼スマホの場合は横にスクロールしてご覧ください

tableタグ、trタグ、tdタグを用いて記述し、CSSは埋め込み式とインライン式を併用して作成しましょう。

④ヘッダー・フッターの追加

ヘッダーやフッターのエリアも、コンテンツエリアと同様にテーブルレイアウトで記述します。

なお、ヘッダーとフッターはコンテンツエリアとの違いを明確にするため、背景色を変える、文字色を変えるといったデザインを施すとよいでしょう。

⑤見出しの追加

大見出し、中見出しなど、見出しを作成する場合は、hタグを使用せずに新たにtableタグを追加し、見出しとしてデザイン調整をしましょう。

見出しはfontタグとCSSを用いてフォントサイズ、色、余白を調整し、見出しとしてのデザインを整えます。

また、見出しと通常のテキストはもちろんのこと、大見出しと中見出し同士のデザインも差別化できるようにデザイン調整を行いましょう。

⑥アイキャッチ画像の追加

アイキャッチ画像を追加する場合も、新たにtableタグを追加し設定します。

コンテンツ幅いっぱいに画像を表示させる場合は「width:100%」「cellpadding=”0”」を指定することで、セル内に余白が表示されないように設定を行います。

⑦テキストの追加

コンテンツエリアとして記述したtableタグ内に、テキストを入力します。

テキストを追加する際は、pタグを使用せずにtdタグを使用しましょう。

⑧ボタンの追加

CTAボタンを追加する際も、新たにtableタグを追加しボタンを作成します。

CSSを用いてCTAボタンのデザインを施すことができますが、Outlookは「border-radius」に対応していないなど、メールソフトによってデザインの崩れが発生する恐れがあります。

そのため、CTAボタンはCSSではなくtableタグの使用がおすすめです。

⑨罫線の追加

ヘッダー、フッター、メインコンテンツといった、コンテンツエリアごとの区切りの罫線を追加する場合は、罫線用のtableタグを追加しボーダーを設定します。

コンテンツエリアの横幅いっぱいに罫線を引く場合は「width:100%」「cellpadding=”0”」を設定します。

追加した罫線用のtableタグ内のtdタグに対して「border」を設定し、罫線を追加します。

⑩2カラム画像の追加

2カラムのHTMLメールを作成する場合は、2つのtdタグそれぞれに「width:50%」を設定して2カラムに分割します。

レスポンシブ対応のHTMLメールを作成する場合は、レスポンシブ用のクラス名を忘れずに設定しておきましょう。

⑪Outlookの表示対策

パソコン用のOutlookに関しては、そのほかのメールソフトと異なってHTMLメールのデザイン崩れが多く発生します。

BtoBのメールマガジンであれば、会社支給のパソコンのOutlookでメールを受信することが考えられるため、Outlook対応は避けてはとおれません。

実際に作成したHTMLメールをOutlookで開き、デザインが崩れていた箇所に対してCSSの修正を行う必要があります。

ブラウザ表示用のHTMLを作成

HTMLメール用のHTMLファイルとは別に、ブラウザ表示用のHTMLファイルを作成しましょう。

仮にメールソフト上でHTMLメールのデザインが崩れた場合でも「適切に表示されない場合はこちら」のリンクから、ブラウザ上でHTMLメールを表示させることができます。

HTMLメール用のファイルを元に、ブラウザ表示用のファイルの作成手順を説明します。

1.文字コードを変更する

HTMLメールの文字コードを「iso-2022-jp」に設定している場合は、ブラウザ用のHTMLファイルでは「utf-8」に変更します。

2.noindexを設定する

検索エンジンにインデックスさせたくない、つまり検索エンジン経由のアクセスをブロックしたい場合は、metaタグでnoindexを指定します。

3.titleタグを設定する

HTMLメール用のファイルでは必要ありませんでしたが、ブラウザ用のHTMLファイルではtitleタグにてタイトルを設定します。

タイトルを設定することにより、ブラウザのタブ部分にタイトルが表示されるようになります。

4.HTMLメールからリンクを張る

ブラウザ用のHTMLファイルをサーバーにアップしたあと、HTMLメールのファイルから絶対パスでリンクを追加します。

以上で、ブラウザ表示用のHTMLメールが作成できます。

レスポンシブHTMLメールの作り方

レスポンシブ対応のHTMLメールを配信することにより、スマートフォン、タブレット、パソコンといった、さまざまな画面サイズの端末に合わせてメールが見やすく表示できます。

また、レスポンシブ対応のHTMLメールを送ることにより、ユーザーの離脱を防ぐだけでなく、クリック率やコンバージョン率の向上といった効果も期待できます。

HTMLメールがスマートフォンで見られない場合

HTMLメールをスマートフォンで受信した際、メールが見られない、メール内の画像が表示されない、メールのデザインが崩れている、といった経験はないでしょうか。

スマートフォンでHTMLメールが見られない場合は、キャリアメールでの受信、MMSでの受信、メールソフトの設定といった原因が考えられます。

テンプレートを使えばHTMLメールを作成できる

HTMLメールのテンプレートは、デザインの枠組みが完成した状態から画像やテキストを差し替えるだけでHTMLメールを作成できます。

HTMLメールのテンプレートには、レスポンシブ対応したテンプレート、多くのメールソフトに対応したテンプレートなど、さまざまな種類のテンプレートがインターネット上で無料配布しています。

まとめ

今回は、HTMLメールの作り方や作成手順だけでなく、注意点やポイントについて説明しました。

HTMLメールの作り方に関して覚えておくべき点は、以下のとおりです。

• HTMLメールの作り方は、通常のWebページの作り方とは大きく異なる
• HTMLメールは、レスポンシブ対応やスマートフォン対応も重要
• テンプレートを使用すれば、HTMLメールをかんたんに作成できる

メールマガジンにHTMLメールを活用し、メール配信の効果を最大化できるように努めましょう。

なお、当サイト『ビスサイ』ではホームページ制作サービス（サブスクリプション）を提供しております。

ビズサイでは、ホームページの用途に合わせて3種類のプランをご用意しており、お申込みから公開まで最短5営業日の期間でホームページ制作ができます。

ドメインからメールアドレスを作成できるので、メルマガ配信と同時にホームページを新規で立ち上げたい、ホームページのリニューアルをしたい方は当サイトがぴったりです（くわしいサービスはこちら）。