Blog

HTMLメールとは?デザイン・制作のプロがわかりやすく解説


(公開日2023年08月08日)

  • デザイン

企業の営業・マーケティング担当者、フリーランスの個人事業主の方に向けて記事を書いています。顧客に送るメルマガにHTMLメールを使う予定の方は多くいるはずです。それではHTMLメールとはどのようなメールなのでしょうか?

この記事では、HTMLメールのメリット・デメリットならびに対策を解説します。これを読めば、HTMLメールの特徴が分るでしょう。そしてデザインに富み、読者の視覚に訴えて読まれやすいメルマガを送れるようになります。

HTMLメールとはHTMLを使って構成されたメール


ウェブサイトと同じHTML(Hyper Text Markup Language)を使って制作されたメールです。以下のようなデザインを使って読者の視覚に訴えるため、読まれる確率が大きくなり、読者がメールの内容を理解しやすくなります。

 ➀文字のデザイン
 ②絵文字・署名・表・ファイルの挿入
 ③リンク

文字のデザイン

文章作成ソフトのようにフォントの装飾ができ、文字のデザインが可能です。例えばフォントの太さ・カラー・斜体を設定したり、段落にインデントを設定したりできます。箇条書きや番号付きリストを設定することも可能です。

またスマイル・人物・動物・自然・食べ物・飲み物・旅・場所などの絵文字を挿入できます。これらの文字デザインだけでも、テキストメールと比べれば、デザイン性の豊かなメールになるでしょう。

絵文字・署名・表・ファイルの挿入

フォントの装飾以外にも以下のようなアイテムを挿入できます。

 ・引用
 ・あらかじめ作成しておいた署名
 ・テーブル形式の表
 ・定型ファイル
 ・添付ファイルなど

単なるテキストと比べると、比較表などを使うことで読者は理解が深まり、商品やサービスに対する関心が強まります。

リンク

メールに含まれるテキストにハイパーリンクを張れます。リンク先としてURLを指定して有益なサイトを紹介したり、自社のランディングページへ誘導が可能です。テキストメールなら、わざわざURLをブラウザに入力してアクセスしなければなりません。HTMLメールにリンクが張ってあれば、簡単に別の情報へアクセスできます。

またmail toタグを使えば、クリック一つでメールクライアントが起動し、メール返信へ誘導が可能です。

HTMLメールとはデザイン性の高いメール


HTMLメールではウェブサイトのように表現力に富んだデザインが可能です。そのため商品やサービスを紹介する広告として利用できます。

 ・画像の埋め込み
 ・ブランドカラーの埋め込み
 ・レスポンシブデザイン

画像の埋め込み

商品の画像、イベントの写真を用いて、アイキャッチ画像を埋め込むことが可能です。画像として、GIFアニメーションも使えます。動画も埋め込めますが、容量が大きいとダウンロードに時間がかかるため、短くて軽い動画が必須です。

画像を使うことで視覚に訴えて「メールに何が書かれているか」を伝えやすくなるでしょう。また閲覧時間が増えて、メールを読まずに破棄してしまうのを防げます。さらに画像にリンクを張れば、クリック率をあげられます。

ブランドカラーの埋め込み

HTMLメールに商品やブランドをイメージさせるカラーを埋め込むことができます。ブランドカラーとは、特定の色や配色でブランドを想起させ、ブランドの世界観を感じさせるイメージカラーのことです。

例えばフォントのカラー、背景色、リンクボタンの色にブランドカラーを埋め込むとよいでしょう。ブランドカラーをランディングページ・ホームページと同じにすれば、リンク移動した際に統一感を出せます。

レスポンシブデザイン

HTMLメールの受信者は、スマートフォン・タブレット・パソコンなど、いろいろなデバイスを利用しています。最近ではスマートフォンで受信する機会が多く、小さな画面でHTMLメールを正しく表示させることが必要です。

HTMLメールではレスポンシブデザインを使い、デバイスに合わせた表示を行えますレスポンシブレイアウトの他にもリキッドレイアウト・フレキシブルレイアウトも利用が可能です。

