【メルマガ制作におけるHTMLメール】その3 HTMLメールの検証（実機編）

はいさいーー

みなさんー、こんにちは！
じぃでごわす。

HTMLメールの連載で、前回はHTMLメールのローカル検証方法を書いていきました。

今回は実機にテストメールを送信しての検証方法を書いていきたいと思います！

主に以下の3点になるかと思いますので、順に説明をしていきます。
・そもそもテストメールの送信方法は？
・検証環境は何で見る？
・テストメール送信した後の実機(PC、SP)での検証ポイント

テストメールの送信方法

テストメールの送信方法はいくつかありますが、主に以下の2点になるかなと思います。

①MAツール、配信ツールなどでテストメールを送信
②各種メーラーでテストメールを送信

MAや配信ツールが使用できるのであれば、①がよいですが、使えない場合は②になります。

私はツール系のアカウントを持っていませんので②で検証することが多いです。

②の場合、全部のメーラーがHTMLメールを送れるのではないのと、メーラーによってはHTMLソースを改変してしまうものがあります。

その中で、信頼できるHTMLメール送信メーラーはBecky!です。

Windows専用ソフトですが、このメーラーはHTMLメールが送信できることと、HTMLメールのソースの改変が少ないため非常に便利です。

また、Macの方はBecky!が使用できませんが、以下のようなGoogleスプレッドシートを使う方法でHTMLメールを送信することが可能です。
Gmailでマルチパートメール(HTMLメール+テキストメール)を送信する（Gmail + GAS）

ご自身の環境に沿って、適切なテストメール送信方法を選ぶようにしてください。

また、アドレスは各種検証環境のメーラーに設定しておきましょう。

検証環境

この連載の最初でも伝えたとおり、「全メーラーで同じ表示は不可能」というのがあるので、
検証環境の選定はブラウザやメーラーのシェア率で選定するのがおすすめです。

私がよく見る環境としては以下になります。
■PC
GoogleChromeブラウザ：gmail
GoogleChromeブラウザ：yahooメール
Office365のデスクトップアプリOutlook

■SP
Android：gmailアプリ
iPhone：標準メーラー

今回は検証環境が上記の前提で進めていきます。

テストメールのPC確認

まずは、PCでのテストメール確認です。

テスト送信したアドレスで各種環境を開きましょう。
GoogleChromeでgmailとyahooメール、デスクトップアプリのoutlookなどです。

■gmail
GoogleChromeのgmailは結構優秀なので、ローカル検証で問題なければ同等の表示になっているかと思います。

もし崩れがあればHTMLを修正して、再度テストメールで検証するようにしてください。

ここでgmailのトラップが2つあります。
1つ目は、
・同じ件名でメールを送信すると表示が変わる

2つ目は、
・HTMLメールの容量が約102kbを超えると、メールが省略され「メッセージ全体を表示」リンクをクリックしないと、メール全体が見れなくなる

ということです。

1つ目の事象は、ありがちなのですが、テストメールを送信する際基本件名はなんでもいいのですが、同じ件名で送るとgmailが自動的にスレッド化し、
テキストの色や表示を勝手に変更してしまいます。。

そのため、件名にはテストメールを送信した日時を入れようにしてスレッドさせるのを防ぐようにしましょう。
例）
test_20210303_1315

テストメールで本番に送るメールの件名を使用してしまうと、本番時にスレッド化されるおそれがあるので気をつけてください。

2つ目は、HTMLメールのコンテンツが多かったりすると、ソース量が増えてHTMLファイルの容量が増えてしまい、約102kbを超えてしまいます。

メールが省略されても、「メッセージ全体を表示」をクリックすること、別タブでメール全体が見えるので「別に良い」かもしれませんが、

「メッセージ全体を表示」で開いた場合、
・medieQueryが効いていない。もしくは効かない。

という事象があります。
（ネット上で調べてみてもここらへんの知見がないので正確ではないので、私が検証する感じだと効かないです。）

なので、「メッセージ全体を表示」でメール全体を表示させたくない場合は、HTMLメールの容量を約102kb以下に抑える必要があります。

gmailではこの2点を抑えておくと、立ち回りしやすいので、覚えておいてください。

■yahooメール
yahooメールも優秀で、ローカル環境で問題なければ同等の表示がさせるはずです。

■デスクトップアプリのoutlook
これが一番の敵です。笑

gmail、yahooメールで表示が問題なくても、このoutlookで表示が崩れたりする場合は大いにあります。
なのでoutlookはじっくり見るようにしましょう。

そして表示崩れが起きた場合、GoogleChromeブラウザのように、検証モードが使えなく、ほとんど勘で修正をしていくことになり、だいぶ時間が取られます。

そのため、表示崩れが起きた際は、
・別のレイアウトを検討する
・出しわけでoutlookのみ別表示にする
などで対応するのがベターです。

もちろん、修正できることに越したことはないのですが、できない場合もありますので、そこに延々と時間を使うより、代替策で表示させるようにしたほうが効率的だからです。

どうしても、「gmailなどと同じ表示にしたい」と言われた場合は、画像で対応するしかないので、画像で対応するようにしましょう。

テストメールのSP確認

■Android
AndroidのgmailアプリはPC表示で問題なければ、おそらく同じ表示になっているはずです。

気をつけることは、PCと同じくスレッド化させない、「メッセージ全体を表示」を表示させないというところです。

■iPhone
iPhoneの標準メーラーも優秀です。
ほとんど同じ表示になるでしょう。

ただ、こちらも1点注意事項があります。。

iPhoneの標準メーラーは、
・ハイフン。ドットなどで繋がれた数字を自動的にリンク設定させる
ということです。

例えば、営業時間などをメールに書いてあったとします。
<td>10:00〜18:00</td>

そうすると、iPhoneの標準メーラーはこれを自動的にリンク設定するため、HTMLメール送信時に、
<td><a>10:00〜18:00</a></td>
のようにリンクのaタグを勝手に追加します。

そのせいで文字色がリンクの青色の文字色に変わってしまいます。。

この対処法としては、「リンク設定されるのを前提で、クラスでリンク設定された文字色を元の文字色に戻す」という方法です。

自動的にリンク設定してしまうため、それを防ぐことはできず、リンクに見せないように文字色を変更するという対処しかできません。
参考（全文英語です。）

ここは、iPhoneの標準メーラーで気をつけないといけない部分になりますので、

フッターなどに営業時間や住所などを記載している場合は気をつけて見るようにしましょう。

これで、テストメールを送信して。PC、SPでの実機確認は終了です。
おつかれさまでした！！

このように、検証や検証後修正というのがHTMLメールではつきものなので、なるべく余裕を持ったスケジュール感で制作を進めていくのがよいでしょう。

また、HTMLメールはまだ見ぬ崩れがたくさんあります。

それを1つづつ対処していくとキリがないので、制作の前段階で要件を詰めてから、制作にとりかかることをおすすめします。

次回

HTMLメールの制作から検証までを行いましたので、これにてHTMLメール制作の一連の流れは終了です。

次回は、今回gmailやiPhone標準メーラーであった気をつけるポイントというのがまだあったりしますので、
それについて書いていきたいと思います。

それでは、次回もゆたしくです〜〜〜