【新サービス】HTMLメール作成サービスのご案内

2025年5月14日

デザイン・オフィス・キャンではHTMLメール作成サービスも行なっております。

HTMLメールは画像や自由なレイアウトを用いて訴求力の高いメッセージが送れます。
HubSpotの調査によると、回答者のうち65％がテキストメールよりもHTMLメールを好むことが明らかにされており、クリック率が高い傾向があるそうです。
また、解析タグを入れる事でクリック率を調べ、どの程度マーケティング効果があったのか分析することも可能です。

様々なメーラーに対応しつつも、無駄のない軽量コーディング

ノーコードツールやフレームワークを使用すると、無駄なタグやクラスが入ってしまいソースコードが重たくなってしまいます。メールは100KBを超えると省略表示されてしまったり、到達率が下がってしまったりしまうので、ソースコードの重さはとても大切なのです。キャンのHTMLメールは無駄のないコードで軽量です。

以下は弊社がフルコード（コーダーが書いたソースコード）、HTMLメールフレームワーク（MJML）使用、ノーコード（Marka Email Generator）使用でレスポンシブレイアウトのHTMLメールを作成した場合の検証結果です。

例えばCTAボタンを実装する場合のソースコードの違いです。
●フルコード


<table class="btn_hover" border="0" cellpadding="0" cellspacing="0" style="border-radius:10px;">
<tr>
<td width="300" height="60" align="center">
<a href="#" target="_blank" style="display:block;height:60px;color:#ffffff;font-size:16px;font-weight:bold;line-height:60px;text-decoration:none;">
お問い合わせ</a>
</td>
</tr>
</table>

●フレームワーク使用時


<div style="Margin:0px auto;max-width:560px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:280px;" ><![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" vertical-align="middle" class="btn" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:300px;line-height:100%;">
<tr>
<td align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:8px;cursor:auto;padding:0;background:#000000;" valign="middle">
<a href="aaa" style="background:#000000;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:24px;font-weight:normal;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank">
お問い合わせ
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:560px;" width="560" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="Margin:0px auto;max-width:560px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>

このように、ソースコード量の差は歴然です。ソースコードが少ないからと言って、表示が崩れることはありません。Gmailやyahoo mailはもちろん、表示が崩れやすいOutlookにも可能な限り対応しています。