【初心者向け】HTMLメールの送り方とは？メルマガに使えるテンプレートの作り方

2022-01-28 09:59（更新：2024-11-01 07:42）ferret（One Tip編集部）

HTMLメールを用いたメルマガ作りには、ある程度知識が必要です。学習しようとしても、よく意味がわからず、頭を抱えていませんか。

この記事では、HTMLメールの基本を初心者の方でもわかりやすいように解説します。

プログラミングのスキル不要、ノーコードでHTMLメール作れるツールもご紹介しますので、ぜひ最後まで読んで参考にしてみてください。

■合わせてよく読まれている資料：効果的なメールの書き方や送り方をまとめました！
→成約につなげるためのメールマーケティングの基礎

成約に結びつけるためのメールマーケティングの基礎メールマーケティングは、メールを主なコミュニケーション手段としているBtoBビジネスにおいてはいまだ有効な集客施策です。今回ご紹介する資料はメールマーケティングのメリットや具体的な実施方法などを整理する内容になっています。 BtoBマーケティングのお困りごとをまるっと解決「ferret」

目次[非表示]

1.HTMLメールとは？メルマガにおける2つの特徴
2.HTMLメールでメルマガを発行する準備のポイント
3.【実践】HTMLのメルマガで使えるテンプレートの作り方
4.メルマガ配信するHTMLメール作成の注意点
5.メルマガに使えるHTMLメール作成ツールおすすめ3選
6.メルマガでHTMLメールを活用しよう

HTMLメールとは？メルマガにおける2つの特徴

HTMLメールとは、Webページを構築するためのプログラミングコード「HTML言語」を使い作成するメールです。「HTML」はメールの枠組みや、レイアウトを構成する役割を持ちます。

一般的に使用されるテキストメールと違い、Webサイトのように装飾されたメールを想像するとわかりやすいのではないでしょうか。

【参考】弊社「ferret One」で過去送信したHTMLメールのキャプチャ（一部抜粋）

※こちらの記事で、HTMLメールの作成例を複数ご紹介しています。
【例文あり】BtoBメルマガ担当者に聞く！おすすめ配信コンテンツ６選

以下、HTMLメールにはどのような特徴があるのか、代表的なものを2つ紹介します。

特徴①メルマガ閲覧ユーザーの分析ができる

メルマガユーザーを対象に、効果測定が行える点がHTMLメールの大きな特徴です。

メール内に挿入した画像の表示回数で解る「開封率」では、ユーザーが有益性を感じている内容やコンテンツを見定められます。

また、「ABテスト」などの分析では、メルマガをよりよく運用するための構成などの検証が可能です。

Google Analytics（GoogleのWebサイト分析ツール）を使用することでわかる「自社Webサイトにどう訪れたか、どう閲覧して回ったか」などに加えて、より詳細なユーザー分析ができるでしょう。

特徴②デザイン性の高いメルマガを作れる

プログラミングコード「CSS」（テキストの色やフォントを変更したり、画像やページのレイアウトを整えるコード）を使うことで、デザイン性の高いメルマガを作れるのも、HTMLメールの特徴です。

EC市場の売上上位50社を対象に、メルマガ形式の調査をしたところ、92.7％がHTML形式でメール配信を行っていましたというデータもあります。（2021年時点）

参照：メルマガ調査レポート 2021年版【EC売上ランキング上位50】

Webサイトのような画像や装飾されたテキストは、ユーザーの目を引くことができます。
インパクトのある見た目で行う情報提供で、リンクボタンのクリック率アップも目指せるでしょう。

GmailやOutlookなどメーラーによって使い方が変化する

メールは、メーラー（メール閲覧するためのソフト）や、Webメールを介して閲覧する仕組みになっています。

各メーラーでは、適応しているCSS言語（ページレイアウトや色・テキストデザインを整えるプログラミングコード）に違いがあります。

