お客様に自社のサービスや商品を広告するメルマガは、数あるマーケティングの方法の中でも高い効果を持っています。
高い訴求力をもつメルマガですが、効果的に訴求ができるメルマガを自力で作成するには、ある程度のIT関連の知識が不可欠でしょう。
写真や文字に装飾のある「HTMLメール」はメルマガを使ったマーケティングでは主流になっています。
そこで今回は、メルマガ広告の土台をなす「HTMLメール」の作成方法に関してご説明していきたいと思います。
また、「HTMLメール」を1から作る方法の他に、とても簡単に「HTMLメール」を作る事ができる「エディタ」というシステムをこっそりご紹介しています。
ビジネスにメルマガを導入しようと思っている方はもちろん、すでに「HTMLメール」を使った広告を導入している方もぜひご覧ください。
直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタがおすすめです。
テンプレートを使って誰でも簡単にデザインはもちろん、自社ブランドに合わせたこだわりのデザインまで実現できます。
目次
HTMLメールとは
そもそも「HTMLメール」とは一体どんなメールのことを指すのか、厳密には理解していない方もいるのではないでしょうか。
HTMLメールに使われる「HTML」とは、Hyper Text markup language(ハイパーテキスト・マークアップ・ランゲージ)の略で、web上で使われる言語です。
文章と言ってもテキストメールのようにメールに直接文章を打ち込むものではなく、「HTMLタグ」を目印にして、web上でのみ認識される特別な文章のことを指します。
HTMLタグとは「<>」に囲まれているのが特徴です。
例えば、
- <h1>(見出し)
- <img>(画像の表示)
- <p>(段落を指定する)
- <strong>(太文字)
などはHTMLメールやWebページでよく使われるHTMLタグです。
他にもたくさんのHTMLタグがありますが、このようなタグを使うことで、「ここは見出し」、「この文字は太文字」といったように細かな指定をして、HTMLメールの基礎を作っています。
HTMLメールの基礎と言ってもなかなかイメージしづらいと思うので、実際にHTMLタグを記述したwebページを見てみましょう。
ご覧のように文字が「<>」で囲まれたHTMLタグで挟まれているのがわかるかと思います。
これが、web上では下の画像のように表示されます。
ちなみに今ご覧になっているこの記事を含めて、web上の記事の全ては「HTMLタグ」によって構成され、後述する「CSS」によって装飾が施されています。
「文字の色・大きさ」から、「改行」のような細かな部分に到るまで、web上では目に見えるほとんど全てのものに「HTMLタグ」と「CSS」が関係しています。
「HTMLメール」とはこの「HTMLタグ」と「CSS」をメールに使って装飾を施したメールのことを呼ぶのです。
他にも文字のみで書かれている「テキストメール」や文字に装飾を入れた「リッチテキスト」メールなどがあります。これらの違いは下記の記事で詳しく解説してあるのでご参照ください。
関連記事:HTMLメールとリッチテキストメールの違いとは。両者の違いをはっきりさせよう!
テキストメールとの違いは以下の記事にまとめてあります。
関連記事:HTMLメールとは?テキストメールとの違いを徹底解説!
メルマガもHTMLメールが主流に!
テキストメールとは違い、デザイン性が高い「HTMLメール」でのメルマガは、訴求力も高く、上手に使うことができれば、自社のサービス・商品を宣伝する上での大きな味方になってくれるでしょう。
「一般社団法人 日本ビジネスメール協会」の調査によれば、2011年〜2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の会社での使用率が約1.5倍にまで伸びています。
オフィシャルの場でも「HTMLメール」が浸透してきている証拠ですね。
また、スマホの普及に伴って、文字だけのメルマガは少なくなっています。
視覚的な訴求が主流になってきている現代では、文字だけを並べた「テキストメール」よりも装飾が施された「HTMLメール」の方が、読者にも受け入れられやすい環境になっています。
HTMLメールとCSSの関係
先述したCSSとはHTMLと組み合わせて使う言語のことで、正式な名称は「Cascading Style Sheets(カスケーディング スタイルシート)」と言います。
スタイルシート、と呼ばれているくらいなのでCSSの役割はHTMLメールやwebページのスタイルを定義することで、HTMLタグによって定義された文字や画像を、どのように配置・装飾するかを決めています。
HTMLタグとCSSを組み合わせてHTMLメールを作ることで、デザイン性の高いメルマガを作ることができるでしょう。
おしゃれなメールを作成する自信がないという方は、有名企業のメルマガやデザイン案を集めたサイトを参考にしましょう。詳しくはこちらをご参考ください。
関連記事:おしゃれなメルマガはこうやって作る!参考になるサイトや無料テンプレをご紹介!
HTMLメールの作り方【基礎】
ここからは実際に「HTMLメール」を作る方法をご紹介していきたいと思います。
しかし、効果的な訴求ができるHTMLメールを自力で作成するには、ある程度のITに関する知識が必要です。
したがって、現状としてHTMLタグとCSSを組み合わせて、自力で「HTMLメール」を作成する方法は主流とは言えないでしょう。
基本的には「エディタ」や「テンプレート」を使い簡単に作成する方法がとられています。
これからご紹介するHTMLメールの作成方法を読んだ上で、もっと手軽にHTMLメールを作成したい方はそちらを参考にしてください。
HTMLメールのベースを作成する
まずはHTMLメールの基礎となるHTMLタグをテキストエディタに記述しましょう。
HTMLメールの作成は「DOCTYPE宣言(文章型宣言)」から始まります。
HTMLにはいくつかのバージョンがあり、バージョンごとに使用できるタグや属性の名前、配置の仕方などが異なっています。
DOCTYPE宣言とは、これから作成する文章がHTMLであることや、どのHTMLのバージョンなのかをプログラムに伝える役割を持っています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes"> <meta http-equiv="Content-Language" content="ja"> <meta charset="shift_jis"> <title>タイトル</title>
上記のDOCTYPE宣言ではこれから始まる文章がHTMLであることと、「HTML 4.01移行型DTD(Transitional)」というバージョンであることを宣言しています。
また、HTMLメールの作成では・というHTMLタグがないと、どれだけ他にHTMLタグを記述しても、HTML形式で展開されません。
HTMLメール内の共通事項を記述する
作成するHTMLメールの中で「共通事項」として使うフォントやCSSスタイルを記述していきます。
記述の仕方は「埋め込み形式」や「インライン形式」などがありますが、詳しい記載の方法は後ほどご紹介しております。
フォントなどを指定する際にスマートフォン表示用のCSSを追加しておかないと、スマートフォンでHTMLメールを確認した時に表示が乱れてしまう可能性があります。
スマートフォンでもコンテンツを見やすく表示するには、端末の画面幅に合わせてコンテンツの表示を最適化するために以下のような記述をタグ内に記述する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
もしくは
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">
PCでHTMLメールのビジュアルを確認した時は普通に展開されていたのに、スマートフォンで表示が乱れてしまった場合は、この作業に問題がある可能性が高いので注意しましょう。
HTMLメールの作り方【実用】
ここからは、HTMLメール内で使われるフォントやCSSスタイルを記載する方法をご紹介していきます。
CSSを書き込む方法には「埋め込み形式」「インライン形式」などがあります。
他の記事や書籍でもいくつかの方法が紹介されていますが、この2つはよく使われている記述の方法です。
「HTMLメール」を使った広告では、配色や画像配置などを含む装飾は非常に大切な要素になります。
画像を確認しながら作成していきましょう。
「埋め込み形式」でのHTMLメールの作り方
まずはじめに「埋め込み形式」でHTMLメールにCSSを記載する方法からご紹介していきます。
埋め込み形式は、セクションの中で情報を記載するのが特徴です。下は埋め込み形式でCSSを記載した例です。
<style type="text/css"> * { margin:0; padding:0; } * { font-family: "メイリオ","Meiryo","MS ゴシック",sans-serif; } img { max-width: 100%; } body { -webkit-text-size-adjust:100%; width: 100%!important; height: 100%; } </style>
上記の記述が間に入る形になります。
今回は、行間(マージン)やパディング領域、フォントなどをCSSで指定しています。
例文の最後にある</style>の後に</head>が記載され、本文にあたる部分が始まります。
「インライン形式」でのHTMLメールの作り方
インラインスタイルというのは、HTMLのデザインを指定するCSSの適用方法の1つで、HTMLの各要素にstyle属性を追加したコードの執筆方法です。
HTMLタグでいうと「<要素名 style=”~”>」このような形で記載することになります。
フォントの色やサイズなども同様に、「””」の間にCSSを打ち込むことで、HTMLタグとして展開されます。
<img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
上記は画像を挿入しインラインスタイルでCSSを追加した例です。
これまでご紹介してきたHTMLタグとCSSをまとめると以下のような形になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes"> <meta http-equiv="Content-Language" content="ja"> <meta charset="shift_jis"> <title>タイトル</title> ーーーーー埋め込みーーーーー↓↓↓ <style type="text/css"> * { margin:0; padding:0; } * { font-family: "メイリオ","Meiryo","MS ゴシック",sans-serif; } img { max-width: 100%; } body { -webkit-text-size-adjust:100%; width: 100%!important; height: 100%; } </style> ーーーーー埋め込みーーーーー↑↑↑ </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width:100%; margin:0; padding:0; font-family:"メイリオ","Meiryo","MS ゴシック",sans-serif;"> ーーーーーインラインーーーーー↓↓↓ <img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/> ーーーーーインラインーーーーー↑↑↑ <!-- /FOOTER --> </body> </html>
エディタで楽にHTMLメールが作れる
今までお伝えしてきた方法以外にも、HTMLにCSSを記述する方法はありますが、やはりある程度IT関係の知識がなければ、効果的な「HTMLメール」を自力で作成するのは難しいでしょう。
時間対効果で考えると、HTMLやCSSに詳しくない方は、ITに関する知識がある方にHTMLメールの作成をお願いし、他のアプローチでビジネスを進めていった方が効率的です。
しかし、「メールエディタ」と言う機能を使うことで、ITに詳しくない方でも簡単に「HTMLメール」を作成することができます。
ブラストメールのHTMLメールエディタを例にとって簡単にご紹介します。
上記のようなテンプレートの中から、好みのレイアウトを選択します。
メール全体や文章のカラー、画像、リンクボタンや、SNSアイコンなどを挿入していきます。ここまで説明したような、面倒な作業は必要としないので、直感的に作業を進めることができます。
「メールエディタ」でHTMLメールを作成する場合、HTMLやCSSの記述に関しての知識は全くと言っていいほど必要ありません。スマホ、PCのどちらでもレイアウトが崩れないようなデザインも可能です。
HTMLメールエディタ機能の多くは、このようなブロックを何個も組み合わせてメールを作っていく形式になっています。
初心者の方が、HTMLメールを一から作るとなると、端末によって綺麗に表示されなかったり、リンクが機能しない、レイアウトが崩れるといった不具合が頻発し、本来の目的であるメール配信にまで辿り着けないということがよくあります。
すぐにHTMLメールを使ったメール配信を行いたいなら、こうしたエディタ機能を利用することをおすすめします。
HTMLメールエディタを利用するメリット
改めて、HTMLメールエディタを利用するメリットをおさらいしましょう。
まずは先述した「コーディングの知識が不要」という点です。特に、メール作成に関する知識が乏しい場合、レイアウト崩れを防ぎ、スマホとPC両方に問題なく表示されるようなレスポンシブデザインを行なうのは、至難の業と言えます。
その点、エディタを利用すればその問題は解決できます。
次に、エディタ機能付きのメール配信システムを利用することで「メールの効果測定が容易に行える」というメリットがあります。
HTML形式のメールを使用することにより、メールの開封率や文中リンクのクリック率を簡単に測定することができますが、この効果測定も、自分で組み込むとなると大変です。
読者の興味を惹くようなメール配信を行なっていくためにはデータ分析が必須です。なるべく作業負担を減らして、効率的にメールマーケティングを行ないたいのであれば、こうしたシステムの利用をおすすめします。
ブラストメールでは「HTMLエディタ」が使える!
「ブラストメール」のHTMLエディタは、すぐにHTMLメールを作成することができます。
IT関係の知識が少ない方でも簡単にHTMLメールを作成できるように、面倒な作業をせずともHTMLメールを作成することができます。
選択できるレイアウトもこれまでに10万通以上のメルマガを見てきたメール配信業界のプロが選んだ「本当に使えるレイアウト」だけを厳選してあります。
他にも画像を好きな比率でトリミングする機能なども搭載しており、外部の編集ソフトを使わずに画像をトリミングすることが可能です。
「HTMLメールを作って配信したい、けど一から作るのは難しそう…」
という方は、ぜひ一度エディタ機能を使用してみてくださいね。
まとめ
視覚的訴求に優れたHTMLメールは高い宣伝効果がある一方で、作成にはIT関係の知識や経験を必要とします。
全くITに関する知識がない方が、効果的なHTMLメールを自作しようとするのは現実的ではありません。
したがって、簡易的にHTMLメールを作成できる「HTMLエディタ」でHTMLメールを作成することをオススメします。
下記の記事ではHTMLメールを簡単に作成できるツールを20個、紹介しています。ツールを検討されている方は、ぜひご確認ください。
関連記事:メール配信システム比較20選!機能・料金を徹底比較
エディタを使うことで、HTMLメールの作成にかかる時間を大幅に短縮でき、他の業務に割くことができる時間が増え、結果として高い費用対効果が期待できます。
HTMLメールを使った広告を考えている方は「htmlエディタ」の使い心地をぜひお試しください。