システム開発課の田畑です。
先日業務でHTMLメールを作る機会があったので、その時の作業内容や困ったことについて書いてみました。
HTMLメールとは
HTMLメールとはシンプルな文字だけのテキストメールとは異なり、画像などで装飾された視覚的にアピールしやすいメールです。 ショッピングサイトなどにメールを登録すると商品の写真などが掲載されたお洒落なメルマガなどが送られてくると思います。
今のwebページは中身（HTML)とデザイン（CSS)に分離していますが、 HTMLメールの場合メーラーやデバイスの組み合わせが数多くあることから、内容の崩れをできるだけ少なくするためテーブルレイアウトで構成しCSSも直接中に書き込みます。 テーブルレイアウトは2000年前後まで主流で使われていた技術で、画面を四角いテーブルで区切りその中に画像や文字を配置する手法です。
HTMLメールを送ることになった背景
シナプスではパスワードを忘れたお客様への対応は、電話で受け付けて本人確認をした上で、郵送でパスワードが記載された書類を送っています。
郵便物が届くまで時間がかかる等の問題点を解消するため、今回オンラインで契約IDパスワードを再設定する機能をお客様に提供することになりました。 お客様からパスワード再設定依頼があったら、登録されているメールアドレスや携帯電話に手動でリンクURLを送る流れになります。
その時お客様へ送るメールはテキストメールよりもHTMLメールの方が見易いだろうということで、HTMLメールを作成することになりました。
パスワード再設定のHTMLメールで想定される要件
PCからもスマートフォンからもみられる→ワンソースのレスポンシブデザインにする。
シナプスから送信されてきたとちゃんとわかる→シナプスロゴを入れる。連絡先を明記する。
メール内のリンクURLを押してもらえること→どのメーラーであってもリンクURLが表示される。
受け取る環境によって左右されないデザイン→メーラー毎にCSSの解釈が異なるため、できるだけ幅広く対応しているCSSを使う。シンプルな構造にする。
上記のことを頭に入れつつHTMLメールの雛形の作成を行いました。
HTMLメールの雛形を作ってみる
実際のパスワード再設定のためのメール送信は社内のシステムから送りますが、まずサンプルの雛形を作りThunderbirdを使って、HTMLメールを送信して表示テストすることにしました。
DOCTYPE宣言、meta要素
調べてみるとHTMLメールの場合のDOCTYPEはHTML5、HTML4、XHTML、どれでも良いようでした。 XHTMLは廃止されているため除外し、お客様の環境が古い場合を考えて、今回はHTML 4.01 Transitionalで書くことにしました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-language" content="ja"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>契約IDパスワード再設定URLのお知らせ</title>
基本的なデザイン部分は内部スタイルシート
<style type="text/css">
body {font-family: sans-serif;font-color: #333;text-align: center;}
table, td {border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;}
img {outline: none;border: none;text-decoration: none;}
a img {border: none;}
@media only screen and (max-width: 480px) {
.base {width: 100% !important;min-width: 100% !important;}
td.responsive {width: 100% !important;padding-left: 10px !important;padding-right: 10px !important;box-sizing: border-box !important;display: block !important;}
}
@media only screen and (min-width: 481px) {
.w550{width: 550px;margin: 0 auto;}
}
</style>
table,tdセレクターの、「mso-table-lspace: 0」と「mso-tablerspace:0」は、MicrosoftOffice独自仕様をリセットするための記述です。
メール文中のhtml
スマートフォン等でみた場合を想定し、テーブル内は左右に分けず、1つのブロックごとに1テーブルで組んでいきました。 テーブルにもstyleを指定しました。
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#E9E9E9;border-bottom: solid 5px #000000"> <tbody> <tr> <td class="responsive" valign="top"> <div class="w550"> <div style="font-size: 1.5em;padding: 10px;font-weight: 600;">契約IDパスワード再設定URLのお知らせ</div> </div> </td> </tr> </tbody> </table> 以下略
HTMLメールを送信して動作確認をする
出来上がった雛形をThunderbirdを使って送信しました。
- Thunderbirdの「ツール」の「アカウント設定」をクリック。「編集とアドレス入力」を選び、「HTML形式でメッセージを編集する」にチェックを入れる。
- 「作成」の「メッセージ」を選択。
- 項目に「挿入」があるので「HTML」を選択。
- 「HTMLタグと文字列を入力してください」と表示されるので先ほど作成したHTMLファイルのソースをコピー＆ペースト。
- 送信先はお客様に使われていることが多そうなgmailと、シナプスのテスト用のアドレスをシナプスWEBメール（シナプスで提供しているサービス）を使って確認。
- 送信後、送信先のアドレスをPCとスマートフォンで確認。
テストメールを送信して発覚した問題点
ロゴ画像に警告が…
シナプスのサーバーに置いてあるロゴ画像へリンクを貼りましたが、メーラーの設定で「プライバシー保護のため、このメッセージ内のリモートコンテンツをブロックしました。」と警告が出る場合があることがわかりました。
リモートコンテンツの表示を許可してもらえば見ることができますが、お客様に設定を変更してもらう必要があります。また人によっては「プライバシー保護」という言葉から危険なメールなのではと思ってしまう可能性があるため、サーバーに置いてあるロゴ画像へのリンクは止めることにしました。 代案でBase64という画像埋め込み方法を使ってみましたが、その方法だと今度はgmailで画像が表示されないためBase64も使えませんでした。
（※Base64とは通常ファイルへのパスが記される部分を、コード値で表します。このコードは、HTML や CSS に直接記述することができます。）
他スタッフとも相談した結果、電話でお客様ご本人を確認したあとこちらからメールを送る手順になっているので、今回はロゴがなくてもシナプスからのメールだと分かるだろうと判断し、ロゴ画像を入れるのはやめました。
代わりに件名に【シナプスより】と明記し、メールの一番最初に大きく
契約IDパスワード再設定URLのお知らせ
と表示することにしました。 またメールの最下部には
シナプスサポートセンター [年中無休 9:00－21:00] TEL:099-813-8699 FAX:099-812-8110 Mail:support@synapse.jp
と入れることにしました。
パスワード再設定のためのリンクが目立たない
今回の最大の目的はパスワード再設定のためのリンクアドレスを押してもらうことです。
そのままのaタグリンクだと他の文章と違いがなくあまり目立たないので、枠で囲み背景色を付けました。 もしCSSが効かない状態でメールが表示された場合でも、aタグで「パスワード再設定ページを表示する」の文章にリンクが貼られていればお客様にクリックしてもらうことが可能です。
実際のソースは以下です。
<div class="w550" style="text-align: center"> <a href="@url" style="background-color:#337eff;border:1px solid #2e5785;border-radius:8px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;">パスワード再設定ページを表示する</a> </div>
シナプスWEBメールで受信すると、テキスト表示の場合リンクが表示されない
シナプスWEBメールでHTMLメールを受信した場合、テキスト表示だとリンクが表示されないことがわかりました。
シナプスWEBメールでHTMLメールを受信すると上記のように表示されました（実際はお客様番号やお名前は各お客様のものが表示されます）
注意書きに「このメールはHTMLメールです。リンクが表示されない場合はHTML表示に切り替えてください。」と追記することにしました。 テキストメールでも良いのではという意見も出ましたが、最近はHTMLメールの方がお客様が慣れているだろうと判断し、HTMLメールのままで行くことにしました。
HTMLメールって難しい…
今回の作業にあたりHTMLメール作成方法を調べてみましたが、ブラウザやメーラーの組み合わせは大量にあるので、崩れないHTMLメールの完成形というものはないようでした。 CSSも状況によって効いたり効かなかったりで、自社のお客様が一番使われているだろうと思われる環境でテストして試すしかないようです。 今回はこの形で一旦完成形とし、今後お客様やスタッフからの不具合報告などあれば対処していきたいと思っています。
