メルマガを作成したことがない、HTMLをあまり触ったことがない人でも、HTML形式のメルマガを作成することは可能です。ここでは、作成ポイントや、便利なタグとコード、HTMLメルマガを取り入れるメリットや注意点を紹介します。ぜひ参考にしてみてください。

HTMLメルマガの作成ポイント

まずは、HTMLメルマガの作成時に必要な文面や構造作成、装飾のポイントについてお教えします。

文面作成のポイント

後から入れる画像や装飾を考慮して作成するのがポイントです。なぜなら、事前にその点を考慮せずに文面を仕上げると、後で画像入れや装飾をした際、内容に違和感やズレが生じてしまうことがあるからです。そうなった場合、修正する時間が発生したり、内容にズレが生じたまま配信してしまったりする恐れもあるので、必ず完成形をイメージしながら文面を作成するようにしましょう。
また、メルマガ解除の入れ忘れにも注意が必要です。このメルマガ解除は、テキストメルマガだけでなく、HTMLメルマガにも必要なものなので、入れ忘れのないようにしてください。

構造作成のポイント

HTMLメルマガで構造を作成する際は、テーブルレイアウトを基本にしましょう。テーブルレイアウトとは、〈table〉タグを使用してレイアウトを組んでいく方法です。〈table〉タグで箱をつくり、その中にさまざまな指示を入れ込むことで、簡単に構造を作成することができます。メルマガ作成に役立つタグやコードについては、後ほど紹介します。

装飾のポイント

装飾では、CSSを使用しましょう。テーブルレイアウトで作成した骨格の中に、CSSによる指定を入れ込むことで、文字の色付けやサイズ変更、画像の埋め込みを行うことができます。このCSSを使用する際は、できるだけ多くのメーラーに対応しているものを選ぶようにしましょう。なぜなら、対応していないCSSを使用した場合、送信先で上手く表示されない可能性があるからです。

メルマガ作成に役立つタグやCSSコード

メルマガ作成で使えるタグやCSSコードを覚えておくことで、簡単にHTMLメルマガを作ることができます。役立つものをいくつか紹介するので、見ていきましょう。

タグ

【table】

構造作成のポイントでも紹介した、箱をつくるタグです。このタグで全体の構造を作成し、その中にこれから紹介する〈tr〉や〈td〉タグを入れることで、基本のレイアウトを作成することができます。

【tr】

“1行”を表すタグです。使用することで、レイアウト内に行を作ることができます。

【td】

行の中にデータの記述を行うことができるタグです。〈tr〉タグの間に入れて使用しましょう。

【img】

画像を埋め込む際に使用するタグです。HTMLメルマガで画像を表示したい場合は、〈td〉タグの間にこのタグを入れておきましょう。

【a】

リンクを設置したい場合に使えるタグです。〈img〉タグと組み合わせて使うこともでき、画像にリンクをかけることもできます。

【p】

段落を示すタグです。文中で段落を変えたいと思ったら、このタグを使用しましょう。

【br】

改行や空白を示すタグです。このタグを使用しない限り、HTMLメルマガの文章は改行されないので、改行が必要な部分には必ず入れるようにしましょう。

cssコード

【border】

枠線の太さを指定するコードで、〈table〉タグ内で使うことができます。0と指定することで、枠線の太さも0にすることができます。メルマガでは0の指定をオススメします。

【cellpadding】

箱の余白を指定するコードで、こちらも〈table〉タグ内で使用します。HTMLメルマガでは、0を指定することになります。

【style】

先程紹介した各タグ内で使用するコードです。このstyleの中に、これから紹介するコードを入れてくことで、文字の太さや大きさの指定を行うことができるようになります。

【font-weight】

文字の太さを指定するコードで、style内で使用することができます。

【font-size】

文字の大きさを指定するコードで、こちらもstyle内で使用することができます。

【color】

文字の色を指定するコードで、こちらもstyle内で使用することができます。

関連記事はこちら無料でHTMLメールを作れる？メルマガ配信に使える無料ツールとテンプレートをご紹介

HTMLメルマガを作成するメリット

HTMLメルマガを取り入れた場合、テキストメルマガよりも大きなメリットを得ることができることをご存知でしょうか。2つのメリットを紹介するので、そのメリットを活かせるHTMLメルマガを作成してみましょう。

メリット1.テキストメルマガよりわかりやすい

HTMLメルマガは、文面に画像を埋め込むことができます。そのためテキストメルマガよりも、わかりやすく情報を記載することが可能です。例えば、テキストメルマガで商品やサービスの説明をする場合、読み手のイメージを膨らませる必要があるため、細かい説明を行なう必要があります。
しかし、HTMLメルマガなら、商品の写真やサービスのイメージ画像を埋め込むことができるため、細かい説明は必要ありません。そのため商品やサービスの情報、オススメのポイントなどを簡潔にまとめることができ、読みやすいメルマガを作成することができます。HTMLメルマガを作成する際は、このメリットを活かしてわかりやすい見た目に仕上げるようにしましょう。

メリット2.開封率が把握できる

HTMLメルマガは、簡単に開封率を測定することが可能です。メルマガの開封率は、顧客のニーズを把握するための重要な指標になるため、販売戦略を立てる際にも活かすことができます。開封率の測定方法は、“メルマガ内に埋め込んだ画像の表示回数を計測する“というものです。また、”計測用のパラメータを付与した空の画像の表示回数をカウントする“という方法でも、開封率を測定することができます。この方法は、画像の埋め込みができないテキスト形式のメルマガの場合、取り入れることができません。せっかくHTMLメルマガを取り入れるのですから、販売戦略に活かせるよう、積極的に画像を埋め込んでみましょう。

HTMLメルマガを取り入れる際の注意点

HTML形式のメルマガには、注意すべき点もあります。取り入れる際は、以下の2つの事柄に注意しましょう。

注意点1.セキュリティに関する問題

HTML形式のメルマガには、小さなプログラムである「スクリプト」を組み込むことができます。とても便利なものですが、ウイルスを組み込むこともできるので、その点を警戒している人がいることをきちんと把握しておかなくてはいけません。そのためユーザーの不信感を煽らないよう、自社サイトにHTML形式のメルマガを配信している旨を記載し、事前に知らせておくことをオススメします。

関連記事はこちら今すぐチェック！メルマガ配信のセキュリティ対策のススメ

注意点2.レイアウト崩れ

HTMLメルマガは、メーラーによってレイアウト崩れが起きてしまう可能性があります。そのためHTMLメルマガが完成したら、なるべく多くのメーラーで表示確認を行うようにしましょう。初めの作成ポイントでも紹介したように、テーブルレイアウトで作成してその中にCSSの指定を入れる、または多くのメーラーに対応しているCSSを使うというように、工夫することが大切です。

HTMLメルマガはテーブルレイアウトでの作成が基本

ここまで、「メルマガをHTML形式で作成する際のポイント」や、「作成時に役立つタグやコード」、「HTMLメルマガで得られるメリット」や「取り入れる際の注意点」について紹介しました。HTMLメルマガ作成の重要ポイントは、テーブルレイアウトを基本として作成するというものです。注意点でも記載したように、メーラーによっては使用したコードが認識されずレイアウト崩れが起きる可能性もあるので、気をつけて作成しなくてはいけません。
大枠はテーブルレイアウトで作成し、その中に多くのメーラーで使用できるCSSコードを使うという方法で作成しましょう。HTMLメルマガは、販売戦略にも役立つものです。上手く作成し、どんどん効果をアップさせていきましょう。