HTMLメールテンプレート生成ツール
ヘッダー、本文、CTAボタン、フッター、ブランドカラーから、メールクライアントに対応したレスポンシブなHTMLテンプレートを生成します(テーブルレイアウトとインラインスタイル使用)。送信可能なHTMLをコピーするか、リアルタイムでプレビューできます。
入力
メールの <title> タグに使用されます。
多くの受信トレイで件名の横に表示される、非表示のプレビュー文です。
空行ごとに新しい段落になります。単一の改行は <br> に変換されます。
ヘッダーのテキストとボタンに使用されます。
出力
メールのプレビューがここに表示されます。
テーブルレイアウトとインラインスタイルを使用しています。メール配信サービスに貼り付けてください。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-email-template-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"subject": "Welcome to Acme",
"preheader": "Everything you need to get started.",
"headerText": "Acme",
"bodyContent": "Hi there,\n\nThanks for signing up. Your account i…",
"buttonText": "Get Started",
"buttonUrl": "https://example.com/start",
"footerText": "You received this email because you signed up at…",
"brandColor": "#464aff",
"bgColor": "#f4f4f7"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `html-email-template-generator` tool (HTML Email Template Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/html-email-template-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTMLメールテンプレート生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
レスポンシブで、すぐに送信できるHTMLメールを数秒で作成できます。ヘッダー、本文、CTAボタン、フッター、ブランドカラーを入力すると、テーブルレイアウトとインラインスタイルを使ったクリーンなHTMLを生成します。Gmail、Outlook、Apple Mail、Yahooなどで確実に表示されます。HTMLをコピーするか、.htmlファイルとしてダウンロードできます。
メール用HTMLがWeb用HTMLと違う理由
Webサイト用に書いたHTMLは、受信トレイではそのように動きません。メールクライアントはブラウザより何年も遅れており、互換性にばらつきがあります。WindowsのOutlookはMicrosoft Wordのレイアウトエンジンでメッセージを描画し、Gmailは<style>ブロックや外部スタイルシートを削除し、ほとんどのクライアントはflexbox、grid、現代的なCSSの配置をサポートしていません。Chromeで完璧に見えるコードも、受信トレイでは崩れてしまうことがあります。
メール開発者はこの問題に対して、あえて古い方法を使って対処しています。このジェネレーターもその方法に従っています。
- テーブルベースのレイアウト。 構造は
<div>とflexboxではなく、入れ子になった<table>要素で組み立てます。テーブルは、すべてのクライアントが理解できる唯一のレイアウト要素だからです。 - インラインスタイルのみ。 すべてのスタイルは要素に直接付与された
style=""属性に記述します。削除される可能性のある<style>ブロックは使いません。 width属性。 メインコンテナは、安全で広く使われるコンテンツ幅であるwidth="600"をHTML属性として指定します。Outlookは、CSSを無視する場合でもこの属性を尊重するためです。- 適切な文書構造。
<!DOCTYPE html>のラッパー、<title>、そして非表示のプリヘッダー用<div>(多くの受信トレイで件名の横に表示される短いプレビュー文)を含みます。
使い方
- 件名(
<title>に使われます)とプリヘッダーを入力します。 - ヘッダー/ロゴのテキストと本文を入力します。段落の間には空行を入れてください。空行ごとに個別の
<p>になり、単一の改行は<br>になります。 - CTA用のボタンのテキストとURLを追加します(テキストを空欄にするとボタンは表示されません)。
- ブランドカラー(ヘッダーのテキストとボタン)と背景色を選びます。
- リアルタイムプレビューの更新を確認し、HTMLをコピーするか、
email-template.htmlをダウンロードします。
すべての処理はブラウザ内で行われます。入力した内容がサーバーに送信されることはありません。
Mailchimpなどの配信サービスに貼り付けられますか？
はい。出力は標準的で自己完結したHTMLです。多くのメール配信サービスには「独自のコードを貼り付ける」または「HTMLをインポート」というオプションがあります。生成されたマークアップをそこに貼り付けてください。
入力内容は安全ですか？
入力したすべてのテキストは、テンプレートに配置される前にHTMLエスケープされます。そのため、<、>、&、引用符などの文字は、マークアップを壊すことなくそのままテキストとして表示されます。
Outlookでも動作しますか？
はい。テーブルレイアウト、インラインスタイル、width属性は、Wordベースの描画エンジンを持つOutlookでメッセージのレイアウトを保つために使われる手法そのものです。