HTMLメールの作り方や画像ブロックに対する対応、詐欺についての考察

HTMLメールは通常メールと比べてデザイン性が高く、特にスマホ端末で訴求力が高いと言われています。

HTMLメールは表示の統制が取れないので一昔前のテーブルレイアウトを中心にコーディングする必要があります。

しかしHTMLメールはフィッシング詐欺などのツールになりやすいので、使うべきではないという意見もあります。

HTMLメールとは何か？その特徴について

HTMLメールはテキストメールのようにメールに直接文章を打ち込む文章ではありません。

「HTMLタグ」を使って、メール上でWEB文書を構成したものになります。

今ご覧頂いているブログやWEBサイトは全て、このHTMLタグで構成されてますよね。

単に白黒ではなく、WEBページの様に色鮮やかにデザインされた文書メールがHTMLメールです。

より重要になる視覚的な訴求力

現在社会においては、この視覚的な訴求力がより重要な役割を果たす様になってきました。

文字だけを並べた「テキストメール」よりも装飾が施された「HTMLメール」の方が、ユーザーに受け入れられやすいデータが出ています。

それはスマホ端末の普及が一番の要因です。

スマホ環境におけるメルマガ市場の伸び

特にメルマガに関しては、スマホデバイスが普及すると同時に、文字だけのメルマガはどんどん少なくなっています。

スマホ環境でHTMLメールのクリック率が高くなるのであれば、HTMLメールを出さない理由がありません。

上手に使うことができれば自社のサービス・商品を宣伝する上での大きな味方となるのです。

実際に「一般社団法人 日本ビジネスメール協会」の調査報告が出ています。 2011年～2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の会社での使用率が約1.5倍にまで伸びています。

なぜスマホでHTMLメールに対する抵抗感がないのか

PCだと、どうしてもメール画面でHTMLページを開いているという違和感がぬぐえません。

しかしスマホの場合、WEBページを開いた時とHTMLメールを開いた時とで比較しても、画面の性質上視覚的な「差」があまりありませんよね。

これもHTMLメールに対する違和感・抵抗がない要因の一つとなっているはずです。

HTMLの開封率でユーザー分析が可能に

HTMLメールでは上述のクリック数以外に、メールを読者が開いたかを確認する「開封数」がわかります。

開封数は、HTMLメール内の画像の読み込まれた回数からカウントできるのです。

この数値をカウントすればメールの配信件数から開封率を算出し、効果改善に役立てる事ができる訳です。

開封率とクリック率とでコンテンツの整合性を測る

開封率が高いHTMLメールは、読者の興味と件名の親和性が高いことを指します。

逆に開封率は高いがクリック率が低い場合、件名とメールのコンテンツに乖離があると想定できます。

このようにHTMLメールならば、クリック率だけでは見えづらかった読者のアクションを把握し、より精度の高いメルマガを展開できるのです。

進んでいないHTMLメールのコーディング技術

HTMLが書ければHTMLメールはたやすいと思っている人もいるでしょうが、そうではありません。

HTMLメールを作る場合、現在のコーディング技術は参考になりません。

HTMLメールの世界では、HTMLとCSSのレンダリング技術が特に改善されないまま今日まで来ています。

それは各社の電子メールクライアント（以下：メーラー）の環境が、共通の道筋を見い出さないまま放置されてきた事が原因です。

多くのブラウザとメーラーの存在

HTMLメールを配信する事は、5つの主要なブラウザと10個以上の異なる電子メールソフトを同時に相手にする事を意味します。

中でもOutlookは依然として人気のあるメーラーですよね。

ところがOutlookにおけるHTMLメールはOutlookでのみ有効で、他社のメーラーでは上手く機能しません。

WordによるHTMLメール変換に頼った時代

Microsoftは13年前、Outlook2007においてHTMLメールのレンダリングにIEの使用を停止する事を決定しました。

その結果レンダリングをMicrosoftWordに頼る様になり、WordのHTML変換機能を使ってHTMLメールを作るのが主流になったのです。

こうなると当然、Outlook以外のメーラーを使うユーザーにHTMLメールが上手く表示されない事態が起こります。

この状態が長年放置されたままなのです。

様々なメーラーごとの制約や不整合

Outlookの様に他社サービスを無視したものもあれば、Apple Mailの様にSafariでデザインすればSafari系ブラウザで完璧に機能するものもあります。