例えば、Outlookでは「背景画像」が表示されません。
そのため、Webサイトのような凝ったデザインにしすぎると、メーラーによってエラーが生じたり、レイアウトが崩れることがあるのです。

デザイン崩れを防ぐため、なるべくシンプルな装飾を心がけましょう。
また、テスト配信を行い、不備がないかチェックすることも有効です。

■合わせてよく読まれている資料：効果的なメールの書き方や送り方をまとめました！
→成約につなげるためのメールマーケティングの基礎

HTMLメールでメルマガを発行する準備のポイント

HTMLメールを作るとき必要なのが、さまざまな事前準備です。ここでは、全体の構成を大まかに説明します。

DOCTYPE宣言をする

DOCTYPE宣言とは、「文書型宣言」を指す言葉です。
HTMLにはさまざまなバージョンやルールがあり、以下の内容を明確にする必要があります。

これから作るメールがHTMLであること
HTMLのバージョン
HTMLとCSSはどのようなルールに従ったものどうか

どの種類・ルールでメールを作るか、プログラミングに書き出し、システムに宣言することからHTMLメール作りが始まります。

テーブルレイアウトを使ってメルマガ構成を行う

テーブルレイアウトとは、テーブル（表）を作るためのコードです。
<table>、<tr>、<td>など、さまざまなタグや要素・属性を使い、メールを構成します。

<table>タグでメール（テーブル・表）の枠組みを作り、<tr>タグで横方向（行）を作る。
そして、<tr>タグのなかに<td>タグを記述して、行に適応させたい内容を入れる流れです。

HTMLタグ

HTMLコードの意味をまとめる区切りが「タグ」です。例えば、

<title>メルマガの作り方</title>

の【 <title> と </title> 】部分が、タグになります。
タグに挟まれている「メルマガの作り方」はタグに含まれません。

HTML要素

「要素」はタグの中身を指しています。例えば、

<head>
<title>メルマガの作り方</title>
</head>

の「HTML要素」部分は、【<title>メルマガの作り方</title>】です。
「要素」は、タグの中身全部を示すときに使われます。

HTML属性

HTMLタグの後ろに、半角スペースで空間を空けたあとに書くコードが「属性」です。
タグや要素に、補足情報を付け加える部品の役割を担っています。例えば、

<div class="sample">メルマガの作り方</div>

の「HTML属性」は、【class】の部分。「class属性」と呼びます。

このような項目を使って、メールのデザインを行っていきます。

HTMLメールは基本的にテーブルレイアウトを用います。2000年代後半までWebサイトを作成するときもよく使われていましたが、現在ではCSSレイアウトが主流です。

メールの場合は、メーラーの処理能力が技術に追いついていないなどの課題があるため、テーブルレイアウトをメインに、装飾を加えたい部分にCSSを使うのが主流になっています。

CSSは埋め込み式がおすすめ

CSSは、HTMLメール内のレイアウトや色・文字デザインを整える役割を持つプログラミングコードです。

埋め込み式・インライン式・外部読み込み式の3種類があり、HTMLメールに一番適しているのは「埋め込み式」といわれています。（2018年時点）

埋め込み式

HTMLの<head>タグの項目内でCSSの情報を書き出しすことでレイアウトを組みます。
スマートフォンでよく使われるレスポンシブデザインに適しています。

インライン形式

HTMLプログラミング内に情報を直接入力するのが「インライン形式」です。

直接入力をしていくため、作成に時間がかかるデメリットがあります。
うまくコンテンツが表示されないなどの問題も生じやすいため、初心者には向いていない形式だと言われています。

外部読み込み形式

CSSファイルを外部で作成してHTMLへ読み込む形式が「外部読み込み」です。

メールは、ウイルスや危険なコンテンツが入り込まないように、リンクをブロックするようになっています。
外部読み込みの場合、ブロックされてしまう可能性もあるため、メールでの使用はおすすめしません。

