(公開日2023年08月25日)
最近のメルマガは、HTMLメールを用いたデザイン性に富んだものが増えています。画像や短い動画を使い、読者の目を引き、視覚に訴えて情報が伝えられます。そういったHTMLメルマガのことを詳しく知りたいですよね？
この記事では、HTMLメールでメルマガをデザインするメリット・デメリット、デザインする方法とコツ、配信する際の注意点について解説します。また無料テンプレートもご紹介します。
これを読めば、メルマガのデザインにはHTMLメールが向いていることが分るでしょう。そして表現力が豊かで、視覚に訴えられるメルマガを配信できます。企業の営業・マーケティング担当の方にお役に立てれば幸いです。
以下の４つのメリットがあります。
➀表現力の豊かさ
②視覚に訴えて情報を伝えられる
③コンバージョンにつながりやすい
④メルマガの効果判定ができる
HTMLメールをメルマガに用いると、ウェブサイトと同じようにレイアウト・フォント・カラーなどを設定できます。また画像・短い動画で映像も伝えることが可能です。したがって読者の興味を引く、デザイン性の高いメルマガを作成できます。
最近のメルマガの読者はデザインを重視し、洗練されたデザインでなければ見てくれません。メルマガのデザインは企業のブランドを表現したものです。それだけに表現力に富んだメルマガが必要です。
参考記事：メルマガの最新トレンド情報！おしゃれなデザインにする方法をお届け
商品の画像、イベントの写真を使って、メルマガの内容に合ったアイキャッチ画像を設定できます。まず画像で目を引き、つぎに画像に重ねたテキストを読ませることで、情報を伝えられます。
最近のメルマガの読者は、文章をじっくりと読むことが少なく、テキストメールだとあまり読んでくれない人が多いようです。画像・動画を設置したメルマガでなければ、すぐに削除してしまいます。
参考記事：メルマガ・htmlメールをおしゃれにデザインするレイアウトをご紹介
メルマガはリンクボタン・バナーを設置して、ランディングページにリンクできます。
リンクボタンの位置・大きさ・色を工夫すれば、クリックしてもらいやすくなるでしょう。
またバナーにはランディングページと同じ画像・デザインを使うと効果的です。
リンクボタン・バナーのクリック率があがれば、ランディングページの閲覧率があがり、商品・サービスの紹介がしやすくなって、コンバージョンにつながるはずです。
参考記事：ビジネス向けメルマガデザインとは？チェックポイントと事例を紹介
メール配信システムを利用すれば、メルマガの効果を検証できます。メルマガに添付した画像に、画像参照用のimageタグを記述しておけば、開封率・クリック率・コンバージョン率を所得できる仕組みです。
HTMLメルマガにはデメリットもあります。
➀制作に手間がかかる
②正しく表示されないことがある
HTMLメールのコーディングは、ウェブサイトのコーディングとは異なり、専門的なスキルが必要です。プロのコーダーに依頼しないと制作は難しいかもしれません。
またバナーのデザインを制作するスキルも必要であり、効果的なバナーを作るためにはプロのウェブデザイナーでなければ難しいと思われます。
HTMLメルマガはテキストメルマガの数倍費用と時間がかかります。複数のスタッフにより制作から配信までを行うため、全体のスケジュールを立てることが重要です。
受け取る側の端末、メールクライアントによって、HTMLメールがうまく受信されないことがあります。レイアウトが表示崩れしたり、文字化けしたりします。ですからなるべく正しく表示されるように、コーディングを工夫することが必要です。
特にスマートフォンで受信する場合、HTMLメルマガが表示されないことが多く、メール配信システムを活用し、HTMLメルマガとテキストメルマガの両方を配信するマルチパート配信にするとよいでしょう。
方法1：自分でコーディングする
方法2：テンプレートを利用する
方法3：メール配信システムを利用する
メルマガを思い通りにデザインするためには、自分でコーディングするのが最善です。ただしHTML/CSSの知識が必要なのはいうまでもありません。しかもHTMLメールのコーディングは、ウェブサイトのコーディングとは異なります。
テーブルレイアウトを中心としたHTML、埋め込み式CSSあるいはインライン形式CSSを用いたコーディングが主体です。相当に手間がかかる作業であり、本業の合間に制作するのは難しいかもしれません。
ネット上には、HTMLメルマガ用のテンプレートが公開されています。気に入ったテンプレートを選び、文章や画像を独自のものに入れ替えて使う方法です。無料のもの、有料のものがあり、さまざまな種類・性能のテンプレートがみられます。
テンプレートを選ぶ際に、幅広いメールクライアントに対応しているか、表示崩れしないか、デザインはどうかをチェックしてください。いろいろ見比べて、自分の好みにあったテンプレートを使うとよいでしょう。
テンプレートのデメリットは、カスタマイズが難しいことです。制作者に特有のコーディングが施されており、後から修正すると表示が崩れる場合があります。自分で一からコーディングするよりも難しいかもしれません。
メール配信システムについているテンプレート・エディタを利用する方法です。エディタを使えば編集しやすくなり、オリジナル性に富んだHTMLメルマガを作成できます。前述したテンプレートをカスタマイズするよりもやりやすいでしょう。
またHTMLメールがみられない場合にテキストメールを配信するシステムがあります。さらに開封率・クリック率を測定する機能が利用でき、メルマガの効果判定を測定できるのも大きなメリットです。
コツ1：メルマガの目的を明瞭にする
コツ2：ターゲットを決める
コツ3：コンテンツに階層をつける
コツ4：文字は大きく、少なめ
コツ5：画像は大きめで高画質
コツ6：ボタンリンクをつける
コツ7：ブランドイメージに合わせてカラーを足す
コツ8：ヘッダー・フッターをつける
メルマガの目的は販売促進なのか、顧客との関係維持なのかを明確にし、目的に合わせてデザインを選んでください。販売促進ならば、商品の画像を入れることで商品の魅力を伝えれば、クリック率が向上するでしょう。クーポン券の画像を添えて、お客様の目を引きつけるのも一法です。
顧客との関係維持ならば、売り感は抑えて落ち着いたデザインにするほうがよいでしょう。営業担当者の顔写真を差し込み親近感をそえるのも効果的です。メルマガの目的によってデザインを変えてください。
ターゲットに合わせてデザインすることも大切です。たとえば女性向けのメルマガは、デザインのセンスや色使いを重視しましょう。優しいデザイン、やわらかい色使いを使い、共感でき、自分ごとにできる内容を載せてください。ファッション系のメルマガなら、ショップ店員のコーディネートを紹介するなどです。
男性向けのメルマガは機能や性能を訴えると効果的です。他商品との比較表をそえるのもよいでしょう。力強さ・理性を備えたレイアウト・配色を用いた機能的なメルマガが好まれます。また年齢層に合わせたデザインを考えることも大切です。
ウェブサイトと同じように、大見出し・中見出し・小見出しの階層をつけてください。ただし見出しタグは対応していないメールクライアントがあるため、使わないほうがよいでしょう。1.2.3. 1),2),3), a,b,c などで見出しをつけて、インライン形式のCSSでフォントサイズを変えるのがベストです。
また見出しに従って、コンテンツも階層に分けます。重要なコンテンツはメルマガの上の方に配置しましょう。この辺りはウェブサイトのコンテンツと同じことです。
参考記事：メルマガ・htmlメールの構成・基本から応用まで徹底解説
最近はスマートフォンで購読する顧客が増えています。スマートフォンの画面に合わせ、
文字は少なめで、フォントは大きめの15pt以上にするのが最善です。特にテキストリンクのフォントは18pt以上にしてください。他のデバイスでは、フォントはもっと小さくてもよいでしょう。
参考記事：メルマガのテキストデザインを良くしたいなら、htmlメールを活用すべき
画像サイズが大きいほど、高画質できれいに表示されますが、それだけ容量が大きくなり、スマートフォンでは表示するのに時間がかかったり、まったく表示されないことがあります。
横幅が850pxくらいの画像をスマートフォンの画面サイズに、他のデバイスでは600〜700pxに縮小して表示してください。このくらいの画像サイズなら、高画質できれいに表示され、画像の容量も大きすぎることもありません。
メルマガは自社の商品・サービスの購入を促進するのが目的です。ですからCTAボタンを必ず設置してください。販売促進用のメルマガならば２～3カ所くらいが理想です。顧客との関係維持用のメルマガならば１カ所でもよいでしょう。
メルマガの配色はホームページのカラーに合わせるとよいでしょう。あまり色の種類が多すぎるとかえって目ざわりですから、3～4色に抑えてください。配色の決める際に、3色配色の「70:25:5の法則」に従うと効果的です。
・背景のベースカラー：70％
・コンテンツのメインカラー：25％
・強調させるアクセントカラー：5％
またアクセントカラーはメインカラーの補色を用いるようにしてください。
ヘッダーには企業あるいはサービス名、ロゴを入れます。長いメルマガならば、目次・ダイジェストを設置するのがよいでしょう。また時候のあいさつ、編集部からのメッセージなども添えてください。
フッターには、配信元情報（住所）、店舗情報、SNS、配信停止リンク、パーミッションリマインダーなどを記述します。フッターに補足情報をまとめると、メルマガが整理され、読みやすくなります。
参考記事：メルマガのヘッダー・フッターとは？htmlでデザインを一新する方法
注意点1：コンテンツ振り分け機能を活用
注意点2：画像設定に注意
注意点3：送信前に表示確認テストを行う
受信環境によってHTMLメールが見られない場合があります。たとえばスマートフォンのキャリアメールでは、画像は表示されません。対策として、メール配信システムのコンテンツ振り分け機能を使い、テキストメールを表示させてください。HTMLメルマガと同じデザインのウェブサイトをリンクさせておくのもよいでしょう。
画像の場所は絶対パスで記述してください。URLは「https://」形式がよいでしょう。また画像が表示されない場合に備えてALT属性を入れてください。そうすれば画像の代わりにALTに記載した文字が表示されます。
メルマガを受信するデバイス・メールクライアントによって、表示が崩れたり、画像が表示されなかったりします。いろいろなデバイス・メールクライアントで表示崩れしないか確認してから配信してください。
受信環境は100種類以上あるため、手作業で確認テストするのは難しいでしょう。ネット上に公開されている「表示確認ツール」を使うのがおすすめです。またリンクやランディングページの設置に間違いはないか確認してください。
特別にテンプレートを公開します。
以下のリンクページからHTMLをダウンロードできます。
HTMLメールを用いたメルマガは、表現力が豊かで、視覚に訴えて情報を伝えられ、コンバージョンにつながりやすいのがメリットです。しかし制作に専門的なスキルが必要で、相当に手間がかかるのがデメリットです。
うまく作成しないと文字化けしたり、表示が崩れたりするリスクがあり、企業の営業の方、個人事業主の方が本業の合間に手がけるには手間がかかり過ぎるでしょう。専門家に依頼してHTMLメールを作成してもらった方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