参考記事:(07)スマホに最適化したHTMLメールとは?作り方のコツと注意点を解説 
     (08)HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます

HTMLメールとは配信効果を判定できるメール

 

 ・開封率が測定できる
 ・リンクのクリック率も測定できる
 ・コンバージョン率も分かる

開封率が測定できる

受信者がメールを開封すると、HTMLメールに埋め込まれた「Webビーコン」という画像データの読み込みがサーバーへ伝えられます。Googleアナリティクスを活用するとメールの開封率を測定可能です。開封率を判定して、メール内容の改善につなげることができます。

またこの情報を使って、メールを開封した顧客へステップメールを配信するとよいでしょう。ただしメールクライアントが画像を非表示に設定していると使えません。

リンクのクリック率も測定できる

リンクに記入するURLの末尾に「ダミーパラメータ」を追加すれば、Googleアナリティクスを活用し、HTMLメールに記載したリンクがクリックされた数の測定が可能です。クリック率を通じて、メルマガなどからランディングページへアクセスされた回数が分かります。

リンクのクリック率を上げるように、HTMLメールの内容を改善させるのに役立ててください。

コンバージョン率も分かる

HTMLメールからランディングページへリンクすれば、最終的に商品・サービスを購入・契約したかどうか確認できます。これをコンバージョン率と呼び、特定したHTMLメールからコンバージョンにいたる確率の測定が可能です。

開封率・クリック率・コンバージョン率を分析すれば、HTMLメールのどこを改善すればよいのかが分かります。HTMLメールは、メールマーケティングの重要なアイテムといえましょう。

HTMLメールとは迷惑メールとして扱われがちなメール



HTMLメールには以下のようなデメリットもあることに注意してください。

 ➀ウイルス感染のリスクがある
 ②スパム・なりすまし用デザインに使われることがある
 ③企業では敬遠されやすい

ウイルス感染のリスクがある

悪意のあるHTMLメールでは、メールを開いたデバイスにウイルスを感染させます。一時期こういった攻撃メールがはやったため、メールクライアントによってはHTMLメールのアクセスをブロックしています。このケースではHTMLメールを送信しても受信できません。ユーザーが許可すればHTMLメールを受信できますが、強要は難しいでしょう。

②スパム・なりすまし用デザインに使われることがある

HTMLメールはフィッシングメールに使われることがあります。フィッシングメールとは、送信者を詐称してメールを送信し、公式サイトを模倣した偽サイトに誘導するメールです。

メールクライアントによっては、フィッシングメールを避けるためHTMLメールをブロックしています。この場合もユーザーの許可を得ることは難しいでしょう。

企業では敬遠されやすい

企業内で1社員がウイルス感染すると、社内LANを通じて会社内に広まります。またフィッシングメールに引っかかることがあるかもしれません。このようなリスクから、少なからぬ企業ではHTMLメールを敬遠しています。全面的にHTMLメールを禁止している企業もあるくらいです。

HTMLメールとは受信環境によっては見られないことがあるメール



HTMLメールには以下のようなデメリットもあります。

 ➀スマホのキャリアメールで見れないことがある
 ②ソフトバンクのiphoneでは見れないことがある
 ③受信環境によってはレイアウトが崩れる
 ④メールの容量が大きくなると受信しにくい

スマホのキャリアメールで見れないことがある

キャリアメールとは、ドコモ・ソフトバンク・auが提供しているスマートフォン向けのメールクライアントのことです。

ドメインが「docomo.ne.jp」「softbank.ne.jp」「ezweb.ne.jp」のケースが当てはまります。

キャリアメールの使っているOSの世代によっては、HTMLメール自体がちゃんと見られません。

画像やデザインが表示されなかったり、文字化けしたりすることがあります。

ソフトバンクのiPhoneでは見れないことがある

ソフトバンクのiPhoneでキャリアメールである@softbank.ne.jpのメールアドレスを使って受信するとHTMLメールは表示されません。

