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

注意

AEM電子メールコンポーネントは非推奨となりました。 コンテンツとスタイルを結合する電子メールの特性により、AEMで標準搭載された電子メールコンポーネントは、プロジェクトに必要なコンポーネントにカスタムスタイルを実装する必要があるので、顧客に対して限定的な再利用が可能になります。

電子メールコンポーネントはプロジェクトレベルで実装でき、非推奨のAEM電子メールコンポーネントはその実現方法を示します。 ただし、これらの非推奨コンポーネントはプロジェクトでは使用しないでください。

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

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

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

メモ

すべてのキャンペーンコンテンツは、タイプcq/personalization/components/ambitpagemasterページの下に作成する必要があります。

例えば、計画中のキャンペーン構造が

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

masterページの下にあることを確認する必要があります

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

メモ

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

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

/libs/mcm/campaign/components/campaign_newsletterpage

ベストプラクティス 実装

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

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

"/etc/designs/default/jcr:content/キャンペーン_newsletterpage"cq:doctypeプロパティを変更することで、設計を変更できます。

デフォルトは、"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>

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

追加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> タグは、コンポーネントの編集を正しく行うために、作成者モードでのみ使用します。

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

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

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

汎用

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

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

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

テンプレート

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

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

コンポーネント

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

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

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

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now