# HTML メール プレビュー：メールHTMLを幅別に確認 > このツールは、メールのHTMLを指定した幅で描画しPNGで保存する無料ツールです。レイアウト確認用で、メールアプリでのテストではありません。 HTML メール プレビューは、メールのHTMLを指定した幅でヘッドレスChromium（画面を持たないブラウザエンジン）に描画し、PNG画像で保存できる無料のオンラインツールです。メールを送る前に、レイアウト、文字、色、余白をすばやく確認できます。Gmailなどのメールアプリの表示を再現するものではありません。 ## 主な仕様 - 幅は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ページをご覧ください。 ## 使い方 1. メールのHTMLを入力欄に貼り付けます。CSSは、インラインで書くか、style要素に含めてください。 2. 幅を選びます。600px、375px、320px、800pxから選べます。まず600pxで確認し、狭いスマートフォンの画面を想定する場合は375pxか320pxを確認します。 3. 配色とピクセル密度を選びます。配色はライトかダーク、ピクセル密度は1xか2xから選びます。小さな文字や細い罫線を細かく確認するときは2xを使います。 4. キャプチャの高さを選びます。800px、1200px、または2000pxから選びます。アカウント登録なしで使う場合は、プレビューの前にセキュリティ確認が必要です。 5. 「メールをプレビュー」をクリックし、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メールを自分の管理するいくつかの受信箱に送ってください。メールアプリはスタイルを書き換えたり画像を遮断したりするため、実際に送ったときの表示だけが読者に見えるものです。 ## 関連ツール - [HTMLを画像に変換](https://aiipworld.com/ja/tools/html-to-image/index.md) - [サイト スクリーンショットを無料で作成](https://aiipworld.com/ja/tools/website-screenshot/index.md) - [HTMLをPDFに変換](https://aiipworld.com/ja/tools/html-to-pdf/index.md) ページ： https://aiipworld.com/ja/tools/html-email-preview/