本文へスキップ

MD-05 — TYPOGRAPHY

見出し・本文15点 取扱中

全クライアントで読める見出し・リード文・手順の型。 すべてテーブルレイアウト+インラインスタイルで、Outlook/Gmail/Apple Mailに安全に投函できます。

MD05-001-JP

下線見出しBorder Heading

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:28px 12px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:20px;font-weight:bold;line-height:1.5;color:#26221F;border-bottom:3px solid #26221F;">
      セクション見出し
    </td>
  </tr>
</table>
重量 379 g OutlookGmailApple MailORIGINAL
MD05-002-JP

左アクセント見出しAccent Bar

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:24px 12px 8px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td width="6" bgcolor="#D7000F" style="background-color:#D7000F;font-size:0;line-height:0;">&nbsp;</td>
          <td style="padding:4px 0 4px 14px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:19px;font-weight:bold;line-height:1.5;color:#26221F;">
            お知らせの見出し
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 661 g OutlookGmailApple MailORIGINAL
MD05-003-JP

リード文Lead Text

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:20px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;line-height:2.0;color:#26221F;">
      いつもご利用ありがとうございます。本文の基本形です。1行の長さが読みやすいよう左右に余白を取り、行間を2.0前後に設定しています。メールの本文はこのくらいゆったり組むのが読みやすさの定番です。
    </td>
  </tr>
</table>
重量 581 g OutlookGmailApple MailORIGINAL
MD05-004-JP

引用ブロックQuote Block

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:16px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F5F2EA" style="background-color:#F5F2EA;">
        <tr>
          <td width="5" bgcolor="#C9A063" style="background-color:#C9A063;font-size:0;line-height:0;">&nbsp;</td>
          <td style="padding:16px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
            「梱包がていねいで、想像以上に早く届きました。次もこのお店で買います。」<br>
            <span style="font-size:12px;color:#8C8475;">— 東京都・Tさん</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 862 g OutlookGmailApple MailORIGINAL
MD05-005-JP

番号付き手順Numbered Steps

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="44" valign="top" align="center" style="padding:12px 0;">
      <span style="display:inline-block;width:30px;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;color:#ffffff;background-color:#26221F;padding:5px 0;text-align:center;">1</span>
    </td>
    <td valign="middle" style="padding:12px 12px 12px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;border-bottom:1px solid #D2CBBB;">
      <strong>アカウントを登録</strong> — メールアドレスだけで30秒で完了します。
    </td>
  </tr>
  <tr>
    <td width="44" valign="top" align="center" style="padding:12px 0;">
      <span style="display:inline-block;width:30px;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;color:#ffffff;background-color:#26221F;padding:5px 0;text-align:center;">2</span>
    </td>
    <td valign="middle" style="padding:12px 12px 12px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;border-bottom:1px solid #D2CBBB;">
      <strong>プランを選択</strong> — いつでも変更・解約できます。
    </td>
  </tr>
  <tr>
    <td width="44" valign="top" align="center" style="padding:12px 0;">
      <span style="display:inline-block;width:30px;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;color:#ffffff;background-color:#D7000F;padding:5px 0;text-align:center;">3</span>
    </td>
    <td valign="middle" style="padding:12px 12px 12px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#26221F;">
      <strong>今日からスタート</strong> — 最初の14日間は無料です。
    </td>
  </tr>
</table>
重量 1873 g OutlookGmailApple MailORIGINAL
MD05-006-JP

マーカー強調Highlight

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:18px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;line-height:2.0;color:#26221F;">
      夏季キャンペーンのご注文締め切りは<span style="background-color:#F8E9B8;font-weight:bold;padding:1px 4px;">8月15日(金)23:59</span>です。それ以降のご注文は9月上旬以降の発送となりますので、お早めにお申し込みください。
    </td>
  </tr>
</table>
重量 578 g OutlookGmailApple MailORIGINAL
MD05-007-JP

