はじめに
ドラッグ＆ドロップエディターは、左側のメインのメッセージ編集セクションと右側のプロパティパネルという 2 つの主要なエリアに分かれています。基本的には、コンテンツ要素をステージにドラッグ＆ドロップし、そのプロパティを編集していきます。ワークスペースでカスタムフォントが有効になっている場合、このエディターの機能もそれに応じて変わります。詳細については、カスタムフォントを参照してください。
- ダークモードプレビューこのオプションを使用すると、コンテンツをダークモードでプレビューできます。生成されるプレビューは近似的なものであり、デバイスや ISP によって異なる場合があります。
- HTML エディターに切り替えこのオプションを使用すると、HTML エディターに切り替えてコンテンツを作成できます。一度切り替えると、ドラッグ＆ドロップエディターに戻すことはできません。詳細については、HTML テンプレートの編集/貼り付けを参照してください。
- プレビュー
このオプションを使用すると、作成したコンテンツをプレビューできます。件名、プレビューテキスト、送信者名、送信元メールアドレス、返信先メールアドレスをプレビューできます。
プロパティパネル
プロパティパネルは、次のセクションに分かれています。CONTENT
CONTENT タブでは、新しいコンテンツ要素を選択してメッセージに追加できます。コンテンツ要素（ボタン、画像、テキストタイル、透明または実線の区切り線、ソーシャルメディア共有）を左側のメッセージエリアにドラッグ＆ドロップします。
TEXT
フォントファミリーを Global Font に設定すると、SETTINGS タブで選択したフォントファミリーが継承されます。これにより、SETTINGS タブでそのプロパティを変更するだけで、複数の要素のフォントファミリーを一度に変更できます。
リンクを追加する
テキストを選択し、Insert/edit オプションをクリックすると、リンクを追加できます。
パーソナライズされたリンクを追加する
パーソナライズされたリンクは、More >> Links から追加できます。ポップアップウィンドウが開き、パーソナライズされた属性のリストにアクセスして選択できます。
IMAGE
画像を挿入するには
画像はファイルマネージャーを使用して挿入できます。エディターにはファイルマネージャーが組み込まれています。ファイルマネージャーは、メールメッセージで使用する画像やドキュメントを参照、検索、選択するためのコンポーネントです。便利なファイルマネージャーでは、次のことができます。- 既存のファイルの参照、検索、並べ替え
- リスト表示とグリッド表示の切り替え
- 新しいファイルのインポート
- 新しいフォルダーの作成
- 画像のプレビューとメッセージへの挿入
表示イメージ
ファイルマネージャーはエディターの上に開き、作業エリア全体を覆います。そのため、画面サイズや解像度を気にせずにファイルを参照できます。 上部のセクションには操作やナビゲーションのヘルパーがあり、スペースの大部分はファイルとその操作に必要な情報の一覧表示に使用されます。デフォルトでは、フォルダーと画像は Grid view で表示されます。List view に切り替えると、次回ファイルマネージャーを開いたときもその表示が使用されます。以下は、Grid view で表示したフォルダー内の画像の例です。
アクセス方法
ファイルマネージャーは、次のような場合に読み込まれます。- 画像コンテンツタイルをメッセージにドラッグ＆ドロップしたときに表示される画像プレースホルダーで Browse をクリックしたとき。
- 画像のプロパティパネルで Change image をクリックしたとき。
- 画像やボタンの操作中に Link file をクリックしたとき。
ファイルをアップロードするには
ファイルマネージャーにファイルをアップロードする最も簡単な方法は、コンピューターからファイルマネージャーウィンドウにファイルをドラッグし、ページ上の任意の場所にドロップすることです。
- Upload を使用して、コンピューターから参照してアップロードする。
- この機能が有効になっている場合は、Import ボタンを使用して外部アプリケーションからインポートする（詳細は以下を参照）。
- この機能が有効になっている場合は、Search free photos ボタンを使用して無料のストック写真を検索してインポートする。
他のアプリケーションからファイルをインポートするには
Import 機能を使用すると、DropBox、Google Drive、Instagram などの外部アプリケーションに接続し、ファイルをインポートできます。
ファイルを参照または検索するには
目的の画像やドキュメントを見つけるには、フォルダーを参照し、リスト上部の並べ替えラベルをクリックして、内容を name、date、size、または type で並べ替えます。 ラベルの横に矢印アイコンが表示されている場合は、それが現在のフィルターであることを示し、矢印の向きで昇順か降順かを示します。 選択したフォルダー内のファイルが多すぎる場合は、レンズ アイコンをクリックして検索を実行します。結果はその場でフィルタリングされます。この検索は現在のフォルダー内でのみ実行され、リポジトリ全体では実行されないことに注意してください。ファイルを使用するには
ファイルやフォルダーの上にカーソルを移動すると、その行がハイライトされ、右側に使用可能なアクションアイコンが表示されます。- ファイルの場合は Preview
- ファイルとフォルダーの両方の場合は Delete
フォルダーを整理するには
ファイルを整理するために、好きなフォルダー構造を作成できます。新しいフォルダーを追加するには、Add folder アイコンを使用します。 フォルダー名には、英字（大文字と小文字）、数字、スペース、ピリオド（.）、ハイフン（-）、アンダースコア（_）を使用できます。 親フォルダーに移動するには、上部のパンくずリストを使用します。ホームアイコンをクリックすると、ルートフォルダーに移動します。画像エディターの仕組み
画像を編集する
メールエディターには画像エディターが含まれており、エディターを離れることなく、任意の画像の切り抜き、回転、サイズ変更、フィルター/フレームの適用、ステッカーの追加を行えます。
画像エディターにアクセスする
エディターで画像を選択すると、Apply effects & more ボタンが表示されます。このボタンをクリックすると、さまざまな方法で画像を編集できるツールにアクセスできます。
CONTENT BLOCK
- コンテンツブロックタイルをメールコンテンツにドラッグ＆ドロップします。
- Add/Edit Content Block をクリックします。
- Email Personalization ポップアップで、追加するコンテンツブロックを検索します。ドラッグ＆ドロップでメールキャンペーンにコンテンツブロックを追加した場合、Content Block 機能で元のコンテンツブロックを編集するたびに、MoEngage はメールコンテンツを自動的に更新します。ただし、今後の編集と連動させずにコンテンツブロックを追加したい場合は、Insert only the content of the content block トグルをオンにします。これにより、元のコンテンツブロックを変更してもメールコンテンツが自動的に更新されなくなります。
DYNAMIC CONTENT
- ダイナミックコンテンツタイルを選択し、Add Option をクリックします。
- Personalized Content ポップアップウィンドウで、パーソナライズされた画像の詳細を入力します。
- Image Source URL フィールドに、パーソナライズされた属性を入力します。
- Target URL フィールドに、ターゲットリンクを入力します。
Dynamic Content タイルを追加した後は、WYSIWYG エディターで編集やプレビューを行うことはできません。編集が必要な場合は、既存のタイルを削除して新しいタイルを作成してください。
HTML
HTML コードを追加するには
コードを追加するには、HTML コンテンツ要素をメッセージにドラッグします。単独で配置することも、他の HTML コンテンツアイテムと一緒に配置することも、他の種類のコンテンツと組み合わせて配置することもできます。 新しく挿入したコンテンツタイルには、デフォルトのプレースホルダーテキストが表示されます。それをクリックすると、右側のプロパティパネルに HTML コード編集ペインが表示されます。編集エリア内にはプレースホルダーコードが入っています。
使用できる HTML タグ
HTML コンテンツでは、閉じられていない HTML タグなどの一部の問題が自動的に修正され、script タグや iframe タグなど使用できないコードは削除されます（これらのタグはほとんどのメールクライアントで許可されておらず、配信性の問題やセキュリティリスクの原因となる可能性があります）。使用できるタグの一覧
<a>, <abbr>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <center>, <cite>, <code>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <font>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <ins>, <kbd>, <label>, <legend>, <li>, <map>, <menu>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <u>, <tr>, <tt>, <u>, <ul>, <var>
使用できる属性の一覧
VIDEO
- この機能は、実際の動画をメールに埋め込むのではなく、スマートな方法で動画にリンクします。
- 実際の動画コンテンツをメッセージに埋め込まない理由は、うまく機能しないためです。多くのメールクライアントがこれをサポートしていません。
- さらに、多くのメールはモバイルデバイスで開封されます。モバイルデバイスで動画を視聴すると、データ通信量が大幅に増えるうえ、データ接続の品質によってはユーザーエクスペリエンスが低下する可能性があります。
ICONS
アイコンコレクションを追加するには
エディターサイドバーの Content properties セクションで Add new Icon をクリックし、コレクションの最初のアイコンを追加します。次に、Change image をクリックしてファイルマネージャーから画像を選択します。
MENU
- エディターサイドバーの Content properties セクションで Add new item をクリックします。
- メニュー項目の各要素のプロパティを定義します。
- メニュー項目のタイトルの左側にあるアイコンをドラッグして、メニュー項目の順序を変更することもできます。
- メニュー項目をモバイルメニューとして設定することもできます。このオプションはモバイルデバイスにのみ適用され、オンにするとモバイルで「ハンバーガー」メニューが適用されます。タップして展開すると、メニュー項目が縦方向のレイアウトで表示されます。
モバイルメニューは、すべてのメールクライアントに対応しているわけではありません。
ROWS
ROWS パネルには、メッセージのさまざまな種類の構造要素が含まれています。これらを使用して、メッセージのさまざまなセクションを作成できます。
行を保存する
- 行をコンテンツブロックとして保存する機能が有効になっていない場合
- 行をコンテンツブロックとして保存する機能が有効になっている場合
このオプションを使用すると、行を保存して他のテンプレートで再利用できます。このオプションは、テンプレートのヘッダーやフッターなど、繰り返し使用するコンテンツを扱う際に非常に便利です。行を保存するには、次の手順を実行します。
- エディターのキャンバスで、保存する行をクリックして選択します。
- 保存（）アイコンをクリックします。
- Save Row ダイアログボックスで、次の操作を行います。
- 一意の Row name を入力します。
- ドロップダウンから既存のカテゴリーを選択するか、新しい名前を入力してカテゴリーを作成します。
- Done をクリックします。
- 保存後は、ROWS パネルに移動して割り当てたカテゴリーを選択することで、この行を簡単に見つけて再利用できます。
保存した複数の行に同じ名前を付けることはできません。保存する行には一意の名前を付ける必要があります。
次の機能は Early Access 機能です。
- カテゴリーの作成
- 行の管理
- 行のロックとロック解除
カテゴリーを作成する
保存した行を簡単に整理して取り出せるように、MoEngage ではワークスペースレベルで行をカテゴリー分けできます。カテゴリーに加えた変更はすべて、ワークスペース全体にリアルタイムで反映されます。- デフォルトカテゴリー: すべてのワークスペースには、Header、Footer、Promotional の 3 つのデフォルトカテゴリーがあります。
- カスタムカテゴリー: カスタムカテゴリーは最大 7 つまで作成できます（ワークスペースあたりの合計上限は 10 カテゴリーです）。
ユーザーはユーザーインターフェイスから直接カテゴリーを作成できますが、MoEngage UI からカテゴリーを削除することはできません。ワークスペースからカテゴリーを削除するには、MoEngage サポートチームにリクエストを送信してください。
新しいカテゴリーを作成する
- Save Row ダイアログボックスで、カテゴリーのドロップダウンをクリックし、新しいカテゴリーの名前を入力します。
- キーボードの
Enterキーを押します。入力した文字列が、選択可能な新しいカスタムカテゴリーに変換されます。 - Done をクリックすると、行と新しいカテゴリーの両方が同時にワークスペースに保存されます。
行を管理する
MoEngage では、ドラッグ＆ドロップ（D&D）エディターから直接、保存した行を編集および削除できます。保存した変更はリアルタイムでワークスペースレベルに適用され、更新されたデザインはすべてのチームメンバーがすぐに利用できるようになります。行を編集する
- ROWS タブに移動し、目的のカテゴリーを選択します。
- そのカテゴリーのすべての行が表示されます。編集する行の省略記号アイコンをクリックします。
- Edit row をクリックします。
- Edit row のスライドアウトパネルでは、次の操作を行えます。
- 行の Name を変更する。
- 行を別の Category に再割り当てする。または、このフィールドから直接新しいカテゴリーを作成し、同時に行をそのカテゴリーに再割り当てすることもできます。
- 行内の Content を更新する。
- Save changes をクリックします。更新された行は、ワークスペースのすべてのユーザーがリアルタイムですぐにドラッグ＆ドロップで使用できるようになります。
行を削除する
- ROWS タブに移動し、目的のカテゴリーを選択します。
- そのカテゴリーのすべての行が表示されます。削除する行の省略記号アイコンをクリックします。
- Delete をクリックします。
- Delete row の確認ボックスで Delete をクリックします。この操作により、保存した行がワークスペースのカタログから完全に削除されます。
行を削除しても、その行を現在使用している既存のキャンペーン（アクティブ、スケジュール済み、一時停止中、または停止済み）には影響しません。行をメールに追加すると、その時点で行のコンテンツがキャンペーンにコピーされます。行とキャンペーンの間にアクティブなリンクはないため、既存のメールは設計どおりに引き続き機能します。
行のロックとロック解除
大規模なチームや企業では、行をロックすることで、重要な構造要素（例: 法務承認済みのフッター、グローバルヘッダー、ブランド固有のバナー）への無許可または誤った変更を防ぎ、ブランドの表現と構造の一貫性を維持できます。- Admin と Manager: デフォルトで Lock/Unlock Row 機能を持っています。
- Developer、Analyst、Marketer: デフォルトではロック/ロック解除機能を持っていません。
- カスタムロール: ロック/ロック解除の権限を手動で割り当てることができます。
- カスタムロールに Lock/Unlock Row 機能を付与すると、行に対する View、Create、Manage & Publish の権限が自動的に継承されます。
- ROWS タブを参照すると、ロックされた行の名前には [Locked] という接頭辞が明示的に表示されます。これにより、制限された行を一目で識別し、メール内の正しい位置に配置できます。
- ロールにロック/ロック解除の権限がない場合、ロックされた行をエディターに追加した後に削除や変更を行うことはできません。
- 行全体をロックするだけでなく、行の個々のプロパティ（背景色、パディング、テキストの配置など）をロックすることもできます。特定のプロパティをロックまたはロック解除できるのは、ロック/ロック解除の権限を持つユーザーのみです。プロパティがロックされると、必要なアクセス権限を持たないユーザーは編集できません。
- ドラッグ＆ドロップエディター内で行を選択します。
- ROWS > ROW PROPERTIES に移動します。
- ロック設定のトグルを探します。
- 行をロックするには: トグルスイッチを有効にします。有効にすると、行は Locked 状態に切り替わります。
- 行のロックを解除するには: トグルスイッチを無効にします。無効にすると、行は Unlocked 状態に戻ります。
- 行をドラッグ＆ドロップして、メールデザインテンプレート内で並べ替えることができます。
- 行内のコンテンツの編集、プロパティの変更、修正、削除はできません。
- ロックされた行をエディターに追加した後は、削除や変更を行うことはできません。ロックされた行をキャンバスから削除するには、Undo ボタン（エディターの左下隅にあります）を使用する必要があります。
- ロックされた行の内部をクリックまたは編集しようとすると、エディターに次のトースト通知が表示されます:
This module is locked by your team. Only members with "Lock/Unlock" permission can edit it. Contact your Manager or Admin to request edits.
プロダクトセットベースのパーソナライゼーションで行を作成する
このオプションを使用すると、プロダクトブロックを含む行を作成できます。プロダクトブロックとは、商品画像や商品価格などの商品属性のグループです。詳細については、レコメンデーションを使用してコンテンツをパーソナライズするを参照してください。Product Set の行を追加するには、アカウントでレコメンデーションが設定されている必要があります。Item Catalog を接続し、ユーザーアクションイベントをマッピングしたうえで、Basic または Advanced レコメンデーションを作成してください。メールにレコメンデーションを追加する手順については、メールでレコメンデーションを使用するを参照してください。
表示条件
表示条件を使用すると、カスタムの条件文に基づいて行全体を表示または非表示にできるため、1 つのテンプレートで受信者ごとに異なるコンテンツをレンダリングできます。たとえば、クーポンコードの行を頻繁に購入するユーザーにのみ表示したり、カテゴリー固有のプロモーションをそのカテゴリーを閲覧したユーザーにのみ表示したりできます。表示条件は、行のコンテンツを囲む Jinja の条件ロジック（例:
{% if %}...{% endif %} タグ）を使用して評価されます。条件自体はユーザーが記述するもので、エディターでは検証されません。公開する前に、Jinja の構文と参照する属性やロジックが正しいことを確認してください。行に表示条件を追加する
- エディターのキャンバスで、条件を適用する行を選択します。
- プロパティパネルで、ROWS > ROW PROPERTIES に移動します。
- DYNAMIC CONTENT を展開します。条件が適用されていない場合、このセクションには No display condition applied to this row と表示されます。
-
Add condition をクリックします。Add a new display condition ダイアログボックスが開きます。
-
次の詳細を入力します。
- Add をクリックします。
- 条件を変更するには、Edit をクリックします。
- 行から条件を削除するには、Delete をクリックします。
Undo ウィジェット
UNDO 機能を有効にすると、最近の編集履歴の任意の時点に巻き戻したり早送りしたりできます。変更が検出されると、ステージの左下隅にコンパクトな Undo ウィジェットが表示されます（以下の注釈を参照）。
Timeline ウィジェット
タイムラインでは、最近の変更を参照できます。ウィジェットには次の内容が表示されます。- コンテンツ要素の種類（画像、テキストなど）を識別するアイコン
- 変更内容の説明と、新しいプロパティ値（ある場合）
- 変更が行われた正確な時刻
デスクトップまたはモバイルでコンテンツを非表示にする
Hide on 機能は、コンテンツレベルと行レベルの両方で使用できます。個々のコンテンツタイルや行全体を、特定の種類のデバイスで非表示にできるようになりました。 例:| デスクトップで表示されるコンテンツ | モバイルで表示されるコンテンツ |
|---|---|
 |  |