そして現在最も高い市場シェアを持っているGmailにも、やはり独自の複雑さがあります。

つまりメーラーごとに様々なレンダリングの制約や癖、および不整合をたくさん持っているのです。

あらゆるメーラーに対し汎用性のある技術が確立されていないのですね。

CSSレイアウトではなくテーブルレイアウトを採用

HTMLメールの構築に置いて一番注意しなければならないのは、WEB制作時の様なCSSレイアウトが機能しない事です。

現在のところ主要なメーラーはこのCSSレンダリングをサポートしていません。

一昔前、テーブルレイアウトをやめCSSレイアウトへの習得作業に取り組んだ時代がありました。

HTMLメールをコーディングするのは、今一度昔に逆戻りする事を意味しています。

メインはtableタグ

基本ベースとしては全て、tableタグを主軸にしたテーブルレイアウトでコードを書きます。

ポイントは「CSSによる横並び」をうまくサポートしない点です。

GmailやOutlookなど多くのメーラーが、この部分に関する問題を抱えています。

そしてmarginやpaddingが狙い通りに出ない等の制約もあります。

となればHTMLテーブルを構造的に利用しながら、何とか上手くまとめていくしかないのです。

tableにではなく、各セルに幅を設定する

HTMLメールでは、テーブルの幅やその他の任意のmarginやpaddingについて、思うような設定ができません。

ですので各セルに対し幅を設定する事で、適切な余白を構築していく事になります。

セルの幅指定例

<table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="150"></td> <td width="350"></td> </tr> </table>

セルに適切な幅を設定する場合はメーラーの性能に頼れませんので、具体的な数値を設定するのが最も安全です。

％ではなくpxで指定

特にテーブルを入れ子で使用する際にパーセンテージを使用すると、上手く実現できない事があります。

ですのでピクセル幅で設定するのが最も確実です。

セルのpaddingを設定する際は、cellpaddingを使用してテーブル全体に1回設定するか、CSSを使用して個々のセルにpaddingを設定します。

2つを混合して利用すると問題が発生する可能性が高いため、避けましょう。

テーブルを入れ子にして余白を確保

ほとんどのメーラーでmarginやpaddingはサポートされているのですが、その結果に一貫性がありません。

この様な場合に重宝するのが「メインテーブル内へのテーブルの入れ子」です。

つまりtdタグ内に新たにtableタグを入れ子にして構成するのです。昔はよくやっていましたよね。

古い手法ですが確実性が上がります。

背景色の設定は大枠のコンテナテーブルに

一部のメーラーはbodyタグの背景やCSSに設定されている背景を無視します。

そこでコンテンツの大枠をwrappingテーブルで囲いましょう。そうすればこの問題を回避できます。

セルの終了タグと開始タグの間に空白を作らない

HTMLファイル上の空白は理論的には無視されるようになっています。

ただし実際はテーブルセルの間に空白がある場合に、様々なレンダリングの癖が発生する可能性があります。

レイアウトの問題を回避するためにも、セルの終了タグと次のセルの開始タグの間に空白は付けないようにしましょう。

文章構成時の一般的なタグは使用しない

ブロックタグや見出しタグは推奨できない

h1,h2,h3などの見出しタグの使用はあまりお勧めできません。

やはり標準的なサポートがないことがその理由です。

WEBサイト制作において主軸となるdivタグやpタグも極力使用せずにコーディングしましょう。

これらのタグは表示の際予期しないズレを起こす場合があります。

従ってブロックや段落・文章を入力する際はテキストを独自のtableセルに配置し、そのセルにインライン方式を適用することが最善の策の一つと言えます。

フォントの一括指定プロパティは使えない

フォントサイズの一括指定プロパティの使用は避けた方が良いでしょう。

サポートしているメーラーが少ないためです。

例：style="font:8px / 14px Arial、sans-serif;"など

直接CSSスタイルを適用する

特にGmailはこれまで、外部スタイルシートやメール本文のstyleタグの読込をサポートしていませんでした。

長い間この問題を抱えていましたが、2016年の秋にようやくCSSの読込をサポートする様になりました。

しかし外部スタイルシートを取り除くメーラーはまだまだあります。

ですのでHTML内に直接CSSスタイルを適用する埋め込み形式が一番最適とされています。

埋め込み型CSS

HTMLページのヘッダー要素に下記の様なスタイルを適用するのが埋め込み型です。

