# Engageコンテンツ作成

[Beefree SDK](https://docs.beefree.io/end-user-guide/builders/design-builder-overview)を利用したEngage StudioのEmail Editorは、見栄えの良いレスポンシブなメールキャンペーンを作成するための堅牢でユーザーフレンドリーなインターフェースを提供します。このガイドでは、直感的なドラッグアンドドロップエディタを使用してメールをデザインする方法と、Liquidテンプレートを使用してパーソナライズする方法について説明します。

## はじめに

* **Email Messages > Create New**に移動
* 空白のテンプレートから始めるか、事前にデザインされたテンプレートを選択


### インターフェースの理解

Email Content Editorは3つの主要なセクションで構成されています。

* **Stage** : コンテンツブロックと行をドラッグして配置するキャンバス。
* **Sidebar** : レイアウト、コンテンツ、スタイルを設定する場所。
* **Toolbar** : デバイスプレビュー（デスクトップ/モバイル）、元に戻す/やり直し、プレビュー/テスト送信を含みます。


![](/assets/engage-content-creation-2025-05-25-10-25-20.6c506a324094be74fcdaca86bb881f5926b0a278a58fefcae2f328f8424fc829.5be018a0.png)

### メールの構築

#### ステップ1：構造を追加

* Sidebarから「Row」要素をStageにドラッグしてレイアウトを定義します。
* 複数の列構成から選択します。


**ヒント：**

* Rowは水平構造（セクション）を定義します。
* 最大6列をサポート（メール）
* カスタマイズ可能なオプション：背景色、境界線、モバイル動作。
* 列は個別にサイズ変更、追加、またはスタイル設定できます。


![](/assets/engage-content-creation-2025-05-25-10-26-32.63d47054b872244f8cb5d7413631fc6f8e301619944c6a464668e9badfabc49c.5be018a0.png)

#### ステップ2：コンテンツを追加

* Text、Image、Buttonなどのコンテンツブロックを行セクションにドラッグします。
* 要素をクリックしてSidebarで設定を開きます。


**機能：**

* 列幅に自動フィット。
* Text、Media（Image/Video/GIF）、Interactive（Button、Social）、Layout（Divider/Spacer/Menu）をサポート。
* 個別のカスタマイズ：パディング、可視性、条件。


#### ステップ3：デザインをカスタマイズ

* Sidebarを使用して色、フォント、間隔、配置を設定します。


## 主要機能

### マージタグによるパーソナライゼーション

* Content Sidebarの「Merge Tags」をクリック。
* `{{ profile.name }}`のようなタグをテキストブロックに挿入。
* サンプルデータとプレビューで出力を視覚化できます。


### モバイルレスポンシブ

* デスクトップとモバイルプレビューを切り替え。
* レイアウトは自動的に適応します。


### 画像エディタ

* 画像をダブルクリックして、トリミング、サイズ変更、またはフィルターを適用。


### ダイナミックコンテンツと条件付き表示

* プロファイル属性に基づいて行またはブロックに表示条件を追加。
* 例：VIPにのみ割引バナーを表示。


### カスタム属性（マージタグの拡張）

* 人間が読める形式のラベル（例：「Customer Name」であって`{{ profile.name }}`ではない）
* ワンクリックでの挿入とサンプルコンテンツでのプレビュー


## 高度な機能

### Liquidを使用したダイナミックコンテンツ

Engage Studioは、高度なパーソナライゼーションのためにメールテンプレートでLiquid構文をサポートしています。

**基本構文：**

* 変数:__`{{ profile.name }}`
* ロジック: `{% if profile.vip %}Thank you{% endif %}`
* ループ: `{% for product in profile.products %}{{ product.name }}{% endfor %}`
* フィルター: `{{ profile.name | upcase }}`


**使用例：**

* **条件付きコンテンツ** : プロファイル条件が一致する場合にのみコンテンツを表示。
* **ダイナミック画像URL** : アイテムのJSONリストをループして、パーソナライズされた製品を表示。


**例：** VIPへの割引を表示

## テストとプレビュー

* 「Preview」をクリックしてリアルタイムレンダリングを開きます。
* 「Send Test」を使用してサンプルメールを配信。
* ダークモードプレビューが含まれます。


Beefreeを利用したエディタは以下を保証します。

## 現在の制限

以下の機能はまだ利用できないか、開発中です。

* リンク検証
* スペルチェック
* HTMLファイルのインポート（試すにはサポートにお問い合わせください）
* HTMLファイルのエクスポート
* メールQA自動化
* グローバルスタイル設定
* **画像ホスティング** : Image Managerにアップロードされた画像は、BeefreeのAWS S3とCloudFrontでホストされます。これらはTDストレージに移行されません。永続性が必要な場合は、外部画像URLを使用してください。