本文へスキップ

MD-01 — CTA BUTTONS

CTAボタン15点 取扱中

Outlookでも崩れないVML/テーブル方式のメール用ボタン。 すべてテーブルレイアウト+インラインスタイルで、Outlook/Gmail/Apple Mailに安全に投函できます。

MD01-001-JP

VML完全対応ボタンBulletproof VML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#D7000F" style="border-radius:6px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:48px;v-text-anchor:middle;width:240px;" arcsize="13%" fillcolor="#D7000F" stroke="f">
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">ご注文はこちら</center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;background-color:#D7000F;mso-hide:all;">ご注文はこちら</a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
重量 1029 g OutlookGmailApple MailORIGINAL
MD01-002-JP

パディング方式ボタンPadding Based

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#2B5EA7" style="border-radius:6px;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">詳しく見る</a>
    </td>
  </tr>
</table>
重量 490 g OutlookGmailApple MailORIGINAL
MD01-003-JP

ボーダー方式ボタンBorder Based

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#26221F">
      <a href="https://example.com/" target="_blank" style="display:inline-block;border:solid 14px #26221F;border-left-width:44px;border-right-width:44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;background-color:#26221F;">カートに戻る</a>
    </td>
  </tr>
</table>
重量 528 g OutlookGmailApple MailORIGINAL
MD01-004-JP

ピル型ボタンPill Shape

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#2B8A78" style="border-radius:26px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:52px;v-text-anchor:middle;width:240px;" arcsize="50%" fillcolor="#2B8A78" stroke="f">
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">無料ではじめる</center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:16px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:26px;background-color:#2B8A78;mso-hide:all;">無料ではじめる</a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
重量 1031 g OutlookGmailApple MailORIGINAL
MD01-005-JP

ゴーストボタンGhost Outline

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" style="border:2px solid #26221F;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:12px 42px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#26221F;text-decoration:none;">あとで読む</a>
    </td>
  </tr>
</table>
重量 461 g OutlookGmailApple MailORIGINAL
MD01-006-JP

モバイル全幅ボタンFull Width

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#D7000F" style="border-radius:6px;">
      <a href="https://example.com/" target="_blank" style="display:block;padding:16px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:17px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">今すぐ購入する</a>
    </td>
  </tr>
</table>
重量 503 g OutlookGmailApple MailORIGINAL
MD01-007-JP

2連ボタンDouble Choice

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#2B8A78" style="border-radius:6px;">
      <a href="https://example.com/yes" target="_blank" style="display:inline-block;padding:13px 34px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">参加する</a>
    </td>
    <td width="14" style="font-size:0;line-height:0;">&nbsp;</td>
    <td align="center" style="border:2px solid #5F584E;border-radius:6px;">
      <a href="https://example.com/no" target="_blank" style="display:inline-block;padding:11px 34px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#5F584E;text-decoration:none;">見送る</a>
    </td>
  </tr>
</table>
重量 899 g OutlookGmailApple MailORIGINAL
MD01-008-JP

矢印付きボタンArrow Suffix

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#26221F">
      <a href="https://example.com/" target="_blank" style="display:inline-block;border:solid 14px #26221F;border-left-width:40px;border-right-width:32px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;background-color:#26221F;">続きを読む&nbsp;&nbsp;&#8594;</a>
    </td>
  </tr>
</table>
重量 544 g OutlookGmailApple MailORIGINAL
MD01-009-JP

期限付きセールボタンUrgency Label

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" style="padding:0 0 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;color:#D7000F;">＼ 本日23:59まで ／</td>
  </tr>
  <tr>
    <td align="center" bgcolor="#E8B93B">
      <a href="https://example.com/" target="_blank" style="display:inline-block;border:solid 15px #E8B93B;border-left-width:46px;border-right-width:46px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#26221F;text-decoration:none;background-color:#E8B93B;">セール会場へ</a>
    </td>
  </tr>
</table>
重量 744 g OutlookGmailApple MailORIGINAL
MD01-011-JP

チケット切り取り風クーポンボタンTicket Stub Coupon

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" valign="middle" bgcolor="#E8B93B" style="background-color:#E8B93B;padding:14px 18px;border-right:2px dashed #26221F;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;font-weight:bold;line-height:1.4;color:#26221F;">
      500円<br>OFF
    </td>
    <td align="center" valign="middle" bgcolor="#E8B93B" style="background-color:#E8B93B;padding:0;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 30px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#26221F;text-decoration:none;">クーポンを使う&nbsp;&#8594;</a>
    </td>
  </tr>
</table>
重量 815 g OutlookGmailApple MailORIGINAL
MD01-012-JP

グラデーション風ボタンGradient Fill

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#D7000F" style="background-color:#D7000F;background-image:linear-gradient(135deg,#D7000F 0%,#E8B93B 100%);border-radius:8px;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:15px 46px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;">今すぐチェック</a>
    </td>
  </tr>
</table>
重量 568 g OutlookGmailApple MailORIGINAL
MD01-013-JP

価格併記ボタンPrice Combo

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" style="padding:0 0 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;line-height:1.4;color:#8C8475;">
      <span style="text-decoration:line-through;">&#165;12,800</span>&nbsp;&#8594;&nbsp;<span style="color:#D7000F;font-weight:bold;">&#165;8,900</span>
    </td>
  </tr>
  <tr>
    <td align="center" bgcolor="#26221F" style="border-radius:6px;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">今すぐ購入</a>
    </td>
  </tr>
</table>
重量 819 g OutlookGmailApple MailORIGINAL
MD01-014-JP

信頼マイクロコピー付きボタンTrust Microcopy

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#2B5EA7" style="border-radius:6px;">
      <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">無料ではじめる</a>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:10px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;line-height:1.6;color:#8C8475;">
      クレジットカード登録不要・いつでも解約できます
    </td>
  </tr>
</table>
重量 749 g OutlookGmailApple MailORIGINAL
MD01-015-JP

縦積み3択ボタンStacked Triple Choice

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" bgcolor="#D7000F" style="border-radius:6px;">
      <a href="https://example.com/plan-standard" target="_blank" style="display:block;padding:14px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#ffffff;text-decoration:none;border-radius:6px;">スタンダードプランを選ぶ</a>
    </td>
  </tr>
  <tr>
    <td style="font-size:0;line-height:0;padding:10px 0;">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" style="border:2px solid #26221F;border-radius:6px;">
      <a href="https://example.com/plan-premium" target="_blank" style="display:block;padding:12px 10px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#26221F;text-decoration:none;">プレミアムプランを選ぶ</a>
    </td>
  </tr>
  <tr>
    <td style="font-size:0;line-height:0;padding:10px 0;">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">
      <a href="https://example.com/plan-free" target="_blank" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.4;color:#5F584E;text-decoration:underline;">まずは無料プランで試す</a>
    </td>
  </tr>
</table>
重量 1372 g OutlookGmailApple MailORIGINAL