またMMS(Multimedia Messaging Service)で受信している場合も、システム・フォーマットが原因でHTMLメールを受け取れないことがあります。MMSは対話型のメッセージサービスで、電話番号・メールアドレスの両方で受信できるシステムで、日本独自のサービスです。このケースではHTMLメールを正しく表示させる方法はありません。

受信環境によってはレイアウトが崩れる

スマホとメールクライアントの組み合わせで、HTMLメールがうまく表示されないことがあります。全く表示されない、表示が崩れる、画像が表示されない、文字化けするなどのケースです。

例えばスマホのGmailでHTMLメールを受信すると表示が崩れます。これはGmailアプリの「自動サイズ調整」が原因です。この機能をオフにすれば解決しますが、ユーザーに強要はできません。

メールの容量が大きくなると受信しにくい

HTMLメールは画像や装飾のためにデータの容量が大きくなりがちです。通信に時間がかかり、サーバーに負荷がかかります。メールクライアントの許容範囲を超えると送信できないのがデメリットです。

対策としては、画像の容量を小さくする、大きな容量の動画は使わないなどです。一般的にはメールの容量を100kb以下に抑えることが必要です。

HTMLメールとは文字化けしやすいメール



以下のケースでは文字化けしやすくなります。

 ケース➀:スマホでHTMLメールが文字化けする
 ケース②:環境依存文字が使われていると文字化けする

ケース➀:スマホでHTMLメールが文字化けする

メールの送信者と受信者の文字コードが異なると文字化けします。パソコンで文字を入力する際には「シフトJIS」が使われ、メールクライアントでは「ISO-2022-JP」に変換されるシステムです。この変換がうまくいかないと文字化けします。対策として最初から「ISO-2022-JP」にしておくとよいでしょう。

ケース②:環境依存文字が使われていると文字化けする

HTMLメールに環境依存文字が使われていると一部文字化けしてしまいます。WindowsやMacでは、それぞれに独自の記号・絵文字が使われているのですが、送信側と受信側が環境が違うと文字化けします。送信する側の注意点は、HTMLメールを作成する際に環境依存文字を使わないことです。

参考記事:(09)HTMLメールが文字化けしてしまうときの原因と対処法は?

「HTMLメールとは」に関連したQ&A



よく見られるQ&Aを紹介します。

Q:HTMLメールがスマホで見れない場合の対処法は?

A:HTMLメール・テキストメールの両方を配信するマルチパート配信を利用するとよいでしょう。HTMLを受信できない場合はテキストメールが表示されます。また同じ内容のウェブサイトを制作しておき、リンクさせるのもよい方法です。

Q:HTMLメールの作り方は?

A:HTMLメールが多種類のメールクライアントで崩れないようにするコーディングが必要です。詳しいやり方は以下のリンクページをご覧ください。

参考記事:(11)HTMLメールのコーディングのやり方!特徴・手順・注意点を解説

Q:HTMLメールはGmailでも作れる?

A:簡単なHTMLメールはGmailでも作れます。カスタマイズもできますが、詳しいやり方は以下のリンクページをご覧ください。

参考記事:(02)Gmailを使ったHTMLメールの作り方!カスタマイズ方法も紹介

まとめ


HTMLメールとはHTMLを使って構成されたメールです。メリットは、デザイン性の高く、配信効果を判定できること。デメリットは、迷惑メールとして扱われがちで、受信環境によっては見られなかったり、文字化けしたりすることです。

HTMLメールの作成は、メリットを最大限に生かしながら、デメリットを抑えることが重要と思われます。専門的なコーディングスキルが必要であり、企業の営業の方、個人事業主の方が本業の合間に手がけるには手間がかかり過ぎるでしょう。専門家に依頼して作成してもらった方がよいかもしれません。

株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。

興味がある方は、以下のリンクページをご覧ください。

HTML制作・サービス紹介

HTML制作の料金

よくあるご質問・FAQ

関連記事