マーケティングキャンペーン機能のテンプレートをカスタマイズする方法

この記事は How to Customize an Email Marketing Template の抄訳です。

本日のブログでは、マーケティングキャンペーン機能でメールを作成する際に「どういう観点でテンプレートを選ぶと良いのか？」「どのようなことに注意しながらテンプレートのデザインを変えると効果的なのか？」について、具体例を交えながら解説します。

テンプレートの選び方

マーケティングキャンペーン機能では様々なテンプレートを用意していますが、どれを使用するか決める前に「送信しようとしているメールの目的は何か？」「受信者にどんなアクションを望んでいるのか？」を改めて自問してください。

受信者にアクションを促すために長い説明文とCTAボタンを置くのが良いのか、それとも、複数の画像を使って商品を視覚的にみせるのが良いのか、といった観点でメールの構造やフォーマットがコンテンツに合っているか確認しましょう。

そして、扱うブランドのイメージに似たテンプレートを探しましょう。画像やテキスト、色をブランドに合わせて変えて、目標のスタイルに近いテンプレートを1つ作っておくと便利です。

今回は例として、宝石店のプロモーションメールを送るシナリオを考え、イメージに合う「INGRID & ANDERS – DEAL」のテンプレートを選びました。

残念ながらテンプレートの色と画像は宝石店のブランドイメージと少し異なるのですが、
実際にある店舗の外観と全体的なブランドの雰囲気が合っていて、複数の画像、文章が並ぶ構成も今回送るメールの内容に向いています。

ブランドイメージに合わせたカスタマイズ方法

先ほど選んだテンプレートを、ブランドイメージに合わせてカスタマイズして、以下のようなテンプレートに仕上げます。この手順について、詳しく説明していきます。

ステップ１：ヘッダ

最初にヘッダ部分のロゴを宝石店のものに変更しました。受信者との信頼関係を築くには、パッと見でブランドを識別できることが重要です。

ヘッダ画像は左寄せもしくは中央寄せにする企業が多いです。設置する際は最大幅まで拡大しても問題ないよう600px以上の幅の画像を利用しましょう。

ステップ２：画像

画像はメールの文章やブランドに合うものを選びましょう。宝石のように目に見える商品の場合は、画像が非常に重要なため、文章よりも画像選びを慎重に行うとよいでしょう。

1つ目の画像は、文章の内容に合わせて、クリスマスプレゼントを受け取っている人の写真にしました。人物が写っている画像はコンテンツに対する共感を得やすくなります。2つ目の画像は、Webサイトへのアクセスを促すためにプレゼントの宝石が目立つものを選びました。今回の画像はiStockで見つけましたが、質の高い画像素材を提供するサイトは他にもたくさんあるのでチェックしてみてください。

メールに画像を入れる場合は次の点を忘れずに確認してください。

• alt属性を設定する
  環境によってはメールで画像が表示されないこともあります。この場合、alt属性に指定した文字が表示されるので、受信者が理解しやすいように画像の説明文を入れましょう。
• 画像にリンクを入れる
  受信者は画像を含めクリックできることを期待しているため、画像にもリンクを入れましょう。たとえば今回のメールでは、ダイヤのイヤリング画像をクリックして商品説明のWebページにアクセスできるようにリンクを入れる必要があります。
• 画像サイズ
  ヘッダ同様に画像の幅が600ピクセル以上であることを確認しましょう。

ステップ３：フォント

マーケティングキャンペーン機能ではフォントをインポートできるので、ブランドに合ったフォントを利用可能です。こちらの手順に従って、HTMLヘッダを編集してください。

受信環境によっては一部の限られたフォントしかサポートされません。そのため、ArialやTimes New Romanのようにどの環境でも表示できるフォントのうち、Webサイトで利用しているフォントに近いものをデフォルトとして設定しましょう。このように設定することで、もしインポートしたフォントがサポートされていなかった場合でもブランドに合ったフォント表示が可能となります。

ステップ４：文章

今回作成しているニュースレターの目的は、受信者にWebサイトにアクセスしてもらい、欲しいものリストを作ったり、買い物をしたりしてもらうことです。メールに長く留まらないような工夫が必要なため、文章はなるべく短くしてCTAボタンへ導くようにしています。

メールの文章を書くときは、相手にどのようなアクションをして欲しいか自問して、それに繋がるメッセージとなっているか繰り返し見直しましょう。

ステップ５：色

メールで使う色はWebサイトに合わせて、ブランドイメージを揃えましょう。Webサイトと全く同じである必要はありませんが、ブランドと結びつきやすくするために1、2色は揃えることをお勧めします。宝石店の例では、Webサイトと同じフォントカラーに変更して、画像もロゴの色に合わせてゴールドが入ったものを選びました。

• メールの背景
  受信トレイで色々なメールを見ていると気が付くと思いますが、ほとんどのメールでは背景色が白色または中間色となっていて、たまに黒色がある程度です。背景はこれらの色のうちから1つを選びましょう。鮮やかな色やはっきりとした色は、受信者がメールの内容に集中するのを妨げることもあるため好ましくありません。
• フッタ
  メールとWebサイトの繋がりをイメージできるように、フッタの背景色やフォントカラーは両者で揃えましょう。
• CTAボタン
  CTAボタンはメールの中で一番鮮やかではっきりしたものにして、受信者がアクションしやすいようにしましょう。

ステップ6：テスト

メールの準備が整ったらプレビューで確認しましょう。プレビューの確認ポイントは次のとおりです。

• レスポンシブメールとなっているか？
  レスポンシブメールとなっているか、デスクトップとモバイルの両方でチェックしましょう。
• リンクはすべて動作するか？
  すべてのリンク（画像のリンクを含む）の動作を確認しましょう。CTAボタンは指でクリックしやすいサイズかチェックしてください。
• ブランドを認識できるか？
  メールとWebサイトを細かく見比べましょう。メールのどこをみてもブランドがわかることが大事です。

マーケティングキャンペーン機能では、A/Bテストができます。カラフルなCTAボタンとテキストのリンクのどちらのほうがクリック数などのエンゲージメントが高いか、などを確認できます。こういった情報は今後メールのデザインを考える上で役に立ちます。

実際に送信する前に、以前紹介したチェックリストの全項目を満たしているか確認してください。

SendGridが提供するテンプレートは既にベースとなる要素が整っているため、デザイナーや開発者ではない人でも素早くメールが作れます。カスタマイズも簡単で、HTMLを知らなくても、会社のブランドやメッセージをメールに反映できるので、是非活用してください。