本文へスキップ

MD-02 — LAYOUTS

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

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 class="mt-stack" width="180" valign="top" style="padding:12px 0;">
      <img src="https://example.com/your-image.jpg" width="180" height="120" alt="革の裁断作業をする職人の手元" class="mt-stack-img" style="display:block;width:180px;height:120px;border:0;background-color:#E5DFD0;">
    </td>
    <td class="mt-stack mt-stack-text" 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;">
      <span style="font-size:11px;letter-spacing:1px;color:#C9A063;">READING — 8分</span><br>
      <strong style="font-size:16px;">職人が語る、革の育て方</strong><br>
      毎日使うほど手になじむ理由を、40年ものづくりを続ける中村さんに聞きました。<a href="https://example.com/journal/leather-care" target="_blank" style="color:#2B5EA7;text-decoration:underline;">続きを読む</a>
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .mt-stack { display: block !important; width: 100% !important; padding-left: 0 !important; }
  .mt-stack-img { width: 100% !important; height: auto !important; }
  .mt-stack-text { padding-top: 14px !important; }
}
重量 1353 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:30px 20px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:100%;max-width:600px;">
        <tr>
          <td align="center" style="padding-bottom:6px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:11px;font-weight:bold;letter-spacing:2px;color:#C9A063;">AUTUMN FAIR</td>
        </tr>
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:20px;font-weight:bold;line-height:1.6;color:#ffffff;">
            秋の家具フェア、10月1日(木)開幕
          </td>
        </tr>
        <tr>
          <td align="center" style="padding-top:8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.9;color:#D8D2C6;">
            対象のソファ・ダイニングテーブルが10%OFF。10月13日(火)まで、全国7店舗とオンラインストアで開催します。
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 1199 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 class="zstack" 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;">
      サマーセール、本日23:59まで
    </td>
    <td class="zstack" 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;">
      対象アイテムが最大40%OFF。人気のリネンシリーズも、今回限りの特別価格でご紹介しています。
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right" style="padding:0 24px 24px;">
      <a href="https://example.com" target="_blank" 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>
@media only screen and (max-width:480px) {
  .zstack { display: block !important; width: 100% !important; }
}
重量 1570 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 bgcolor="#E5DFD0" style="line-height:0;font-size:0;background-color:#E5DFD0;">
      <a href="https://example.com/linen" target="_blank" style="text-decoration:none;"><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;"></a>
    </td>
  </tr>
  <tr>
    <td class="fb-caption" align="center" bgcolor="#26221F" style="padding:14px 24px;background-color:#26221F;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;line-height:1.7;color:#ffffff;">
      秋の新作〈瀬戸内リネン〉シャツ 全6色 ／ 9月5日(金)10時より順次入荷
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .fb-caption { padding: 12px 18px !important; font-size: 12px !important; line-height: 1.8 !important; }
}
重量 1058 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 class="bmain" 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;">秋限定「丹波栗のブラウンエール」を9月5日(金)に解禁します</div>
            <div style="padding-top:6px;font-size:13px;line-height:1.8;color:#5F584E;">焙煎した和栗を仕込みの最終工程で加えました。香りの決め手を醸造長の田中が語ります。数量限定・330ml 780円(税込)。</div>
            <div style="padding-top:12px;font-size:13px;font-weight:bold;"><a href="https://example.com/brew/chestnut-ale" target="_blank" style="color:#2B5EA7;text-decoration:underline;">醸造ノートを読む &#8594;</a></div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:0 8px 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 class="bsub" style="padding:20px 18px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
                  <div style="font-size:14px;font-weight:bold;line-height:1.6;color:#26221F;">醸造所見学ツアー 9月13日(土)</div>
                  <div style="padding-top:6px;font-size:12px;line-height:1.8;color:#5F584E;">試飲3種付き・各回12名。8月20日(水)10:00受付開始。</div>
                  <div style="padding-top:10px;font-size:12px;font-weight:bold;"><a href="https://example.com/tour" target="_blank" style="color:#2B5EA7;text-decoration:underline;">予約する</a></div>
                </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 class="bsub" style="padding:20px 18px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
                  <div style="font-size:14px;font-weight:bold;line-height:1.6;color:#26221F;">タップルーム 日曜営業を始めます</div>
                  <div style="padding-top:6px;font-size:12px;line-height:1.8;color:#5F584E;">9月から日曜12:00〜19:00も営業。定休日は月曜のみです。</div>
                  <div style="padding-top:10px;font-size:12px;font-weight:bold;"><a href="https://example.com/taproom" target="_blank" style="color:#2B5EA7;text-decoration:underline;">営業時間を見る</a></div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .bstack { display: block !important; width: 100% !important; padding: 6px 8px !important; }
  .bmain { padding: 22px 18px !important; }
  .bsub { padding: 16px 16px !important; }
}
重量 3641 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" target="_blank" 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>
重量 1280 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
MD02-016-JP

