Tempcase

メールテンプレートのプレビュー環境

テスト登録を1回行い、
トランザクションメール全体をチェック

デザインでわかるのは「本来の見た目」。実際に受信して初めて「何が送信されたか」がわかります。専用アドレスを使って、件名・本文・次の操作まで確認しましょう。

01 / 確認できること

内容が揃っているか、認証コードが見やすいか、HTMLの構造や基本的なレイアウトに問題がないかを確認できます。

02 / 代わりにはならないこと

デスクトップやスマートフォンのすべてのメールアプリでの互換性テスト、およびメールの受信を保証するものではありません。

03 / まず確認すること

メールが届かない場合は、まずメール到達のトラブルシューティングを行い、届いているのに表示がおかしい場合はテンプレートを確認しましょう。

始める前に

再現可能なテストケースを準備する

環境・データ・テンプレートのバージョンを固定しましょう。受信アドレスだけを変え、複数の条件を同時に変更しなければ、問題を再現しやすくなります。

今回のテストで準備するもの

  1. 1

    操作可能なステージング環境

    登録メールやパスワード再設定メールを送信する権限があることを確認してください。環境の識別情報とコールバックドメインをチェックし、誤って本番環境で操作しないようにしましょう。

  2. 2

    実在する顧客情報を含まないアカウント

    架空の氏名とテストデータを使い、顧客の住所や決済情報、本番環境の認証情報は入力しないでください。

  3. 3

    確認するテンプレートと言語

    テンプレートのバージョン、想定する件名、認証コードの有効期限、今回のテスト言語を記録します。変更前後の比較には同じ入力データを使いましょう。

  4. 4

    新しい認証コード用メールアドレス

    ホームの受信箱で、現在有効なアドレスをコピーします。テストごとに専用アドレスを使い、前回の認証コードを今回の結果と取り違えないようにしましょう。

単発テスト

使い捨て受信箱で、テスト後は破棄

数分で終わる登録、パスワード再設定、OTP確認に適しています。一時アドレスの有効期間は通常3時間で、延長するたびに3時間追加されます。1つのアドレスを利用できるのは最長24時間です。

受信専用で、送信はできません。有効期限が切れたメールは復元できないため、証跡として残すスクリーンショットや個人情報を伏せた記録は、アドレスの有効期間内に保存してください。

一時アドレスを使う →
日をまたいだ再テスト

固定エイリアスでメールを長期転送

継続的な回帰テスト、定期通知、翌日以降もメールを受け取る必要があるテストアカウントに適しています。ログインしてエイリアスを作成すると、受信メールが普段お使いのアドレスに転送されます。

転送後のレイアウトは転送先のメールアプリの影響を受ける場合があります。記録には、一時受信箱で直接確認したのか、エイリアス経由で転送されたメールを確認したのかを明記してください。

ログインしてエイリアスを使う →

登録メールの実受信テスト

4ステップで確認。送信成功を装うことはありません

このページは確認方法のガイドであり、アプリに代わってメールを送信するものではありません。実際の送信は、許可を得たテストシステムから実行してください。

1

アドレスを作成してコピー

ホームを開き、アドレスが作成されるのを待って残りの有効時間を確認します。アドレス全体をコピーし、貼り付けたときに余分なスペースが入ったり、末尾が欠けたりしていないか確認してください。

2

登録フローを実行

ステージング環境でテストアカウントを送信し、送信時刻とテンプレートのバージョンを記録します。画面上の表示だけでなく、アプリが実際に送信処理を開始したか確認しましょう。

3

メールの到着を待つ

自動更新される受信箱に戻ります。到着時刻を記録し、結果が混乱しないよう連続で再送しないでください。届かない場合は、まずアドレスと送信ログを確認しましょう。

4

メール全体を開く

該当する件名を開き、差出人と今回の認証コードを確認してから、本文とリンクをチェックします。受信一覧のプレビューだけでテンプレートの合否を判断しないでください。

1テストにつき1ケース:アプリのテスト記録に、受信アドレス・リクエストID・送信時刻を関連付けます。次のテストでアドレスを変えると古いアドレスは無効になるため、切り替える前に必要な証跡を保存してください。

メール本文のチェック環境

まず内容を確認し、それから表示を見る

以下の2つの静的サンプルは、認証コードメールと取引通知を想定しています。チェック方法を説明するための例であり、実際のアカウント通知でも、メールアプリとの互換性を証明するものでもありません。

サンプル A · 認証コード チェックのポイント:操作を完了できるか

Netflixのログイン認証コード

Netflix · demo@netflix.example

NETFLIX

このコードを入力してログイン