タイポグラフィ主役ヒーロー見出しDisplay Headline

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" class="md-ty-display" style="padding:48px 24px 16px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:40px;font-weight:bold;line-height:1.25;letter-spacing:-0.5px;color:#26221F;">
      夏のセール、<br>はじまる。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 32px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#5F584E;">
      画像を使わず文字だけで主役に。読み込みが早く、ダークモードでも崩れません。
    </td>
  </tr>
</table>
<style>
  @media screen and (max-width: 480px) {
    .md-ty-display { font-size: 30px !important; }
  }
</style>
重量 830 g OutlookGmailApple MailORIGINAL
MD05-008-JP

チェックリストChecklist

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="28" valign="top" style="padding:8px 0 8px 24px;">
      <span style="display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;font-family:Arial,sans-serif;font-size:12px;font-weight:bold;color:#ffffff;background-color:#2B8A78;border-radius:9px;">&#10003;</span>
    </td>
    <td valign="middle" style="padding:8px 24px 8px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
      送料無料ラインは5,000円から
    </td>
  </tr>
  <tr>
    <td width="28" valign="top" style="padding:8px 0 8px 24px;">
      <span style="display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;font-family:Arial,sans-serif;font-size:12px;font-weight:bold;color:#ffffff;background-color:#2B8A78;border-radius:9px;">&#10003;</span>
    </td>
    <td valign="middle" style="padding:8px 24px 8px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
      到着後30日以内なら返品OK
    </td>
  </tr>
  <tr>
    <td width="28" valign="top" style="padding:8px 0 8px 24px;">
      <span style="display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;font-family:Arial,sans-serif;font-size:12px;font-weight:bold;color:#ffffff;background-color:#2B8A78;border-radius:9px;">&#10003;</span>
    </td>
    <td valign="middle" style="padding:8px 24px 8px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#26221F;">
      会員登録で次回使えるクーポン進呈
    </td>
  </tr>
</table>
重量 1757 g OutlookGmailApple MailORIGINAL
MD05-009-JP

大胆ステートメント文(暖色背景)Bold Statement

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#F0EBE0" style="background-color:#F0EBE0;padding:44px 28px;border-top:2px solid #C9A063;border-bottom:2px solid #C9A063;">
      <span style="display:block;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:26px;font-weight:bold;line-height:1.6;letter-spacing:0.5px;color:#26221F;">
        「安い」ではなく、<br>「長く使える」を届けたい。
      </span>
      <span style="display:block;padding-top:16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.8;color:#5F584E;">
        つくり手の想いから生まれた、今シーズンのテーマです。
      </span>
    </td>
  </tr>
</table>
重量 836 g OutlookGmailApple MailORIGINAL
MD05-010-JP

太字サインポスト見出しリストBold Signpost List

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:14px 24px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.8;color:#26221F;border-top:1px solid #D2CBBB;">
      <span style="font-weight:bold;color:#D7000F;">配送</span> — ご注文から2〜4営業日でお届けします。
    </td>
  </tr>
  <tr>
    <td style="padding:0 24px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.8;color:#26221F;">
      <span style="font-weight:bold;color:#D7000F;">返品</span> — 到着後30日以内なら理由を問わず承ります。
    </td>
  </tr>
  <tr>
    <td style="padding:0 24px 14px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.8;color:#26221F;border-bottom:1px solid #D2CBBB;">
      <span style="font-weight:bold;color:#D7000F;">サポート</span> — 平日10時〜18時、チャットとメールで対応します。
    </td>
  </tr>
</table>
重量 1088 g OutlookGmailApple MailORIGINAL
MD05-011-JP

ドロップキャップ本文Drop Cap Paragraph

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:24px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;line-height:1.9;color:#26221F;">
      <span style="float:left;font-family:'Zilla Slab',Georgia,serif;font-size:56px;line-height:0.8;font-weight:bold;color:#D7000F;padding:4px 8px 0 0;">今</span>季、私たちが届けたいのは「長く付き合える一着」です。トレンドを追うのではなく、素材と縫製にこだわり抜いた定番をひとつずつ増やしていく。そんなものづくりの姿勢を、今シーズンのコレクションにも込めました。
    </td>
  </tr>
