電子メールテンプレートのベストプラクティス

このドキュメントでは、適切な電子メールキャンペーンテンプレートを作成するための、電子メールデザインに関するいくつかのベストプラクティスについて説明します。

AEM で利用可能なデモキャンペーンは、これらすべてのベストプラクティスに従っています。デモキャンペーンでのベストプラクティスの実装方法は、各ベストプラクティスで説明しています。

独自のニュースレターを作成する際に、これらのベストプラクティスを利用してください。

メモ

すべてのキャンペーンコンテンツは、タイプcq/personalization/components/ambitpagemasterページの下に作成する必要があります。 例えば、キャンペーン構造を計画する場合、次のようになります。

  • /content/campaigns/teasers/en/campaign-promotion-global

マスターページの下に配置する必要があります。

  • /content/campaigns/teasers/master/en/campaign-promotion-global
メモ

Adobe Campaignのメールテンプレートを作成する場合、テンプレートの​jcr:content​ノードに​mapRecipient​の値を持つ​acMapping​プロパティを含める必要があります。含めないと、AEMの​Page Properties​でAdobe Campaignテンプレートを選択できません。

テンプレート/ページコンポーネント

/libs/mcm/campaign/components/campaign_newsletterpage

ベストプラクティス 実装

ドキュメントタイプを指定して、一貫したレンダリングを確実におこなうようにします。

先頭に DOCTYPE を追加します(HTML または XHTML)。

cq:doctypeプロパティを"/etc/designs/default/jcr:content/campaign_newsletterpage"で変更することで、デザインで設定できます。

デフォルトは、"XHTML" です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"HTML_5" に変更できます。

<!DOCTYPE HTML>

文字定義を指定して、特殊文字の正しいレンダリングを確実におこなうようにします。

<head>にCHARSET宣言(例:iso-8859-15、UTF-8)を追加します。

UTF-8 に設定します。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<table>要素を使用してすべての構造をコード化します。 より複雑なレイアウトの場合、テーブルをネストして複雑な構造を構築します。

電子メールは、css がなくても見やすくする必要があります。

テーブルは、コンテンツ構築でテンプレート全体にわたって使用されます。現在のところ、最大で 4 つのネストされたテーブルを使用しています(1 つの基本テーブル + 最大 3 つのネストレベル)。

<div> タグは、コンポーネントの適切な編集を確実におこなうために、オーサリングモードでのみ使用します。

要素の属性(cellpadding、valign、width など)を使用してテーブルの寸法を設定します。これは、ボックスモデル構造を強制します。

すべてのテーブルに、bordercellpaddingcellspacingwidthなど、必要な属性が含まれます。

テーブル内の要素の位置を調整するために、すべてのテーブルセルにvalign="top"属性が設定されています。

可能であれば、モバイルでの使いやすさを考慮します。メディアクエリーを使用して、小さい画面でのテキストサイズを大きくして、リンク用に親指サイズのヒット領域を提供します。

設計で可能であれば、電子メールをレスポンシブにします。

CSS スタイルがデモデザインの説明で使用されている限り、メディアクエリーを使用してモバイルフレンドリーなバージョンを提供します。
すべての CSS を最初に配置するよりも、インライン CSS が優れています。

基盤となる HTML 構造をより効果的に実演し、ニュースレターの構造を容易にカスタマイズできるようにするには、一部の CSS 定義のみをインラインにします。

ベーススタイルとテンプレートのバリエーションは、ページの<head>内のスタイルブロックに抽出されました。 ニュースレターの最終版では、これらの CSS 定義は、HTML にインラインになっている必要があります。自動インライン化メカニズムが計画されていますが、現在は利用できません。

CSS をシンプルに保ちます。複合スタイル宣言、短縮形コード、CSS レイアウトプロパティ、複雑なセレクターおよび疑似要素を避けます。 CSS スタイルがデモデザインの説明で使用されている限り、推奨される CSS は次のようになります。
電子メールの幅は、最大 600 ~ 800 pixel にする必要があります。これは、多くのクライアントで提供されるプレビューパネルのサイズ内での動作を優れたものにします。 デモデザインでは、コンテンツテーブルのは600pxに制限されています。