<style> p { line-height: 1.5em; margin: 0px 0px 10px 0px; } </style>

これらのスタイルはページ内の全てのpタグに適用されます。

ただしこのスタイルが削除されると、メーラーが使用する初期スタイル、または独自のスタイルシートに従って段落のスタイルが設定されます。

インライン型CSS

それに対し、本文中のpタグ要素に直接スタイリングするのがインライン型です。

<p style="line-height:1.5em;margin:0px 0px 10px 0px;">インライン型</p>

HTMLメールの全ての要素にこのようにスタイルを適用すると、より一貫性のある結果が得られます。

ここで既にお分かりと思いますが、インライン型だと同じスタイルを何度も繰り返す大変面倒な作業になる訳です。

インライン化は一番最後に一括で

時間を節約するコツとしては、コーディングが完了するまでスタイルをインライン化しない事です。

頭の中でstyleタグを想像しながらデザインを構築し、最終調整を行ったあとにそれらを「一括置換」で適用するのです。

これにより、同じスタイルを毎回編集する必要がなくなります。

CSSを自動的にインライン化するツール

HTMLページとスタイルシートを取得し、CSSを全てインライン化してページを出力するツールがあります。

「Campaign Monitor CSS Inliner」や「Premailer」などです。

Campaign Monitor CSS Inliner

「Campaign Monitor CSS Inliner」は、ヘッダーまたは外部ファイルからスタイルを取得します。

そしてインポートする際に各スタイルをインライン要素として自動的に適用してくれるのです。

サポート対象外のスタイル

また、サポートされていないCSSに関する有用なアドバイスも得る事ができます。

インラインでは制御できない特定のスタイルがあるためです。

例えば、aリンクタグの：hover状態を指定する事はできません。

HTMLメールは画像に依存しない

WEBブラウザとは異なり、メーラーはユーザーが任意にクリックするまで、画像のダウンロードを定期的にブロックします。

つまり最初は画像表示が一切されない状態でユーザーに届くのです。

画像が全て非表示の状態で届く

図4.1。「このメールに画像を表示する」リンクを含むメール

過去数年間の調査によると、電子メール受信者の最大40％が画像を全く有効にしない事がわかっています。

それに加えて画像を表示できる事すら気付いていない人がいます。

ロゴやヘッダー画像が表示されないままな訳ですから、ユーザーのお気に入りブランドだとすら気づけないのです。

メーラーごとの画像ブロック状態

様々なメーラーにおけるデフォルトの画像ブロック設定を表にまとめました。

特に2番目の列（信頼できる送信者の画像表示）の意味が重要です。

これは各クライアントにデフォルトで画像が表示されるかどうかを示しています。

この様にかなりのメーラーで画像を見ることができていないと想定する必要があります。

Gmail、Outlook.com以外に、Outlook 2019やWindows10 Mailでもデフォルトで画像はブロックされます。

メールは単なる白い空の正方形の羅列で表示される事が多いという事ですね。

ブロックされた画像をナビゲートするためのヒント

送信者をホワイトリストに登録してもらう

上記の表で「信頼できる送信者」の欄にある通り、初期の画像ブロック設定を上書きできるメーラーが多くあります。

ほとんどのメーラーで、メッセージが既知の送信者からのものなら画像が自動的に表示されるのです。

既知の送信者とは、ホワイトリスト、連絡先リスト、またはアドレスブックに表示された送信者の事です。

つまりメールを送ってくる「差出人」アドレスを、ホワイトリストに追加するよう積極的に勧める必要があります。

ホワイトリスト登録導入

確認メールや最初のご挨拶メールに、お気に入りに登録する方法や連絡先にアドレスを追加する方法を積極的に記載しましょう。

或いは様々なメーラーにおける連絡先にアドレス追加する説明ページをサイトに配置し、そこへのリンクをつけるべきです。

これにより画像が確実に表示され、配信可能性も向上します。

冒頭は画像表示から始めない

選択であろうと偶然であろうと、HTMLメールで画像を有効にしない人は常に存在します。

ですので、デザイン面でそれを考慮に入れる必要があります。

そのためにはメールの冒頭から画像を使用しない方が良いです。

プレビューで確認してもらうためにテキストから始める

多くのメーラーは小さなプレビューウィンドウがあり、状態を事前確認できます。

もしHTMLメールの最上部が画像の場合、プレビューは空白になる可能性があります。

