HTMLメールビルダー

メール対応ブロックをドラッグ＆ドロップで組み立て、既存HTMLも読み込みながらHTMLメールを作成できます。入力内容と端末画像はブラウザ内だけで処理します。

既存のHTMLメールを読み込む

HTMLファイルを選択またはHTMLコードを貼り付け

読み込みと解析は端末内で行います。PitaTools生成HTMLは完全復元し、その他のHTMLは対応ブロックへ変換します。

Email settings

メール全体の設定

HTMLタイトルプリヘッダー外側の背景色#eef4f4本文の背景色#ffffffメール幅

構成

4ブロック

Preview

完成プレビュー

Export

HTMLを書き出す

主要なレイアウトをtableとインラインCSSで生成します。配信前に利用するメール配信サービスでもテストしてください。

生成されたHTMLを確認

<!doctype html>
<!--PITATOOLS_EMAIL:%7B%22version%22%3A1%2C%22settings%22%3A%7B%22title%22%3A%22PitaTools%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9%E3%83%AC%E3%82%BF%E3%83%BC%22%2C%22preheader%22%3A%22%E4%BB%8A%E6%9C%88%E3%81%AE%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%92%E3%81%8A%E5%B1%8A%E3%81%91%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%22%2C%22pageBackground%22%3A%22%23eef4f4%22%2C%22contentBackground%22%3A%22%23ffffff%22%2C%22width%22%3A600%7D%2C%22blocks%22%3A%5B%7B%22id%22%3A%22starter-heading%22%2C%22type%22%3A%22heading%22%2C%22text%22%3A%22%E4%BB%8A%E6%9C%88%E3%81%AE%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%22%2C%22level%22%3A1%2C%22align%22%3A%22center%22%2C%22color%22%3A%22%23132f38%22%7D%2C%7B%22id%22%3A%22starter-text%22%2C%22type%22%3A%22text%22%2C%22text%22%3A%22%E3%81%84%E3%81%A4%E3%82%82%E3%81%94%E5%88%A9%E7%94%A8%E3%81%84%E3%81%9F%E3%81%A0%E3%81%8D%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94%E3%81%96%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%5Cn%E6%9C%80%E6%96%B0%E6%83%85%E5%A0%B1%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%8A%E5%B1%8A%E3%81%91%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%22%2C%22align%22%3A%22left%22%2C%22color%22%3A%22%234f6870%22%7D%2C%7B%22id%22%3A%22starter-image%22%2C%22type%22%3A%22image%22%2C%22src%22%3A%22%22%2C%22alt%22%3A%22%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%22%2C%22link%22%3A%22%22%2C%22width%22%3A560%2C%22align%22%3A%22center%22%7D%2C%7B%22id%22%3A%22starter-button%22%2C%22type%22%3A%22button%22%2C%22text%22%3A%22Web%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E8%A6%8B%E3%82%8B%22%2C%22link%22%3A%22https%3A%2F%2Fexample.com%2F%22%2C%22background%22%3A%22%23087f8c%22%2C%22color%22%3A%22%23ffffff%22%2C%22align%22%3A%22center%22%7D%5D%7D-->
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>PitaToolsニュースレター</title>
<style>
  @media only screen and (max-width:620px) {
    .email-container { width:100% !important; }
    .email-column { display:block !important; box-sizing:border-box !important; width:100% !important; }
  }