新しいデバイスからアカウントへのログインが試みられています。ご本人による操作の場合は、ログインページで次の認証コードを入力してください。

604917
有効期限
15分間有効
デバイス
Chrome · macOS
場所
上海、中国

このメールはTempcaseによるデモであり、Netflixとは一切関係ありません。サンプルの認証コードは実際のログインには使用できません。

確認ポイント:画像に頼らず、どのログイン操作かをユーザーが見分け、数字全体をコピーして、有効期限を確認できますか?

サンプル B · 取引通知 チェックのポイント:明細を照合できるか

水曜日の乗車レシート · ¥46.80

Uber · demo@uber.example

Uber

ご利用ありがとうございました

トランザクションメールのレイアウトを確認するための乗車レシートです。

¥46.80
レシート番号
UBR-58K2-7731Q
ルート
静安寺 → 前灘
乗車時間
12.4 km / 24 分
通貨
CNY

このメールはTempcaseによるデモであり、Uberとは一切関係ありません。実際の乗車や支払いを示すものではありません。

確認ポイント:番号・金額・通貨・乗車内容が正しく対応していますか?狭い画面でも長い番号を最後まで読み取れますか?

本文を5つのポイントに分けてチェック

01件名
操作の目的が伝わる件名にし、「お知らせ」のような曖昧な表現だけにしないでください。テンプレートの変数が正しく置き換わっているか、不要な個人情報が表示されていないかも確認します。
02差出人
表示名とメールアドレスがテスト環境の設定と一致しているか確認します。同じ名前であることは本人確認の証明にはなりません。このプレビューではメール認証や送信ログの確認を代替できません。
03認証コード
先頭のゼロ、桁数、コピーした結果、本文中のコードが一致しているか確認します。コードを画像だけに表示したり、文字間隔や改行によって数字を読み違えやすくしたりしないでください。
04有効期限
メールに記載されたコードの有効期限と、サーバー側の検証ルールが一致している必要があります。サンプルの15分は認証コードの有効期限で、一時メールアドレスの通常の有効期間である3時間とは異なります。
05操作リンク
テンプレートに認証や再設定のリンクがある場合は、リンク先・環境・有効期限のルールを確認します。許可されたテストシステムでのみ操作し、確認のために不明な送信元のリンクを開かないでください。

HTMLとテキスト形式を比較

見た目だけでなく、簡易表示でも使えること

本文の表示結果を確認し、HTMLソースで構造を調べ、送信システムでテキスト形式の本文も確認します。HTMLが表示されても、使えるテキスト形式の本文が添付されているとは限りません。

同じメールを確認する方法と合格基準
確認項目 HTMLで確認すること テキスト形式で確認すること 今回の合格基準
狭い画面での改行 ブラウザーの幅を狭め、認証コード・長い注文番号・ボタンの文言を確認します。固定幅や改行できない要素がないか調べてください。 長い段落・番号・URLの区切りを確認し、表の列幅がないと読めない状態を避けます。 重要な情報が切れず、主な操作に左右のスクロールが必要ないこと。
フォントの代替表示 ブランドフォントが使えない場合のレイアウトを確認します。特に日本語、数字、金額、ボタンの高さに注意してください。 ラベルと段落を明確にし、等幅表示が必要な表を空白で組み立てないようにします。 システムフォントに置き換えても情報の階層がわかりやすく、数字や句読点が欠けないこと。
画像が表示されない場合 外部画像が読み込まれない場合を想定し、代替テキストと画像の表示領域を確認します。認証コードは画像に依存させないでください。 会社名・操作の目的・有効期限・必要なリンクが、テキストとして直接記載されていること。 ロゴや装飾画像がなくても、何が起きたか、次に何をすべきかがわかること。
ダークモードでの読みやすさ 対象のメールアプリのダークモードで、背景・文字・透過ロゴ・ボタンの境界を別途確認します。 「緑の部分をクリック」のような色に依存する案内を避け、操作を具体的に説明します。 重要な文字に十分なコントラストがあること。ブラウザーのライトモードでのプレビュー合格は、ダークモードの合格とはみなしません。
内容の一致 認証コード・金額・レシート番号・有効期限・リンクのパラメーターを確認し、テンプレートの置換漏れがないか調べます。 送信側のMIMEまたはログでtext/plainの内容を確認し、HTMLと同じテストデータに対応していることを確かめます。 両方の本文で重要な情報が一致し、古いコードや金額、別環境のリンクが残っていないこと。

プレビューと実際のメールアプリでは表示が異なる場合があります

