HTMLプレビュー

6段階のプレビューで、デスクトップのスクリーンショットより確実に確認

2026年8月公開。まず受信一覧と事実関係を確認し、次にレイアウト、リンク、画像、テキスト版へのフォールバックを点検します。見た目の合格で機能上の問題を見逃さないためです。

第1段階:受信一覧

件名、差出人、プレビューテキストが、ユーザーがメールを開くかどうかを左右します。件名が環境用の接頭辞に埋もれていないか、差出人名が信頼できるか、プレビューテキストにテンプレートのプレースホルダーや本文冒頭の重複がないか確認します。

テスト用の件名に一意の番号を付け、一覧で現在のバージョンを開いていることを確認します。実際のメールが届いているなら、デモ用のプレースホルダーを一覧に残してはいけません。

第2段階:ヘッダーとブランド

画像を無効にするか、外部画像が読み込めない前提でも、ブランドとメールの種類が判別できるようにします。ロゴには代替テキストを用意し、背景と本文のコントラストを画像だけに頼らないでください。

狭い画面では、ヘッダーが閲覧エリアの大半を占めないようにします。ブランド名、通知の種類、差出人ドメインは互いに一致させ、視覚的なロゴで不審な送信元を隠さないでください。

第3段階:本文の順序

見出し、重要な事実、操作、補足説明の順に読み進められ、自然な流れになっているか確認します。認証コード、金額、日付、端末の所在地など重要な値を装飾用のモジュールに埋め込んではいけません。

幅390px前後の閲覧エリアで改行を確認し、表、長いURL、注文番号がコンテナからはみ出さないことを確認します。本文を拡大しても、論理的な順序を保てるようにします。

第4段階:操作ボタン

ボタンの文言は「ここをクリック」のような曖昧な表現ではなく、クリック後の結果を示します。実際のhrefをコピーして、ドメイン、プロトコル、環境、必要なパラメーターを確認し、見た目だけでリンクの正しさを判断しないでください。

主操作と補助操作を明確にし、ボタンが無効またはリンク切れになった場合は、復旧方法が分かるフィードバックを表示します。メール内でシステムボタンを偽装したり、秘密情報の入力を誘導したりしてはいけません。

第5段階:画像と長いコンテンツ

画像には最大幅を設定し、意味のある代替テキストを付けます。装飾画像の代替テキストは空にできますが、注文情報、認証コード、手順を画像だけに含めてはいけません。

長い単語、トラッキングリンク、連続した番号は適切に改行できるようにし、ページ全体が横に広がらないようにします。大容量の添付ファイルや外部メディアは、製品の容量ルールに従って別途確認してください。

第6段階:テキスト版へのフォールバック

テキスト版には、件名に関する事実、主要な操作の完全なURL、サポート情報、必要な法的説明を含めます。HTMLタグを取り除いただけの文字化けでは不十分です。

読み手の順序に沿って、空行、リスト、リンクの位置を確認します。クライアントがHTMLを表示しなくても、ユーザーが状況を理解し、重要な操作を完了できるようにします。

再現可能な結論をまとめる

テンプレートのバージョン、送信タスク、アドレス、到着時刻、クライアントの画面幅、実際のリンクを記録します。修正のたびに必要な変数だけを変更し、新しい番号を付けたサンプルを再送します。

合格基準では、事実の一致、読みやすさ、操作性、フォールバックの完全性をすべて確認します。デスクトップのスクリーンショットがきれいでも、完全な結論の代わりにはなりません。

隔離プレビューを開く

使い捨て受信トレイで新しいバージョンを受け取り、実際の本文表示エリアでレイアウトを確認します。