</style>
</head>
<body style="margin:0;padding:0;background:#eef4f4;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">今月のお知らせをお届けします。</div>
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#eef4f4" style="background:#eef4f4;">
<tr><td align="center" style="padding:24px 10px;">
<table role="presentation" class="email-container" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-collapse:collapse;">
<tr><td style="padding:20px 24px 10px;"><h1 style="margin:0;color:#132f38;font-family:Arial,'Helvetica Neue',sans-serif;font-size:30px;line-height:1.35;text-align:center;">今月のお知らせ</h1></td></tr><tr><td style="padding:12px 24px;"><p style="margin:0;color:#4f6870;font-family:Arial,'Helvetica Neue',sans-serif;font-size:16px;line-height:1.75;text-align:left;">いつもご利用いただきありがとうございます。<br>最新情報をまとめてお届けします。</p></td></tr><tr><td style="padding:12px 20px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center"><div style="box-sizing:border-box;width:100%;max-width:560px;padding:48px 20px;color:#688087;background:#edf4f5;border:1px dashed #aac2c7;font-family:Arial,'Helvetica Neue',sans-serif;font-size:14px;text-align:center;">画像URLを設定してください</div></td></tr></table></td></tr><tr><td style="padding:16px 24px 22px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td bgcolor="#087f8c" style="border-radius:8px;"><a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 24px;color:#ffffff;font-family:Arial,'Helvetica Neue',sans-serif;font-size:16px;font-weight:bold;line-height:1;text-decoration:none;">Webサイトを見る</a></td></tr></table></td></tr>
</table>
</td></tr>
</table>
</body>
</html>

Guide

このツールでできること

見出し、文章、画像、ボタンなどのブロックを並べ、配信用HTMLメールのプレビューとHTMLを作成できます。メール送信は行わず、配信サービスへ登録する原稿をブラウザ内で準備します。

How it works

処理の仕組み

選択したブロックをメールクライアントとの互換性を考慮したテーブルレイアウトへ変換し、インラインスタイルを含むHTMLとして出力します。編集状態は送信先サーバーへアップロードしません。

Examples

具体的な使用例

入力と結果の例

入力: ロゴ、キャンペーン見出し、説明文、詳細ページへのボタン
結果: 1カラムで幅を抑えたHTMLメールとプレビュー

主要要素を縦に並べることで、画面幅が狭いメールアプリでも読み順を保ちやすくなります。

Cautions

利用時の注意点

メールクライアントごとにCSS対応が異なるため、Gmail、Outlook、Apple Mailなど実際の受信環境でテストしてください。
画像には公開HTTPS URLと代替テキストを設定し、画像だけで内容を伝えないでください。

Next step

結果の活用方法

生成HTMLを配信サービスへ貼り付けた後、テスト送信でリンクと差出人情報を確認します。
件名、プリヘッダー、配信停止リンクは利用する配信サービス側でも設定してください。

更新日：2026.07.26

Guides

特徴

7種類のメール対応ブロック
既存HTMLのファイル・コード読み込み
PC・スマートフォンプレビュー
table・インラインCSSのHTML出力

Steps

使い方

新規作成するか、既存HTMLをファイルまたは貼り付けで読み込みます。
内容、色、リンク、並び順を編集します。
プレビューを確認してHTMLをコピーまたは保存します。

PitaTools

活用例

メールマガジンの制作
キャンペーン案内メール
既存HTMLメールの再編集
配信サービスへ登録するHTMLの下書き

Example

入力例・結果例

入力例: 公開予定ページのタイトル、URL、本文など
結果例: 7種類のメール対応ブロック

ファイルや複数項目を使うツールでは、安全のためサンプルを自動選択せず利用イメージのみ表示します。

Privacy

プライバシーとデータ処理

公開中のツールはブラウザ完結です。入力した文章、URL、画像、PDF、ファイル、パスワードをPitaToolsのサーバーへ送信せず、端末内で処理します。

FAQ

よくある質問

このツールからメールを送信しますか？

いいえ。HTMLの作成と保存だけを行い、メール送信機能はありません。

他のサービスで作ったHTMLも読み込めますか？

見出し、本文、画像、リンクなどの対応要素を抽出してブロックへ変換します。複雑な装飾は元の表示と完全に一致しない場合があります。

端末から選んだ画像もHTMLに入りますか？

端末画像はプレビュー専用です。実際の配信HTMLには、インターネットから参照できる公開画像URLを設定してください。

すべてのメールソフトで同じ表示になりますか？

主要な互換性を考慮して生成しますが、配信前に利用するメール配信サービスと実機で確認してください。

Explore · SEO・コンテンツ

不具合報告・改善要望

「HTMLメールビルダー」についてお気づきの点を運営者へお知らせください。

報告・要望を送る