本文へスキップ

MD-02 — LAYOUTS

レイアウト基本枠15点 取扱中

600pxラッパー・2カラム・スペーサー。メールの骨組み。 すべてテーブルレイアウト+インラインスタイルで、Outlook/Gmail/Apple Mailに安全に投函できます。

MD02-001-JP

600px基本ラッパーBase Wrapper

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F0EBE0" style="background-color:#F0EBE0;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;background-color:#ffffff;" bgcolor="#ffffff">
        <tr>
          <td style="padding:32px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;line-height:1.8;color:#26221F;">
            平素より当店をご利用いただき、誠にありがとうございます。今月のおすすめ商品と、会員様限定のご案内をお届けします。
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 772 g OutlookGmailApple MailORIGINAL
MD02-002-JP

2カラム(モバイル縦積み)Two Columns

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td class="stack" width="50%" valign="top" style="padding:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;background-color:#F5F2EA;">
      <strong>秋冬の新作コート</strong><br>
      軽さと暖かさを両立した、今季いちばんの自信作です。
    </td>
    <td class="stack" width="50%" valign="top" style="padding:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;background-color:#EDE8DC;">
      <strong>あたたかいニット</strong><br>
      チクチクしない上質メリノウールを使用しました。
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .stack { display: block !important; width: 100% !important; }
}
重量 930 g OutlookGmailApple MailORIGINAL
MD02-003-JP

3カラムThree Columns

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td class="stack3" width="33%" valign="top" align="center" style="padding:16px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#26221F;">
      <strong style="font-size:15px;color:#D7000F;">送料無料</strong><br>5,000円以上のご注文で
    </td>
    <td class="stack3" width="33%" valign="top" align="center" style="padding:16px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#26221F;border-left:1px solid #D2CBBB;border-right:1px solid #D2CBBB;">
      <strong style="font-size:15px;color:#D7000F;">翌日配送</strong><br>15時までのご注文で
    </td>
    <td class="stack3" width="33%" valign="top" align="center" style="padding:16px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#26221F;">
      <strong style="font-size:15px;color:#D7000F;">返品無料</strong><br>30日以内なら
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .stack3 { display: block !important; width: 100% !important; }
}
重量 1231 g OutlookGmailApple MailORIGINAL
MD02-004-JP

左画像・右テキストImage + Text

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="180" valign="top" style="padding:12px 0;">
      <img src="https://example.com/your-image.jpg" width="180" height="120" alt="商品写真" style="display:block;width:180px;height:auto;border:0;background-color:#E5DFD0;">
    </td>
    <td valign="top" style="padding:12px 0 12px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;">
      <strong style="font-size:16px;">職人が語る、革の育て方</strong><br>
      毎日使うほど手になじむ理由を、40年ものづくりを続ける職人に聞きました。
    </td>
  </tr>
</table>
重量 756 g OutlookGmailApple MailORIGINAL
MD02-005-JP

スペーサー行Spacer

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td height="32" style="height:32px;font-size:0;line-height:0;">&nbsp;</td>
  </tr>
</table>
重量 225 g OutlookGmailApple MailORIGINAL
MD02-006-JP

背景色セクション帯Color Band

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#26221F" style="background-color:#26221F;">
  <tr>
    <td align="center" style="padding:28px 12px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:18px;font-weight:bold;line-height:1.6;color:#ffffff;">
            セクションの区切りに使える背景色帯
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 626 g OutlookGmailApple MailORIGINAL
MD02-007-JP

非対称2カラム(30/70サイドバー)Asymmetric Sidebar

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td class="asy-stack" width="30%" valign="top" align="center" style="padding:20px 12px;background-color:#EDE8DC;">
      <img src="https://example.com/your-image.jpg" width="56" height="56" alt="アイコン" style="display:block;margin:0 auto;width:56px;height:56px;border:0;border-radius:50%;background-color:#C9A063;">
    </td>
    <td class="asy-stack" width="70%" valign="top" style="padding:20px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;">
      <strong style="font-size:16px;">ポイントが2倍たまります</strong><br>
      8月末までのお買い物は、通常100円=1ポイントのところ2ポイント進呈。エントリー不要でご利用いただけます。
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .asy-stack { display: block !important; width: 100% !important; }
}
重量 1026 g OutlookGmailApple MailORIGINAL
MD02-008-JP

