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>

PitaTools

特徴

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

Steps

使い方

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

PitaTools

活用例

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

Example

入力例・結果例

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

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

Privacy

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

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

FAQ

よくある質問

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

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

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

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

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

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

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

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

Explore · SEO・コンテンツ

不具合報告・改善要望

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

報告・要望を送る