対してCSS（Cascading Style Sheets）とは、Webページの見た目や色、文字サイズなど、デザインやレイアウトを指定するために開発された言語です。つまり、HTMLはページの内容や構成を作成し、CSSはその内容を視覚的に整える役割を果たします。両者を組み合わせることで、視覚的に美しく機能的なWebページやHTMLメールを作成できます。

テキストメールとの違い

HTMLメールとテキストメールの違いはどのような点にあるのでしょうか。テキストメールとは文字だけで構成されたメールのことで、一般的なメールの形式です。

一方、HTMLメールとは画像やボタン、文字のフォントカラー、大きさを自由にアレンジできるHTML言語で作成したメールのことをいいます。テキストメールと比べ、訴求力の高いメールといえます。両者の大きな違いは、文字以外の要素が表示できるかどうかです。

またメールの容量は、テキストメールと比べると画像などを含むHTMLメールのほうが大きくなります。

HTMLメールとテキストメールの違いとは？HTMLメールのメリット・デメリットや実例をご紹介 HTMLとはWebページを作成するために開発された言語です。一方、テキストメールとは、テキスト形式で作成されたメールのことです。アララメッセージ

WebのHTMLとの違い

HTMLメールは、Webページ作成で使用するHTMLと仕様が異なることが多く、一般的なHTMLやCSSのノウハウが役に立たないことがあります。要因としては、メールには非常に多くの閲覧環境が存在しており、環境によって余白の設定が違ったり使用できないタグがあったりするからです。

また、HTMLメールの作成にはテーブルレイアウトの設定が必須であることも覚えておきましょう。

HTMLメールの閲覧環境は様々

スマートフォンが浸透したことにより、HTMLメールは、あらゆる環境で確認することが可能となりました。さまざまなメールクライアント、デバイス、それらのバージョンの組み合わせにより、閲覧環境は100万種類以上あると言われています。これだけ多くの閲覧環境があるため、どんな環境でも閲覧できるHTMLメールを作るのは簡単ではありません。

また、HTMLメールを利用する際は最新のCSS仕様、および一般的なHTMLが使用できない場合もあります。例えば、Outlookは画像に使用される「マージンタグ」がサポートされていない等です。トラブルを防ぐために、あらかじめ複数の端末やメールクライアントに送信して、どのように表示されるか確認をおこないましょう。

HTMLメールの特徴

次にHTMLメールの特徴を2種類ご紹介します。

効果検証をしやすい

HTMLメールでは、読者がメールを開いたかを確認する「開封数（率）」やメール内のリンクをクリックしたか確認する「クリック数」などを計測できます。HTMLメールではメール本文内に画像やボタンを挿入することができ、それらに開封数やクリック数を測定するデータを付与してメールを送ることで測定できるようになります。開封数やクリック率を測ることで、顧客の関心と訴求内容の関連度の効果検証に活用できます。

メールに装飾を追加できる

HTMLメールの最大の特徴は、メール本文に画像やボタンを入れられることです。また、文字のフォントカラーや大きさも自由に変えることができます。テキストメールとは異なり、具体的なイメージやビジュアルを訴求できるため、メルマガやプロモーションといったマーケティングの場で多く活用されています。

メルマガのデザインにチャレンジ！HTMLで読まれやすいメールに読まれるメールマガジンにするために、重要なポイントとなるのがメールのデザインと言われています。今回はこのHTMLメールを用いて読者様に読まれやすいデザインにする方法について詳しくご紹介したいと思います。アララメッセージ

HTMLメールの基本の作り方

ここからはHTMLメールの基本の作り方として、全体の構成を大まかに解説します。テキストエディタを使い、HTMLタグを書いていきましょう。

手順① DOCTYPE宣言をする