画像

/libs/mcm/campaign/components/image

ベストプラクティス 実装
画像に​alt​属性を追加します。 alt​属性は、画像コンポーネントに必須として定義されています。
画像には、png​形式ではなく​jpg​形式を使用します 画像は、画像コンポーネントでは、常に、 JPG として提供されます。
テーブルでは、背景画像の代わりに<img>要素を使用します。 テンプレートでは、背景画像データは使用されていません。
写真に style="display block" 属性を追加します。Gmail での表示を向上できます。 すべての画像には、デフォルトで​style="display block"​属性が含まれます。

/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage

ベストプラクティス 実装
CSS(font-family)では、スタイルの代わりにhtml <font>を使用します。 RichTextEditor(例:textimage コンポーネントに含まれるもの)は、選択したテキストへのフォントファミリーおよびフォントサイズの選択および適用をサポートするようになりました。これらは<font>タグとしてレンダリングされます。
Arial、Verdana、GeorgiaTimes New Romanなど、基本的なクロスプラットフォームフォントを使用します。

ニュースレターのデザインによって異なります。

デモデザインでは、Helvetica フォントが使用されますが、存在しない場合は一般的なサンセリフフォントに戻ります。

汎用

ベストプラクティス 実装
W3C バリデーターを使用して、HTML コードを修正します。すべての開始タグが適切に閉じられるようにします。 コードは検証されました。XHTMLトランジショナルDoctypeの場合、<html>要素の欠落しているxmlns属性のみが欠落します。
JavaScriptやFlashを気にしないでください。これらのテクノロジーは、主にEメールクライアントでサポートされていません。 JavaScript も Flash も、ニュースレターテンプレートでは使用していません。
マルチパート送信では、プレーンテキストバージョンを追加します。 新しいウィジェットは、ページプロパティに組み込まれ、ページコンテンツからプレーンテキストを簡単に抽出できます。これは、最終的なプレーンテキストバージョンの開始点として使用できます。

キャンペーンニュースレターのテンプレートと例

AEM には、キャンペーンニュースレターを作成するためのいくつかのテンプレートおよびコンポーネントが標準で付属しています。これらのテンプレートおよびコンポーネントを使用して、カスタムのニュースレターを作成できます。

テンプレート

基盤を提供し、様々なコンテンツの流れを可能にするために、3 つの少しずつ違ったテンプレートのタイプが標準で用意されています。これらを使用して、カスタムニュースレターを簡単に作成できます。

すべてに​ヘッダーフッター本文​セクションがあります。 bodyセクションの下の各テンプレートは、列のデザイン(1列、2列または3列)で異なります。

chlimage_1-318

コンポーネント

現在、キャンペーンテンプレート内で使用可能なコンポーネントが 7 つあります。これらのコンポーネントは、すべてアドビのマークアップ言語である HTL に基づいています。

コンポーネント名 コンポーネントパス
見出し /libs/mcm/campaign/components/heading
画像 /libs/mcm/campaign/components/image
テキストおよびパーソナライゼーション /libs/mcm/campaign/components/personalization
Textimage /libs/mcm/campaign/components/textimage
リンク /libs/mcm/campaign/components/reference
Dynamic Media Classic(旧称Scene7)画像テンプレート /libs/mcm/campaign/s7image
ターゲット参照 /libs/mcm/campaign/components/reference
メモ

これらのコンポーネントは、メールコンテンツに最適化されています。つまり、このドキュメントで説明したベストプラクティスを厳密に順守します。その他の標準提供コンポーネントを使用すると、通常、これらのルールに違反します。

これらのコンポーネントについて詳しくは、Adobe Campaign コンポーネントを参照してください。

このページ