メールの構成要素は9つ

メールは大きくわけて9つの構成要素でできています。

ヘッダー
メールを開いたとき最初に目に入る冒頭部分です。ブランドロゴなどを挿入することで、メルマガに統一感が生まれます。
大見出し
メルマガのなかで最も伝えたいことを表記します。
アイキャッチ
メールを開いて1番に目に入る、特徴的な画像です。
テキスト
メールの本文です。
ボタン
メルマガを読むことで、アクセスしてほしいリンクのボタンを設置します。
罫線
メール全体を見やすくするために追加して、デザイン性を高めます。
中見出し
メール本文の中盤で内容を区切り、わかりやすくするための見出しです。
画像
商品やサービスを実際に見せることで視覚効果に訴えます。
フッター
メールの1番下の部分です。配信社名や、メルマガ解除のお知らせを明記します。

容量が大きすぎると読み込み時間がかかるので注意する

HTMLメールは、容量を「100KB（キロバイト）以内」にするのもポイントです。

容量が大きいと、読み込みに時間がかかりユーザーのストレスになります。
またGmailの場合、102KB以上のメールは表示が省略されてしまうこともわかっています。

伝えたい内容がしっかりと表示でき、ユーザーに読み込みのストレスを与えないよう、100KB以内のシンプルでわかりやすいコンテンツ作成を心がけましょう。

【実践】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にはいくつかのバージョンがあり、それぞれで使えるタグや要素・属性などが異なります。

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

HTMLメールでよく使われるバージョンには、「HTML 4.01 Transitional」や「XHTML 1.0 Transitional」があります。

例えば、「HTML 4.01 Transitional」を宣言する場合、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">　となります。

続けて行うのが、メールが表示されたときの幅（見え方）を「等倍」にすることです。
この設定で、スマートフォンなどのモバイル端末で閲覧したとき、作成したメールが画面の端にしっかりと収まります。

コードに書き出すと、

<head>
　　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

「width=device-width, initial-scale=1.0」の部分が、「端末の幅に合わせてコンテンツを表示する」という意味をもっています。

文字コードの設定をする

DOCTYPE宣言の後は、文字コードの設定を行います。
これは、文字化けを防ぐための作業で、METAタグ（ページに関する情報タグ）を使用します。

<head>要素の中を、
<style type="text/css" >と</style>で区切り、区切りの内側に「埋め込み形式」でCSSの情報を記述しましょう。

記述する内容は、作成するHTMLメールを通して使用するフォントやCSSの「共通情報」です。

また、フォントに関しては、スマートフォンなどのモバイル端末でもレイアウトが乱れないように「表示用のCSS」を追加しておく必要があります。

端末の画面幅に合ったメール表示をするため、

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

または、

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">

のコードを設定しましょう。

一斉送信

すべてのメルマガ登録者にメール配信するのが「一斉送信」です。
新サービス・事業のお知らせやブログ更新など、すべての人に伝えたい情報を配信するときにおすすめの送信方法です。

連絡先リストに登録されたすべてのユーザーへメールを届けられるため、配信先の多さに比べると開封率が低い傾向があります。

メルマガ全体の枠組みを作る

HEAD要素までの設定が終わったら、続いてメルマガ全体の枠組みを作ります。
<body>要素を使い、テーブルレイアウトを組み立てていきましょう。

タグの属性は「width」「height」「align」「border」などです。加えて、さらに装飾したい箇所にはCSSを施します。

width属性

表やセルの幅を変えるための属性です。
table要素内のwidth属性は、ピクセル（絶対指定法）か、パーセント（相対的な指定法）幅を指定しましょう。

height属性

表の高さを変えるための属性です。
width属性と同様に、ピクセルかパーセントで高さを指定して変更を行います。

ピクセル（絶対指定法）とは

画面の1ピクセルを1の単位で表すサイズです。コンテンツが映っているモニターの解像度で数値は変化します。