最初におこなうのは、ファイルの先端にDOCTYPE宣言を記述することです。DOCTYPE宣言は「文書型宣言」ともいいます。HTMLにはさまざまなバージョンやルールがあるため、DOCTYPEの宣言をおこない、「これから作成する文章がHTMLであること」や「HTMLのどのバージョンなのか」を明確にして、HTMLメールのベースを作ります。

なおHTMLのバージョンはデザインが崩れにくく、レイアウトしやすい「HTML4.01」がおすすめです。

手順② メールの中身をマークアップする

HTMLメールのベースができたら、メールの中身をマークアップしていきましょう。パソコン、モバイル、いずれの環境でも閲覧できるようにするなら、表組みのデータを表すための要素を使用してレイアウトをおこなう「テーブルレイアウト」を使用しましょう。

「テーブルレイアウト」でのマークアップ方法は以下の通りです。

手順③ スタイリングする

続いて、メール内で共通して使用するフォントやCSSスタイルを指示するためのスタイリングをおこないます。通常のWeb開発では、CSSは外部読み込みが一般的ですが、多くのメールクライアントではCSSの外部読み込みをサポートしていないため、「埋め込み形式」または「インライン形式」でスタイリングします。

「埋め込み形式」は、HTMLの<head>タグの項目内でCSSの情報を書き出すことでレイアウトを組みます。スマートフォンが浸透し、レスポンシブデザイン需要が増えたことで多く使われる形式です。

「インライン形式」は、CSSを各HTMLタグ内で直接指定する形式です。メールクライアント間での互換性があり安全な方法ではありますが、直接入力をしていくため、作成に時間がかかるデメリットがあります。

うまく機能せずコンテンツが表示されない問題も発生しやすいため、初心者には向いていない形式だと言われています。どちらの形式でもスタイリングできますが、単にメールが表示できればいいという場合は、作業が楽な「埋め込み形式」を選びましょう。HTMLメールを印刷することが想定される場合は「インライン形式」がおすすめです。

手順④ テスト送信

ここまで作成が終わったら、テスト用のメールアドレスにHTMLメールを送信します。正しく表示されるか、レイアウトは崩れていないかなどを確認しましょう。テスト送信はGmail、Outlook、Yahoo！メールなどのメールクライアントごと、さらに複数のデバイスでも確認してください。

手順⑤ エラーがあれば修正する

手順④でメールが正しく表示されなかったり、レイアウトが崩れていたりするようなら修正をおこないましょう。

HTMLメールのテンプレートの作り方

ここでは、実際にHTMLメールで使えるテンプレートの作り方を紹介します。基本的なHTMLコードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTMLのバージョンを書く//EN">

・DOCTYPEを宣言する

<html>

<head>

・HTMLメールの基本情報を設定する

　‐style type：文字コードの設定

　‐content-Type：メールの形式をレンダリングエンジンに伝える

　‐viewport：コンテンツの表示領域宣言する

<title>お得情報をお届け！春のキャンペーン</title>

・ページのタイトル

</head>

<body>

・本文の内容、コンテンツとしてユーザーに表示される部分　

</body>

</html>

手順① DOCTYPE宣言をする

これから作成する文章がHTMLであることや、どのHTMLバージョンなのかをプログラムに伝えるため、DOCTYPE宣言をおこないます。

たとえば、HTMLのバージョンに「HTML4.01 Transitional」を使い、宣言する場合のコードは、

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

となります。

続けて、「端末の幅に合わせてコンテンツを表示する」コードを記述します。

「width=device-width, initial-scale=1.0」が、それを意味する部分です。

<head>

</head>

このコードを記述することで、スマートフォンなどで閲覧したとき、作成したメールが画面の端にしっかりと収まります。

手順② 文字コードの設定

文字化けを防ぐために、文字コードの設定をおこないます。metaタグ（ページに関する情報タグ）を使用し、<head>要素の中を、<style type="text/css" >と</style>で区切ります。この区切りの中に「埋め込み形式」でCSSの情報を書いていきましょう。

