表示崩れをしないメールを作るには？
こんにちは、チーターデジタルCXコンサルティングチームの山岡です。
せっかく作成したメルマガが、表示崩れを起こしている！なんてことはありませんか？
大前提として、受信者の環境でメルマガが正しく表示されなくてはその効果は半減してしまいます。不自然な余白や改行、明らかに小さすぎる画像など…違和感を感じる見た目では、ちょっと読む気になりませんよね。
今回は、メルマガをコーディングする際の表示崩れが起きやすいポイントと、それを防ぐための注意点をご紹介します。
表示崩れが起きやすいポイント/注意点
Outlookで画像の表示サイズがおかしい場合
imgタグのwidthを確認しましょう。横幅640pxの画像であればwidth="640"と記述すると正しいサイズで表示されます。
正確に画像の数値を記述する必要があります。
Gmailで画像と画像の間に隙間が空いてしまう場合
imgタグにborder="0"とstyleにdisplay:block;を記述すると解消します。
その他
tableタグごとに読み込まれるので、長すぎるとtableの閉じタグまで到達できず表示されません。1つのtableにすべてを詰め込むのではなく、いくつかに分けてtableタグはこまめに閉じておきましょう。
またOutlookではtdの中の要素が意図しない左寄せや右寄せになってしまうので、必ずtdにalignを指定しておきましょう。
とにかくテスト！
最も重要なのは徹底的なテスト確認です。
テスト確認をし表示崩れがあれば、実際に配信されたメールのソースから問題のコードを探し出し、修正して再度テスト確認…の繰り返しで根気よくテストをしていきます。
そしてクリティカルなエラーや表示崩れがない状態で配信するために、より多くのメーラーやデバイスで表示テスト確認が必要です。表示テスト確認でおすすめのツールはLitmusやEmail on Acidです。メールのプレビューやテストを行うのにかなり優れたツールです。多くのメーラーやデバイスでの表示を確認できるため、メールが意図した通りに表示されるかどうかを簡単に検証できます。
最後に…
各メーラーでサポート状況が異なるため、全てのメーラーでデザインが正確に表示されるわけでありませんが、上記の点に注意してメルマガを作成することで、多くの環境で美しく表示されるメールを送信することができます。
ただし、メーラーの仕様は常に変更される可能性があるため、定期的な情報収集と更新も忘れずに行いましょう。
正しく表示されたメルマガは、読者の興味を引き、クリック率や転換率の向上につながります。
ぜひこれらのポイントを参考にしてみてください。
Author
山岡 梢 （Kozue Yamaoka）
Creative Specialist / Creative Consultant
Japan Services Div. CX Consulting Team - CHEETAH DIGITAL
★次回セミナーのお知らせ
『メールマーケ、進化の最前線！』後編
〜最新デザイン手法、AI活用、パーソナライズで実現するコミュニケーションの向上〜