HTMLメールの作り方とは？作成の基本から応用的なテクニックまでご紹介
メールは企業活動における日常的な社員間・取引先とのコミュニケーションをはじめ、顧客向けのメルマガなど、幅広い用途で使用されています。
しかし一括りにメールと言っても、主に2つの種類に分けられます。
1つが文章のみで構成されている「テキストメール」。もう1つがテキストの加工や画像の挿入が可能な「htmlメール」です。
一般的に個人間で使用するメールはテキストメール。
一方で企業のマーケティング活動に活用されるのが、画像や文字の装飾が施されたhtmlメールです。
またビジネスの現場で頻繁に活用されるメルマガの中でも、htmlメールによって作成されたメールは特に費用対効果を期待できます。
今回はhtmlメールの概要や作り方の基本・応用までご紹介します。
HTMLメールもテキストメールも作って送れるツールなら、クライゼルのメール配信サービスをご利用ください。
また、弊社ではHTMLメールの制作やメールマーケティングのコンサルティングも承っております。詳細はメール制作サービスまたはメールマーケティング支援サービスをご参照ください。
この記事のポイント！
- htmlメールとはhtmlを活用した装飾が可能なメールのこと
- htmlメールはテキストメールよりも視覚的な訴求力のあるメールが作成できる
- CSSを入れ込むことで送信先に合わせた装飾が可能
- メールマガジンを作成する場合はhtmlメールが効果的
目次[非表示]
HTMLメールとは？
htmlメールとは、マークアップ言語のhtmlを使用したメールのこと。
htmlを使用することで、テキストの加工や画像の挿入が可能です。
テキストメールに比べ見栄えの良い装飾されたメールを作成できるので、顧客に伝えたいメッセージを効果的に表現できます。
まずhtmlメールを理解する上で欠かせない、htmlについてご紹介していきます。
htmlとは？
htmlとは「Hyper Text Markup language（ハイパーテキストマークアップランゲージ）」の略称です。
私たちが普段使用しているウェブサイトにも、一般的にはhtmlが組み込まれています。
初めてhtmlメールを活用する方でも要点を押さえ、フォーマットを知っておけば十分に扱えます。
このように比較的容易に導入が可能な点もhtmlメールが企業のマーケティング施策で頻繁に活用されている理由です。
htmlタグの例
htmlには、その文書がhtml文書であることを指定するタグと呼ばれる要素が使われます。
このタグによってhtmlの記述を開始・終了します。
タグにはさまざまな種類があり、用途に応じて使い分けます。以下は代表的なhtmlタグです。
- <h1> ：見出し
- <strong> ：太文字
- <img> ：画像の表示
上記のようなタグを用いることで、文字や画像の挿入を指示する役割がhtmlです。
例えばウェブページで「<h1>ABCD<h1> 」と記されている場合、「<h1>」 で囲まれている部分（ABCD）がテキスト上で実際のタイトルになります。
また「<strong>」を使うことで、対象のテキストが太文字で表示されるので情報を強調できます。
そうすることでメルマガ配信を行った際、配信先に伝えたい情報を効果的に伝えることが可能です。
例えば価格が強みの商品を伝える際には、価格を「<strong>」タグで強調することで、顧客に価格が魅力であることを伝えられます。
htmlメールとテキストメールの違いとは？
htmlメールとテキストメールの大きな違いは、メールによる表現の豊かさです。
テキストメールは一般的に私たちが使用する文字だけのメールです。
これは「メール」はもちろん身近なところであれば「LINE」などのチャットをイメージするとわかりやすいですね。
黒色の文字のみなのでシンプルな点が特徴です。
一方でhtmlメールでは以下のようなことが特徴があります。
- 画像や動画の挿入ができる
- 文字のフォントや色、サイズの変更ができる
- 自由なレイアウトができる
重要なポイントを目立たせたり、画像や動画を挿入することでより具体的にメールの内容が伝えられます。
そのため表現が豊なので読みやすく、訴求力のあるメールを作成できます。
実際に、先ほどのように価格に強みのある商品を、顧客にメールで知らせる場合を例にしてみましょう。
例えば、価格を他のテキストよりも大きなテキストかつ赤文字で装飾することで、訴求力のあるテキストにできます。
またhtmlタグを用いることで、リンクやパラメータが挿入も可能です。
これによって開封率やサイトへ飛んだユーザーの効果測定ができるので、そのhtmlメールから行われた顧客のアクションを確認できます。
これもテキストメールとの大きな違いであり、htmlメールのマーケティングに有用な点です。
テキストメールでも飾り文字や記号、段落分けなどを工夫することで読みやすいメールが作成できます。
しかしより高度な装飾が可能なhtmlメールの方が、顧客がメールを読むモチベーションも高い傾向にあります。
よって商品やサービス訴求などのマーケティングメールではhtmlメールの方が効果的です。
特にメールを開封した際の画面（ファーストビューといいます）にその顧客にとってインパクトある画像を配置するとマーケティングメールの効果はさら高まります。
なお、テキストメールはhtmlメールに比べて訴求力が弱いですがその訴求力を必要としないトランザクションメール（ECサイトでの購買完了の連絡や資料ダウンロードの御礼など）ではテキストメールが多くの企業で利用されています。
トランザクションメールでは連絡すべき事項を端的に表現する必要がありますのでテキストメールはその用途に適しているのです。
テキストメールもHTMLメールも作って送れる
クライゼルのメール配信サービス
htmlメールのメリット・デメリット
htmlメールは表現が豊で訴求力の高いメールということがわかりました。
ここではそんなhtmlメールのメリット・デメリットについてみていきましょう。
▼メリット
- 画像や文字の装飾を行うことで、訴求力のあるメールが作成できる
- メールの開封率やサイトへ飛んだ顧客などの効果測定ができる
▼デメリット
- htmlの知識が必要になる
- 作業の工程が多くなる
集客媒体として活用するメルマガであれば、訴求力の強さや効果測定は必須です。
しかしやはりテキストメールに比べて必要な知識や作業工程が多いため、初めて作成する場合はなかなか苦戦することもあります。
ただし、近年のメルマガはhtmlメールがほとんどとなっており、htmlメールはメルマガ集客において重要なスキルです。
また特に近年はメール配信システムを活用することで、比較的に容易にhtmlメールの作成と配信を行えるようになってきています。
テキストメールのメリット・デメリット
テキストメールはhtmlメールに比べ、日常的に使用するメールなので、イメージがつきやすいのではないでしょうか。
ここではテキストメールのメリット・デメリットについてみていきます。
▼メリット
- 手軽に作成できる
- 基本的にどのメールソフトでも正常に表示される
▼デメリット
- メールの開封率などの効果測定ができない
- 単調なメールになりやすい
- 訴求力の強いメールが作成できない
メールの中でみてもらいたいポイントを強調するのが難しいので、視覚的に訴求することが難しく単調なメールになりがちです。
htmlメールの作り方（基本編）
それでは基本のhtmlメールの作り方からご紹介していきます。
こちらでご紹介する基本編ではhtmlのみを使用したシンプルなメール作成です。
htmlメール作成の指示
まずはhtmlメールを作成することを認識させるために、「DOCTYPE宣言（文章型宣言）」を行います。
htmlには、「xhtml1.0」や「html5」などいくつかのバージョンがあります。
そのバージョンごとに使用できるタグや配置など、中身が異なりますので、作成する際にはバージョンを確認しておくことも重要です。
またDOCTYPE宣言では、どのhtmlバージョンかを指示する役割も含まれています。
ここでは例として「XHTML 1.0 Transitional」を使用した記述を記載します。
htmlは基本的に「<head> </head>」のように、「 /（スラッシュ）」で閉めた部分までが一つの括りです。
head内にある「<title></title>」は、メールを表示した際のタイトル。
「"Content-Type"」は、テキストと特殊文字の処理方法を伝えています。
また「"viewport"」はデバイスに応じた幅でテキストと画像が収まるように指示する役割。
特にスマートフォンでメールを見やすくするために重要です。
PCでは正常にメールが表示されたにも関わらずスマートフォンで不具合がある場合は、この工程が原因である可能性が高いです。
はじめはデバイスによってhtmlメールの見え方が違うことに留意しておきましょう。
htmlメール内での「共通事項」を指示
上記でメールのベースが完成したら、メール内で共通して使用するフォントやCSSスタイルを指示します。
フォントを指定する際に気をつけるポイントは、スマートフォン表示用のCSSを追加することです。
これを追加しておかないとスマートフォンでhtmlメールを受け取った際に正しく表示ができなくなります。
CSSの記述方式は「埋め込み形式」と「インライン形式」の2種類があります。
詳細は、次の応用編でご紹介していきます。
htmlメールの作り方（応用編）
応用編ではhtmlメールのフォントやCSSを、記述する2つの方法を紹介していきます。
CSSを記述することで送信先に応じたメールの装飾が可能です。
つまりメールを送信する顧客に合わせた装飾にできるので、より訴求力の高い効果的なメールの作成ができます。
例えば女性が対象であれば可愛らしいポップなイメージに、高齢者が対象であれば読みやすいようにテキストを大きく表示するなどといった工夫が、htmlメールではできるようになります。
埋め込み形式でhtmlメールを作成する
CSSをhtmlベース内の「<head>」に配置するのが埋め込み形式です。
スマートフォンにも対応できるレスポンシブデザインでは、この形式が最も一般的です。
しかしメーラーによってはheadタグ内のCSSを読み込まず、正常に表示されない場合もありますので、注意が必要です。
現在多くのユーザーを抱えている「Gmail」では、2016年に埋め込み形式のサポートが開始されました。
これによって埋め込み形式が最適化され、正常に表示できるようになりました。
インライン形式でhtmlメールを作成する
埋め込み形式に対して、htmlに直接記述していくのがインライン形式。
直接記述するため作成に時間がかかり管理に手間がかかりますが、メーラー間での互換性があります。
そのため埋め込み形式のように、メーラーによって表示できないというリスクは抑えられる点がメリットです。
しかし記述を間違ってしまうと正しく表示されません。
そのため正確さが求められるので、htmlに知見のある方が対応すると安心です。
まとめ
今回はhtmlメールとテキストメールと違い、そして基本から応用的なhtmlメールの作成方法についてご紹介しました。
表現力が豊で訴求力が高い、企業活動に効果的なメルマガとしてhtmlメールを作成する場合には、応用編まで押さえる事がポイントです。
メール施策が費用対効果の高い施策としても知られています。
ぜひ今回ご紹介した内容を参考にhtmlメールを作成してみてください。
テキストメールもHTMLメールも作って送れる
クライゼルのメール配信サービス
![ISO_IEC_27017](https://ferret-one.akamaized.net/resized_images/61dfddb412ab330e837572ab/original.{"image_size"=>"4560", "image_content_type"=>"jpg", "site_id"=>"c18031318939", "image_fingerprint"=>"ff8c21d84d3a7caf35248d8c76b93094", "component_id"=>"ed5fae9ba1dfd3abc54c26cb"}?utime=1642061236)