手順③ 枠組みを作る

メール全体の枠組みを作るために<body>要素を使用し、テーブルレイアウトを組み立てていきます。タグの属性は、表やセルの幅を変える「width」、表の高さを変える「height」、要素内容の配置方向を設定する「align」、枠線の「border」などです。

加えて、さらに装飾したい箇所にCSSを記述します。

手順④ ヘッダー・フッターを作る

メールの最上部に「ヘッダー」を、最下部に「フッター」を作ります。テーブルを複製してエリアを表示させます。

<tr>

ヘッダーまたはフッター情報を追加

</td>

</tr>

</table>

手順⑤ 大見出しの追加

大見出しのテーブルを作り、大見出しを追加していきます。「fontタグ」と「CSS」でフォントサイズ、フォントの色、大見出しのテキストを書きましょう。

<tr>

大見出しを追加<br>

大見出しを追加

</font>

</td>

</tr>

</table>

手順⑥ 本文を入力

ここまで作成したら、テキストのテーブルを作り、メールの本文を入力していきます。大見出し同様、「fontタグ」と「CSS」でフォントサイズ、フォントの色、行間、テキストを書きましょう。

<tr>

<font size="3" style="font-size:16px;color:#333333; line-height:1.5;">本文を入力・・・<br>本文を入力・・・<br></font>

</td>

</tr>

</table>

手順⑦ リンク先ボタンの設置

メールからWebサイトに飛んでほしい場合は、リンク先ボタンを設置します。TDタグのなかにボタン用のテーブルを書きましょう。

<tr>

<tr>

<font size="5" color="#ff0000">ボタンテキスト</font>

</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

手順⑧ 画像の挿入

メルマガの訴求力を高め、印象を大きく左右するのが、画像の挿入です。画像を挿入する際にはアイキャッチ画像テーブルを作成します。

<tr>

</td>

</tr>

</table

なお、サーバー内にある画像は「絶対パス」で記述しなければ読み込めません。絶対パスとは、「https://～」ではじまるアドレスでファイルの場所を示すものです。HTMLメールの画像は、サーバに置いた場所から読み込み、表示する仕組みです。

もし、画像がうまく表示されない場合は、絶対パスで記述されているか確認してください。

その他のHTMLメールの作り方

前述のHTMLメールの作り方の他に、2種類の作成方法をご紹介します。

CSS記述形式での作り方

