ドキュメントAEM 6.4管理ガイド

メールテンプレートのベストプラクティス best-practices-for-email-templates

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Admin
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

このドキュメントでは、E メールキャンペーンテンプレートをよく開発した結果として生じる、E メールのデザインに関するベストプラクティスの一部を説明します。

AEMで利用できるデモキャンペーンは、これらすべてのベストプラクティスに従っています。 デモキャンペーンでのベストプラクティスの実装方法については、各ベストプラクティスを参照してください。

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

NOTE
すべてのキャンペーンコンテンツは、master タイプのページ cq/personalization/components/ambitpage の下に作成してください。例えば、キャンペーン構造を計画する場合、次のようになります。
  • /content/campaigns/teasers/en/campaign-promotion-global
マスターページの下に配置する必要があります。
  • /content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
Adobe Campaign のメールテンプレートを作成する際には、テンプレートの jcr:content ノードにプロパティ acMapping と値 mapRecipient を指定する必要があります。指定しない場合、AEM の​ ページのプロパティ ​フィールドで Adobe Campaign のテンプレートを選択できなくなります（フィールドが無効化されています）。

テンプレート/ページコンポーネント template-page-component

/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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

「HTML5」に変更できます。

<!DOCTYPE HTML>

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

CHARSET 定義（例：iso-8859-15、UTF-8）を <head> に追加します。

UTF-8 に設定されています。

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

<table>element を使用してすべての構造をコーディングします。より複雑なレイアウトを作成するには、テーブルをネストして複雑な構造を作成する必要があります。

CSS がなくても E メールが適切に表示されるはずです。

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

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

テーブルの寸法を設定するには、要素の属性（cellpadding、valign、width など）を使用します。 これにより、ボックスモデル構造が強制的に作成されます。

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

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

可能な場合は、モバイルに優しいを説明します。 メディアクエリを使用して、小さい画面でテキストサイズを大きくし、リンクにサムサイズのヒット領域を指定します。

デザインで許可されている場合は、E メールをレスポンシブにします。

CSS スタイルを使用してデモデザインを説明している限り、モバイルに適したバージョンを提供するためにメディアクエリが使用されています。
すべての CSS を先頭に配置するよりも、インライン CSS の方が効果的です。

基になるHTML構造をより効果的にデモし、ニュースレターの構造を簡単にカスタマイズできるようにするために、一部の CSS 定義のみがインライン化されています。

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

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

画像 images

/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> を使用します
RichTextEditor（例：textimage コンポーネントに含まれるもの）は、選択したテキストへのフォントファミリーおよびフォントサイズの選択および適用をサポートするようになりました。それらは、<font> タグとしてレンダリングされます。
Arial、Verdana、Georgia および Times New Roman など、基本的な、クロスプラットフォーム対応フォントを使用します。

ニュースレターのデザインに依存します。

デモデザインでは、フォント「Helvetica」が使用されますが、存在しない場合は汎用の sans-serif フォントに戻ります。

一般 generic

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

Campaign ニュースレターのテンプレートと例 campaign-newsletter-templates-and-examples

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

テンプレート templates

堅牢な基盤を提供し、様々なコンテンツフローの可能性を広げるために、すぐに使用できる 3 つのテンプレートタイプが少し異なります。 これらを使用すると、カスタムのニューレターを簡単に作成できます。

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

chlimage_1-318

コンポーネント components

現在 キャンペーンテンプレート内で使用できる 7 つのコンポーネント. これらのコンポーネントは、すべてAdobeマークアップ言語に基づいています 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
NOTE
これらのコンポーネントは、メールコンテンツ用に最適化されています。つまり、このドキュメントで概要を説明しているベストプラクティスに従います。 その他の標準コンポーネントを使用すると、通常、これらのルールに違反します。

これらのコンポーネントについて詳しくは、 Adobe Campaignコンポーネント.

recommendation-more-help
5ce3024a-cbea-458b-8b2f-f9b8dda516e8