まずはここから!HTMLメール作成するための基礎の基礎

こんにちは。
内定者の本山です。

メルマガはテキストメールとHTMLメールの2種類あることはご存知でしょうか?今回はそのうちの1つ、HTMLメールに焦点を当て、作成をするための基礎を紹介したいと思います。ぜひ最後までお付き合いください。

HTMLメールの3つのメリット

HTMLメールとは、HTML(HyperText Markup Language)という言語を使用した形式のメールのことです。

詳しくはこちらの記事を読んでみてください。

メルマガの基本!テキストメールとHTMLメールを知ろう!   

shutterstock_639493822

さて、HTMLメールには大きく3つのメリットがあります。

①写真や色を使うことで、ユーザーに視覚的訴求ができる。
→1番重要なメリットです。画像を見るだけでなんのメルマガか伝わりますよね。百聞は一見に如かずと言いますが、頑張ってうまく伝えるより、写真や図で見る方が分かりやすく、印象に残ります。

②開封率を計測できる
→送ったメールに対してどのくらいの人に見てもらえているのか確認ができます。テキストメールでは計測することができず、HTMLメールの大きなメリットです。

③反応装置を工夫することができる。
→画像やボタンにURLを埋め込むことで、反応装置をお客様が押しやすいものに工夫することができます。
例えば以下のようなものです。

 

これらのメリットがあるため、HTMLメールを利用する企業は徐々に増えています。
ではHTMLメールはどのように作られているのでしょうか?

 

HTMLメール制作の流れ

HTMLメールはどのような流れで制作されているのでしょうか?

おおまかな流れとしては、以下です。

1.イメージ案作成
どのようなメルマガにするかのイメージ案を作ります。

2.HTMLメール作成(コーディング)
HTMLなどの言語を使ってメールの本文部分の構造を作るメインの作業です。

3.HTMLメールの表示確認
2で作ったメールがお客様に届いた際に、きちんと表示されるか確認します。

4.本登録(本番送信登録)
用意したメーリングリストのお客様方にメールを送ります。

今回は2のメイン作業であるHTMLメール作成(コーディング)についてもう少し詳しく触れたいと思います。

 

HTMLメールの作成方法

冒頭でも触れましたが、HTMLメールはHTMLというコンピューターの言語を使って書かれています。

実際のメールでは見えませんが、このような言語の構造があって、HTMLメールは成り立っています。

 

本文をHTML化する際、作業は大きく2つに分けられます。

①文章や画像などの構造を作成する
HTMLタグと呼ばれる目印を付けてメールを構造化していきます。ここには図を入れる、ここには文章を入れるといった骨組みを組んでいく作業です。

②装飾する
①で作ったものに加えて、文字のサイズや色など、装飾を施していきます。
そのためにCSSという言語を使って、装飾のためのタグを書き込んでいく作業となります。
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。
HTMLと組み合わせて使い、表示される際の色・サイズ・レイアウトなどの表示スタイルを指定します。

以上2つが主な作業です。まず、骨組みを作り文章や図を入れる。そこに装飾を施していくといった感じです。

次にHTMLメールで注意しなければならないことを確認しましょう。

 

HTMLメールで注意しなければならないこと

HTMLメールで注意しなければならないことそれは、
メーラー(メールを読み込むソフト)によって表示できるものが異なるということです。

webブラウザに比べると、メーラーでは表示できるタグやスタイル設定が大きく制限されてしまいます。同じHTML言語を使っていても、webブラウザでは表示されるけど、メールでは表示されないものがあるということです。そのため、メーラーで表示できるタグは何か?ということを理解しておく必要があります。

さらに、お客様によって利用しているメーラーが異なり、メーラーによっても表示できるもの、できないものが異なるので予め認識しておく必要があります。

そこでメーラーが異なる場合でも、安定して作成したメールが表示されるようにするための2つの原則を覚えておきましょう。

 

①HTMLメールの構造を作る際には、「テーブルレイアウト」
web制作に馴染みのない方にとっては少し難しい範囲ですが、<table>という、表を作成するためのタグを使って構造を作成する方法です。このテーブルレイアウトですが、web制作の現場ではあまり使われなくなってきています。しかし、HTMLメールの作成においてはまだまだ主流です。

②装飾をする際には、「インラインスタイル」で
cssを利用した装飾は、3種類の方法があります。

⑴インラインスタイル
HTMLタグに直接使いたい装飾タグを書きこむ方法。

⑵内部(埋め込み)スタイルシート
HTMLの<head>というタグの範囲の中で装飾タグを書きこむ方法。

⑶外部スタイルシート
装飾タグを書きこんである別の専用ファイルを予め用意し、HTML内で読み込む方法。

この3つのうち「内部(埋め込み)スタイルシート」と「外部スタイルシート」は、メーラーによって表示されない可能性がありますので、HTMLメールの作成の時は最も安定している「インラインスタイル」を利用しましょう。

この注意しなければならないことについては専門的な内容も入っており、すぐに理解するのは難しいと思います。今回は、メーラーによって表示されるものが異なる可能性があることと、その為の2つの原則があることを覚えていただければOKです!

 

まとめ

今回はHTMLメールの基礎の基礎をご紹介しました。

HTMLメールってこんな感じで作るんだという大まかな流れを理解していただけましたでしょうか?

HTMLと聞くと難しそうと思いがちですが、まずはやってみましょう!この記事を最初のステップにしてHTMLメールの作成に挑戦してもらえたら嬉しいです!

参考になったらシェアをお願いします!