HTMLでメルマガを作成しよう！これだけは最低限知っておきたいタグと装飾14選

更新日: 2018年05月28日

メールマーケティング

メルマガを送信する際、テキストのみで送信している方も多いのではないでしょうか。
スマートフォンの普及とに伴い、メールの本文内で画像をしようhしたり装飾を施したりなどが可能になりました。

訴求内容によっても異なりますが、特にネットショップなど写真や画像がメインとなる場合には、HTMLメルマガは訴求力をあげる有効な手段となります。

今回は、HTMLでメルマガを作成する際に最低限知っておきたい、タグと装飾14選をご紹介します。
また、HTMLメールを作成する際に必要な3つのステップも合わせてご紹介しています。
どちらも基本的な知識ばかりですが、メルマガ作成にあたり必要不可欠な知識となりますので押さえておきましょう。

このニュースを読んだあなたにオススメ

メルマガを配信する前にこれだけは知っておこう！テキストメールとHTMLメールの違いを解説
 デザインいらず！誰でも簡単にオシャレなHTMLメルマガを配信できるテンプレート25選

HTMLメールの作成方法

HTMLメールを作成する際は、大きく分けて3段階あります。

1.文面の作成

まずは送信したいメールの文面を作成します。
文面を作成する際は、画像を入れ込んだり装飾を施すことも考慮する必要があります。

また、メルマガを発行する際に必ず入れなくてはいけないのが「メルマガ解除」です。
これはテキストでのメルマガだけに限らずHTMLメルマガでも必要となりますので、忘れないようにしましょう。

メルマガを作成する際のポイントについては、ferret内の以下のページにてご紹介していますので、ぜひ参考にしてみてください。

これだけは覚えておきたい！メルマガ配信の基礎３箇条｜ferret

2.構造の作成

HTMLメールの骨格となる構造を作成します。
1.で作成したメールの文面や、画像、装飾などの各要素の意味や構造の情報を定義する、HTMLという言語を使用します。

3.装飾

構造化したHTMLメールに、サイズや色などの装飾の指示を行います。
HTMLをどのように装飾するのかを指定する、CSSというスタイルを指定する言語を使用します。

これらの段階を踏んで作成したHTMLメルマガは、以下のように表記されています。

例
<html>
<head>
<title><p style="font-size: 12px;">ferret編集部</p> </title>
</head>
<body>
</body>
</html>

最低限知っておきたいタグやCSSのコード

装飾

1.border

tableタグ内で利用します。
表の枠線の太さを指定することができます。
HTMLメールの場合は、0を指定してください。

2.cellpadding

tableタグ内で利用します。
表のセル同士の間隔を指定することができます。
HTMLメールの場合は、0を指定してください。

3.cellpadding

tableタグ内で利用します。
表のセル内の余白の大きさを指定することができます。
HTMLメールの場合は、0を指定してください。

4.style

先にご紹介した各タグ内で利用します。
スタイルに関する記述を行うことができます。

5.font-weight

style内で利用します。
文字の太さを指定することができます。

6.font-size

style内で利用します。
フォントの大きさを指定することができます。

7.color

style内で利用します。
文字の色を指定することができます。

まとめ

HTMLメルマガでは、画像や装飾を施すことで文字だけのテキストメールよりも表現力の高いメールを送信することができるため訴求力が上がりやすくなる可能性があります。
一方で、データ量が多いため受信環境によってはなかなかメールが表示されない、送信スピードがテキストメールよりも遅くなる場合があるなどの懸念点もあります。

過度の画像を使用したり装飾を施したりしてしまうと、かえって読みにくくなるだけではなくそもそも受信されない、などの問題も発生しますので、必要に応じて適切にHTMLメルマガを活用しましょう。