メール文例集

紹介

「*|〇〇|*」の部分はカスタマイズしてご使用ください。
差し込みタグとして本文に挿入することも可能です。

件名

  • デザイン
  • コード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="copyright" content="*|自社名|*">
<!--[if mso]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
<title></title>
<style type="text/css" class="general">
.l-wrapper { margin: 30px 0; }
@media screen and (max-width: 480px) {
.body { font-size: 75%; }
.l-wrapper { margin: 0; }
.l-oneColumn { padding: 0; }
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="body" bgcolor="#f2f2f2" style="font-family: YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; margin: 0 !important; padding: 0;">
<center class="l-wrapper" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0; table-layout: fixed; width: 100%;">
<div class="l-wrapperInner" style="margin: 0 auto; max-width: 640px;">
<!--[if mso]>
<table width="640" align="center">
<tr>
<td>
<![endif]-->
<table class="l-main" align="center" cellpadding="0" cellspacing="0" style="background: #fff; border-collapse: collapse; border-spacing: 0; max-width: 680px; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="u-fullWidthImage" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<img src="https://files.ecumerun.com/email-templates/promotion/new-item/introduction/main_image.gif" alt="" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="l-oneColumn s-intro" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px; padding-bottom: 36px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="u-center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center;">
<div class="s-introTitle" style="color: #039be5; font-size: 187.5%; font-weight: bold; line-height: 1.25; margin: 27px 0 23px;">*|名前|*様</div>
<p class="s-introText" style="font-size: 100%; line-height: 1.5; margin: 0;">いつも弊社製品をご利用いただきありがとうございます。<br>○○○事務局です。</p>
<p class="s-lead" style="font-size: 150%; line-height: 1.5; margin: 12px 0;">「〜〜〜〜が〜〜〜〜…」<br>「〜〜で困っている…」</p>
<p class="s-introText" style="font-size: 100%; line-height: 1.5; margin: 0;">そんな方に朗報です!<br>このたび、○○○シリーズから新製品○○○が発売になりました。</p>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="s-line" height="10" bgcolor="#b3e6fd" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<img src="https://files.ecumerun.com/email-templates/promotion/new-item/introduction/spacer.gif" width="100%" height="10" alt="" style="border: 0 none; line-height: 1; outline: none; text-decoration: none;">
</td>
</tr>

<tr>
<td class="s-main" bgcolor="#ecf9fe" style="background: #ecf9fe; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 30px 30px;">
<!--[if mso]>
<table width="480" align="center">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" align="center" class="s-main__inner" style="border-collapse: collapse; border-spacing: 0; max-width: 480px; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<div class="s-title u-center" style="color: #039be5; font-size: 187.5%; font-weight: bold; line-height: 1.25; margin: 27px 0; text-align: center;">○○○シリーズ新製品○○○</div>
</td>
</tr>

<tr>
<td class="u-fullWidthImage" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<img src="https://files.ecumerun.com/email-templates/promotion/new-item/introduction/product.png" alt="" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="s-main__body" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 10px 0 20px;">
<div class="s-main__heading" style="color: #039be5; font-size: 100%; font-weight: bold; line-height: 1.5; margin: 6px 0;">◆商品特徴</div>
<table width="100%" cellpadding="0" cellspacing="0" class="s-main__list" style="border-collapse: collapse; border-spacing: 0; color: #424242; font-size: 87.5%; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">「○○○」は、インターネットを通して毎日繰り返し○○○をすることで、楽しみながら○○○のレベルアップがはかれる便利ツールです。</td>
</tr>
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">○○○研究所の協力を得て開発し、話題になっている○○○をベースにした画期的な商品となりました。</td>
</tr>
</table>

<div class="s-main__heading" style="color: #039be5; font-size: 100%; font-weight: bold; line-height: 1.5; margin: 6px 0;">◆価格</div>
<table width="100%" cellpadding="0" cellspacing="0" class="s-main__list" style="border-collapse: collapse; border-spacing: 0; color: #424242; font-size: 87.5%; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">ダミーテキスト</td>
</tr>
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">ダミーテキスト</td>
</tr>
</table>

<div class="s-main__heading" style="color: #039be5; font-size: 100%; font-weight: bold; line-height: 1.5; margin: 6px 0;">◆販売店</div>

<table width="100%" cellpadding="0" cellspacing="0" class="s-main__list" style="border-collapse: collapse; border-spacing: 0; color: #424242; font-size: 87.5%; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">ダミーテキスト</td>
</tr>
<tr>
<td class="s-main__listDisc" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-main__listItem" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 7px 0;">ダミーテキスト</td>
</tr>
</table>
</td>
</tr>

<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#039be5" width="100%" style="color: #fff; font-weight: bold; font-size: 130%; text-align: center; padding: 20px; background: #039be5;">
<![endif]-->
<a class="s-button" href="https://www" title="○○○を見る" target="_blank" style="background: #039be5; border-radius: 6px; color: #fff; display: block; font-size: 130%; font-weight: bold; line-height: 1.5; margin: 0 auto; max-width: 440px; padding: 20px; text-align: center; text-decoration: none;">○○○を見る</a>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>

</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>

<tr>
<td class="s-line" height="10" bgcolor="#b3e6fd" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<img src="https://files.ecumerun.com/email-templates/promotion/new-item/introduction/spacer.gif" width="100%" height="10" alt="" style="border: 0 none; line-height: 1; outline: none; text-decoration: none;">
</td>
</tr>

<tr>
<td class="l-oneColumn" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="s-footer u-center" style="border-collapse: collapse; font-size: 100%; font-weight: bold; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0; padding: 36px 0; text-align: center;">
<p>〜〜でお悩みの方はぜひ店頭でお手にとって体験ください!<br>*|名前|*様のお越しをお待ちしております。</p>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="l-copyright s-copyright" style="background: #f2f2f2; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<p style="font-size: 81.25%; margin: 10px 0; text-align: center;">*|自社名|* &copy; 2017</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>