HTML メール プレビュー：メールHTMLを幅別に確認
HTML メール プレビューは、メールのHTMLを指定した幅でヘッドレスChromium（画面を持たないブラウザエンジン）に描画し、PNG画像で保存できる無料のオンラインツールです。メールを送る前に、レイアウト、文字、色、余白をすばやく確認できます。Gmailなどのメールアプリの表示を再現するものではありません。
- Chromiumは、指定した幅でHTMLを描画します。
- このツールではJavaScriptはオフです。
- 無料ツールのキャプチャは高さ2000pxまでで、それより下の部分はPNGに含まれません。
このプレビューは、選択した幅でヘッドレスChromium（画面を持たないブラウザエンジン）がHTMLを描画した結果を示します。GmailやOutlookなどのメールアプリを再現するものではありません。各アプリはHTMLとCSSを独自に書き換えたり制限したりします。実際に確認したい受信箱にテストメールを送ってください。
1.3 KB / 無料ツールの上限 256 KB
ダークオプションはブラウザのダークカラー設定を有効にするため、prefers-color-schemeで書かれたCSSのみ変化します。JavaScriptはオフになります。外部の画像は公開アドレスから読み込まれます。
セキュリティ確認を完了すると、ボタンが有効になります。
結果
ここに画像が表示されます。
無料のWebツールでは、高さ2000pxまでのキャプチャしかできません。より高いキャプチャはAPIをご利用ください。
保存期間：Webツールの結果は10分後に削除され、履歴は保存されません。APIの結果は無料プランでは1日、StarterとProでは7日保存されます（BusinessとScaleでは30日）。
アカウント登録なしで利用可能
無料で毎分10、毎日50まで。
実ブラウザによるレンダリング
APIと同じエンジンであるヘッドレスChromium（画面を持たないブラウザエンジン）です。
自動的に削除
Webツールの結果は10分後に削除されます。
プライバシー：送信された内容は、このファイルを作成するためにのみ使用されます。作業用のコピーはジョブの終了時に削除され、結果は10分後に削除されます。詳しくはプライバシーポリシーをご覧ください。
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"一括処理
Webツールは一度に1ドキュメントまで処理します。APIではドキュメントごとに一つのリクエストとなるため、プランが許す数だけスクリプトで処理できます。
詳細設定
ページ全体のキャプチャ（full_page）、領域を指定した切り抜き、リクエストヘッダー、カスタムユーザーエージェントはAPIのオプションです。詳しくはドキュメントをご覧ください。
保存期間
Webツールの結果は10分保存されます。無料APIの結果は1日、StarterとProの結果は7日、BusinessとScaleの結果は30日保存されます。Webツールでは、訪問者ごとに毎分10回、毎日50回まで変換できます。
ひとことで言うと
このツールは、メールのHTMLを指定した幅で描画しPNGで保存する無料ツールです。レイアウト確認用で、メールアプリでのテストではありません。
主な仕様
- 幅は600px、375px、320px、800pxから選べ、ライトまたはダークの配色と1xまたは2xのピクセル密度を選べます。JavaScriptはオフです。
- キャプチャの高さは800px、1200px、無料ツールでは2000pxまでです。ログインしているユーザーは2クレジットからメール全体を取得できます。
- Gmail、Outlookなどのメールアプリを再現せず、メール送信、スパムスコアの確認、リンクの確認は行いません。
- アカウント登録なしの無料利用では、訪問者ごとに毎分10件、毎日50件まで変換でき、透かしは入りません。ログインしているユーザーは、レンダリングごとに1クレジットを使用します。毎月100無料クレジットが付与されます。
- ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。
- 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。
使い方
- メールのHTMLを入力欄に貼り付けます。CSSは、インラインで書くか、style要素に含めてください。
- 幅を選びます。600px、375px、320px、800pxから選べます。まず600pxで確認し、狭いスマートフォンの画面を想定する場合は375pxか320pxを確認します。
- 配色とピクセル密度を選びます。配色はライトかダーク、ピクセル密度は1xか2xから選びます。小さな文字や細い罫線を細かく確認するときは2xを使います。
- キャプチャの高さを選びます。800px、1200px、または2000pxから選びます。アカウント登録なしで使う場合は、プレビューの前にセキュリティ確認が必要です。
- 「メールをプレビュー」をクリックし、PNGをダウンロードします。結果は10分後に削除されるため、ファイルは保存しておきましょう。
出力例
HTML メール プレビューの使い方
プレビューには、メールのコードをブラウザが描画する見た目で表示されます。HTMLを貼り付けて幅を選ぶと、Chromiumで描画されたPNGが得られます。
作成や編集の途中では、コードを変えるたびにプレビューを実行し、幅ごとの画像を見比べると便利です。
ライトとダークの両方の配色を確認してから次に進みましょう。アカウント登録なしで使う場合はセキュリティ確認が必要です。ログインしているユーザーは確認を省略し、クレジットを使います。
プレビューで確認できないこと
このツールで確認できるのは、指定した幅でChromiumがHTMLとCSSを描画した結果です。レイアウト、文字、色、余白、画像を、ブラウザでの見え方として確認できます。
Gmail、Outlook、Apple Mailなどのメールアプリがメールを表示する方法は再現しません。メールアプリはスタイルを書き換えたり、CSSを一部削除したり、画像を遮断したり、独自のダークモードを適用したりすることがあります。このツールではそれらは行われません。
描画の確認だけを行うツールです。配信を確かめるには、いくつかの実際の受信箱に自分でテスト送信し、リンクは一つずつ手で確認してください。
- HTMLを指定した幅でChromiumに描画します。
- ライトまたはダークの配色を、ブラウザが認識する形で表示します。
- Gmail、Outlook、その他のメールアプリを再現しません。
- メールの送信、スパムの確認、リンクの確認は行いません。
幅の選び方とスマートフォンでの見え方
幅は600px、375px、320px、800pxから選べます。まず600pxで主なレイアウトを確認します。そのあと、狭いスマートフォンの画面を想定して375pxか320pxで確認し、広いレイアウトは800pxで見ます。
幅は、HTMLが収まる横幅の条件を変えます。デバイスやスマートフォンのブラウザを再現するものではありません。表と画像が想定どおり縮むか、積み重なるかを確認してください。
幅を固定した表が指定した幅より広いと、画像の端からはみ出します。
ダークの配色
ダークの配色では、ブラウザのダーク設定をオンにした状態でメールを描画します。
反映されるのは、prefers-color-scheme: dark のブロック内に書かれたCSSだけです。ダーク用のルールがなければ、ダークのプレビューはライトと同じに見えます。先にダーク用のルールを追加し、両方の配色を確認してください。
このツールは、一部のメールアプリのように色を書き換えることはしません。ここで正しく見える色でも、実際の受信箱では違って見えることがあります。テスト送信して確かめてください。
画像、フォント、リンク
リモート画像は、公開されたhttp://またはhttps://のアドレスから読み込まれます。localhostなどのプライベートアドレスにある画像はブロックされます。
お使いのデバイス内にあるパスは読み込めません。画像は完全なアドレスで指定してください。
レンダリングサーバーで使えるフォントは、Liberation Sans、Liberation Serif、Noto Sans、Noto Serifです。ArialとHelveticaはLiberation Sansに、Times New RomanはLiberation Serifに割り当てられます。お使いのデバイスのフォントは使えません。それ以外のフォントは、公開URLまたはデータURLから@font-faceで読み込んでください。
このツールはリンクが機能するかを確認しません。リンクは一つずつ手で確認してください。
送信前のチェックリスト
メールを誰かに送る前に、次の項目を確認してください。プレビューで確認できるのは一部です。残りは実際の送信で確かめる必要があります。
- 600px、375px、320pxでプレビューし、画面の端からはみ出すものがないか確認する
- ライトの配色だけでなく、ダークの配色も確認する
- すべての画像がhttps://のアドレスで、読み込めることを確認する
- 本文を1xと2xで読み、読みやすいか確認する
- Webサイトへのリンクを含め、リンクを一つずつ手で確認する
- いくつかの実際の受信箱にテスト送信し、読者が使うメールアプリで表示を確認する
メール全体のスクリーンショット
無料ツールは、上端から2000pxまでの範囲をキャプチャします。長いメールでは、キャプチャの高さを大きくするか、ページ全体のスクリーンショットを使います。
ログインしているユーザーは、メール全体をページ全体のスクリーンショットで取得できます。費用は2クレジットからです。高さは16,384pxまでで、それより高いページは切り取られ、結果にその旨が表示されます。
コードからHTMLメールのプレビューを実行する
同じレンダリングは、自分のコードから実行することもできます。POST /v1/renderにscreenshotの操作を送ります。html欄にメールのHTMLを入れ、viewportの幅とcolor_schemeを指定します。
APIは202とjob_idを返します。GET /v1/jobs/:idをポーリングし、statusがsucceeded、failed、またはtimeoutになるまで確認してください。成功したジョブのPNGは、download_urlからダウンロードします。
download_urlのリンクは期限が短いため、ジョブが成功したらすぐにダウンロードしてください。failedとtimeoutのジョブのクレジットは返却されます。webhookはまだ利用できないため、ジョブの完了を知る方法はポーリングだけです。一括処理用のエンドポイントはないので、メール1通につきリクエストを1回送ってください。
APIはデフォルトでJavaScriptを実行します。ツールと同じ結果にするには、javascriptをfalseに設定してください。認証はAPIキーをBearerトークンとして送ります。1回のシンプルなレンダリングは1クレジットかかります。
制作の途中でプレビューを使う
制作の段階に合わせて使うと便利です。一つ変更を加えたら600pxでプレビューし、ほかの変更を加える前にPNGを確認します。
PNGのコピーを残して、バージョンごとに比べられるようにしておきましょう。結果は10分後に削除されるため、ファイルは自分で保存してください。
一回のプレビューは、一つの幅で見た一つの表示にすぎず、すべてのアプリでの評価ではありません。複数の幅と両方の配色で確認してから、レイアウトが仕上がったと判断してください。
よくある質問
Gmailの表示も確認できますか？
いいえ、確認できません。このツールは指定した幅でHTMLをChromiumで描画するだけで、Gmail、Outlook、Apple Mailなどのメールアプリを再現しません。実際の表示は、テスト送信して各アプリで確かめてください。
スマートフォンの幅で確認するには？
プレビューを実行する前に、幅を375pxか320pxに選んでください。600pxの画像と比べると違いを確認しやすくなります。幅の設定はスマートフォンのエミュレーターではありません。
ダークモードのプレビューはできますか？
はい、できます。配色でダークを選ぶと、ブラウザのダーク設定がオンになった状態で描画されます。ダーク用のCSSだけが反映され、ツールが色を書き換えることはありません。
画像が表示されないのはなぜですか？
画像は公開されたhttp://またはhttps://のアドレスから読み込む必要があるためです。localhostなどのプライベートアドレスの画像はブロックされ、お使いのデバイスだけにあるパスも読み込めません。画像のアドレスをブラウザで開いて、表示されるか確かめてください。
スクリプトは動きますか？
動きません。このツールはJavaScriptをオフにして描画します。APIはデフォルトでJavaScriptを実行するため、同じ結果にするにはjavascriptをfalseに設定してください。
このツールからテストメールを送れますか？
送れません。このツールはPNGを作るだけで、メールは送信しません。テストメールは、お使いのメールサービスから自分のいくつかの受信箱に送ってください。
スパムやリンクは確認できますか？
いいえ、確認できません。スパムスコアは表示されず、リンクが機能するかも確認しません。リンクは送信前に手で確認してください。
メール全体を取得できますか？
ログインしているユーザーなら、メール全体をページ全体のスクリーンショットで取得できます。無料ツールは2000pxまでの高さをキャプチャします。ページ全体のスクリーンショットは2クレジットからで、高さは16,384pxまでです。
結果はどのくらい保存されますか？
10分後に削除されます。履歴は残らないため、プレビューができたらPNGを保存してください。
アカウントは必要ですか？
必要ありません。アカウント登録なしの利用は無料ですが、セキュリティ確認が必要です。ログインしているユーザーはセキュリティ確認を省略し、クレジットを使います。
PNGに透かしは入りますか？
無料ツールの出力には透かしはありません。
プレビューが途中で切れて見えるのはなぜですか？
キャプチャの高さで画像の範囲が決まっているためです。無料ツールでは、キャプチャの高さを2000pxまで大きくできます。メール全体を見るには、ログインしているユーザーのページ全体のスクリーンショットを使ってください。
メールの総合テストツールですか？
いいえ、レイアウトを手早く確認するためのツールです。指定した幅でChromiumがコードを描画し、間隔、文字、色を確認できます。ほかのメールアプリでの表示は再現せず、何も送信しません。
実際の受信箱でも確認すべきですか？
はい、確認してください。プレビューでレイアウトの問題を早めに見つけ、テストHTMLメールを自分の管理するいくつかの受信箱に送ってください。メールアプリはスタイルを書き換えたり画像を遮断したりするため、実際に送ったときの表示だけが読者に見えるものです。
アプリ内や一括処理で使いたい場合
このツールはレンダリングAPIで動作するため、同じ画像を、お使いのコードから一回のHTTPリクエストで取得できます。 無料アカウントには、毎月100クレジットが含まれています。