> For the complete documentation index, see [llms.txt](https://manual.dxable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.dxable.com/optimizely/platform/optimizely-data-platform/campaign-content/design-email-content.md).
# メールコンテンツをデザインする
注記
2023 年 4 月より前にキャンペーンにアクセスしていた場合、Optimizely はタブ名を \[**キャンペーン]から\[アクティベーション]**に更新しました。 すべての機能は同じままです。
多くのユーザーは、デスクトップではなくモバイル デバイスで電子メールを表示します。 このガイドのヒントを使用して、最高のクリック率を得るためにモバイル向けのコンテンツを設計します。 [モバイル バージョンを](https://support.optimizely.com/hc/en-us/articles/4407268985101)簡単にプレビューし、テスト電子メールを送信して携帯電話で直接確認できます。
**Responsive Column**要素を新しい行にドロップして、モバイルで応答する列を作成します。 **グループ化された列要素**を使用して、列を 1 行に収めます。
### メールヘッダーをデザインする
ヘッダーをカスタマイズして会社のブランドを含めます。 デフォルトにはロゴと主要カテゴリへのリンクが含まれています。独自のロゴとカテゴリに一致するようにこれを変更するか、カテゴリを完全に削除します。 シーズン、プロモーション、トランザクション、またはコンテンツのテスト用に、ブランディングを含むいくつかの異なるヘッダーを保存します。
1. ヘッダー要素を見つけます。\
**Header**要素をテンプレートに取り込んで変更できるようにします。
2. ロゴを変更します。\
まずはヘッダーにロゴを付けることから始めます。 ロゴをドロップし、希望のサイズに設定します。\
**ヒント:サイズを変更するときにShift キー**を押したままにすると、10 ずつジャンプできます。
3. ナビゲーション リンクを更新します。\
ナビゲーション要素を使用すると、リンクの追加と削除が簡単になります。 ナビゲーション リンクを削除するには、要素を選択して削除します。 それ以外の場合は、適切な見出しとリンクが含まれるようにテキストとリンクを更新します。
4. スタイルとブランディングを更新します。\
ヘッダー要素内のフォント、色、またはより高度な構造を更新できます。 後で必ずこのステップに戻って、より高度なスタイルを追加してください。
5. ヘッダー要素を保存します。\
ヘッダーを編集した後、将来使用できるように要素を保存します。
### 電子メールのフッターをデザインする
すべての電子メールには、CAN-SPAM 準拠のための適切なフッターが必要です。 Optimizely Data Platform (ODP) は、キャンペーンに簡単に追加できるデフォルトのフッターを作成して、以下を確実に含めることができます。
* 配信停止情報
* 会社名
* 会社の住所
フッターのデザインは任意に変更できますが、この情報を含める*必要があります*。そうしないと、配信に悪影響を及ぼします。
コンテンツで使用する**フッター要素**を更新する方法について説明します。
1. フッター要素を見つけます。\
フッターを作成するには、 **「Engage」>「テンプレート」に移動し**、 **「新しいテンプレートの作成」をクリックします**。 テンプレート内に入ったら、**フッター**要素をドラッグ アンド ドロップします。
2. ソーシャル リンクを更新します。\
ソーシャル リンクに正しいリンクが含まれていることを確認してください。 ソーシャル ネットワークを追加または削除して、必要なソーシャル ネットワークのみを含めることができます。
3. デザイン要素を更新します。\
配信停止情報、会社名、住所を削除しない限り、デザイン要素（フォント、色、構造など）を変更することができます。
4. プリファレンス センターへのリンク。\
プリファレンス センターを使用している場合 (そうすべきです)、より具体的なプリファレンスを管理し、ユーザーに関するより多くの情報を収集できます。 フッターのメイン リンクを、直接の登録解除リンクではなく、設定センターへのリンクに変更します。
注\
選択リストにプリファレンス センターが表示されない場合は、[このガイドを使用してプリファレンス センターを設計し、公開してください](https://support.optimizely.com/hc/en-us/articles/4407282888077)。
1. フッター要素を保存します。\
以下に示すように、要素ツリーでフッターにしたいセクションを選択して、フッター要素を保存してコンテンツ内で使用します。\
\&#xNAN;**\[保存] (アイコン)**をクリックし、既存のフッターを置き換えるか、新しいフッターを保存するかを選択します。
### 生の 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. デザインを表示するには、 **「ソース」**をクリックします。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://manual.dxable.com/optimizely/platform/optimizely-data-platform/campaign-content/design-email-content.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.