バージョンを記載
テンプレートのバージョンやビルド番号を件名の末尾に入れ、古いキューのメールを現在の結果と取り違えないようにします。
HTMLメールプレビュー
1通のメールを6つの層に分けてチェック
「見た目が合っているか」だけでは不十分です。受信トレイからテキスト版フォールバックまで順に確認すれば、件名、レイアウト、リンク、アクセシビリティの問題を特定できます。
プレビュー観察ボード
各層はユーザーが実際に目にする画面に対応しています。一度に変えるのは1つの要素だけにすると、再テストの結果を比較できます。
01 受信トレイ一覧件名が途切れていないか、送信者を信頼できるか、プレヘッダーにテンプレート文言が漏れていないかを確認します。
02 メールヘッダー画像が制限されていても、ブランド表示、階層、背景色を判別できるかを確認します。
03 本文構成狭い画面でも、見出し、本文、余白、読み進める順序が明確かを確認します。
04 CTAボタンボタンの文言から結果が分かるか、リンク先とトラッキングパラメータが正しいかを確認します。
05 メディアと長い文字列大きな画像、長いURL、注文番号が本文をはみ出したり、不自然に切り取られたりしないかを確認します。
06 テキスト版フォールバックHTMLがなくても、必要な情報、コピーできるリンク、読みやすい順序が保たれているかを確認します。
サンプルを準備
毎回のプレビューを再現可能にする
テストメールには一意の番号、明確な発生時刻、照合できる期待結果を含めます。テンプレート、受信アドレス、送信設定を同時に変更しないでください。
送信記録を残す
送信タスクID、宛先、発生時刻を記録しておけば、遅延が起きたときにキューやバウンスを確認できます。
合格基準を決める
件名の長さ、ボタンのリンク先、モバイルでの改行、テキスト版の内容をあらかじめ明記し、「だいたい」で完了にしないようにします。
見た目の合格は、情報の合格とは限らない
きれいなHTMLの中に、誤ったリンク、欠けたプレヘッダー、コピーできない認証コードが隠れていることがあります。まず情報を照合し、その後で視覚的な階層を判断します。
- 件名と本文の内容が一致している
- 認証コードの有効期限がプロダクト画面と一致している
- 配信停止やセキュリティに関する案内が実際に機能する
隔離プレビューで確認できること
実際のメールには独自のスタイルが含まれています。本文を制限付きフレームに入れることで、サイトのCSSによるテンプレートの書き換えを防ぎ、メールのスクリプトが直接実行されるのも阻止できます。
- 画像を閲覧領域の幅に合わせて縮小
- 長い文字列を安全に折り返し
- HTMLがない場合はテキスト版にフォールバック
結果を記録
「現象—証拠—修正」で結論を書く
「ボタンが壊れている」だけでは、次のテスト担当者に役立ちません。クライアント幅、実際のリンク、再現手順、テンプレートのバージョンを具体的に記録します。
390pxの閲覧領域で、メインボタンの文言が2行になり、上下の余白を圧迫している。
メールの件名、テンプレートのバージョン、スクリーンショット、ボタンのリンク先URLを記録する。
CTAの文言を短くし、ボタンの左右のパディングを増やしてから、新しいバージョンを送信する。
新しいアドレスで一意の番号を付けたサンプルを受信し、古いメールが結論に混ざっていないことを確認する。