メルマガをHTMLタグで思いのまま！【HTMLメール（ソース）編】
2022年04月29日
当社提供のメール配信システム・Combz Mail PLUS（コンビーズメールプラス）には、あらゆるメルマガが作成できるよう、HTMLメール（ソース）、HTMLメールエディタ、テキストメール、リッチテキストメールといったツールが備わっています。
そのなかから今回は、HTMLメール（ソース）について紹介します。HTMLメール（ソース）とは、HTMLタグ（別称：HTMLソースコード）を使うことで、文字の装飾や画像の挿入ができます。これらにより、グラフィカルなメルマガを作成することができます。
- 1HTMLタグとは何か？
- 2HTMLメール（ソース）
- 3HTMLメール（ソース）のメリット・デメリット
- 3.1メリット
- 3.1.1表現が自由自在
- 3.1.2ビジュアル面での訴求が可能
- 3.1.3効果測定できる
- 3.2デメリット
- 3.2.1知識がないと作れない
- 3.2.2エラーに注意
- 3.2.3受信側の環境に左右される
- 4HTMLタグで実際に作る
- 4.1件名を入力する
- 4.2置換文字を使う
- 4.3装飾で線を入れる
- 4.4いいねを追加する
- 4.5クリックカウンターを設定する
- 5完成イメージ
- 6テンプレートを豊富に用意
- 7導入しよう！コンビーズメールプラス
- 8まとめ
目次
HTMLタグとは何か？
HTMLタグ（別称：HTMLソースコード）とは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略称で、マークアップ言語といいます。
マークアップ言語を説明するうえで、一番わかりやすいのはWebサイトです。HTMLタグとテキストを入力したデータをサーバにアップロードすると、Webブラウザがタグに反応して、タグの指示どおりの表示を行います。
例として、ある1行を中央揃えにしたい場合は『<center>～</center>』のタグでテキストを挟み込むと、Webブラウザは「この1行は真ん中に配置する」と認識し、指示どおりの表示をします。
HTMLメール（ソース）
HTMLメール（ソース）とは、HTMLタグを使って作成されたメルマガのことをいいます。Webサイトを作るのと同じ感覚で、メール配信システムの入力フォーム内にHTMLタグを打ち込むことでメルマガが完成します。ほぼ、いちから構築できるため、作る側の思いどおりのレイアウトでメルマガを作成できます。
わからない方はこちらを推奨
初心者の方は「そもそもHTMLタグとは何か？」と疑問に思うかもしれません。そんな方のために当社では、HTMLメールエディタを用意しています。HTMLタグがよくわからないという方は、エディタの使用をおすすめします。
詳しくは下記リンクをご参照ください。
初心者でも簡単にHTMLメールを作成する方法についてはこちら
関連記事初心者でもHTMLメールが作れるエディタの紹介＆作り方を解説！
HTMLメール（ソース）のメリット・デメリット
HTMLタグを使ってメルマガを作った場合に、どのようなメリットとデメリットがあるか解説します。
メリット
まずはメリットです。
表現が自由自在
HTMLタグを使うと作る側の思いどおりのレイアウトで、メルマガを作成できます。
つまりはオリジナリティあふれるものを作ることができます。
ビジュアル面での訴求が可能
文字を好きなフォントやサイズに変更したり、強調したい部分に色をつけるなどの演出が可能です。また、画像もサイズの変更、配置の指定が可能なので、商品やサービスをビジュアル面で訴求できます。
効果測定できる
開封率やクリック率の効果測定ができます。配信したメルマガの効果がどれだけあったかを数値化できるので、メールマーケティングに役立ちます。
デメリット
HTMLメール（ソース）は自由な表現が可能ですが、もちろんデメリットもあります。
知識がないと作れない
最大のデメリットは、HTMLタグの知識がないと作成できないことです。タグの意味を理解していないと、うまく表示されなかったり、レイアウトが思うように整わなかったりします。
エラーに注意
万が一HTMLタグにエラーがある場合、プロバイダからスパム認定される可能性があります。また、同じアドレスからメール配信された情報が、迷惑メール扱いになる場合もあります。
受信側の環境に左右される
受信側のメールソフトの環境次第では、レイアウトが崩れる可能性があります。また、容量不足で画像が表示されないといった不具合も発生するときがあります。
HTMLタグで実際に作る
下記にあるHTMLタグを使って作成すると、どんなメルマガが完成するかを見ていきましょう。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>新生活応援キャンペーン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div style="max-width: 620px; box-sizing: border-box; padding: 10px; background-color: #53c0ed; width: 100%;">
<div style="background-color: #fff;">
<div style="line-height: 0;"><img src="https://storage.plus.combz.jp/deco/newlife_main.png" alt="画像の説明入れてください" width="600" height="290" style="width: 100%; height: auto; max-width: 100%;"></div>
<p style="font-size:14px; text-align:center; color: #555; padding-bottom: 50px;">
<br><br>
<font size="+3"> $$$name$$$ 様</font><br><br>
早春の候、日増しに春めいてまいりましたが、如何お過ごしでしょうか？<br>
【〇〇】のメルマガ担当ポインコです✧٩(ˊωˋ*)و✧<br><br>
いつもご来店いただき誠にありがとうございますm(＿ ＿)m<br>
さて、3月に入り、新生活をスタートさせる方も多いと思いますが、<br>
日頃のご愛顧に感謝を込めて、新生活応援キャンペーンを実施いたします。<br><br><br>
ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･ﾟ･*:.｡. .｡.:*･ﾟ<br><br><br>
♥♥♥ <font size="+2">新生活応援キャンペーン</font> ♥♥♥<br>
当店の選りすぐりの人気アイテムから、新商品を含めた全商品がナント(ﾉﾟοﾟ)ﾉ！！<br><br>
✲✲✲ <font size="+2">全商品、50％OFFの大放出</font> ✲✲✲<br><br>
昨年、品切れ続出の〇〇〇も大量入荷しております！！<br><br>
【期間】2022年3月15（火）～ 2022年3月31日（木）まで<br><br>
<a href="###" style="color: #53c0ed;">＞＞商品一覧はこちら</a><br><br><br>
ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･゜ﾟ･*:.｡. .｡.:*･ﾟ･*:.｡. .｡.:*･ﾟ<br><br><br>
この機会をお見逃しなく！！<br><br>
☆。.:*:・'゜★。☆。.:*:・'゜★。☆。.:*:・'゜☆。.:*:・★・'゜☆<br><br>
$$$name$$$ 様のご来店を、スタッフ一同心よりお待ちしております。<br>
【〇〇〇】スタッフ一同<br><br>
☆。.:*:・'゜★。☆。.:*:・'゜★。☆。.:*:・'゜☆。.:*:・★・'゜☆<br><br>
<a href='$$$like$$$' target='_blank'><img src='https://plus.combz.jp/img/like/LikeCount-btn-01.png' alt='いいね！ボタン' height='30px'></a>
</p>
<div style="line-height: 0;"><img src="https://storage.plus.combz.jp/deco/newlife_footer.png" alt="画像の説明入れてください" width="600" height="106" style="width: 100%; height: auto; max-width: 100%;"></div>
</div>
<p style="font-size:11px;color:#fff; padding:0 0 30px 0; text-align: right;"> <span style="color: #fff; font-family: -apple-system, BlinkMacSystemFont, '' Segoe UI', Roboto, 'Helvetica Neue' , Arial, sans-serif; font-size: 16px; letter-spacing: normal;">
○○○○インテリアショップ<br>お問い合わせなどは<a href="###" style="color:#fffc0b;">こちら</a>からお願いします。</span></p>
</div>
</body>
</html>
件名を入力する
件名を入力する場合は、30文字前後におさめると良いです。そして、顧客に知って欲しい情報については、冒頭の10文字～15文字以内に入れましょう。理由としては、人が瞬時に認識できる文字数が13文字～15文字といわれているからです。
置換文字を使う
アイテム挿入欄にある「置換文字」をクリックし、仮に2番目の「読者の名前（敬称なし）」を選択すると、メルマガ登録している各顧客の名前に置き換わって配信されます。一人ひとりていねいに届ける演出ができます。
「$$$name$$$」が表示されている部分が、顧客の名前に変わって配信されます。
装飾で線を入れる
アイテム挿入欄にある「装飾」をクリックすると、シンプル系、キラキラ系、かわいい系の線が表示されます。好みの線で文章を囲むと、段落が区別されて読みやすくなります。
いいねを追加する
HTMLメール（ソース）では、開封率やクリック率といった効果測定が行えますが、アイテム挿入欄にある「いいね」をクリックすると、いいねボタンを追加することができます。
いいねの数も計っておくと、顧客がどの程度メルマガの内容に興味をもったかの、ひとつの指数として見ることができるので、加えることをおすすめします。
クリックカウンターを設定する
「クリックカウンター」を設定しておくと、メルマガ内に記載したURLが何回クリックされたかがわかります。クリックした人も特定でき、その人たちだけに対してセグメント配信することもできます。
効果測定はもちろん、メールマーケティングに便利な機能なので、ぜひ設定しておきましょう。
完成イメージ
先ほど紹介したHTMLタグで作成したメルマガは、メール配信すると以下の画像のとおりに表示されます。
テンプレートを豊富に用意
まだ、HTMLタグがよくわからないという方には、当社が提供するサービスサイト「メルマガdeco」内にあるテンプレートをお使いください。
HTMLメール用に「キャンペーン告知」「ショップ用メルマガ」「ブログ用メルマガ」「新商品のお知らせ」「誕生日」「クリスマス」「年末のご挨拶」「年始のご挨拶」「バレンタインデー」「ホワイトデー」「新生活応援キャンペーン」と、各カテゴリごとにたくさんのテンプレートを用意しています。
今回、記事で使ったものは「新生活応援キャンペーン」のテンプレートで、一部カラーなどに変更を加えています。メルマガdecoにあるテンプレートをそのまま使うのもいいですし、装飾や色を変えて使用しても良いでしょう。HTMLタグ初心者の方はテンプレートを見て、打ち込み方のコツをつかんでみてはいかがでしょうか？
導入しよう！コンビーズメールプラス
コンビーズメールプラスでは、HTMLメール（ソース）だけでなく、さまざまな方法でのメール配信が可能です。今回の記事を読んでメール配信に興味がわいた方は、ぜひ導入してみてはいかがでしょうか？
コンビーズメールプラスでは、予算にマッチするようたくさんの料金プランを設けています。また、当社のメール配信システムは「業界最安値で配信数無制限」です。アドレス件数1,000件、月額2,300円（別途初期設定費用）からスタートできます。
「まずは操作方法を体験してみたい」という方には、30日間の無料トライアルをおすすめします。ぜひ、無料で試してみてください。
まとめ
今回の記事はいかがでしたでしょうか？
HTMLメール（ソース）はHTMLタグの知識さえあれば、思いのままのレイアウトでメルマガを作成できます。
HTMLタグを駆使することで、文字や背景の装飾や画像の挿入ができるので、商品やサービスをビジュアル面で訴求することができます。ぜひ、この機会にHTMLメール（ソース）を使って、メルマガ作成にチャレンジしてみてくださいね。
以上『メルマガをHTMLタグで思いのまま！【HTMLメール（ソース）編】』でした。
資料請求・お問い合わせ
料金プランや運用のご相談まで、あなたの専属コンサルタントがサポートします
パートナー制度
コンビーズのサービスをご紹介していただくと、あなたも紹介者さんもおトク
セキュリティ
お客様が安心してご利用いただけるようセキュリティ対策もバッチリ。第三者認証であるISMS（ISO27001）を取得済み。