例えば、スマートフォンではちょうどいいサイズの数値でも、パソコンでは小さく表示されるのはピクセルとなります。

パーセント（相対的な指定法）とは

画面の横幅と高さいっぱいの表示を100％とするサイズです。
100%にしておくことで、端末関係なく画面全体にメールが表示させる設定となります。

ヘッダーとフッターエリアを作る

枠組み作りまで終わったら続いて行うのが、メールの最上部と最下部作成（ヘッダーとフッター作成）です。
下記のようなテーブルを複製することで、エリアが表示されます。

<table width="100%" border="0" cellpadding="20" cellspacing="0">
    <tr>
        <td class="responsive-td" valign="top" align="left">
            ヘッダーエリア(またはフッターエリア)
        </td>
    </tr>
</table>

さまざまな画面サイズに対応できるレスポンシブデザインを適用させるため、TD要素に【class=”responsive-td”】を記述しましょう。

また、【align属性】を使うことで、テキストの表示位置を、左寄せ・中央・右寄せに変更することも可能です。

align属性：文字のレイアウトを、左寄せ・中央・右寄せにできる属性です。
left：文字を左側に寄せます。align属性にleftを指定【align="left"】で変更できます。
center：文字を中央に設定します。align属性にcenterを指定【align="center"】で変更できます。
right：文字を右側に寄せます。align属性にrightを指定【align="right"】で変更できます。

見出しを追加する

次は、大見出しを追加しましょう。
大見出しのテーブルを作成して、「FONTタグ」と「CSS」でフォントサイズ、色、大見出しのテキストを記述します。

<table width="100%" border="0" cellpadding="20" cellspacing="0">
    <tr>
        <td valign="top" align="center">
            <font size="5" color="#000000" style="font-size: 24px;color:#000000;line-height:1.4;">
               ここに大見出しが入ります<br>
                ここに大見出しが入ります
            </font>
        </td>
    </tr>
</table>

赤部分の内側が見出し部分です。
見出しが2行以上になるかもしれない場合は、行間の指定をすることで、バランスのいいレイアウトが作れます。

テキスト（メルマガ本文）を入力する

メールの全体像をある程度作り終えたら、ついにメールの本文であるテキストを入力していきます。

テキストのテーブルを作り、「FONTタグ」と「CSS」で、フォントサイズ、色、行間などを設定しましょう。

<table width="100%" border="0" cellpadding="20" cellspacing="0">
<tr>
<td class="responsive-td" valign="top" align="left">
<font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;">ここにテキスト(メルマガ本文)を入力します。・・・<br><br>ここにテキスト(メルマガ本文)を入力します。・・・<br></font>
</td>
</tr>
</table>

段落を1段変更をするのは、BRタグです。
上記の赤文字の場合、<br>が2つあるので2段変更していることになります。

Webサイトなどに飛べるボタンを設置する

メール本文のテキストまで入力が終わったら、Webサイトなどメールから飛んでほしいリンク先のボタンを設置しましょう。
ボタンのテーブルを作り、TDタグのなかにボタン用のテーブルを記述します。

<table width="100%" border="0" cellpadding="20" cellspacing="0">
    <tr>
        <td class="responsive-td" valign="top" align="left">
            
            <table border="0" class="btn-table" cellpadding="10" cellspacing="0">
                <tr>
                    <td align="center" valign="middle" class="btn-td"><a target="_blank" href="#"><font class="btn-font" size="5" color="#ffffff">ボタンテキスト</font></a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

ボタンのデザインは、下記CSSで調整可能です。