適切なプレビューを提供するためにも、冒頭はテキストで開始するようにしましょう。

alt属性を使用する

WEBサイトの場合と同じように、各画像に設置するalt属性は役立ちます。

画像がブロックされたときに表示され、適切に説明書きを表示できるためです。

Alt文章は常に表示されるとは限りませんし、完全に表示されない場合もあります。

各メーラーでalt属性をどのように処理するかをまとめてみました。

電子メールクライアントによる代替属性のサポート

テキストと画像のバランスを保つ

テキストと画像のバランスが取れている場合は、仮に画像がなくてもメールの効果は維持できます。

画像ばかりで構成されているメールは画像がブロックされるとストレスしかなく、購読解除さえ引き起こしかねません。

本当にその画像は必要か

場合によっては画像がないと意味がなく、表示するしかないケースがあるでしょう。

しかし場合によっては画像が不要な時もあります。

例えば注文確認メールなら、画像に重要になる事はありませんよね。

購読者にキャッチなロゴを見せる事は大切ですが、頼りすぎるのは禁物です。

画像が読み込まれていない状態で送信されるメールを確認して、どのように表示されるかを確認します。

HTMLメールは危険という考え方

HTMLメールはいろいろ装飾ができるという反面、逆に言えばいろいろな仕掛けを組み込む事ができます。

現在は、悪意ある第三者から危険なHTMLメールが送られてくる被害が頻発しています。

ですので本当に大切でない限りはHTMLメールは送るべきではないのかも知れません。

セキュリティ上の問題

メールの中に悪意のコードが含まれていた事でユーザーの個人情報が盗まれたり、パソコンが感染する事があります。

URLを画像に埋め込んだりボタンリンクにする事ができるので、URLを偽装し有害なサイトや偽サイトに誘導するのが簡単なのですね。

例えば、下のようなメールが届いた事はありませんか？

amazonフィッシングメール

ご確認はこちらの下にあるURLを押すと、偽のAmazonサイトに飛びます。

URLもamazon.co.jpではないのですが、そこでIDとパスワードを入力させようとするのです。

入力したIDとパスワードがハッカーに盗み取られ、その情報で正式のAmazonで勝手に買い物されたり個人情報を抜き取られたりする訳です。

こういったフィッシング詐欺は、大部分がHTMLメールから起きています。

よくよく文面を見ると少し日本語がおかしい箇所があります。これはほとんどが中国からのメールです。

プライバシーの問題

冒頭部分で、画像が読み込まれる事でメールを開封した日時やIPアドレスなどのユーザー情報を知る事ができると言いました。

これがWEBビーコンと呼ばれる埋め込み方法です。

これとCookie情報とを合わせて利用する事で、個人が特定されプライバシーの侵害問題になります。

これが悪人に活用された場合、SPAMメールを一斉送信されたりプライバシーがダダ漏れになる訳です。

マナーの問題

HTMLメールに未対応、或いはHTMLメールを表示しないようメーラー側で設定している事はよくあります。

そうなるとメールが何を書いているかわからないというストレスをユーザーに与える場合があるのです。

また画像を多用することでメールが重くなり、開く時間が掛かりイライラさせる原因になります。

HTMLメールを希望していないユーザーも多くいるという事実を認識しておくべきです。

HTMLメールを受信しないようにする対策

では、HTMLメールを受信しないようにするにはどうすればいいのでしょうか。

メーラーの初期設定をテキストメールに変更しておく事です。

皆さんが普段使っているパソコン用メーラーの場合HTML形式かテキスト形式がは設定できるのがほとんどです。

ただスマホ端末では、HTMLメールの解除設定はできない様です。

HTMLメールはやめるべき？

かつてのHTMLメールは迷惑メールの温床でした。

そのため最近のメーラーは、SPAMメールは迷惑フォルダに振り分けられるようになっています。

それはSPAMメールの送信側にも反映されるので、以前に比べてHTMLメール悪用の数は減少しています。

ただしセキュリティの抜け目を狙ったメールは今だに存在しています。

HTMLメールを送る人は、真面目にサービスをPRする健全な人ばかりではないのですね。

今後メルマガでHTMLメールを使ってビジネス展開を狙っている人に対して、このような結論で申し訳ありません。

もっとメーラー側でのセキュリティ機能を標準化して、安全性を高めてほしいですね。

一押し人気コーナー紹介