</table>
重量 758 g OutlookGmailApple MailORIGINAL
MD05-012-JP

大型引用符プルクォートPull Quote Mark

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:32px 32px 0;font-family:Georgia,'Zilla Slab',serif;font-size:64px;line-height:1;font-weight:bold;color:#C9A063;">
      &ldquo;
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 36px 8px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:22px;font-weight:bold;line-height:1.6;color:#26221F;">
      届いた瞬間、開けるのがもったいないと思った。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 32px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;letter-spacing:0.5px;color:#8C8475;">
      — ご購入者様レビューより
    </td>
  </tr>
</table>
重量 820 g OutlookGmailApple MailORIGINAL
MD05-013-JP

ラベル・値スペックリストLabel-Value Spec List

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="50%" valign="top" style="padding:20px 12px 16px 24px;border-bottom:1px solid #D2CBBB;">
      <span style="display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8C7A45;">日時</span>
      <span style="display:block;padding-top:4px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:15px;font-weight:bold;color:#26221F;">8月10日(月) 19:00開場</span>
    </td>
    <td width="50%" valign="top" style="padding:20px 24px 16px 12px;border-bottom:1px solid #D2CBBB;">
      <span style="display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8C7A45;">会場</span>
      <span style="display:block;padding-top:4px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:15px;font-weight:bold;color:#26221F;">東京国際フォーラム ホールA</span>
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top" style="padding:16px 12px 20px 24px;">
      <span style="display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8C7A45;">料金</span>
      <span style="display:block;padding-top:4px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:15px;font-weight:bold;color:#26221F;">前売 4,800円 / 当日 5,500円</span>
    </td>
    <td width="50%" valign="top" style="padding:16px 24px 20px 12px;">
      <span style="display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8C7A45;">定員</span>
      <span style="display:block;padding-top:4px;font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:15px;font-weight:bold;color:#26221F;">300名(先着順)</span>
    </td>
  </tr>
</table>
重量 1915 g OutlookGmailApple MailORIGINAL
MD05-014-JP

モノスペース参照コード表示Monospace Reference Code

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:8px 24px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;color:#5F584E;">
      ご予約番号
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td bgcolor="#F5F2EA" style="background-color:#F5F2EA;border:1px dashed #C9A063;padding:14px 28px;font-family:'Courier New',Courier,monospace;font-size:22px;font-weight:bold;letter-spacing:3px;color:#26221F;">
            MD-7F2K-93QX
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
重量 776 g OutlookGmailApple MailORIGINAL
MD05-015-JP

目次・ジャンプリンクリストTable of Contents List

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td style="padding:20px 24px 8px;font-family:Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#8C7A45;">
      In this issue
    </td>
  </tr>
  <tr>
    <td style="padding:6px 24px;border-top:1px solid #D2CBBB;">
      <a href="#section-1" style="font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:14px;font-weight:bold;color:#2B5EA7;text-decoration:none;">01 &nbsp;今月の新着商品</a>
    </td>
  </tr>
  <tr>
    <td style="padding:6px 24px;">
      <a href="#section-2" style="font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:14px;font-weight:bold;color:#2B5EA7;text-decoration:none;">02 &nbsp;スタッフのおすすめ</a>
    </td>
  </tr>
  <tr>
    <td style="padding:6px 24px 20px;">
      <a href="#section-3" style="font-family:'Hiragino Sans','Yu Gothic',Arial,sans-serif;font-size:14px;font-weight:bold;color:#2B5EA7;text-decoration:none;">03 &nbsp;今週のセール情報</a>
    </td>
  </tr>
</table>
重量 1143 g OutlookGmailApple MailORIGINAL