.btn-table {
width:100%; /* ボタンの横幅 */
border-radius:50px; /* ボタンの角丸半径 */
background-color:#000000; /* ボタンの色 */
}
.btn-td {
padding:10px; /* ボタン内側の余白＝ tableタグのcellpaddingにも"10"を指定 */
height:50px; /* ボタンの高さ */
}
.btn-td a {
color:#ffffff; /* ボタン文字の色 */
text-decoration:none; /* リンクにアンダーラインをつけるか、つけないか */
display:block; /* ボタンのリンク範囲を拡張 */
}
.btn-font {
font-size:30px; /* ボタンの文字サイズ */
line-height:1.5; /* ボタンの文字行間 */
}

色や見た目などを整えることで、ユーザーからのボタンクリック率は大きく異なります。
細かな修正を繰り返すことで、最も効果的なボタンデザインを作りあげましょう。

罫線・中見出しを追加して見やすさアップ

罫線や中身出しを加えることで、メルマガのさらなる見やすさを目指しましょう。
罫線をつけるには、【border属性】を使います。

中見出しは、テーブルを作り【cellpadding属性】や、TDタグ<td>のCSSを記述することで追加可能です。

<table width="100%" border="0" cellpadding="20" cellspacing="0">
   <tr>
   <td class="responsive-td" valign="top" align="left">
       <table width="100%" border="0" cellpadding="12" cellspacing="0">
       <tr>
           <td class="responsive-td" valign="top" align="left" style="border-left:15px solid #000000;background-color:#ebebeb;">
           <font size="5" color="#000000" style="font-size:16px;color:#000000;line-height:1.5;">中見出しのテキストを入力</font>
           </td>
       </tr>
       </table>
   </td>
   </tr>
</table>

border属性

罫線をつけるための属性です。
【<table border="1以上の整数">】と記述。1以上の整数部分で、罫線の縦幅を調整できます。
また、画面の横いっぱいに罫線表示をしたいときは、【cellpadding＝0】にしましょう。

HTMLメールの場合、受信者によってCSSのデザインが適応されないケースもあるため、テスト配信で確認が必要です。

画像の挿入を行う

メルマガの印象を大きく左右するのが、画像の挿入です。
視覚効果で、自社サービスの訴求を加速させましょう。

アイキャッチ画像テーブルを作ります。
画面いっぱいに画像を表示するため【cellpadding=”0″】と記述しましょう。

さまざまな画面サイズに適応した拡大縮小をさせるため、【width="100%"】に指定します。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="responsive-td" valign="top" align="left">
<img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img.png" alt="アイキャッチ画像" width="600" style="width:100%;">
</td>
</tr>
</table>

拡大縮小

さまざまなデバイスの画面サイズに画像を適応させるための設定です。
<img>タグで横幅【width="100%"】記述することで設定できます。

ALT属性

メールを開いたとき、エラーなどで画像が表示されないとき用の代替テキストがALT属性です。
画像の枠内に表示された「×」付近に現れる「画像がどのような内容か示す文章」がこれにあたります。

メールの読み込みに時間がかかるときも、ALT属性が表示されることで、ユーザーが「待たされている」と感じるストレスを減らせるでしょう。

絶対パス

「http://～」や「https://～」ではじまるアドレスでファイルの場所を示すものが、絶対パスです。
画像はこのアドレスに飛ぶことで表示されています。

HTMLメールは、サーバー内に作った情報を読み込み表示する仕組みです。
そのため、サーバー内にある画像は絶対パスで記述しなければ読み込めません。

画像の読み込みができない場合は、絶対パスの設定ができているかを確認してみてください。

メルマガ配信するHTMLメール作成の注意点

さまざまなユーザーに向けて配信するメルマガをHTMLで作る場合、注意しておかなければならない点がいくつかあります。
ここでは、配信前に確認しておくべきことを紹介します。

スマートフォンで閲覧できるサイズに設定

スマートフォンでも閲覧しやすいサイズに設定することは、非常に重要なポイントです。

昔はメール確認を主にパソコンでしていましたが、最近はスマートフォンで行うユーザーも増えています。そのため、どんな画面のサイズでも見やすいように、レスポンシブデザインを使用するといいでしょう。　

