TenCyにて、メルマガを配信する事が決まり、HTMLメルマガを作成する機会がありましたので作成方法や注意点などについて書いていきたいと思います。

メルマガ作成方法の種類

メルマガの作成には大きく分けて2通り方法があります。

一つ目はテキストメルマガ、もう一つはHTMLメルマガです。

今回はHTMLメルマガにフォーカスを当てて、作成時の注意点を解説したいと思います。

HTMLメルマガとは

まず初めに、HTMLメルマガとは何かを解説したいと思います。

HTMLメルマガとは、一言で言うとテキストだけでなく、画像や装飾を施したメールのことです。

メールの文章が全てテキストだけでは読みづらさが発生しやすく、加えて長文にもなれば、読む面倒さも加わります。そこでHTMLスタイルによって装飾や文字の色を変えたり、画像を挿入したりする事によって、読みやすさや情報の訴求力が高まり、最後まで読んでもらいやすくなります。

HTMLメルマガ作成時の注意点

メリットも多いHTMLメルマガですが、作成にはHTMLやCSSの知識が必要になります。

そこで、HTMLやCSSを使ってメルマガを作成する時のルールや注意点を以下にまとめたいと思います。

---

・基本的にテーブルレイアウトで構成する

基本的にHTMLメールは、tableタグを使って作成します。webサイト制作などによく使用される、articleタグやsectionタグなどは使用しないようにしましょう。理由としましては、一般的なタグはメールクライアントでサポートされていない場合があり、想定外の表示崩れを起こす可能性があるからです。

・CSSはインライン形式で書く

cssの使用方法には以下の3つの方法があります。

①HTMLのタグに直接style属性を用いるタイプ（インライン形式）

②headタグの中にstyleタグを用いるタイプ（埋め込み形式）

③cssの外部ファイルを用意し、htmlファイルからcssファイルを読み込むタイプ（外部読み込み形式）

３番目の外部読み込み形式は主にwebサイトを制作する時に用いられるタイプです。

・容量を大きくしすぎないように注意する

画像サイズを小さくしたり、軽量化をしてHTMLメールをなるべく重くならないようにしましょう。Gmailの場合、102kb以上の大きさのHTMLメールを送信した場合、自動でクリッピング処理がされてしまいます。102kb以上の大きさに該当するコンテンツを勝手に隠してしまう為、注意が必要です。

・作成時の横幅は600px

一般的なPCメールクライアント、メールで快適に表示するための安全な横幅です。スマホ用の横幅は、画面の横幅に応じて拡大縮小するように100%指定で設定します。

・完成したらまずはテスト送信をして確認する

HTMLメールが完成したら、まずは自分のメールにテスト送信をして確認をしてみましょう。
作成時は綺麗に作られていても、メールクライアントによって正しく表示されないこともある為、注意が必要です。

---

他にも細かい注意点はありますが、今回は最低限意識する必要のある項目を挙げました。

HTMLメルマガ作成時の参考にして頂ければ幸いです。