【htmlメルマガ】崩れを防ぐチェックポイント

2019-04-07 11:52

htmlメルマガをテスト配信したら崩れてた!なんてことはありませんか?たくさんテスト配信するのは大変です。少ないテストで決めたいところ……。

そこで今回は、htmlメルマガが崩れた時のチェックポイントをご紹介します。現時点ではどうしても解決できないことなどもありますので、ぜひ参考にしてください。
(2019/04 時点)

まずはブラウザ表示でチェック

当然のことを言うようですが、配信前にブラウザ表示で崩れていては元も子もありません。
・機種依存文字はないか?→ 機種依存文字チェッカー
・リンク切れはないか?
・タグの閉じ間違いはないか→ html/css/jsチェックツール
などを使って綺麗なソースにしていきましょう。

フォントがおかしい(outlook)

outlookでメルマガを受信した時、最も気になるのは「フォント」です。
htmlでフォントを指定していない場合、安定したフォントの表示はあまり痛いできません。
ただのテキストメールならば、iOS系では「ヒラギノ角ゴ ProN W3、欧文フォントは、Helvetica」、windows系はMS Pゴシック、游ゴシック体などになります。
メルマガの場合、どこで受信されるかわからないので、font-familyは万全にしましょう。

body {
font-family:'メイリオ', Meiryo, Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','MS Pゴシック','MS PGothic', sans-serif;
}

上記のフォントファミリーを使用した場合、iOS系では’ヒラギノ角ゴ Pro W3’、Windowsではメイリオで表示されます。
この時、outlookに置いての行間(line-height)がものすごく開きますが、現在問題の解消法は見つかっていません。どうしても気になるようでしたら’MS Pゴシック’を使いましょう。

画像が見切れている(Gmail)

画像の右端が切れている、という現象はGmail関連で起こりやすい事象です。解決法は<img>のwidthをちゃんと実寸のpxで指定してあげることで解決します。heightはautoにしましょう。

CSSが効いていない(レスポンシブ適用・Gmail)

ツールなどを使わなくてもレスポンシブメルマガを作ることが可能です。
テンプレートはこちらの記事:【崩れを最小限に!】htmlメルマガのテンプレート
しかし、レスポンシブが有効でないメーラーもあります。
Gmailはインラインスタイルしか認識しません。なので下記のように記述していきます。

<style>
.fs18 { font-size:14px !important;}
@media screen and (max-width: 767px) {
.fs18 { font-size:20px !important;}
}
</style>
<table>
<tr>
<!--インラインスタイルでGmail対策-->
<td style="font-size:18px;">
<span class="fs18">ここの文字は、PCメーラーなら18px<br>
スマホなら20px、Gmailでも18pxで表示されます。<br>
importantを書いておくのが大事です。</span>
</td>
</tr>
</table>

1行あたりの文字数はwidthを文字サイズで割ることで算出できますので、タイトルがレスポンシブでも段落ちしないよう、調整しましょう。

チェックポイントは以上となりますが、一番外の枠のテンプレートが下記にまとまっていますので、ぜひご利用ください。
◆テンプレートはこちらの記事:【崩れを最小限に!】htmlメルマガのテンプレート