HTMLメール作成
HTML Email Builder
ブロックを積んで表組み・インラインスタイルのHTMLメールとVML対応のボタンを作り、同じブロックからテキスト版も書き出します。
メールのクライアントどうしが合意している配置しか作れないブロックエディタです。入れ子の表、インラインのスタイル、そしてボタンは2通りに描きます。OutlookのWordエンジンに、役に立たない背景の付いたテキストリンクではなく、本物の図形を渡すためです。HTMLとテキスト版を一緒に書き出し、テキストはタグを剥がして作るのではなく、ブロックから書き起こします。
メール設定
ブロック
- 見出し
- 段落
- ボタン
- 区切り線
- 二段組み
- フッター
プレビュー
クライアントの画面を撮ったものではありません。書いた HTML にそのクライアントの文書化された削除規則を当てた結果を、このブラウザーが描いたものです。
- Windows 版 Outlook は Microsoft Word で描画します。この枠はブラウザです。削除規則を当てたあと Word に何が残るかは見せられますが、Word がそれをどう配置するかは見せられません。改行・間隔・画像の拡大縮小（Word は 120 dpi の画面でも 96 dpi を前提にします）は違って出ます。
このクライアントで消えたもの · 2
宣言： border-radius: 6px · border-radius: 8px
ボタンは二重に描かれます。Outlook の Word エンジン向けの VML 図形と、それ以外向けのリンクで、見えるのは常に片方だけです。
この出力に対する検査結果
崩れる項目も効果が消える項目もありません。こう組む理由がそれです。
5 KB · Gmail の 102 KB のうち 5%
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>今週の Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">今週変わったことと、続きの読み場所‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">今週のお知らせ</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">こんにちは。<br>今週変わったことをまとめました。表で組んだレイアウトなので、Outlook でもそのまま届きます。</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">全文を読む</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">全文を読む</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">ここは左の段です。二つの段は表の一行でできています。</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">こちらは右の段です。flexbox を使っていないので、Word エンジンでも横に並びます。</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">差出人の住所 · ソウル<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">配信停止</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>テキスト本文
今週変わったことと、続きの読み場所 今週のお知らせ ======= こんにちは。 今週変わったことをまとめました。表で組んだレイアウトなので、Outlook でもそのまま届きます。 全文を読む: https://example.com/news —————————————————————————————— ここは左の段です。二つの段は表の一行でできています。 こちらは右の段です。flexbox を使っていないので、Word エンジンでも横に並びます。 —————————————————————————————— 差出人の住所 · ソウル 配信停止: https://example.com/unsubscribe
タグを外して作るのではなく、ブロックから組み立てています。だからリンクが URL の壁ではなく文として読めます。
使い方
メッセージの土台を決めます
件名、プリヘッダー、幅、色です。プリヘッダーは、受信一覧が件名の後ろに出す灰色の行です。空にしておくと、クライアントは最初に来たテキストを拾い、たいていそれは「ブラウザで表示」になります。
ブロックを積みます
見出し、段落、画像、ボタン、2段組み、区切り線、余白、フッターです。2段組みのブロックはメディアクエリではなく表の行なので、メディアクエリを無視するクライアントでも2段のままです。
プレビューと判定を見ます
HTMLメールの互換性チェックと同じ、クライアントごとの枠です。その下に、この出力に対するチェック側自身の読みが出ます。そこは空のままであるはずで、この作り方をしている目的がそれです。
両方のパートを書き出します
multipart/alternativeとして送ってください。HTMLだけのメッセージは、どの迷惑メールフィルタでも評価が下がりますし、メールを読み上げるものにとっては読めません。
よくある質問
HTMLの中にボタンが2回出てくるのはなぜですか。
片方は<!--[if mso]-->のコメントの中に置いたVMLの図形で、OutlookのWordエンジンだけがそれを読みます。もう片方は、Wordが無視するコメントの中に置いたふつうのアンカーです。どんなときも見えるのはちょうど片方だけです。VMLのほうがないと、Outlookではパディングが落ち、押せるのは文字そのものだけになります。
Windowsで韓国語は正しく表示されますか。
フォントの並びは、どの欧文書体よりも先にApple SD Gothic Neo、Malgun Gothic、Noto Sans KRを置いています。Outlookはウェブフォントが失敗したとき、次のフォントではなくTimes New Romanに落ちるからです。欧文を先に置いた並びが、ハングルが箱になる道です。
自分のHTMLをここに貼れますか。
貼れません。このページは組み立てるだけです。既存のHTMLはHTMLメールの互換性チェックへ持っていってください。何を変えるべきかを伝え、必要な要素については差し替えのマークアップも生成します。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
メールクライアント対応表
Email Client Support Table
Gmail・Outlook・Apple Mail・Yahoo・Samsung Mail・ThunderbirdがHTMLメールで何に対応しているかを、caniemailの実機試験の結果と最終試験日つきで示します。
送信メールと受信メールの比較
Sent vs Delivered Comparison
自分のアカウントから使い捨てアドレスに下書きを送ると、送信経路が何を書き換えたか（リダイレクトに包まれたリンク、消えたstyleブロック、足されたビーコン、使われた符号化）が分かります。
HTMLメールの互換性チェック
HTML Email Compatibility Check
メールのHTMLを各クライアントが実際に対応している範囲と突き合わせ、崩れる要素を名指しして、GmailやOutlookなどで何が残るかを並べて見せます。
怪しいURLの確認
Suspicious URL Check
開く前にリンクの形（紛らわしい文字・IPそのままのホスト・@のごまかし・深いサブドメイン・妙なポート・短縮サービス）を調べ、望めばリダイレクトをたどってドメインの登録時期も引きます（評判データベースは使いません）。
圧縮ファイルの中身検査
Archive Inspector
解凍せずにzipの中を開き、パスをはみ出す項目・実行ファイル・マクロ・zip爆弾に印を付けます。
音声形式変換
Audio Converter
MP3・WAV・FLAC・AAC・OGG・Opusのあいだを、ビットレートとサンプリング周波数を決めて変換します。