タグ表示は以下の通りです。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

また、文字の大きさ（フォントサイズ）は15pt以上にすることで、拡大せずにスムーズに読むことができるでしょう。

さらに、テキスト1行に対して45文字以内の文字量を意識すると、スマートフォンでも読みやすいHTMLメールになるはずです。

ブラウザー表示の設定を忘れない

きちんとメールが表示されないハプニングを考えて、ブラウザー表示用のHTMLメール設定をしておきましょう。設定方法は、HTMLメール作成をしたファイルを、そのままブラウザにアップロードするだけです。

メール開封後、すぐ見やすい位置に「メールが正しく表示されない方はこちら」などの文章と共にリンクを貼りましょう。

リンク先はWebサイト扱いとなりインターネットに公開されるので、そちらでメルマガの内容を閲覧してもらえます。

Outlookメール用の設定が必要

Outlookメールでは、テーブルレイアウト上に思いがけない空白が現れることがあります。
この空白を作りださないために、以下のような、Outlookだけに適用されるCSSを記述しなければなりません。

上記のコードを使うことで、表示のされ方に関する他の問題も防げる可能性があります。

テスト配信をしてミスをなくす

HTMLメールが完成したら、本配信の前にテスト配信を行いましょう。

パソコンやモバイル端末、またはメーラーごとに、レイアウトの崩れがないか、表示されていない箇所がないか、などの最終確認をします。

メール自体は完成しているため、テストをしなくてもユーザーにメルマガ配信は可能です。
しかし不備があった場合、この企業は細部の確認をしない会社なんだな、と思われてしまうかもしれません。

企業の信頼を保ち、ユーザーに満足してもらえるメルマガを届けるため、テスト配信を欠かさないようにしましょう。

メルマガに使えるHTMLメール作成ツールおすすめ3選

HTMLメールの作り方を知り、専門的な内容が多く不安を感じた人もいるはずです。
ここでは、プログラミングができない人向けのノーコートツールやプログラミングコード初心者も安心して挑戦できるツールを3つ紹介します。ぜひ参考にしてみてください。

ノーコードで作れる！BtBマーケティングに特化した「ferret One」

「ferret One」は、BtoBマーケティングに必要な機能をまるっとそろえたツールです。メール作成・顧客リストの管理・ユーザーの行動分析など、メルマガ運用に役立つ機能が揃っています。

メール機能では、一斉メールだけでなく、ステップメールなど、さまざまな配信方法に対応可能。HTMLメールも、見たまま編集でかんたんに作成することができます。

また、提供元の「ferret」ではツール提供だけでなく、マーケティングのコンサル・代行支援も行っているため、必要に応じてマーケティングの相談もできるのがメリットです。

BtoBマーケティングに取り組んでいきたい企業におすすめのツールでしょう。

【費用】
月額費用：3万円~
初期費用：10万円
※料金の詳細についてはお問い合わせください

▼ferret One
https://cloud.ferret-one.com/

メール配信やマーケティングに特化「Cuenote FC 」

Cuenote FC

数千件に対して一斉メール配信ができる「Cuenote FC」。配信数は制限なく、初心者でもかんたんにメール配信が行える、シンプルな使い勝手が魅力です。

月額使用料は、登録メールアドレス数で決まる仕組み。通常料金内で、会員登録や退会フォームページや、開封率効果測定・クリックカウント効果測定などの機能も使用できます。

オプションを組み合わせることで、機能をさらに強化することも可能なメール配信ツールといえます。

【費用】
月額費用：5千円から
初期費用：3万円から

【オプション機能】
空メール独自ドメイン利用：月額9千円
マイページ（フォーム）独自ドメイン利用：月額9千円
API：月額2万円
※上記の価格は、全て税抜き価格です。

▼Cuenote FC
https://www.cuenote.jp/fc/

