Beefree SDKを利用したEngage StudioのEmail Editorは、見栄えの良いレスポンシブなメールキャンペーンを作成するための堅牢でユーザーフレンドリーなインターフェースを提供します。このガイドでは、直感的なドラッグアンドドロップエディタを使用してメールをデザインする方法と、Liquidテンプレートを使用してパーソナライズする方法について説明します。
Email Messages > Create Newに移動
空白のテンプレートから始めるか、事前にデザインされたテンプレートを選択
Email Content Editorは3つの主要なセクションで構成されています。
Stage : コンテンツブロックと行をドラッグして配置するキャンバス。
Sidebar : レイアウト、コンテンツ、スタイルを設定する場所。
Toolbar : デバイスプレビュー（デスクトップ/モバイル）、元に戻す/やり直し、プレビュー/テスト送信を含みます。
Sidebarから「Row」要素をStageにドラッグしてレイアウトを定義します。
複数の列構成から選択します。
ヒント：
Rowは水平構造（セクション）を定義します。
最大6列をサポート（メール）
カスタマイズ可能なオプション：背景色、境界線、モバイル動作。
列は個別にサイズ変更、追加、またはスタイル設定できます。
Text、Image、Buttonなどのコンテンツブロックを行セクションにドラッグします。
要素をクリックしてSidebarで設定を開きます。
機能：
列幅に自動フィット。
Text、Media（Image/Video/GIF）、Interactive（Button、Social）、Layout（Divider/Spacer/Menu）をサポート。
個別のカスタマイズ：パディング、可視性、条件。
- Sidebarを使用して色、フォント、間隔、配置を設定します。
Content Sidebarの「Merge Tags」をクリック。
{{ profile.name }}のようなタグをテキストブロックに挿入。サンプルデータとプレビューで出力を視覚化できます。
デスクトップとモバイルプレビューを切り替え。
レイアウトは自動的に適応します。
- 画像をダブルクリックして、トリミング、サイズ変更、またはフィルターを適用。
プロファイル属性に基づいて行またはブロックに表示条件を追加。
例：VIPにのみ割引バナーを表示。
人間が読める形式のラベル（例：「Customer Name」であって
{{ profile.name }}ではない）ワンクリックでの挿入とサンプルコンテンツでのプレビュー
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を使用してください。