- プロパティパネルに移動します。
- Block options の設定までスクロールします。
- Hide on で、Desktop または Mobile を選択します。
行を非表示にする
デザインのより大きな部分を非表示にするには、行全体を非表示にします。- 非表示にする行を選択します。
- Row Properties に移動します。
- Hide on で、Desktop または Mobile を選択します。
SETTINGS
SETTINGS タブでは、メッセージ全体に適用される一般設定を変更できます。- Content area width: コンテンツタイルをドロップするエリアの幅です。メールマーケティングのベストプラクティスによると、通常は 600px 以下に設定する必要があります。これは大きなデバイスで使用される最大幅です。デバイスの画面がこれより小さい場合、メッセージは自動的に調整されます。
- Background color: メッセージの背景色です。この設定は、色が指定されていない行（および列）に対してのみ有効です。それ以外の場合は、そのコンテンツ構造に指定された背景色が使用されます。
- Content area background color: コンテンツエリアの背景色です。この設定は、色が指定されていない行と列に対してのみ有効です。
- Default font: 他のフォントファミリーが指定されていない場合に使用されるデフォルトのフォントです。この設定は、global font を使用するように設定されたすべてのテキストに影響します。
- Link color: リンクの色です。上記と同様に、この設定はデフォルトの色を使用するように設定されたすべてのテキストリンクに影響します。
既知の制限
Gmail のレンダリング動作
- Gmail モバイルアプリでのみ行や背景が縮小される場合、テンプレートのバグではなく、Gmail 独自の「自動サイズ調整」機能が作動している可能性があります。Gmail は受信した HTML を、送信者が完全には制御できない方法で後処理します。
!importantによる幅の指定、要素を約 600px 以下に保つこと、非表示の min-width「バンパー」div を使用することで、リスクを軽減できます。 - カスタム HTML コンテンツブロックに、完全なスタンドアロンの
<html>/<head>/<body>ドキュメントを貼り付けないでください。そこに入れるべきなのは内部のマークアップの断片のみです。モバイルとデスクトップで見た目を変える必要があるコンテンツについては、単一の「スマートな」レスポンシブブロックに頼るのではなく、2 つの行（一方はデスクトップで非表示、もう一方はモバイルで非表示）を実際に作成してください。
メールのクリッピング
- エディターに表示されるファイルサイズは、Gmail がクリッピングの上限と照合する実際のサイズではありません。エディターのエクスポートに含まれる余分な末尾のスタイル行 1 行が、クリッピングされるかどうかの分かれ目になることもあります。クリッピングの予算チェックに、エディターのファイルサイズ表示を使用しないでください。
リンクとトラッキング
- カスタムの配信停止 URL と配信停止モードは、アカウントごとではなく送信者ごとに保存されます。新しい送信者は既存の送信者の設定を継承せず空の状態で始まるため、新しい送信者を追加するたびに、Settings → Email → Sender Settings で再設定してください。
- ハイパーリンクが設定された単語を削除または編集する際に、周囲の空白も削除しないと、基盤となる HTML に目に見えない「ゴーストリンク」が埋め込まれたまま残る場合があります。リンクを編集または削除する際は、周囲の空白も削除し、その後コードビューで不要なアンカータグがないかを確認してください。
パーソナライゼーション
- 補助データ用の複雑な Jinja を、ボタンの URL フィールドのような HTML 属性内に直接記述しないでください。ボタンの URL ピッカーではユーザー属性のみが表示され、式内の引用符が周囲の属性構文と競合する可能性があります。補助データの式はテンプレート内の別の場所で Jinja 変数に割り当て、ボタンの URL フィールドではその変数を参照してください。
- 別の Web サイトから書式付きテキストをコピー＆ペーストすると、パーソナライゼーションエンジンが処理できない目に見えないマークアップが持ち込まれ、ビジュアルエディターでは問題がないように見えても、送信時に「undefined variable」エラーが発生する場合があります。他のソースから文章を取り込む場合は、必ずプレーンテキストとして貼り付け、書式とリンクは手動で再適用してください。
画像
- エディター独自のファイルマネージャーからアップロードした画像のみを使用してください。手動で貼り付けた外部画像の URL は予告なく期限切れになる可能性があり、設定から数週間後に公開中のテンプレートから画像が通知なく消えてしまう場合があります。外部でホストされている URL を直接リンクするのではなく、必ず組み込みのファイルマネージャーから画像をアップロードしてください。
エディターの動作上の特性
- 従来の Text ブロックでは、手動で入力した Enter や空行による間隔が改行なしスペースとして保存されます。プラットフォーム全体に適用されたクリッピング防止の修正により、この間隔が詰められるようになったため、意図的に設けた空白が消えてしまいます。Text ブロックは非推奨です。Paragraph/List ブロックを使用し、ブロック/行のパディングや透明な Divider ブロックによって構造的に間隔を作成してください。
- 再利用可能なコンテンツブロックは、素の HTML 断片にする必要があります。独自の
<html>/<body>ドキュメントで囲むと、親テンプレート内にネストされた際に、モバイルでの縦積み、中央揃え、デバイスごとの非表示ルールが機能しなくなります。 - 外部ソースからスタイル付きのアイコンやグリフをテキストブロックにコピー＆ペーストすると、数百もの冗長なネストされたタグが挿入され、テンプレートが破損する可能性があります。プレーンテキストのみを貼り付け、記号や矢印には、他のアプリからスタイル付きの文字をコピーするのではなく、組み込みの特殊文字ピッカーを使用してください。
- 同じテキストに対して書式設定（太字など）を繰り返し切り替えると、数百ものネストされたタグが生成され、キャンペーンの公開時に解析が失敗する可能性があります。インライン編集を多用した後に公開が失敗する場合は、同じノードで書式の切り替えを続けるのではなく、該当するテキスト要素/行を削除して追加し直してください。
サードパーティ/ESP の制限
- Outlook では、正しく作成されたメールであっても、受信者が転送した場合に限って表示が崩れることがあり、テンプレート側から確実に修正することはできません。これは、いつまでも追求すべきテンプレートの欠陥ではなく、制御が難しい既知の Outlook の転送時の特性として扱ってください。