メルマガを送信する際、テキストのみで送信している方も多いのではないでしょうか。
スマートフォンの普及とに伴い、メールの本文内で画像をしよう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.table

表(テーブル)の作成時に利用するタグです。
このタグの中で、以下でご紹介する「tr」や「td」などのタグを使用して表を作成していきます。

2.tr

Table Rowの略語です。
表内の1行を表します。

3.td

Table Dataの略語です。
行の中に表示するデータを記述します。

4.img

Imageの略語です。
画像を表示する際に利用するタグです。
HTMLメール内で画像を表示する際には、このタグを使用してください。

5.a

Anchorの略語です。
リンクを設定する際に利用するタグです。
「img」と組み合わせると、画像にリンクを設定することも可能です。

6.p

Paragraphの略語です。
段落を表しますので、文中で段落を変える際に利用してください。

7.br

Breakの略語です。
改行や空白を意味します。
文章を作成して改行をしたい場合も、このタグを使用しなければHTMLメールに反映されませんので注意してください。

装飾

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内で利用します。
文字の色を指定することができます。