Tempcaseでは、HTMLメールを隔離環境で表示し、危険なスクリプトや一部のインタラクティブなコンテンツを制限しています。外部画像・フォント・スタイルは、リソースへのアクセス権、直リンク防止設定、ネットワークの状態によって読み込めないことがあります。メールに埋め込まれた添付画像も表示されない場合があります。テンプレートの問題と判断する前に、リソースにアクセスできるか確認してください。

ブラウザーとデスクトップ・スマートフォンのメールアプリでは、表示のルールが完全には一致しません。公開前に、実際にサポートするメールアプリで再テストしてください。テキスト形式のMIME、メールヘッダー、添付ファイルを確認する場合は、送信システムに保存された元のテストメールも確認してください。このページはHTMLアップローダーでも、複数のメールアプリのスクリーンショットを作成するサービスでもありません。

再テストの記録

同僚が再現できる証跡を残す

スクリーンショットは結果を示しますが、再現の起点となるのはバージョンと入力データです。どのメールを受信したか記録し、1回問題なく届いたことを、すべての条件で合格したという意味にしないでください。

個人情報を伏せた記録例

登録確認 / case-018

結果:修正後に再テスト
テンプレートのバージョン
signup-otp v2.4.1
環境と言語
ステージング環境 · zh · デスクトップブラウザー
送信操作の時刻
2026-11-03 10:20:00 +08:00
受信時刻
2026-11-03 10:20:06 +08:00
問題と証跡
幅390pxのプレビューで、有効期限の説明が改行されると認証コードに近づく。スクリーンショット:case-018-narrow-redacted.png。
次回の再テスト
説明文の余白を調整後、新しいアドレスで再送信。HTMLとテキスト形式を比較し、対象のスマートフォン用メールアプリでも追加テストする。

時刻は記録形式の例であり、メールの到着時間を保証するものではありません。スクリーンショットを共有する前に、認証コード・パスワード再設定用トークン・受信アドレス全体・顧客情報を隠してください。使用可能な認証情報を公開の課題管理ツールに投稿しないでください。

登録確認

認証コードとアカウントが対応しているか、有効期限が明記されているか、再送信後に古いコードがどう扱われるかを確認します。メール上で正しく表示されても、サーバー側のルールはテストアプリで検証する必要があります。

パスワード再設定

再設定の目的、リンク先の環境、有効期限、本人以外の操作に関する案内を確認します。リンクの期限切れや1回使用後の無効化は、ボタンの見た目だけで判断せず、許可されたアプリで検証してください。

取引通知

金額・通貨・時刻・番号・明細を確認します。長い商品名、複数の商品、多言語のデータも加えて再テストし、最も短いレシートだけでレイアウトの安定性を判断しないでください。

よくある質問

まず問題の発生箇所を切り分ける

メールの到着・内容・レイアウト・業務ルールの検証は、それぞれ別の結果です。分けて記録すれば、原因を取り違えずに修正できます。

認証コードの到着状況を診断

メールが届かない場合、HTMLを変更すれば解決しますか?

まずテンプレートのスタイルは変更しないでください。受信アドレス・アドレスの有効期間・送信処理・送信ログを確認し、メール到達のトラブルシューティングの手順に沿って原因を特定します。本文を受信していない段階では、レイアウトが原因とは判断できません。

ブラウザーで正常に表示されれば、公開できますか?

すべてのメールアプリでの動作を保証するものではありません。このページでは内容と基本的なレイアウトを事前確認できますが、公開前に対象のデスクトップ・スマートフォン用メールアプリで改行、画像の扱い、ダークモードをテストしてください。

HTMLは表示されるのに、比較するテキスト形式がないのはなぜですか?

送信システムがtext/plainを生成していない場合や、現在の表示方法では表示されない場合があります。HTMLソースの確認はテキスト形式の本文の確認とは異なります。送信側の元のMIMEで両方の形式が含まれているか確認してください。

NetflixやUberのサンプルを実際のテンプレートとして使えますか?

いいえ。Tempcaseが作成した、実在ブランドとは無関係のデモです。認証コード欄とレシート明細の確認方法を説明するためのもので、実際のアカウントサービスではなく、ブランドを装ったメール送信にも使用できません。

テストアカウントで翌日もメールを受け取るには、どの方法がよいですか?

「長期転送エイリアス」または使用する権限のある長期利用メールアドレスを使ってください。一時アドレスは最長24時間で期限切れとなり、復元できません。長期間の復旧が必要な正式アカウントには使わないでください。

次のメールにもチェック方法を活用

専用アドレスで始める

単発テストには使い捨て受信箱、日をまたぐ回帰テストには転送エイリアスを使います。まず実際のメールを1通受信し、テンプレートのどこを直すか判断しましょう。