枠線付きコンテンツボックスBordered Box

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:4px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1px solid #D2CBBB;border-radius:4px;">
        <tr>
          <td style="padding:24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;">
            <strong style="font-size:16px;color:#26221F;">初回限定クーポンのご案内</strong><br>
            会員登録から30日以内のご購入で、10%OFFクーポンをご利用いただけます。マイページの「クーポン」からご確認ください。
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 810 g OutlookGmailApple MailORIGINAL
MD02-009-JP

F型レイアウト(左揃えニュースレター)F-Pattern Newsletter

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="left" style="padding:24px 24px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:18px;font-weight:bold;line-height:1.5;color:#26221F;">
      今週のトピック一覧
    </td>
  </tr>
  <tr>
    <td align="left" style="padding:0 24px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5A5650;border-bottom:1px solid #E5DFD0;">
      今週は新商品の入荷情報と、夏季休業のお知らせをお届けします。気になる項目からお読みください。
    </td>
  </tr>
  <tr>
    <td align="left" style="padding:16px 24px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">
      リネンシリーズが再入荷しました
    </td>
  </tr>
  <tr>
    <td align="left" style="padding:0 24px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5A5650;">
残暑を心地よく過ごすリネンシリーズが再入荷しました。前回完売したサイズも数量限定でご用意しています。
    </td>
  </tr>
  <tr>
    <td align="left" style="padding:0 24px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">
夏季休業のお知らせ(8/13〜8/16)
    </td>
  </tr>
  <tr>
    <td align="left" style="padding:0 24px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5A5650;">
      2つ目のトピックの要約文。左揃えを崩さず、余白だけでセクションを区切ります。
    </td>
  </tr>
</table>
重量 1827 g OutlookGmailApple MailORIGINAL
MD02-010-JP

Z型レイアウト(ヒーロー→サブ→CTA)Z-Pattern Promo

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="left" valign="middle" width="60%" style="padding:20px 12px 20px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:20px;font-weight:bold;line-height:1.4;color:#26221F;">
      期間限定セール開催中
    </td>
    <td align="right" valign="middle" width="40%" style="padding:20px 24px 20px 12px;">
      <img src="https://example.com/your-image.jpg" width="100" height="80" alt="セールイメージ" style="display:block;margin-left:auto;width:100px;height:80px;border:0;background-color:#E5DFD0;">
    </td>
  </tr>
  <tr>
    <td colspan="2" align="left" style="padding:0 24px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5A5650;">
      左上のタイトルから右上の画像、そして左下の補足文、最後に右下のボタンへと視線がZ字に流れる配置です。短いプロモーションメールに向きます。
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right" style="padding:0 24px 24px;">
      <a href="https://example.com" style="display:inline-block;padding:12px 28px;background-color:#D7000F;color:#ffffff;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;text-decoration:none;border-radius:4px;">今すぐ見る</a>
    </td>
  </tr>
</table>
重量 1459 g OutlookGmailApple MailORIGINAL
MD02-011-JP

フル幅画像+キャプション帯Full-Bleed Image Band

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="line-height:0;font-size:0;">
      <img src="https://example.com/your-image.jpg" width="600" height="280" alt="メインビジュアル" style="display:block;width:100%;max-width:600px;height:auto;border:0;background-color:#E5DFD0;">
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:14px 24px;background-color:#26221F;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;line-height:1.6;color:#ffffff;">
      画像の下に置くキャプション帯。撮影地や商品名など、画像を補足する一行を添えます。
    </td>
  </tr>
</table>
重量 735 g OutlookGmailApple MailORIGINAL
MD02-012-JP

Bento Gridセクション(非対称グリッド)Bento Grid Section

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:8px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1px solid #D2CBBB;">
        <tr>
          <td style="padding:28px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
            <span style="display:inline-block;font-size:11px;font-weight:bold;letter-spacing:2px;color:#ffffff;background-color:#2B5EA7;padding:3px 10px;">FEATURE</span>
            <div style="padding-top:10px;font-size:20px;font-weight:bold;line-height:1.5;color:#26221F;">今月のメイン特集はこちら</div>
            <div style="padding-top:6px;font-size:13px;line-height:1.8;color:#5F584E;">一番伝えたい情報を大きな1枠にまとめて配置します。</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:0 8px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td class="bstack" width="50%" valign="top" style="padding:8px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1px solid #D2CBBB;">
              <tr>
                <td style="padding:20px 18px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.6;color:#26221F;">サブトピックA</td>
              </tr>
            </table>
          </td>
          <td class="bstack" width="50%" valign="top" style="padding:8px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border:1px solid #D2CBBB;">
              <tr>
                <td style="padding:20px 18px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.6;color:#26221F;">サブトピックB</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .bstack { display: block !important; width: 100% !important; }
}
重量 2196 g OutlookGmailApple MailORIGINAL
MD02-013-JP

