メールコンテンツをデザインする

Optimizelyマニュアル｜Optimizelyのプラットフォームを使用して、ブランディングとコンプライアンスを備えたモバイル対応の電子メールコンテンツをデザインする方法を説明します。

注記

2023 年 4 月より前にキャンペーンにアクセスしていた場合、Optimizely はタブ名を [キャンペーン]から[アクティベーション]に更新しました。 すべての機能は同じままです。

多くのユーザーは、デスクトップではなくモバイル デバイスで電子メールを表示します。 このガイドのヒントを使用して、最高のクリック率を得るためにモバイル向けのコンテンツを設計します。 モバイル バージョンを簡単にプレビューし、テスト電子メールを送信して携帯電話で直接確認できます。

Responsive Column要素を新しい行にドロップして、モバイルで応答する列を作成します。 グループ化された列要素を使用して、列を 1 行に収めます。

responsive_columns.gif

メールヘッダーをデザインする

ヘッダーをカスタマイズして会社のブランドを含めます。 デフォルトにはロゴと主要カテゴリへのリンクが含まれています。独自のロゴとカテゴリに一致するようにこれを変更するか、カテゴリを完全に削除します。 シーズン、プロモーション、トランザクション、またはコンテンツのテスト用に、ブランディングを含むいくつかの異なるヘッダーを保存します。

1. ヘッダー要素を見つけます。 Header要素をテンプレートに取り込んで変更できるようにします。

2. ロゴを変更します。 まずはヘッダーにロゴを付けることから始めます。 ロゴをドロップし、希望のサイズに設定します。 ヒント:サイズを変更するときにShift キーを押したままにすると、10 ずつジャンプできます。

3. ナビゲーション リンクを更新します。 ナビゲーション要素を使用すると、リンクの追加と削除が簡単になります。 ナビゲーション リンクを削除するには、要素を選択して削除します。 それ以外の場合は、適切な見出しとリンクが含まれるようにテキストとリンクを更新します。

4. スタイルとブランディングを更新します。 ヘッダー要素内のフォント、色、またはより高度な構造を更新できます。 後で必ずこのステップに戻って、より高度なスタイルを追加してください。

5. ヘッダー要素を保存します。 ヘッダーを編集した後、将来使用できるように要素を保存します。

電子メールのフッターをデザインする

すべての電子メールには、CAN-SPAM 準拠のための適切なフッターが必要です。 Optimizely Data Platform (ODP) は、キャンペーンに簡単に追加できるデフォルトのフッターを作成して、以下を確実に含めることができます。

• 配信停止情報

• 会社名

• 会社の住所

フッターのデザインは任意に変更できますが、この情報を含める必要があります。そうしないと、配信に悪影響を及ぼします。

コンテンツで使用するフッター要素を更新する方法について説明します。

1. フッター要素を見つけます。 フッターを作成するには、 「Engage」>「テンプレート」に移動し、 「新しいテンプレートの作成」をクリックします。 テンプレート内に入ったら、フッター要素をドラッグ アンド ドロップします。

2. ソーシャル リンクを更新します。 ソーシャル リンクに正しいリンクが含まれていることを確認してください。 ソーシャル ネットワークを追加または削除して、必要なソーシャル ネットワークのみを含めることができます。

3. デザイン要素を更新します。 配信停止情報、会社名、住所を削除しない限り、デザイン要素（フォント、色、構造など）を変更することができます。

4. プリファレンス センターへのリンク。 プリファレンス センターを使用している場合 (そうすべきです)、より具体的なプリファレンスを管理し、ユーザーに関するより多くの情報を収集できます。 フッターのメイン リンクを、直接の登録解除リンクではなく、設定センターへのリンクに変更します。

注 選択リストにプリファレンス センターが表示されない場合は、このガイドを使用してプリファレンス センターを設計し、公開してください。

1. フッター要素を保存します。 以下に示すように、要素ツリーでフッターにしたいセクションを選択して、フッター要素を保存してコンテンツ内で使用します。 [保存] (アイコン)をクリックし、既存のフッターを置き換えるか、新しいフッターを保存するかを選択します。

生の HTML をデザインに含める

Raw HTMLコンポーネントを使用すると、画像のサイズ変更、サードパーティの機能との統合、または特定の HTML/CSS を必要とするものなど、カスタム HTML/CSS を電子メール デザイナーに追加できます。

注記

このコンポーネントは、電子メール クライアントで HTML を使用した経験がある場合にのみ使用してください。

コンポーネントをテンプレートにドラッグ アンド ドロップし、カスタム HTML/CSS を使用して編集します。

テストをプレビューまたは送信して内容を確認します。

電子メール用の HTML テンプレートをインポートする

パーソナライズ用のカスタム リキッドを作成しないようにコンテンツを作成するには、Optimizely Data Platform (ODP) 内の電子メール デザイナーを使用する必要がありますが、事前に構築された任意のテンプレートをインポートできます。

電子メール デザイナーが表示されるどこにでも HTML をインポートできます。

注記

• HTML テンプレートを Optimizely Engagement Designer テンプレートに自動的に変換することはできません。

• Raw HTMLコンポーネントを使用して、設計された電子メールに Raw HTML を挿入します。

• パーソナライズを使用するには、Liquid を直接使用します。

HTML テンプレートをインポートするには:

1. [アクティベーション]で Optimizely Engagement Designer を開きます。

2. [プレーン HTML に変換] をクリックします。

3. ソースをクリックします。

4. HTML を貼り付けます。

5. デザインを表示するには、 「ソース」をクリックします。