HTMLメールチェッカー
HTMLメール(メルマガ)のソースを貼り付けると、メールクライアントで崩れる原因を洗い出します。
配信してしまってからでは直せないので、送る前の最終確認にどうぞ。
貼り付けたHTMLはブラウザの中だけで処理され、サーバーには送信されません。
1. HTMLを貼り付ける
スポンサーリンク
何をチェックしているか
| レベル | 意味 |
|---|---|
| NG | ほぼ確実に崩れる、または機能しません。配信前に直してください。 |
| 警告 | 一部のクライアントで崩れます。対象の環境次第では許容できます。 |
| 情報 | 崩れはしませんが、入れておいたほうがよい項目です。 |
主な検査項目
- 画像の相対パス … メールにはサイトの基準がないため、絶対URLでないと表示されません
- webp / avif / svg … Outlook や一部の環境で表示されません
- 外部CSSの読み込み …
<link rel="stylesheet">は読まれません - flexbox / grid / position … Outlook(Wordエンジン)が対応していません
- border-radius / box-shadow / transform … Outlook で無視されます
- Gmailの102KB制限 … 超えるとメールの途中で切られ、以降が表示されません
- script / form / iframe / video … 除去されるか、動作しません
- そのほか、alt属性、width/height属性、テキストの有無、文字コードなど
使い方のコツ
「NG」がゼロになれば、まず大きくは崩れません。 「警告」は配信対象によって判断が変わります。Outlook利用者が多い企業向けなら直す、 スマホ中心の一般向けなら許容する、といった具合です。
なお、このツールはソースの静的なチェックです。 実際の見え方は、最終的に自分のスマホとPCにテスト配信して目で確認してください。 特にOutlookとGmailアプリは挙動が独特です。
関連記事
HTMLメールの組み方そのものは 【初心者向け】HTMLメルマガコーディングの基本|テンプレート付き完全ガイド で解説しています。
スポンサーリンク
ほかのツール
- SVGの色を変えるCSSコード生成ツール … SVGの色を、インラインSVG/mask-image/filter の3方式のコードで出力します。
- イメージマップ作成ツール … 1枚の画像に複数のリンクを貼るHTMLを、画像の上でドラッグするだけで作成します。
- ツール一覧をみる