MAを使ったメールキャンペーンで新たにメールアセットを作成する場合、膨大な時間と手間がかかります。
配信が定常化していればいるほど、周囲からの目として「当たり前」のようにメールキャンペーンが履行されているように見えますが、メール担当者の視点では各配信には工数がかかるのが実際です。
一般的に、BtoB企業では「月２～５回メール配信を行っている」という調査結果もあるように、企業によっては「短期間での文面作成」「複数のキャンペーンを並行させた進行」といった対応も求められるでしょう1。
しかし、毎回何もない状態から作成していては工数だけでなく、メールのデザインなどの修正工数もかかります。メール制作者によってクオリティにもばらつきが出る原因となり、企業のブランドイメージの棄損にも繋がりかねません。
2024年現在、デジタルマーケティング戦略において自動化されたメール配信の重要性が増すなかでは、本ブログのBtoBマーケティングでなぜメールのUI/UXを改善する必要があるのかでも解説したように、メールのUI/UXには細心の注意が求められます。
そこで今回は、これらの課題を解決できる「モジュラーテンプレート」について、基本的概念を当社事例も交えて解説した上で、実際の制作方法や運用上のベストプラクティスを紹介します。
目次
マーケティングメールの制作における課題
MAで配信するメール制作では、「WYSIWYG（What You See Is What You Get）エディタ」のテンプレートを利用している企業も多いのではないでしょうか2。
WYSIWYGエディタの場合、「見たままのもの」を実際に作成・出力できるため、メール作成の経験が少ない場合も容易に作成し、装飾やコンテンツ編集も簡単に行えます。
主要なMAツールの1つであるOracle Eloquaは、「デザイン・エディタ」と呼ばれるWYSIWYG編集ツールによるメールアセット制作機能を提供しており、ユーザはコンテンツやレイアウトを「ドラッグ&ドロップ」で作成可能です3。 これをテンプレートとして保存することで、メール制作にかかる労力や工数を大幅に削減できるでしょう。
しかし「テンプレート化する」ということは、ある型にはめて、毎回同じレイアウトで作成することも意味しますので、カスタマイズの自由度は下がってしまいます。
メールマーケティングの目的が毎回同じであれば問題ないですが、多くの場合さまざまな意図のマーケティングコミュニケーションが実在します。
例えば「ウィークリーニュースレター」「イベント告知」「自社からの公式通知（トランザクショナルメール）」などでは、コピーも違えばレイアウトも変える必要があるでしょう。
その場合、配信目的ごとにテンプレートを作成していては、「各テンプレートのメンテナンス工数の増大」「テンプレート自体のクオリティ低下」が懸念されます。
モジュラーテンプレートとは
このような課題を解決するために注目されているのが「モジュラーテンプレート」です4。「モジュラーデザイン」とも呼ばれ、互換性が高い少数の部品（モジュール)を事前に複数設計しておき、それらを組み合わせて多様な製品を設計する手法です5。
モジュラーテンプレートでは、HTMLとCSSを用いてコンポーネントを予め作っておき、それらを組み合わせることで、手間をかけずにカスタマイズ性のあるメールを短時間で作成できます。
これにより、デザインの一貫性を維持しつつ、キャンペーンごとの独自性を損なわずに、効果的なマーケティングコミュニケーションを実施可能です。
つまりは、モジュールをレゴブロックのように考えて、自由自在に組み合わせることをイメージするとよいでしょう。
モジュラーテンプレートとWYSIWYGテンプレートの違い
WYSIWYGテンプレートの一部の制限を、モジュラーテンプレートを使って克服することは可能ですが、そのためにはHTMLやCSSに関する最低限の知識が必要です。
つまり、モジュラーテンプレートが必ずしもWYSIWYGテンプレートの上位互換という訳ではなく、以下のようにメリット・デメリットがあるのです。
| 特徴 | モジュラーテンプレート | WYSIWYGテンプレート |
|---|---|---|
| カスタマイズ性 | 高度にカスタマイズ可能 | 基本的なカスタマイズに限定 |
| デザインの自由度 | 自由なカスタマイズが可能 | テンプレートに依存 |
| レスポンシブデザイン | 細かい調整が可能 | 一般的なデバイスに対応 |
| 保守性 | １つのモジュールメンテンナンスにより全てのテンプレートに適用される | 各テンプレートに対してメンテンナンスが必要 |
| 再利用性 | モジュール単位での再利用が容易 | テンプレート全体の再利用に留まる |
| 技術的要求 | HTML/CSSの知識必要 | コーディングスキル不要 |
| 初期設定の時間 | 長い | 短い |
| メールクライアントの互換性 | 最適化が可能 | レイアウト崩れが生じやすい |
モジュラーテンプレートは、デザインの自由度が高く、高度なカスタマイズを行うことが可能です。全てのモジュールが１つのテンプレートに内包されるため、変更が生じた際にテンプレート1つの改修のみで済む保守性の高さのメリットがあります。
反面、一般的なテンプレートと比べると、使用にはある程度の技術的な知識が必要です。一からコーディングしてメール制作する必要はないため高度なHTML/CSSの知識は不要ですが、モジュラーテンプレートの組み合わせを行う際に最低限の知識は求められます。
WYSIWYGテンプレートは、HTML/CSS等の技術的な知識がなくても直感的に利用することが可能です。実際に画面上で見たままのレイアウトを編集することができるため、レイアウトやデザインの変更が即座に視覚化され、迅速なメール作成を行えます。
一方で、カスタマイズの選択肢が限られている場合が多く、ユーザがテンプレートの提供するオプション内でしか変更を加えられないという制限があります。メールクライアントの互換性についても、特にBtoB企業で利用の多いOutlookに関してはHTMLのレンダリングが特殊であり、レイアウトの微調整が難しいWYSIWYGテンプレートでは完全にレイアウトの制御ができないでしょう。
モジュラーテンプレートを導入するべきかどうか判断基準
それぞれテンプレートの特徴から、複数のコミュニケーションタイプでメール配信することが多く、効率的なテンプレート管理が求められる企業、あるいは時間とリソースを投資して、自社ブランドのビジュアルガイドラインに沿った高度なメールマーケティングを実現したい企業は、モジュラーテンプレートの導入が推奨されます。
ただし、その場合はHTML/CSSの技術的な基礎知識を持つマーケターが在籍している必要があります。
そのため、メールマーケティングを始めたばかりであり、まずは社内で迅速かつ簡単にメール配信を行う体制を整える必要がある企業は、WYSIWYGメールやテキストメールなどを利用したメールから始めて、徐々に高度化していくといったロードマップを組むことが重要です。これらはマーケティングのフェーズやリソースによっても変わりますので、マーケティングの目的や運用全体を見渡した上で方針決めをすべきでしょう。
このように、モジュラーテンプレートの導入や運用は、運用レベルとしてある程度成熟していることが求められますが、効果としては非常に大きなものになります。
モジュラーテンプレートを利用するメリット
WYSIWYGテンプレートの特徴との比較を行いましたが、ここからはモジュラーテンプレートをメールマーケティングにおいて活用するメリットについてより詳細に解説します。
メール作成の効率性
モジュラーテンプレートはコンポーネントを組み合わせることでメール作成できるため少ない工数でメールを作成できるようになります。
海外では、モジュラーテンプレートの活用により制作時間を25%削減できた事例もあることから、効率アップに大いに貢献してくれることでしょう6。
デザインの自由度
HTMLとCSSを使用して細かいデザインやレイアウトを調整できます。これにより、自社ブランドのビジュアルガイドラインと完全に合致したメール作成が可能です。
高いカスタマイズ性
モジュールを必要に応じて追加、削除、再配置することで、各キャンペーンや受信者のニーズに合わせた高度なカスタマイズが実現できます。
メールクライアントの互換性
正しくコーディングされたHTMLモジュールは、異なるメールクライアントやデバイス間での互換性を保つことが可能です。
メンテンナンス工数の軽減
モジュラーテンプレートを用いれば、メールテンプレートに変更が生じた場合、個別のメールアセットに対して修正をかける必要はありません。そのため、該当するモジュールを変更するのみで済むようになり、メンテンナンス時間の節約に繋がります。
再利用性とスケーラビリティ
一度作成したモジュールは保存され、異なるメールキャンペーンで再利用可能です。この機能も、時間とコストの削減に役立ちます。
モジュラーテンプレートの構成要素の例
当社のマーケティング活動では、以下のように想定されるコミュニケーションの全パターンを定義した上でモジュールデザインを組んでいます。
マーケットワン・ジャパンのケーススタディ
運用しやすいように配信ごとに使用するモジュールを型化することでメール制作の効率化や一貫性の担保が可能です。
ここからは、上記モジュラーテンプレートを例に構成要素を紹介します。なお、これらのモジュールは、HTMLとCSSの組み合わせによって作成され、簡単にカスタマイズや再配置が可能です。
①：ヒーローイメージ
ヒーローイメージは、Eメールの最上部に配置される大きなビジュアルで、受信者の注意を引き付けるためのものです。
このヒーローイメージにメールの内容を端的に表すコピーと、受信者に特定のアクションを促すCTA（Call to Action）を配置しています。
このように配置することで、メール開封時に最初に目に留まるヒーローイメージに記載されているコピーから記事やイベント内容などに興味を持った読者はCTAボタンをすぐに押せるため、誘導したいページへただちに遷移させることが可能です。
②：CTA付きメール本文
メールの本文はメッセージの主要部分には「製品の情報」「キャンペーンの詳細」「企業からのお知らせ」などが含まれます。ここでも、本文直下にCTAボタンを配置することで、メッセージを読んで興味を持った読者がすぐにコンテンツにアクセスしやすくなります。
③：リスト付きメール本文
リスト形式でコンテンツの内容を紹介する際には「リスト付きメール本文のモジュール」を使用します。この場合、「CTA付きメール本文と組み合わせて使用する」「どちらか一方だけ使用する」ことも可能です。
④：スピーカー
イベント集客用のメール配信では、登壇者を紹介するモジュールを使用するのが効果的です。登壇者の顔写真を使用して経歴や登壇内容の紹介を入れることで、どのようなイベントなのか読者がよりイメージしやすくなるでしょう。
⑤：ブログカード（注目コンテンツ）
注目コンテンツモジュールは「特定の製品や記事」「プロモーション」を強調するために使用されます。このセクションは通常、魅力的な画像とそれに関連する短い説明文で構成しています。
ブログカードでは、コンテンツイメージに合った画像と一緒にサマリーを記載したモジュールがあると読者の目を引きコンバージョンへと繋がりやすくなります。
⑥：ブログカード（関連コンテンツ）
関連コンテンツモジュールには「読者が興味を持ちそうな追加情報」を提供する役割があります。例えば「関連するブログポスト」「製品」「サービスへのリンク」を設置することで、サイト内の回遊を促せます。
モジュラーテンプレートの制作方法
以上のような有用性を持つモジュラーテンプレートについて、当社では下記の手順で作成しています。
- 計画：コミュニケーションタイプの決定とモジュールの選定
- デザイン：ユーザの関与を高める視覚的要素の組み込み
- 実装：HTML/CSSを用いたテンプレートの構築
以下より、詳しく解説します。
計画：コミュニケーションタイプの決定とモジュールの選定
メール配信におけるモジュラーテンプレート作成の計画段階では、社内で必要とするコミュニケーションタイプ（例：イベント案内、プロモーション、ニュースレターなど）を洗い出し、それぞれ特定のキャンペーンの目的に応じたモジュールを選定します。
例えば、「製品の展示には魅力的な製品画像を含むモジュール」「教育的コンテンツには情報を詳述するテキストモジュール」といった形です。この際、各モジュールは柔軟性が高く、状況に応じて調整可能でなければなりません。これにより、1つのテンプレートがさまざまなタイプのメールに対応できるようになりますので、組織のリソースの有効活用が可能です。
当社では「毎週1回の新着ブログ紹介のメール配信」「四半期に一度のホワイトペーパー配信」「定期的なイベント案内」にコミュニケーションタイプを分けて必要なモジュールを選定しています。
ブログ配信を例にして必要なモジュールを考えてみましょう。当社では毎週1回新着記事とその関連記事の紹介をメールで行っています。
この際、必要な要件は「メールを開いてすぐ何に関するメールなのかが分かる」「記事紹介文を読んでコンテンツに興味をもった読者がすぐにブログ記事へと遷移できる」「新着記事に関連する記事を煩雑にならない程度におすすめできる」などですので、それに応じたモジュールを選択しています。
その後、「①：ヒーローイメージ→②：メール本文→③：ブログカード（注目／関連コンテンツ）」の順でコンテンツを作成していくことで、一本の配信メールを完成させる手順です。
デザイン：ユーザの関与を高める視覚的要素の組み込み
デザイン段階では、ユーザの注意を引きつけ、関与を高めるための視覚的要素（例：魅力的なカラースキーム、読みやすいフォント、直感的なレイアウト）を取り入れます。
ヒーローイメージやCTAボタンは特に重要であり、ユーザにアクションを促すようにデザインしましょう。
当社では、ヒーローイメージに記事やホワイトペーパーのポイントを端的に記載することで読者の興味関心を引き、ヒーローイメージ内のCTAからアクションへと繋げる構成にしています。
加えて、ブログとホワイトペーパーでヒーローイメージを変えることで定期購読している読者にとって今回は何の配信であるかが直感的に分かるように作成しているのが特徴です。
ブログ記事紹介メールのデザイン例
ホワイトペーパー紹介メールのデザイン例
実装：HTML/CSSを用いたテンプレートの構築
実装段階では、HTMLとCSSを使用して、計画とデザインの段階で決定したモジュールをコーディングします。HTMLはメールの骨組みを形成し、CSSはスタイルとレイアウトを定義するためのコードです。
モジュラーテンプレートは非エンジニアであるマーケティング担当者でも利用できることが魅力であるため、テンプレート運用者が容易に理解・運用できることを意識したコーディングが重要になります。
当社では、メール制作者がキャンペーンに合わせたモジュールの移動・削除が容易にできるよう直感的に分かりやすいHTMLの記述をしています。
例えば、各モジュールの初めにインラインコメントでモジュールの説明を入れることによって、どのコードがどのモジュールを指しているのかが分かりやすくなります。
テスト：複数のEメールクライアントとデバイスでの表示確認
作成したテンプレートは「異なるEメールクライアント（例：Gmail、Outlookなど）」「異なるデバイス（例：スマートフォン、タブレット、デスクトップ）」での表示を確認するために徹底的にテストする必要があります。
これにより、レイアウト崩れを防ぎ、すべてのユーザに対して一貫した体験を提供できるようになります。
当社では「Email on Acid」というさまざまなメールクライアントやデバイスでのメール表示をプレビューできるツールを利用して、マルチクライアントに対応したメール作成を行っています7。このツールではダークモード有効時の確認もできるため、ダークモードにも最適化されたメールであるかも容易にテスト可能です。
関連記事：「ダークモード」対応は必須、メールマーケティングでユーザ離れを回避できる理由とは？
運用上のベストプラクティス
実際にモジュラーテンプレートを利用してメールを作成する体制が整った後、運用段階におけるベストプラクティスとしては以下のものが挙げられます。
- モジュール選択において必要な機能と目的を明確化する
- デザインの一貫性を保てる仕組みを構築する
次項より、個別に解説します。
モジュール選択において必要な機能と目的を明確化する
多数のモジュールからコミュニケーションタイプにあったメールを作成できるのはよいことですが、選択肢が多いと同時にどのモジュールが最適かを判断するのが難しくなる可能性があります。
モジュールテンプレートの制作方法の「計画」の段階でも述べましたが、コミュニケーションタイプごとに使用するモジュールを事前に定めることで、選択プロセスを簡素化し、適切なモジュールを選択する必要があります。
その上では、各モジュールの機能と目的を明確に理解し、キャンペーンの要件に合わせて選択する能力が求められます。
デザインの一貫性を保てる仕組みを構築する
制作プロセスにおいて異なる担当者が関わることは一般的です。当社でもマーケティングメール作成は複数の担当者が関わります。
担当者が変わる際、新たな担当者がモジュールテンプレートの運用方法を完全に理解していない場合、メールの一貫性が失われるリスクがあります。
これを避けるため、組織内で統一されたデザインガイドラインを整備することで、異なる制作者が同じルールに基づいて作業を進められるようになります。
コミュニケーションタイプごとに利用するモジュールをまとめてプロダクション時に参照できるようにしておくとよいでしょう。これにより、メール配信キャンペーンの一貫性が保たれ、品質維持が期待できます。
おわりに
モジュラーテンプレートはメール作成工数を削減するだけでなく、コミュニケーションタイプに沿って読み手に一貫した企業イメージを提供することが可能です。
メールマーケティングは最もROIが高いマーケティング施策という調査結果も出ていいます8。読み手へ届けたい情報が伝わるような構成・レイアウトで毎回表示されるような仕組みを整えることで更に施策の効果が実感できるでしょう。
当社もモジュラーテンプレートを利用して、週に一度のメールマガジンを配信しています。「実際にレイアウト・デザインがどのようになっているのか」とご興味のある方は、是非以下よりご確認ください。
- Coschedule Blog「The Best Email Marketing Sending Frequency Backed By 20 Studies」 [↩]
- TechTarget「WYSIWYG (what you see is what you get)」 [↩]
- ORACLE「Creating emails in the Design Editor」 [↩]
- ORACLE「Modular Email Architectures: Efficient Workflow and Foundation for Personalization」 [↩]
- Unext「What is a Modular Design? Everything You Want to Know in 8 Easy Answers!」 [↩]
- Modern Marketing Blog「Modular Email Architectures: Efficient Workflow and Foundation for Personalization」 [↩]
- Email on Acid「Never send another broken email」 [↩]
- The Web App Market「6 Simple Ways To Build An Email List From Scratch 2023」 [↩]
