Marketo（マルケト）のメールテンプレート作成

マーケティングオートメーションの活用が活発になってきていますが、ツールによって仕様が違ったりなどでマーケティング活動をするまでの準備に時間がかかることがあります。

マーケティング活動の一つであるメールマーケティングは、HTMLメールを活用することでユーザーのメール開封やURLのクリックの計測ができるようになりますが、もう一つのHTMLメールのメリットとして、画像や装飾を使った訴求ができるところも大きな特徴になります。

どのマーケティングオートメーションでも、メールマーケティング運用時にどういうことをやっていくかということを明確に決めたテンプレートを作ってしまえば、技術的な知識がなくても比較的簡単にメールの作成と配信が可能になります。

これまで、HubSpot（ハブスポット）やMautic（モーティック）、synergy!（シナジー）、Benchmark Email（ベンチマークメール）、blastmail（ブラストメール）など様々なツールでのテンプレートを作ってきましたが、Marketo（マルケト）でのテンプレートも作成する機会があったので解説していきます。

HTMLメールのメリット

HTMLメールは、ユーザーのメールの開封やリンクのクリックの計測が可能です。このユーザーの動きがわかるということが要因で、近年のメールではHTMLメールの割合が増えてきています。

加えて、メール内に画像や装飾を活用することができるので、テキストではできない視覚的な訴求や企業のビジュアルアイデンティティといったブランド面での訴求できることも特徴になります。

マルチデバイスを考慮したレスポンシブ対応も可能です。

HTMLメール構築の特徴

Webサイトでは当たり前にできることが、HTMLメールではできないことがあります。

装飾をするためにCSSというコードを活用するのですが、そのコードの反映で、Webサイトでは簡単なコードを書くだけでできることが、HTMLメールではとても手間のかかる作業になったりします。

メーラーによって表示が崩れたりすることがあるので、事前にどのメーラーを対象としたHTMLメールなのかを明確にすることも重要です。

WebサイトでのCSSの反映

CSSファイルを参照すればいいだけなので、1行のコード記述で済みます。

<link rel="stylesheet" href="/css/style.css">

HTMLメールでのCSSの反映

CSSファイルを参照しても装飾は反映されないので、各要素（Element）ごとにstyleを記述しないといけません。

<table style="border-collapse: collapse; margin: 0 auto; padding: 0; width: 600px;">
  <tr style="margin: 0; padding: 0;">
    <td style="color: #232323; margin: 0; padding: 0; padding-bottom: 30px;">
    </td>
  </tr>
</table>

HTMLメールはtableコーディングという要素の階層が深くなりがちな構造になりやすいので、かなり複雑なコードの記述になることが多くなります。手作業ではミスも起こりやすく非効率な作業となってしまいます。

ビルドツール「gulp」で効率的なHTMLメールを作成

gulpとは、簡単に説明すると「様々な作業を自動化してくれる」node.js上のツールになります。

別途インストールするパッケージを活用することで、上記で説明したHTMLメール特有のCSSを記述したコードを生成してくれるので、手作業の懸念であるミスや非効率な作業がなくなります。

最低限入れておきたいパッケージは

• gulp-inline-css
• browser-sync

で、必要に応じて他のパッケージもインストールすればよいと思います。

gulp-inline-cssは参照しているCSSファイルを使って各要素に自動的にstyleを反映してくれるパッケージで、browser-syncはファイル保存時にブラウザを自動で更新してくれる役割があります。

HTMLメールのレスポンシブ対応

スマートフォンなどのメールの表示は、各要素ごとにstyleを記述しなくても、head要素内のstyle要素でCSSの記述をすればレスポンシブ対応が可能になります。

style要素内のCSSはHTMLの各要素に自動で反映させずにhead要素内に残したり、自動化して生成されたHTMLから各要素に自動で反映させるためのCSSファイルへの参照の記述を消したりなどの設定は、gulpfile.jsのgulp-inline-cssに関する設定で以下のように指定します。

applyStyleTags: false,
applyLinkTags: true,
removeStyleTags: false,
removeLinkTags: true

MarketoでのHTMLメールテンプレートの作成

基本的に上記のようなツールを活用してテンプレートファイルを作成することをおすすめします。

そして、Marketoが用意しているメールテンプレートの構文を活用すると、技術的な知識がなくてもMarketoの管理画面上でメール内のコンテンツを作成したり増やしたりなどが可能になります。

Marketoでメール作成時に自由に設定できる項目でよく使うもの

Marketoでは様々なシーンで活用できる構文を豊富に用意していますが、利用頻度が高いものは以下になります。

• 文字列
• 色
• 画像
• モジュール

最低限、上記を抑えておくとよいでしょう。

文字列

文字列を設定するには、変数とリッチテキストが使えるようになっておきましょう。

変数

meta要素での文字列の設定と、可変したい箇所に変数名を指定しておきます。

<meta class="mktoString" id="一意の変数名" mktoname="管理画面上でのラベル" default="初期値" />

<td>${変数名}</td>

リッチテキスト

WYSIWYGエディタという、リンクの設定をしたりフォントサイズや色などのスタイルを変更するなどができるツールを使用することができるようになります。

技術的な知識がなくても簡単に扱える機能になります。

<div class="mktoText" id="一意の名前" mktoName="管理画面上でのラベル">
初期値
</div>

色

リンクボタンの色を指定するときなどに役立ちます。文字列の変数と同様に、meta要素での設定と可変したい箇所に変数名を指定しておきます。

<meta class="mktoColor" id="一意の変数名" mktoName="管理画面上でのラベル" default="16進数カラーコード">

<td bgcolor="${btnColor}">ボタン</td>

画像

Marketoの仕様では2種類の方法が用意されていますが、画像にリンクを設定することも考えられるので、リンク設定対応ができる記述にしておきましょう。

<div class="mktoImg" id="一意の名前" mktoName="管理画面上でのラベル" mktoImgLink="デフォルトのリンクURL">
  <a><img /></a>
</div>

もしくは、文字列の変数を使って、img要素のsrc属性値やa要素のhref属性値を指定するという方法もあります。

モジュール

メールテンプレート内部でテンプレート化されたブロックで、指定の範囲（コンテナー）内でモジュールを並び替えたり追加することが可能になります。

メールのコンテンツ内での自由度を高めることができます。

<td class="mktoContainer" id="一意の名前">
  <table class="mktoModule" id="一意の名前" mktoname="管理画面上でのラベル">
  モジュール
  </table>
</td>

しかし、メールのデザイン上の問題で複雑なコードになると、モジュールを利用する範囲（コンテナー）が狭くなってしまうことが注意点です。

メールテンプレートの 用途を定めて、スピード感のあるメールマーケティングを

マーケティングにおいてマーケティングオートメーションはマーケティング活動を効率化するツールです。

メールを送信するたびに、新しいメールテンプレートを制作しているようではスピード感のあるマーケティング活動はできません。

あらかじめ、「何のために」、「どういうコンテンツ」を「どう見せるのか」明確に決めておくと、バージョン違いのような似通ったメールテンプレートを量産してしまう、ということを避けることができます。

弊社のメールマーケティング事例として、住宅・不動産業のメールマーケティングを担当させていただきました株式会社オレンジハウス様の事例もご覧ください。

マルケトの利用に時間を費やすのではなく、マーケティング活動することに集中できる環境づくりをしていきましょう。