HTMLメールとは？メリットと作成時の注意点まとめ

　一昔前と比べると、HTMLメールが送られてくる比率が高くなっていると実感します。このHTMLメール、そもそもどういったものを指すかご存知でしょうか？　ここではHTMLメールについて詳しくない方向けに、HTMLメールの仕組みを踏まえてメリットと作成時の注意点を具体的に説明していきます。

HTMLメールの主なメリット

webサイトと同じ様にリッチなコンテンツで訴求できる

　HTMLとは「Hyper Text Markup Language」の略で、いわゆるウェブサイトを作るための言語です。「HTMLメール」は、つまり「HTMLで記述されたメール」を意味します。ウェブサイトのように画像を挿入したり色を付けたりしてデザインできるので、非常に表現力が豊かな内容を送ることが出来る点が大きなメリットと言えるでしょう。

　多くのメールマガジンは、ウェブ広告同様に商品購入や申込みなどのオンライン上のアクションに繋げることが配信の目的です。ウェブ広告はテキストよりも画像、画像よりも動画の方が訴求力が高まりますので(※)、メールマーケティングにおいても、テキストメールよりもHTMLメールの方がクリック数やコンバージョン数に貢献することが期待できます。

　※Yahoo!マーケティングソリューションが公開しているこちらの資料には、テキスト広告とディスプレイ(画像)広告の効果の違いの調査が掲載されています。

より多くの効果検証が行える

　HTMLメールでないと、メールの「開封数」を取得することは出来ません。開封数とは、HTMLメール内の画像の読み込まれた回数のことを指します。この数値を取得することで、メール配信した件数から開封率を算出して効果改善の指標に利用することが出来ます。

　たとえば、開封率が高い場合は、読者の興味と件名の親和性が高いことが伺えます。一方で開封率は高いもののクリック率が低い場合は、件名とメールのコンテンツにかい離があることが考えられます。このように、HTMLメールを配信することで、クリック率だけでは見えづらかった読者のアクションを把握し、より精度の高いメールマガジンを送ることができるようになるのです。

ウェブサイト作成とはこんなに違う！ HTMLメール作成の注意点

スタイルシートは埋め込みorインライン形式で記述する

　ウェブサイトとHTMLメールの最も大きな違いは、スタイルシート（CSS）の記述に制限がある点です。CSSは、ウェブページの装飾やレイアウトを作成するためのプログラム言語ですが、HTMLメールにウェブページと同じようにCSSを使うと、表示崩れなどの不具合を起こす可能性が高くなります。

　特に大きな違いは、CSSの読み込み形式の違いです。ウェブサイトではCSSを外部読み込み形式にするのが一般的ですが、HTMLメールでは、埋め込み形式、またはインライン形式でCSSを読み込みます。理由は、未だに多くのメールクライアントがCSSの外部読み込みをサポートしていないためです。Gmailは2016年にCSSの埋め込み形式をサポートしました。

　また、HTMLメールで使用できるCSSプロパティにも多くの制限があります。そのため、多くのウェブサイトに使われているグリッドレイアウトなども使用することができません。HTMLメールのレイアウトについては、イレギュラーな方法ですが、なるべく多くのメールクライアントで表示ができる、HTMLのtableタグを使ったテーブルレイアウトで作成するのが一般的です。

スクリプトは使わない

　JavaScriptは、インタラクティブなコンテンツを設置したり、動的コンテンツを閲覧させることが出来ます。一般的なウェブサイトではもはや常識的な技術ですが、大半のメールクライアントはJavaScriptをブロックしてしまうのです。よって、もしHTMLメールにYouTubeの動画やグーグルマップなどのJavaScriptを埋め込んだ場合、大半のメールクライアントではうまく表示されません。(※) 　どうしてもHTMLメールで動的コンテンツを送りたい場合、GIFアニメーションを利用することをおすすめします。

※受信したメールクライアントがHTML5のvideoタグやaudioタグをサポートしている場合は、動画コンテンツも再生できます。ただしGmailやアウトルック、サンダーバードなどの主要なメールクライアントはHTML5をサポートしていないのが現状です。

画像の参照先（パス）は「絶対パス」を使う

　HTMLメールの文中コンテンツに画像を挿入するときは、「絶対パス(サーバー名まで全部書く)」を使いましょう。HTMLメールのコンテンツ表示方法は一般的なウェブサイトとは違うため、相対パスを使うことができないのです。従って、HTMLメール内で画像を使う場合は全ての絶対パスを記述する必要があります。

ノーコードでHTMLメールを作成してメリットを実感しよう！

　いかがでしたでしょうか。HTMLメールは一般的なウェブサイトと同じようなメリットがある一方、当たり前の技術が使えないという側面があります。HTMLメールのより詳しい説明や具体的な作り方は、以下の記事にも記載しています。

　そして当社のメール配信システムも「誰でも簡単に」をコンセプトに開発された、ノーコードのHTMLメールエディタを搭載しています。ご興味がありましたらぜひお問い合わせくださいね。

　最後までお読みいただきありがとうございました。