アクセシビリティ配慮 大見出しブロックAccessible Large Type Block

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;background-color:#26221F;">
  <tr>
    <td style="padding:36px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
      <div style="font-size:26px;font-weight:bold;line-height:1.6;color:#ffffff;">ご登録内容の確認をお願いします</div>
      <div style="padding-top:14px;font-size:16px;line-height:2.0;color:#F0EBE0;">お届け先住所とお支払い方法に変更がないか、8月10日(月)までにマイページでご確認ください。ご確認いただけない場合、次回のお届けが遅れることがあります。</div>
      <div style="padding-top:24px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="center" bgcolor="#E8B93B" style="background-color:#E8B93B;padding:16px 32px;">
              <a href="https://example.com" style="display:block;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.4;color:#26221F;text-decoration:none;">&#10003; 詳しく見る(本文へ)</a>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>
重量 1264 g OutlookGmailApple MailORIGINAL
MD02-014-JP

アイコン特徴グリッド(2x2)Icon Feature Grid 2x2

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td class="igstack" width="50%" valign="top" style="padding:20px 16px;">
      <img src="https://example.com/your-image.jpg" width="40" height="40" alt="" style="display:block;width:40px;height:40px;border:0;background-color:#E5DFD0;">
      <div style="padding-top:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">送料無料</div>
      <div style="padding-top:4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5F584E;">全国どこでも配送料はかかりません。</div>
    </td>
    <td class="igstack" width="50%" valign="top" style="padding:20px 16px;">
      <img src="https://example.com/your-image.jpg" width="40" height="40" alt="" style="display:block;width:40px;height:40px;border:0;background-color:#E5DFD0;">
      <div style="padding-top:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">30日間返品保証</div>
      <div style="padding-top:4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5F584E;">お気に召さない場合は理由を問いません。</div>
    </td>
  </tr>
  <tr>
    <td class="igstack" width="50%" valign="top" style="padding:0 16px 24px;">
      <img src="https://example.com/your-image.jpg" width="40" height="40" alt="" style="display:block;width:40px;height:40px;border:0;background-color:#E5DFD0;">
      <div style="padding-top:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">24時間サポート</div>
      <div style="padding-top:4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5F584E;">チャットとメールでいつでも対応します。</div>
    </td>
    <td class="igstack" width="50%" valign="top" style="padding:0 16px 24px;">
      <img src="https://example.com/your-image.jpg" width="40" height="40" alt="" style="display:block;width:40px;height:40px;border:0;background-color:#E5DFD0;">
      <div style="padding-top:12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.5;color:#26221F;">安心の暗号化決済</div>
      <div style="padding-top:4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.7;color:#5F584E;">主要な決済方法にすべて対応しています。</div>
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .igstack { display: block !important; width: 100% !important; }
}
重量 2805 g OutlookGmailApple MailORIGINAL
MD02-015-JP

アプリ画面フレーム(スマホモックアップ)Phone Mockup Frame

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#26221F" style="background-color:#26221F;">
  <tr>
    <td align="center" style="padding:44px 24px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:3px;color:#E8B93B;">NEW APP UPDATE</td>
  </tr>
  <tr>
    <td align="center" style="padding:0 32px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:22px;font-weight:bold;line-height:1.5;color:#ffffff;">
      新しくなった画面を、先取りで。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 40px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="220" bgcolor="#0F0D0B" style="background-color:#0F0D0B;width:220px;border-radius:18px;">
        <tr>
          <td style="padding:10px 10px 4px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td align="center" style="padding:0 0 6px;font-size:0;line-height:0;">
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="56" bgcolor="#0F0D0B" style="background-color:#0F0D0B;width:56px;height:6px;">
                    <tr><td height="6" style="height:6px;font-size:0;line-height:0;">&nbsp;</td></tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding:0 10px 10px;">
            <img src="https://example.com/your-image.jpg" width="200" height="400" alt="アプリの新しい画面のスクリーンショット" style="display:block;width:200px;height:400px;border:0;background-color:#3A3630;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 44px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" bgcolor="#E8B93B" style="background-color:#E8B93B;">
            <a href="https://example.com/" target="_blank" style="display:inline-block;padding:13px 38px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;color:#26221F;text-decoration:none;">アプリを更新する</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 2413 g OutlookGmailApple MailORIGINAL