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

はいさいーー

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

HTMLメールの連載です。

HTMLメールは一度送ってしまうと修正などはできません。
なので送信前にしっかり検証することが必要になります。

今回は、作成したHTMLメールを検証する際にどのようなことに気をつけるかを書いていきたいと思います！

まずは、テストメール送信ですぐ検証するのではなく、自身のPC上（ローカル環境）で確認をしていきます。
ローカルでの確認するポイントは3つあります。

ポイント1 ローカルでのPC確認

HTMLメールを作成したらすぐにテスト送信をして確認するのではなく、GoogleChromeなどブラウザを使用し、ローカルで表示を確認するようにしましょう。
通常の表示で表示崩れがないかや、画像のリンク切れ、リンクの遷移が問題ないかを確認します。

また以前の記事で書いた、
難敵！Outlookで出し分けたい

outlookでの出し分けを行っている場合は、GoogleChromeなどブラウザで確認することができませんので、後述するテストメール送信で確認するようにしましょう。

ポイント2 ローカルでのSP確認

PC表示の次はSP表示を確認します。

SP表示はGoogleChromeであれば、F12もしくは右クリックで「検証」を開き、
以下画像の①の箇所をクリックしてSPモードに変更、
②の箇所で見たい端末（デバイス幅）に切り替え、表示崩れがないか確認するようにしましょう。

上から下まで崩れが無いかを確認することと、以下の画像のように、
・デバイス幅（以下画像であれば375px）に要素が収まっているか？
も確認します。

要素がデバイス幅より大きくなっていると、GoogleChromeで表示が問題なくてもテストメール送信の際、実際の端末（実機）で見たとき、

表示幅を超えてしまい崩れる原因になります。

以下の画像は、デバイス幅を超えてしまっているため、横にスクロールができてしまい、表示が崩れているものになります。

ポイント3 ローカルでのレスポンシブ確認

またもう一つ注意点があり、GoogleChromeの検証で、レスポンシブモードにし、画面幅を縮めて表示崩れが無いかも確認しましょう。

これも、画面幅を超える要素が無いかを確認するのと、cssのmediaqueryでPC、SPでレイアウトを切り替えている場合、
意図した表示になっているかを確認するためです。

これが、ローカルで表示確認する3つのポイントです。

次にテストメールを送信し、実際の端末（実機）で見た際の確認をしていきます。

ただ、実機での確認方法は書いていると長くなりましたので、
次回お送りしたいと思います。

次回

今回はHTMLメールをローカルで検証する方法でしたが、
テストメール送信してから何度も修正を行う手間を少しでも省くため、ローカルで確認することは重要です。

上記の手順で修正の出戻りや回数を少なくして負担を減らせるようにしていきましょう！

次回はHTMLメールのテストメール送信方法とPC，SPでの実機確認を書いていきたいと思います！

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