本文へスキップ

HTMLメールの互換性チェック

HTML Email Compatibility Check

メールのHTMLを各クライアントが実際に対応している範囲と突き合わせ、崩れる要素を名指しして、GmailやOutlookなどで何が残るかを並べて見せます。

これから送るメッセージのHTMLを貼り付けると、クライアントごとに何が生き残らないかを伝え、それを起こしている要素を指し示します。対応の情報はcaniemailのもので、実機で走らせた試験と、最後に走らせた日付を持っています。このサイトは描画のための機材を持っていませんし、プレビューをスクリーンショットだと言うことは決してありません。

🔒 ブラウザの中だけで動きますemailhtmlcompatibilitynewsletter
サイズ: 0 byte · Gmail の 102 KB のうち 0%
テキスト版(任意)

使い方

  1. HTMLを貼り付けます

    送るとおりの、メッセージ全体です。text/plainのパートも一緒に送るなら、それも貼ってください。貼らなければ、正しく「ない」と伝えられることになります。

  2. 深刻さの順に指摘を読みます

    「崩れる」は、人が使っているクライアントで誤った形のまま届くという意味です。「見た目」は、あるクライアントで少し違って見えるという意味です。指摘ごとに、当てはまるクライアントと、根拠にしているcaniemailの機能名を書きます。

  3. 要素へ飛んで、書き換えを受け取ります

    指摘を押すと、ソースの中の該当箇所がそのまま強調されます。書き換えを生成できる場合は、その要素自身の内容から組み立てます。flexの行が、あなたの列を収めた表になります。「適用」を押すとそれが差し込まれ、ファイルの残りには手を触れません。

  4. 2つの枠を確かめます

    左が書いたもの、右が選んだクライアントが残すものです。画像を切って見てください。多くの読み手が最初に見るのはその状態です。ダークと携帯の切り替えも試してください。

よくある質問

このプレビューはGmailのスクリーンショットですか。

いいえ。そして、ここでそう言うことは決してありません。あなたのHTMLに、そのクライアントの文書化された除去の規則を当てて、いま使っているブラウザが描いたものです。Windows版のOutlookでは、その違いがいちばん効いてきます。Microsoft Word経由で描画するので、この枠が言えるのは、Wordなら何が残るかであって、Wordがどう配置するかではありません。

102 KBに届く前から容量の警告が出るのはなぜですか。

Gmailが測るのは、あなたのファイルではなく組み立て終わったメッセージだからです。転送用の符号化、ヘッダー、送信基盤によるリンクの書き換えがすべて上乗せされるので、ここで100 KBの下書きは上限を超えて出ていき、途中で切られます。フッターと配信停止のリンクは「メッセージ全体を表示」の向こうに隠れます。

Naver、Daum、Kakaoはどうなりますか。

一覧には並びますが、判定は持っていません。公開された試験の一覧がそれらを扱っておらず、このサイトも測っていないからです。そのどれかを選ぶと、共通の規則だけが当たります。スクリプトとフォームの除去です。そしてパネルは、結果が未確認だと伝えます。Naverについて自信ありげな行があるほうが、空の行より悪いのです。

下書きはブラウザの外へ出ますか。

いいえ。解析も規則もプレビューも、すべてタブの中で走ります。下書きは、再読み込みで失われないようにこのブラウザのローカルストレージにだけ保持されます。入力欄を空にすれば消えます。

ここから渡せます

次の一手

このツールが出したものをそのまま受け取れる道具です。

メールクライアント対応表

Email Client Support Table

Gmail・Outlook・Apple Mail・Yahoo・Samsung Mail・ThunderbirdがHTMLメールで何に対応しているかを、caniemailの実機試験の結果と最終試験日つきで示します。

ブラウザの中だけで動きます

送信メールと受信メールの比較

Sent vs Delivered Comparison

自分のアカウントから使い捨てアドレスに下書きを送ると、送信経路が何を書き換えたか(リダイレクトに包まれたリンク、消えたstyleブロック、足されたビーコン、使われた符号化)が分かります。

サーバーを使います

HTMLメール作成

HTML Email Builder

ブロックを積んで表組み・インラインスタイルのHTMLメールとVML対応のボタンを作り、同じブロックからテキスト版も書き出します。

ブラウザの中だけで動きます

HTML整形・圧縮

HTML Beautifier & Minifier

HTMLを整形または圧縮し、インライン要素は保ったまま空白をどこまで詰めるかを選べます。

ブラウザの中だけで動きます

CORSテスター

CORS Tester

指定した生成元からブラウザが送るプリフライトとOriginを載せたGETを実際に送り、Fetch標準の規則でどのヘッダーが止めたのかを説明します。

サーバーを使います

為替レート換算

Currency Converter

欧州中央銀行の日次基準レートでユーロを経由して約30通貨を換算し、銀行に言われたレートを自分で入れることもできます。

サーバーを使います