現在表示中:

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

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

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

注意:

Adobe Campaign の電子メールテンプレートを作成する際には、テンプレートの jcr:content ノードにプロパティ acMapping と値 mapRecipient を指定する必要があります。指定しない場合、AEM の「ページのプロパティ」フィールドで Adobe Campaign のテンプレートを選択できなくなります(フィールドが無効化されています)。

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

/libs/mcm/campaign/components/campaign_newsletterpage

ベストプラクティス 実装

レンダリングの一貫性が維持されるようにドキュメントの種類を指定します。

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

"/etc/designs/default/jcr:content/campaign_newsletterpage" の cq:doctype プロパティの設計変更によって設定できます。

デフォルトは「XHTML」です。

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

「HTML_5」に変更できます。

<!DOCTYPE HTML>

特殊文字が正確にレンダリングされるように文字定義を指定します。

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

UTF-8 に設定されます。

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

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

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

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

<div> タグは、コンポーネント編集が適切におこなえるようにオーサーモードでのみ使用されます。

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

すべてのテーブルに、border、cellpadding、cellspacing、width など必要な属性が含まれています。

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

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

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

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

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

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

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

画像

/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-families と font-sizes の選択をサポートしています。また、選択されたテキストへの font-families と font-sizes の適用もサポートしています。これらは <font> タグとしてレンダリングされます。
Arial、Verdana、Georgia、Times New Roman など、様々なプラットフォームで使用できる基本的なフォントを使用します。

ニュースレターのデザインに応じます。

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

一般

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

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

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

テンプレート

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

すべてに headerfooter および body セクションがあります。次に示すのは body セクションです。各テンプレートの列デザインはそれぞれ異なります(1、2 または 3 列)。

chlimage_1

コンポーネント

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

コンポーネント名 コンポーネントのパス
見出し /libs/mcm/campaign/components/heading
画像 /libs/mcm/campaign/components/image
テキストおよびパーソナライゼーション /libs/mcm/campaign/components/personalization
テキストと画像 /libs/mcm/campaign/components/textimage
リンク /libs/mcm/campaign/components/reference
Scene7 画像テンプレート /libs/mcm/campaign/s7image
ターゲット参照 /libs/mcm/campaign/components/reference

注意:

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー