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

2023.05.26 メール

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

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

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

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

また、「HTMLメール」を1から作る方法の他に、とても簡単に「HTMLメール」を作る事ができる「エディタ」というシステムをこっそりご紹介しています。

ビジネスにメルマガを導入しようと思っている方はもちろん、すでに「HTMLメール」を使った広告を導入している方もぜひご覧ください。

直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタがおすすめです。

テンプレートを使って誰でも簡単にデザインはもちろん、自社ブランドに合わせたこだわりのデザインまで実現できます。

⇒専門知識不要ですぐに使える、ブラストメールのHTMLエディタの詳細はこちらから

1 HTMLメールとは
- 1.1 メルマガもHTMLメールが主流に！
- 1.2 HTMLメールとCSSの関係
2 HTMLメールの作り方【基礎】
- 2.1 HTMLメールのベースを作成する
- 2.2 HTMLメール内の共通事項を記述する
3 HTMLメールの作り方【実用】
- 3.1 「埋め込み形式」でのHTMLメールの作り方
- 3.2 「インライン形式」でのHTMLメールの作り方
4 エディタで楽にHTMLメールが作れる
5 HTMLメールエディタを利用するメリット
6 ブラストメールでは「HTMLエディタ」が使える！
7 まとめ

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メール」でのメルマガは、訴求力も高く、上手に使うことができれば、自社のサービス・商品を宣伝する上での大きな味方になってくれるでしょう。

「一般社団法人日本ビジネスメール協会」の調査によれば、2011年〜2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の会社での使用率が約1.５倍にまで伸びています。

オフィシャルの場でも「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","ＭＳ ゴシック",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","ＭＳ ゴシック",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","ＭＳ ゴシック",sans-serif;">
ーーーーーインラインーーーーー↓↓↓
      <img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
ーーーーーインラインーーーーー↑↑↑
<!-- /FOOTER -->
</body>
</html>