CSS記述形式は、スマートフォンでよく使われるレスポンシブデザインに適しています。以下は、埋め込み形式でCSSを記載した例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; }
        .content { max-width: 600px; margin: auto; padding: 20px; }
        h1 { color: #f00; }
        p { color: #00f; }
    </style>
</head>
<body>
    <div class="content">
        <h1>Welcome!</h1>
        <p>Thanks for subscribing to our newsletter.</p>
    </div>
</body>
</html>

インライン形式での作り方

インライン形式とは、HTMLに情報を直接記述する形式です。記述に時間がかかり管理に手間がかかりますが、メーラー間での互換性があることがメリットと言えます。以下は、インライン形式でCSSを記載した例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body style="font-family: Arial, sans-serif;">
    <div style="max-width: 600px; margin: auto; padding: 20px;">
        <h1 style="color: #f00;">Welcome!</h1>
        <p style="color: #00f;">Thanks for subscribing to our newsletter.</p>
    </div>
</body>
</html>

HTMLメールを作成するときの注意点3つ

HTMLメールを作成するときには、いくつか注意したいポイントがあります。以下3つのことに気をつけましょう。

注意点① スマートフォンでの閲覧を想定し、レスポンシブデザインにする

HTMLメールを、パソコンでもスマートフォンでも閲覧できるようにするためには、それぞれの横幅に注意する必要があります。どちらのデバイスでも見やすくするために、レスポンシブデザインを使いましょう。レスポンシブデザインとは、ユーザーが閲覧する際に使うデバイスの画面サイズに応じた表示を最適化するデザインのことです。

またフォントのサイズ、文字数も考慮すると読みやすくなります。フォントのサイズは15pt以上、テキスト1行に45文字以内がスマートフォンでも最適なサイズと文字量です。

注意点② ブラウザ表示の設定をしておく

メールが正しく表示されない場合を想定して、ブラウザ表示用のHTMLメール設定をしておくことをおすすめします。ブラウザ表示の設定をしておけば、インターネット上でメール内容を閲覧してもらえます。設定の仕方は、HTMLメール作成をしたファイルをブラウザにアップロードするだけと簡単です。

合わせて、メール開封後の見やすい位置に「メールが正しく表示されない場合はこちら」などの文章と、リンクを貼るようにしてください。

注意点③ Outlookメールでは専用の設定が必要

OutlookメールでHTMLメールを表示させると、テーブルレイアウト上に余計なスペースが入ってしまうことがあります。このスペースが入らないようにするためには、Outlookメールだけに適用されるCSSを記述する必要があります。

以下のコードを用いて、余計なスペースが入る問題を回避しましょう。

<!--[if mso]>

table,td {

border-collapse:collapse;

mso-table-lspace:0;

mso-table-rspace:0;

}

table tr td {

line-height: 1.5;

}

</style>

<![endif]-->

注意点④ 画像が正しく表示されるよう設定する

HTMLメールには、閲覧しているデバイスの画面サイズに応じて表示を最適化する「レスポンシブデザイン」を使用するようにしましょう。画面いっぱいに画像を表示するため【cellpadding=”0″】、さまざまな画面サイズに適応した拡大縮小をさせるため、<img>タグで横幅【width="100%"】と記述することをおすすめします。

また、読者がメールを開封した時にエラーなどで画像が表示されないときのための代替テキスト「ALT属性」を設定しておくと良いでしょう

もっと簡単にHTMLメールを作成・配信したいなら？

HTMLの知識が少ない方がHTMLメールを作成するのは、なかなか骨が折れる作業です。しかしそんな方でも簡単にHTMLメールを作成でき、配信する方法があります。

それが「メール配信サービス」を利用することです。ここでは、メール配信サービスの活用をおすすめする理由を解説していきましょう。

メール配信サービスの活用がおすすめ

メール配信サービスはメルマガやお知らせ等を一度に多くの宛先に配信できるサービスです。高速に、高い到達率を保ったまま配信ができるだけでなく、メール作成機能から効果測定機能まで備わっています。メール配信サービスを活用すると、具体的には以下のようなメリットがあります。

メールアドレスを手入力しなくてもよい
大量のメールを一斉配信できる
HTMLメールが誰でも簡単に作成可能
セグメント配信ができる

生産性の向上にもつながるメール配信サービスの導入を、ぜひ検討してみましょう。

効率的にメール配信をおこなうなら、アララメッセージ

「アララメッセージ」は、到達率向上・自動化・効果測定で円滑なメールマーケティングを実現するメール配信システムです。

アララメッセージの「HTML簡単モード」は、HTMLに関する知識やスキルがなくても誰でも簡単にHTMLメールを作成することができる機能です。画像や要素の入れ替えはドラッグ&ドロップで簡単にできるので、初心者でも安心です。

さらに、150種類以上のテンプレートが用意されているので、テンプレートを活用することで一から作る必要もありません。

「HTML簡単モード」以外にも、セグメント配信や効果測定、ステップメールまでマーケティングメールに必要な機能が揃って月額9,500円から利用できます。国内の携帯キャリア各社やISP事業者が抱える配信ロジックに対応し、システムでの問題からメール配信のコツまで幅広くサポートします。

マーケティングご担当者様の工数削減に貢献する「アララメッセージ」を、ぜひ検討してみてはいかがでしょうか。

HTMLメールを作ろう

いかがでしたでしょうか。プログラミングコードを記述するとなるとハードルが高いように感じますが、全体の構造やテンプレートなどを使えば、初心者でもHTMLメールを簡単に作ることができます。視覚的な訴求ができるHTMLメールを作ってみませんか。

著者
アララメッセージマーケティングチーム

メール配信運用、メールマーケティングに関する情報をお届けするコラムです。“知ってるとちょっとイイコトがある”情報を発信します。

導入事例はこちら

お客様の声|株式会社東京海上日動パートナーズ|メール配信サービスアララメッセージ【アララメッセージの導入で作業時間が98%減】東京海上日動パートナーズTOKIOでは、管理職向けに毎週オンラインセミナーを実施しています。これまで、セミナーのご案内を一通一通送っていたため、配信作業に20時間を要していました。しかし、「アララメッセージ」の導入で作業時間が98%減少。さらに、効果測定機能でお客様の興味が目に見えてわかるようになりました。アララメッセージ

お客様の声|センターゲート株式会社|メール配信サービスアララメッセージ【費用面・工数面を考えて、始めやすいメールマーケティングからチャレンジ！】センターゲート株式会社では、週1回程度メルマガを配信されています。開封率は約30%！本格運用開始から1か月ほどでメルマガからの流入によるお問い合わせがあり、効果を実感しています。アララメッセージ

メルマガ配信～基本の作り方～ユーザにリーチしやすい、かつコストパフォーマンスの高いマーケティングツールとして、アツイ注目を浴びているメルマガ配信。「これからメルマガ配信を始めたいです！」という企業様向けに、メルマガ配信を始めるにあたっての基本をお伝えいたします。アララメッセージ

HTMLメールのハンズオンセミナーレポート！アララメッセージを導入いただいているお客様へHTMLメールのハンズオンセミナーを実施しました。本セミナーは、導入企業様だけでなく、導入前のお客様も対象です。是非ご一読ください。アララメッセージ

HTMLメールの作り方を解説！基本知識や簡単に作成する方法は？【初心者向け】

HTMLメール作成前に知っておきたい基礎知識

HTMLメールとCSSの関係性

テキストメールとの違い

WebのHTMLとの違い

HTMLメールの閲覧環境は様々

HTMLメールの特徴

効果検証をしやすい

メールに装飾を追加できる

HTMLメールの基本の作り方

手順① DOCTYPE宣言をする

手順② メールの中身をマークアップする

手順③ スタイリングする

手順④ テスト送信

手順⑤ エラーがあれば修正する

HTMLメールのテンプレートの作り方

手順① DOCTYPE宣言をする

手順② 文字コードの設定

手順③ 枠組みを作る

手順④ ヘッダー・フッターを作る

手順⑤ 大見出しの追加

手順⑥ 本文を入力

手順⑦ リンク先ボタンの設置

手順⑧ 画像の挿入

その他のHTMLメールの作り方

CSS記述形式での作り方

インライン形式での作り方

HTMLメールを作成するときの注意点3つ

注意点① スマートフォンでの閲覧を想定し、レスポンシブデザインにする

注意点② ブラウザ表示の設定をしておく

注意点③ Outlookメールでは専用の設定が必要

注意点④ 画像が正しく表示されるよう設定する

もっと簡単にHTMLメールを作成・配信したいなら？

メール配信サービスの活用がおすすめ

効率的にメール配信をおこなうなら、アララメッセージ

HTMLメールを作ろう

前の記事

次の記事

メール配信サービスのお役立ち資料一覧

アララ メッセージ製品情報

アララ メッセージ導入事例集

成果に差が出る！「メルマガにおける目的設定」ガイド

安定配信を実現する！「メール配信API」選定のコツ

メール配信サービスのお役立ち資料一覧

サービス詳細

人気記事ランキング

関連記事

サービス詳細

アララメッセージ製品情報

アララメッセージ導入事例集