費用を抑えたメルマガ配信にぴったり「Benchmark Email」

Benchmark Email.

「Benchmark Email」は、毎月250通までのメール配信数であれば、無料利用が可能なツールです。

初期費用も無料なうえ、デザインテンプレートは500種類以上、ステップメールの配信、ABテストによる効果検証などの機能がついています。

初心者でもドラッグ&ドロップでメール作成ができ、レスポンシブデザインにも対応。
世界中で約50万もの企業が利用している、非常に有名なメール作成ツールです。

【費用】
月額費用：無料（メール配信250件まで）
初期費用：無料

▼Benchmark Email
https://www.benchmarkemail.com/jp/resources/Free-HTML-Email-Templates/

メルマガでHTMLメールを活用しよう

HTMLメールを作るために、いきなりプログラミングコードの羅列を使いこなすことは難しいでしょう。
しかし、全体の構造やタグの意味などを知ることで苦手意識も薄れたはずです。

サポートツールなども活用することで、デザイン性の高いHTMLメルマガを作り、自社サービスのより魅力的な発信を目指しましょう。

■合わせてよく読まれている資料：効果的なメールの書き方や送り方をまとめました！
→成約につなげるためのメールマーケティングの基礎

弊社は、BtoBマーケティングに必要な機能をまるっとそろえたツール「ferret One」を提供しています。

Web制作からリード獲得、顧客管理までできる高機能をもちながら、操作はシンプルで簡単。やりたい施策がすぐできるから、生産性向上を実現します。ご興味のある方はぜひ資料をご覧ください。
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら

ferret（One Tip編集部）

One Tipは、BtoBマーケティングに特化した支援サービス「ferret」から生まれた、「リード獲得の打ち手が見つかるメディア」です。 BtoBマーケティングにかかわる人にとって、価値あるコンテンツをお届けしていきます。 Twitter：＠ferret_One_

【初心者向け】HTMLメールの送り方とは？メルマガに使えるテンプレートの作り方

HTMLメールとは？ メルマガにおける2つの特徴

特徴①メルマガ閲覧ユーザーの分析ができる

特徴②デザイン性の高いメルマガを作れる

GmailやOutlookなどメーラーによって使い方が変化する

HTMLメールでメルマガを発行する準備のポイント

DOCTYPE宣言をする

テーブルレイアウトを使ってメルマガ構成を行う

HTMLタグ

HTML要素

HTML属性

CSSは埋め込み式がおすすめ

埋め込み式

インライン形式

外部読み込み形式

メールの構成要素は9つ

容量が大きすぎると読み込み時間がかかるので注意する

【実践】HTMLのメルマガで使えるテンプレートの作り方

DOCTYPE宣言をする

文字コードの設定をする

一斉送信

メルマガ全体の枠組みを作る

width属性

height属性

ピクセル（絶対指定法）とは

パーセント（相対的な指定法）とは

ヘッダーとフッターエリアを作る

見出しを追加する

テキスト（メルマガ本文）を入力する

Webサイトなどに飛べるボタンを設置する

罫線・中見出しを追加して見やすさアップ

border属性

画像の挿入を行う

拡大縮小

ALT属性

絶対パス

メルマガ配信するHTMLメール作成の注意点

スマートフォンで閲覧できるサイズに設定

ブラウザー表示の設定を忘れない

Outlookメール用の設定が必要

テスト配信をしてミスをなくす

メルマガに使えるHTMLメール作成ツールおすすめ3選

ノーコードで作れる！BtBマーケティングに特化した「ferret One」

メール配信やマーケティングに特化「Cuenote FC 」

費用を抑えたメルマガ配信にぴったり「Benchmark Email」

メルマガでHTMLメールを活用しよう

前の記事

次の記事

記事を探す

おすすめの資料

ferret とは

こんな課題を解決

導入事例

資料・デモ

HTMLメールとは？メルマガにおける2つの特徴