ダークモード対応ラッパーDark Mode Wrapper

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F0EBE0" class="dmw-bg" style="background-color:#F0EBE0;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" class="dmw-card" style="width:600px;max-width:600px;background-color:#ffffff;">
        <tr>
          <td class="dmw-title" style="padding:28px 28px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:20px;font-weight:bold;line-height:1.5;color:#26221F;">
            今週の3本 — 小さなチームの意思決定
          </td>
        </tr>
        <tr>
          <td class="dmw-body" style="padding:0 28px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
            編集部が今週読んでよかった記事を3本お届けします。人数が増える前にこそ効く、決め方の話が中心です。
          </td>
        </tr>
        <tr>
          <td style="padding:0 28px;">
            <div class="dmw-rule" style="border-top:1px solid #D2CBBB;font-size:0;line-height:0;">&nbsp;</div>
          </td>
        </tr>
        <tr>
          <td class="dmw-body" style="padding:18px 28px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;line-height:1.9;color:#5F584E;">
            配信の停止は<a href="https://example.com/unsubscribe" target="_blank" class="dmw-link" style="color:#2B5EA7;text-decoration:underline;">こちら</a>からお手続きいただけます。
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
@media (prefers-color-scheme: dark) {
  .dmw-bg { background-color: #14120F !important; }
  .dmw-card { background-color: #1F1B16 !important; }
  .dmw-title { color: #F5F1E8 !important; }
  .dmw-body { color: #BFB8AA !important; }
  .dmw-rule { border-color: #3A342B !important; }
  .dmw-link { color: #8FB6E8 !important; }
}
[data-ogsc] .dmw-bg { background-color: #14120F !important; }
[data-ogsc] .dmw-card { background-color: #1F1B16 !important; }
[data-ogsc] .dmw-title { color: #F5F1E8 !important; }
[data-ogsc] .dmw-body { color: #BFB8AA !important; }
[data-ogsc] .dmw-link { color: #8FB6E8 !important; }
重量 2311 g OutlookGmailApple MailORIGINAL
MD02-017-JP

縦型タイムライン(当日スケジュール)Vertical Timeline

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:0 20px 18px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
      <p style="margin:0 0 4px;font-size:11px;letter-spacing:2px;color:#C9A063;">9月12日(土) 東京国際交流館</p>
      <p style="margin:0;font-size:20px;font-weight:bold;line-height:1.5;color:#26221F;">当日のスケジュール</p>
    </td>
  </tr>
  <tr>
    <td style="padding:0 20px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td width="62" valign="top" align="right" style="padding:0 12px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.5;color:#26221F;">13:00</td>
          <td width="1" bgcolor="#D2CBBB" valign="top" style="background-color:#D2CBBB;font-size:0;line-height:0;width:1px;">&nbsp;</td>
          <td valign="top" style="padding:0 0 22px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
            <strong>受付開始</strong><br>
            <span style="font-size:13px;color:#5F584E;">3階ロビーで、お申し込み時のQRコードをご提示ください。</span>
          </td>
        </tr>
        <tr>
          <td width="62" valign="top" align="right" style="padding:0 12px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.5;color:#26221F;">13:30</td>
          <td width="1" bgcolor="#D2CBBB" valign="top" style="background-color:#D2CBBB;font-size:0;line-height:0;width:1px;">&nbsp;</td>
          <td valign="top" style="padding:0 0 22px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
            <strong>基調講演「地方発ブランドの育て方」</strong><br>
            <span style="font-size:13px;color:#5F584E;">株式会社カミノ 代表 中村 悠介(60分)</span>
          </td>
        </tr>
        <tr>
          <td width="62" valign="top" align="right" style="padding:0 12px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.5;color:#26221F;">15:00</td>
          <td width="1" bgcolor="#D2CBBB" valign="top" style="background-color:#D2CBBB;font-size:0;line-height:0;width:1px;">&nbsp;</td>
          <td valign="top" style="padding:0 0 22px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
            <strong>分科会(A/B 選択制)</strong><br>
            <span style="font-size:13px;color:#5F584E;">A: 小売の在庫設計 / B: SNS運用の内製化。当日の変更も承ります。</span>
          </td>
        </tr>
        <tr>
          <td width="62" valign="top" align="right" style="padding:0 12px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;line-height:1.5;color:#26221F;">17:00</td>
          <td width="1" bgcolor="#ffffff" valign="top" style="background-color:#ffffff;font-size:0;line-height:0;width:1px;">&nbsp;</td>
          <td valign="top" style="padding:0 0 4px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
            <strong>懇親会(希望者のみ・会費3,000円)</strong><br>
            <span style="font-size:13px;color:#5F584E;">同じ2階の会場でそのまま開催します。19:00終了予定です。</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 3674 g OutlookGmailApple MailORIGINAL
MD02-018-JP

逆順スタック2カラム(モバイルで画像が上)Reverse Stacking Columns

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:16px 20px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" dir="rtl">
        <tr>
          <td class="rv-stack" dir="ltr" width="44%" valign="top" style="padding:0 0 0 20px;">
            <img src="https://example.com/your-image.jpg" width="240" height="176" alt="大きな窓から光が差し込む施術スペース" class="rv-img" style="display:block;width:100%;max-width:240px;height:auto;border:0;background-color:#E5DFD0;">
          </td>
          <td class="rv-stack rv-text" dir="ltr" valign="top" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
            <p style="margin:0 0 6px;font-size:11px;font-weight:bold;letter-spacing:2px;color:#C9A063;">9月の新メニュー</p>
            <p style="margin:0 0 10px;font-size:19px;font-weight:bold;line-height:1.5;color:#26221F;">頭皮ケア付きカラーを始めます</p>
            <p style="margin:0 0 14px;font-size:13px;line-height:1.9;color:#5F584E;">白髪をぼかしながら、施術中に炭酸泉で頭皮環境も整えるコースです。9月1日(火)から全4店舗で承ります。所要100分・9,900円(税込)。</p>
            <a href="https://example.com/reserve" target="_blank" style="font-size:13px;font-weight:bold;color:#2B5EA7;text-decoration:underline;">9月の空き状況を見る &#8594;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
@media only screen and (max-width:480px) {
  .rv-stack { display: block !important; width: 100% !important; padding: 0 !important; }
  .rv-img { width: 100% !important; height: auto !important; }
  .rv-text { padding: 16px 4px 0 !important; }
}
重量 1825 g OutlookGmailApple MailORIGINAL