自分の画面では完璧なメールも
クライアントが開くと表示崩れ
Gmail、Outlook、ダークモードは、送信後のメールの見た目を変えてしまいます。ボタンが空白になったり、ロゴが消えたり、レイアウトが崩れたりします。クライアントや顧客が目にして評価するのは、その崩れたメールです。送信前に見つけて、直せます。
プレビューはパソコンで開きます
崩れたメール1通で、クライアントを失うことも
しかも、そのことを知らされないかもしれません。クライアントはロゴの欠けたメールを上司に転送します。顧客はボタンを探し、空白しか見つけられず、そのまま離れていきます。
“We have a client who, when receives our test emails for approval, is having some serious issues with the design layout.”
Emailensなら、この3つすべてを無料プランでチェックできます。 無料でメールをチェック
同じメール、違うメールソフト
送ったメールと、クライアントが開いたメール
左は作成したとおりのメール、右は相手のメールソフトでの表示（シミュレーション）です。メールソフトを切り替えて比較できます。
ネタバレ：犯人はOutlook
Emailensがシミュレーションする21種類のうち、7種類を表示しています。
ほか14件。 レポート全体を見る
崩れた箇所と直し方を、正確に
問題ごとに、崩れるメールソフトを示し、ご利用のフレームワークで書いた修正方法を添えます。以下は、上のメールに対するEmailensの指摘です。
- <div style="display: flex; gap: 16px;">- <div>Item 1</div>- <div>Item 2</div>- <div>Item 3</div>- </div>+ <table role="presentation" cellpadding="0"+ cellspacing="0" border="0">+ <tr>+ <td style="padding-right: 16px;">Item 1</td>+ <td style="padding-right: 16px;">Item 2</td>+ <td>Item 3</td>+ </tr>+ </table>Use padding or margin on child elements instead of gap.
- <Row style={{ gap: "16px" }}>- <Column>Item 1</Column>- <Column>Item 2</Column>- <Column>Item 3</Column>- </Row>+ import { Row, Column } from "@react-email/components";+ + {/* Use padding on Column; gap is not supported in email clients */}+ <Row>+ <Column style={{ paddingRight: "16px" }}>Item 1</Column>+ <Column style={{ paddingRight: "16px" }}>Item 2</Column>+ <Column>Item 3</Column>+ </Row>Use padding style prop on Column instead of gap (email-safe spacing).
- <mj-raw>- <div style="display: flex; gap: 16px;">- <div style="flex: 1;">Column 1</div>- <div style="flex: 1;">Column 2</div>- </div>- </mj-raw>+ <!-- Flexbox in MJML is not Outlook-compatible.+ Use mj-section and mj-column: MJML compiles these to table-based layouts. -->+ <mj-section>+ <mj-column width="50%">+ <mj-text>Column 1</mj-text>+ </mj-column>+ <mj-column width="50%">+ <mj-text>Column 2</mj-text>+ </mj-column>+ </mj-section>Replace flexbox (from mj-raw or inline styles) with mj-section and mj-column.
- <div class="flex gap-4">- <div>Item 1</div>- <div>Item 2</div>- <div>Item 3</div>- </div>+ <!-- gap is not supported in Outlook or many email clients.+ Use padding classes on child elements instead. -->+ <table role="presentation" cellpadding="0" cellspacing="0" border="0">+ <tr>+ <td class="pr-4">Item 1</td>+ <td class="pr-4">Item 2</td>+ <td>Item 3</td>+ </tr>+ </table>Use padding classes on the children instead of gap. Same markup in a v5 HTML file and inside a v6 <template>..
どのチェックでも、あわせて確認する項目
-
Outlookで空白になるボタン
VMLの図形を別の図形の中に入れると、それ以降のOutlookのボタンはすべて文字が消えます。ゴーストテーブルや角のサイズの誤りも確認します。
-
ダークモードで消えるロゴや文字
メールソフトがメールの色を反転させた後の、すべての色の組み合わせを確認し直します。
-
顧客の目に触れる差し込みタグ
値の入っていないHandlebars、Mailchimp、AMPscriptのタグを、送信前に見つけます。
-
迷惑メールに見える要素
大文字だらけの文面、画像ばかりのレイアウト、配信停止リンクの欠落を確認します。
-
一部の読者が読めないメール
コントラスト、代替テキスト、見出しの順序、lang属性、テーブルのセマンティクスを確認します。
-
スマートフォンで横スクロールするメール
固定幅や改行されない文字列が、レイアウトを画面の外へ押し出していないかを確認します。
-
どこにもつながらないリンク
壊れたhref、安全でないリンク、空のmailto、内容のわからないリンクテキストを確認します。
-
途中で切れる件名
メールソフトごとの件名とプリヘッダーの省略を確認します。メールの下部が隠れるGmailのクリッピングは、Devプランで確認できます。
-
うまく代替されない背景やフォント
代替色のないグラデーションや、Webセーフフォントへのフォールバックを指定していないフォントを確認します。
次に、実機で確認
ワンクリックで、実際のOutlook、Apple Mail、Gmailでのメールのスクリーンショットを撮り、シミュレーションと並べて表示します。最初のチェックは無料です。
または、デザインはそのままで自動修正
AI Fixはエージェントです。受信トレイでのメールの表示を確認し、Gmailが削除するCSSからOutlookの角丸カードまで、崩れる箇所を修正して、変更のたびに21種類すべてのメールソフトで確認し直します。デザインを損なう修正を提案することはありません。コーディングアシスタントからも同じチェックを実行できます。
preview_email audit_email fix_email
-
アシスタントを使っていない場合は AI Fixにふだんの言葉で依頼するか、チェックで見つかった問題を修正させてください。無料アカウントには、AI Fixが3回分含まれます。 仕組みを見る（英語）
-
まだFigmaで作業中なら コードを書く前に、フレームを採点できます。 プラグインを入手（英語）
{
"mcpServers": {
"emailens": {
"command": "npx",
"args": ["-y", "@emailens/mcp"]
}
}
}emailens/action@v1, threshold 70
✗ emails/welcome.html 66 worst: Outlook Classic
✓ emails/order-shipped.html 97 worst: Gmail iOS
✓ emails/summit-invite.html 97 worst: Gmail iOS
1 of 3 emails below 70. Check failed, the pull request is blocked.
# .github/workflows/emails.yml
on: pull_request
jobs:
email-qa:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: emailens/action@v1
with:
pattern: "emails/**/*.html"
threshold: "70"# メールがメールソフトで崩れると0以外のコードで終了
$ npx @emailens/cli lint 'emails/*.html'
# 機械可読な出力（独自のスクリプト向け）
$ npx @emailens/cli lint email.html --json
# 厳格モード：警告でもビルドを失敗させる
$ npx @emailens/cli lint email.html --fail-on-warning本番環境に届く前にブロック
プルリクエストのたびに、すべてのメールをチェックします。メールソフトでの表示を崩す変更は、ほかのテストと同じようにビルドを失敗させ、顧客の目に触れる前に止められます。
エンジン、CLI、MCPサーバーはオープンソースです。 リポジトリを見る（英語）
GitHub Actionを追加アプリが実際に送るメールをテスト
テンプレートはレビューを通っても、アプリが値を差し込んだ後に崩れることがあります。実際のメールを、サンドボックスの受信トレイに送ってください。
テスト用の受信トレイ
送信先：smtp.emailens.dev:2525すべての受信トレイ
-
ログインコードのお知らせ
auth@example.com · たった今
-
ご注文の商品を発送しました
orders@example.com · 11:58
-
パスワードの再設定
auth@example.com · 11:40
アプリが送信すると
220 smtp.emailens.dev ESMTP
EHLO app.example.com
STARTTLS
AUTH PLAIN ••••••••
MAIL FROM:<auth@example.com>
RCPT TO:<inbox+signup@try.emailens.dev>
250 Captured in your sandbox, not delivered
受信時にチェック
- SPF pass
- DKIM pass
- DMARC pass
- 21種類中19種類で正常に表示
ログインコード
482913
GET /api/sandbox/v1/messages/wait
200 · テストがコードを送信
SMTPリレー smtp.emailens.dev:2525
または送信先 inbox+…@try.emailens.dev
受信トレイに届き続けるために
完璧なメールでも、迷惑メールフォルダーに入れば失敗です。Emailensは、送信に使うドメインを毎日チェックします。
-
DMARCレポートを代わりに解析。 ruaにEmailensのアドレスを指定すると、自社ドメインで誰が送信しているか、誰が認証に失敗しているかがわかります。
-
変化があればメールで通知。 レコードが変わったり、新しい送信元が認証に失敗し始めたりすると、真っ先にお知らせします。
どのプランでも、すべてのメールソフトに対応
無料プランは無期限、Devは月額¥1,480から
どのプランでも21種類すべてのメールソフトに対応しています。ユーザー数による課金も営業の電話もなく、いつでも解約できます。
年払いならDevとProが2か月分無料
Free
エンジンのすべての機能を、1日30回まで
- 1日30回のチェック
- 21種類すべてのメールソフト
- 生成した受信トレイ1個 · テストメール月100通
- 専用の@tryアドレスでメールを受信
- 受信メッセージの検査、OTPとリンクの抽出
- CSS互換性レポート
- ダークモードのプレビュー
- 監視ドメイン1個 · DNSチェック
- 監査とサンドボックスの履歴7日分
- お試しAI Fix 3回
- お試し実機チェック1回
- MCPサーバー · ローカルツール7種
Dev
開発者1人向け：1日100回のチェック、APIキー、テスト用の受信トレイ
- 1日100回のチェック
- 生成した受信トレイ5個 · テストメール月5,000通
- サンドボックスのSMTP経由、または@tryの受信トレイへ送信
- REST API · キー1個 · CIで受信メールを検査
- 監視ドメイン3個 · SPF、DKIM、DMARC
- 送信前監査とサンドボックスの履歴30日分
- 共有リンクとVisual Diff
- HTMLサイズと102KBのクリッピングのチェック
- MCPでのスクリーンショットと共有
- AI Fix 月10回 + Builder 月3回
Pro
おすすめCIでの送信前ゲートと、すべてのチェックの履歴
- 実機チェック月50回 · 実際のOutlook、Apple Mail、Webメール
- 同じメールの再チェックは7日間無料
- 送信前ゲート · 迷惑メール判定のヒューリスティックとリグレッション
- 生成した受信トレイ25個 · テストメール月50,000通
- サンドボックスのSMTP経由、または@tryの受信トレイへ送信
- CIでのメールQA · GitHub Action
- 監視ドメイン10個 · 変更アラート
- サンドボックスの履歴90日分と監査記録の1年保管
- チェック無制限 · 21種類すべてのメールソフト
- APIへのフルアクセス · キー10個
- AI Fix 月50回 + AI Builder 1日30回
- MCPでのスクリーンショット無制限
- Devのすべての機能
表示価格はすべて消費税込みです。購入手続きで追加される税金はありません。いつでも解約でき、ワンクリックでアップグレードやダウングレードができます。
クライアントが目にするメールを、送信前に確認
HTMLを貼り付けるだけで、Outlook Classicを含む5種類のメールソフトでの表示を確認できます。アカウントは不要です。
無料でメールをチェックEmailensを開発した理由
こんにちは、Philippeです。Emailensを一人で開発しています。
以前、ウェルカムメールがApple Mailでは完璧なのに、Outlookではまったく崩れてしまう理由を突き止めるのに3日かかったことがあります。修正はCSSのプロパティ1つで済みました。こうした問題を見せてくれるツールは、数通のメールのために払うには高すぎました。フリーランスが誰の許可も得ずに支払えるツールが欲しかったのです。
AIでは解決しませんでした。アシスタントは数秒でメールを書きますが、そのメールがOutlookでどう表示されるかは見ていませんし、結果を返して直させる仕組みもありません。Emailensは、その確認と修正のループです。
オープンソースのエンジンは35,000回以上ダウンロードされています。そのうち半分を超えるダウンロードは直近1か月のものです。
そこで、Emailensでは3つのことを大切にしています。
- 手頃な価格。 すべてのプランで21種類すべてのメールソフトをシミュレーションでき、無料から始められます。 実機のスクリーンショットは月額¥2,980（税込）から利用でき、何万円もかかりません。
- オープンソース。 エンジン、CLI、MCPサーバーはGitHubで公開しています。コードを読むことも、自分で動かすこともできます。
- AIアシスタント向けに設計。 ClaudeやCursorが、書いたばかりのメールをチェックし、崩れる箇所を、ご自身が目にする前に修正します。