HTMLメールの作り方を5分で解説!最も簡単に作成する方法もこっそり教えます。

2020.01.20 メール

お客様に自社のサービスや商品を広告するメルマガは、数あるマーケティングの方法の中でも高い効果を持っています。

高い訴求力をもつメルマガですが、効果的に訴求ができるメルマガを自力で作成するには、ある程度のIT関連の知識が不可欠でしょう。

写真や文字に装飾のある「HTMLメール」はメルマガを使ったマーケティングでは主流になっています。

そこで今回は、メルマガ広告の土台をなす「HTMLメール」の作成方法に関してご説明していきたいと思います。

また、「HTMLメール」を1から作る方法の他に、とても簡単に「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であることと、「HTML 4.01移行型DTD(Transitional)」というバージョンであることを宣言しています。

また、HTMLメールの作成では・というHTMLタグがないと、どれだけ他にHTMLタグを記述しても、HTML形式で展開されません。

HTMLメール内の共通事項を記述する

作成するHTMLメールの中で「共通事項」として使うフォントやCSSスタイルを記述していきます。

記述の仕方は「埋め込み形式」や「インライン形式」などがありますが、詳しい記載の方法は後ほどご紹介しております。

フォントなどを指定する際にスマートフォン表示用のCSSを追加しておかないと、スマートフォンでHTMLメールを確認した時に表示が乱れてしまう可能性があります。

スマートフォンでもコンテンツを見やすく表示するには、端末の画面幅に合わせてコンテンツの表示を最適化するために以下のような記述をタグ内に記述する必要があります。

もしくは

PCでHTMLメールのビジュアルを確認した時は普通に展開されていたのに、スマートフォンで表示が乱れてしまった場合は、この作業に問題がある可能性が高いので注意しましょう。

HTMLメールの作り方【実用】

ここからは、HTMLメール内で使われるフォントやCSSスタイルを記載する方法をご紹介していきます。

CSSを書き込む方法には「埋め込み形式」「インライン形式」などがあります。

他の記事や書籍でもいくつかの方法が紹介されていますが、この2つはよく使われている記述の方法です。

「HTMLメール」を使った広告では、配色や画像配置などを含む装飾は非常に大切な要素になります。

画像を確認しながら作成していきましょう。

「埋め込み形式」でのHTMLメールの作り方

まずはじめに「埋め込み形式」でHTMLメールにCSSを記載する方法からご紹介していきます。

埋め込み形式は、セクションの中で情報を記載するのが特徴です。下は埋め込み形式でCSSを記載した例です。

上記の記述がの間に入る形になります。

今回は、行間(マージン)やパディング領域、フォントなどをCSSで指定しています。

例文の最後にある</style>の後に</head>が記載され、本文にあたる部分が始まります。

「インライン形式」でのHTMLメールの作り方

インラインスタイルというのは、HTMLのデザインを指定するCSSの適用方法の1つで、HTMLの各要素にstyle属性を追加したコードの執筆方法です。

HTMLタグでいうと「<要素名 style=”~”>」このような形で記載することになります。

フォントの色やサイズなども同様に、「””」の間にCSSを打ち込むことで、HTMLタグとして展開されます。

上記は画像を挿入しインラインスタイルでCSSを追加した例です。

これまでご紹介してきたHTMLタグとCSSをまとめると以下のような形になります。

HTMLメールエディタを使えば楽にHTMLメールを作れる

今までお伝えしてきた方法以外にも、HTMLにCSSを記述する方法はありますが、やはりある程度IT関係の知識がなければ、効果的な「HTMLメール」を自力で作成するのは難しいでしょう。

時間対効果で考えると、HTMLやCSSに詳しくない方は、ITに関する知識がある方にHTMLメールの作成をお願いし、他のアプローチでビジネスを進めていった方が効率がいいでしょう。

しかし、「メールエディタ」と言う機能を使うことで、ITに詳しくない方でも簡単に「HTMLメール」を作成することができます。

「メールエディタ」でHTMLメールを作成する場合、HTMLやCSSの記述に関しての知識は全くと言っていいほど必要ありません。

文字の大きさや配置を直感的に指定していくことができるので、ゲームをしているような感覚でHTMLメールを作成し、ビジネスに役立てることができます。

ブラストメールでは7日間無料で「HTMLエディタ」が使える!

「ブラストメール」のHTMLエディタは、7日間無料でHTMLメールを作成することができます。

IT関係の知識が少ない方でも簡単にHTMLメールを作成できるように、面倒な作業をせずともHTMLメールを作成することができます。

選択できるレイアウトもこれまでに10万通以上のメルマガを見てきたメール配信業界のプロが選んだ「本当に使えるレイアウト」だけを厳選してあります。

他にも画像を好きな比率でトリミングする機能なども搭載しており、外部の編集ソフトを使わずに画像をトリミングすることが可能です。

また配信したHTMLメールの効果測定も行うことができるので、自社のサービス・商品に関する情報発信にお役立てください。

まとめ

視覚的訴求に優れたHTMLメールは高い宣伝効果がある一方で、作成にはIT関係の知識や経験を必要とします。

全くITに関する知識がない方が、効果的なHTMLメールを自作しようとするのは現実的ではありません。

したがって、簡易的にHTMLメールを作成できる「HTMLエディタ」でHTMLメールを作成することをオススメします。

エディタを使うことで、HTMLメールの作成にかかる時間を大幅に短縮でき、他の業務に咲くことができる時間が増え、結果として高い費用対効果が期待できます。

HTMLメールを使った広告を考えている方は「htmlエディタ」の使い心地をぜひお試しください。

画像リンク

契約数9年連続No.1のメール配信サービス「ブラストメール」
詳しくみてみる >
7日間の無料トライアルをお試しください
契約数9年連続No.1!月額3,000円から使えるメール配信サービス「ブラストメール」。今だけ7日間無料キャンペーン実施中!
無料トライアル
目次