はじめに
ドラッグアンドドロップエディタは、左側のメインメッセージ編集セクションと右側のプロパティパネルの2つの主要な領域に分かれています。一般的に、ステージ上にコンテンツ要素をドラッグアンドドロップし、そのプロパティを編集します。
ドラッグ＆ドロップエディターを使用してコンテンツを作成する際には、以下のオプションがあります。
-
ダークモードプレビュー
このオプションを使用すると、ダークモードでコンテンツをプレビューできます。生成されたプレビューは概算であり、デバイスやISPによって異なる場合があります。 -
HTMLエディタに切り替え
このオプションを使用すると、HTMLエディターに切り替えてコンテンツを作成できます。切り替えた後は、ドラッグアンドドロップエディターに戻ることはできません。詳細については、 HTMLテンプレートの編集/貼り付け を参照してください。
-
プレビュー
このオプションを使用すると、作成したコンテンツをプレビューできます。プレビューできます 件名 , プレビューテキスト , 送信者名 , メールアドレスから 、 返信先メールアドレス 。
プロパティパネル
プロパティパネルは次のセクションに分かれています:
コンテンツ
コンテンツ タブでは、新しいコンテンツ要素を選択してメッセージに追加できます。コンテンツ要素（ボタン、画像、テキストタイル、透明またはソリッドな区切り線、ソーシャルメディア共有）を左側のメッセージエリアにドラッグアンドドロップしてください。
テキスト
テキストコンテンツタイルの中をクリックすると、テキストエディターツールバーが編集ステージに直接表示されます。フォントファミリー、フォントサイズ、基本的な書式設定、テキストの配置、番号付きおよび番号なしの箇条書き、フォントの色、リンクなど、多くのテキスト編集ツールにアクセスできます。
| 情報 |
情報 フォントファミリーを グローバルフォント に設定すると、 設定 タブで選択されたフォントファミリーが継承されます。これにより、 設定 タブでそのプロパティを変更することで、複数の要素のフォントファミリーを一度に変更することができます。 |
リンクを追加
リンクを追加するには、テキストを選択して「挿入/編集」オプションをクリックします。
'リンクを挿入'ポップアップウィンドウが表示され、ユーザーがリンクの詳細を入力できるようになります。
パーソナライズされたリンクを追加
パーソナライズされたリンクは、[その他] >> [リンク] を使用して追加できます。これにより、ユーザーがアクセスできるポップアップウィンドウが開きます そして、パーソナライズされた属性（ユーザープロファイル属性とイベント属性）のリストから選択します。
IMAGE
画像を挿入する方法は？
画像はファイルマネージャーを使用して挿入できます。エディターには組み込みのファイルマネージャーが含まれています。ファイルマネージャーは、メールメッセージで使用したい画像やドキュメントを閲覧、検索、選択するために使用するコンポーネントです。便利なファイルマネージャーを使用すると、次のことができます。
- 既存のファイルを閲覧、検索、並べ替え
- リストビューとグリッドビューを切り替える
- 新しいファイルをインポート
- 新しいフォルダーを作成する
- メッセージに画像をプレビューして挿入する
どう見えますか？
ファイルマネージャーがエディターの上に開き、作業エリア全体を覆います。これにより、画面サイズや解像度を気にせずにファイルを閲覧できます。
上部セクションにはアクションとナビゲーションヘルパーがあり、ほとんどのスペースがファイルのリストとそれらを操作するために必要な情報を表示するために使用されます。デフォルトでは、フォルダと画像は グリッドビュー で表示されます。リストビューに切り替えると、次回ファイルマネージャーを開いたときに使用されます。以下は、 グリッドビュー 内のフォルダー内の画像の例です。
そして、こちらが リストビュー の同じフォルダです。
それにアクセスする方法は？
ファイルマネージャーは、いくつかのシナリオでロードされます。
-
画像コンテンツタイルをメッセージにドラッグアンドドロップしたときに表示される画像プレースホルダーで
参照
をクリックするとき。
-
画像プロパティパネルで
画像を変更
をクリックすると:
-
画像やボタンを操作する際に
リンクファイル
をクリックすると:
ファイルをアップロードする方法は？
ファイルをファイルマネージャーにアップロードする最も迅速な方法は、コンピュータからファイルマネージャーのウィンドウにドラッグし、ページ上のどこにでもドロップすることです。
あなたもできます
- コンピューターから アップロード を使用して参照し、アップロードします。
- この機能が有効になっている場合、 インポート ボタンを使用して外部アプリケーションからインポートします（詳細は以下を参照）。
- この機能が有効になっている場合は、 無料写真を検索 ボタンを使用して無料のストック写真を検索およびインポートします。
アップロード可能なファイルの最大サイズは5 MBです。
他のアプリケーションからファイルをインポートする方法
インポート 機能を使用すると、DropBox、Google Drive、Instagram などの外部アプリケーションに接続して、ファイルをインポートできます。
ファイルを閲覧または検索する方法
目的の画像やドキュメントを見つけるには、フォルダを参照し、リストの上部にある並べ替えラベルをクリックして、 名前 、 日付 、 サイズ 、 種類 でコンテンツを並べ替えてください。
このラベルの横にある矢印アイコンは、これが現在のフィルターであることを示し、その向きが昇順または降順の順序を示しています。
選択したフォルダにファイルが多すぎますか？ レンズ アイコンをクリックして検索を実行します。結果はリアルタイムでフィルタリングされます。この検索は現在のフォルダー内のみで実行され、リポジトリ全体では実行されないことに注意してください。
ファイルの使い方
ファイルまたはフォルダにカーソルを移動すると、その行がハイライトされ、利用可能なアクションアイコンが右側に表示されます。
- ファイルのプレビュー
- 削除 ファイルとフォルダの両方に対して
アクションが一時的に利用できない場合、アイコンのツールチップテキストによって通知されます。例えば、ファイルを含むフォルダを削除しようとしたときです。空のフォルダのみが削除可能だからです。
複数のファイルやフォルダーを削除したい場合は、チェックボックスを使用して選択し、削除アクションがリストの上部に表示されます。削除可能な要素のみが選択可能なチェックボックスを持ちます。
フォルダを整理する方法？
ファイルを整理するために、好きなフォルダー構造を作成できます。新しいフォルダーを追加するには、 Add folder アイコンを使用します。
フォルダ名には、文字（大文字と小文字）、数字、スペース、ピリオド（.）、ハイフン（-）、またはアンダースコア（_）を使用できます。
親フォルダに移動するには、上部のパンくずリストを使用してください。ホームアイコンをクリックすると、ルートフォルダに移動します。
画像エディターはどのように機能しますか？
画像を編集
メールエディターには、画像をトリミング、回転、サイズ変更、フィルター/フレームの適用、ステッカーの追加ができる画像エディターが含まれており、エディターを離れることなく操作できます。
画像エディタへのアクセス
エディターで画像を選択すると、 エフェクトの適用とその他 ボタンが表示されます。クリックして、画像をさまざまな方法で編集できるツールにアクセスしてください。
エディターには、フィルターからサイズ変更やトリミングツールまで、多くのクールな機能があります。
画像サイズを素早く簡単に変更できます。
画像の外観を非常に迅速に変更するのに役立つ、いくつかの事前定義されたフィルターもあります。
コンテンツブロック
コンテンツブロックタイルを使用すると、ドラッグ＆ドロップ方式でプレーンテキストやHTMLコンテンツブロックをメールコンテンツに追加できます。詳細については、 コンテンツブロック を参照してください。
コンテンツブロックを追加するには、次の手順を実行します。
- コンテンツブロックタイルをドラッグ＆ドロップして、メールコンテンツに挿入してください。
- コンテンツブロックの追加/編集 をクリックします。
-
Email Personalization
ポップアップで、追加したいコンテンツブロックを検索します。
ドラッグアンドドロップ方式でメールキャンペーンにコンテンツブロックを追加すると、MoEngageは、コンテンツブロック機能を通じてソースコンテンツブロックを編集するたびに、メールコンテンツを自動的に更新します。
しかし、将来の編集にリンクせずにコンテンツブロックを追加したい場合は、 コンテンツブロックの内容のみを挿入 トグルをオンにします。この操作により、元のコンテンツブロックを変更してもメールコンテンツが自動的に更新されることを防ぎます。
動的コンテンツ
動的コンテンツタイルを使用して、パーソナライズされた画像を追加できます。
-
動的コンテンツタイルを選択し、
オプションを追加
をクリックします。
-
パーソナライズされたコンテンツのポップアップウィンドウにパーソナライズされた画像の詳細を入力します。
- 画像ソースURL フィールドにパーソナライズされた属性を入力します。
- ターゲットURL フィールドにターゲットリンクを入力します。
| info |
Note ダイナミックコンテンツタイルが追加されると、WYSIWYGエディターで編集またはプレビューすることはできません。既存のタイルを削除し、編集の場合は新しいタイルを作成できます。 |
HTML
HTMLタイルを使用すると、エディターでデザインしているメールメッセージにHTMLコードを追加できます。
HTMLコードを追加する方法
コードを追加するには、HTMLコンテンツ要素をメッセージにドラッグします。それは単独で、他のHTMLコンテンツアイテムと一緒に、または他の種類のコンテンツと混ぜて配置することができます。
新しく挿入されたコンテンツタイルには、デフォルトのプレースホルダーテキストが表示されます。これをクリックすると、右側のプロパティパネルにHTMLコード編集ペインが表示されます。編集エリア内にプレースホルダーコードがあります。
HTMLコードを貼り付けるか、編集エリアに直接記入してください。システムはあなたの構文を強調表示し、コードをインデントしてより読みやすくします。
注意 : コードを使用すると、メールクライアントでメッセージの表示が影響を受け、画面サイズに合わせて調整されない可能性があります（つまり、メッセージの「レスポンシブ性」）。メールに対応したレスポンシブなHTMLを使用するようにしてください。
どのHTMLタグが許可されていますか？
HTMLコンテンツは、開いたままのHTMLタグを自動的に修正し、スクリプトタグやiframeタグのような使用できないコードを削除します（これらのコードタグは大部分のメールクライアントで許可されておらず、配信の問題やセキュリティリスクを引き起こす可能性があります）。
許可されているタグのリスト
許可された属性のリスト
ビデオ
ビデオコンテンツタイルを使用すると、メールでビデオコンテンツを共有できます。YouTubeまたはVimeoからビデオのURLをコピーして貼り付けるだけで、エディターが残りの作業を行います: 自動的にビデオのカバー画像を取得し、その上に再生アイコンを重ね、ビデオコンテンツにリンクします。
コンテンツプロパティ セクションでは、現在サポートしている人気の動画ホスティングサービスであるYouTubeまたはVimeoからの動画URLを提供するよう求められます。有効なURLを挿入すると、編集パネルのコンテンツタイルに動画のカバー画像が表示され、その上に再生アイコンが重ねられます。再生アイコンの種類、色、サイズを編集して、見た目を変更できます。エディターはパスワードで保護されたビデオにアクセスしてカバー画像を取得することはできませんのでご注意ください。
| info |
情報
|
ICONS
アイコンタイルを使用すると、小さな画像とテキストを組み合わせて使用できるため、デザインに柔軟性が生まれます。
アイコンコレクションを追加する方法
エディターサイドバーのコンテンツプロパティセクションで 新しいアイコンを追加 をクリックして、コレクションの最初のアイコンを追加します。その後、 画像を変更 をクリックして、ファイルマネージャーから画像を選択します。
アイコンの上、下、左、または右に配置できる付随のテキスト セクションを作成するには、 その他のオプション をクリックします。
このパネルから、アイコンのリンクや画像の代替テキストを追加することもできます。コレクションを並べ替える必要がある場合は、コンテンツプロパティエリアでアイコンボックスをドラッグしてください。
アイコンの使用に関するデザインインスピレーションをさらに得るには、 メールでのアイコン使用 に関するBEEエディターブログの記事を訪れてください。
メニュー
メニュータイルを使用すると、テキストベースのナビゲーション要素を追加できます。
メニュー項目を追加するための次の手順を実行します。
- エディターのサイドバーにあるコンテンツプロパティセクションで 新しいアイテムを追加 をクリックします。
-
各要素のプロパティをメニュー項目のために定義します。
- メニュー項目のタイトルの左にあるアイコンをドラッグすることで、メニュー項目を並べ替えることもできます。
-
メニュー項目をモバイルメニューとして構成することもできます。このオプションはモバイルデバイスにのみ適用され、オンにするとモバイルで「ハンバーガー」メニューが適用されます。
タップすることで展開され、縦方向のレイアウトでメニュー項目が表示されます。
| info |
情報 モバイルメニューはすべてのメールクライアントと互換性があるわけではありません。 |
メニュータイルの使用方法の詳細については、 メニューの追加 に関するBEEエディターの記事をご覧ください .
ROWS
行 パネルには、メッセージ用のさまざまなタイプの構造要素が含まれています。彼らはメッセージの異なるセクションを作成することを可能にします。
行を選択すると、プロパティパネルが行と列の設定に切り替わります。エディターは、行レベルと列レベルの両方で柔軟性とカスタマイズ性を提供します。
行を保存
|
早期アクセス これは早期アクセス機能です。お客様のアカウントで有効にするには、CSMに連絡するか、 サポートチケットを発行 してください。 |
Content Block機能が有効になっている場合、MoEngageでは行をContent Blockとして保存することができます。行をHTMLコンテンツブロックとして保存すると、他のコンテンツブロックと同様に将来のメールに追加することができ、MoEngage内の コンテンツブロック ページで見つけることができます。この機能により、保存された行を簡単に編集および削除することで、メールコンテンツの管理が簡単になります。
行をコンテンツブロックとして保存するには、次の手順を実行します。
-
保存したい行を選択し、[保存] をクリックします
。
-
コンテンツブロックを保存
ダイアログボックスで、次の詳細を入力します:
- 名前 : コンテンツブロックとして保存する行の名前を入力します。
- 説明: 行の説明を入力します。
- タグ: 行のタグを選択します。これにより、選択したタグに基づいて行を分類するのに役立ちます。
- 保存 をクリックします。
このオプションを使用すると、行を保存して他のテンプレートで再利用できます。このオプションは、テンプレートのヘッダーやフッターなど、繰り返しの多いコンテンツを扱う際に非常に便利です。行を保存するには、次の手順を実行します。
- 保存したい行を選択し、 保存 をクリックします。
-
ユニークな行名を入力し、事前定義されたカテゴリから選択してください。保存された行は、それぞれのカテゴリのROWSの下にあります。
info 注意
複数の保存された行は同じ名前を持つことはできません。保存された行にはユニークな名前が必要です。
製品セットベースのパーソナライズで行を作成する
このオプションを使用すると、製品ブロックを含む行を作成できます。製品ブロックは、製品画像や製品価格などの製品属性のグループです。詳細については、 レコメンデーションを使用してコンテンツをパーソナライズする を参照してください。
| info |
Information この機能の前提条件は、製品セットを作成することです。詳細については、この リンク を参照してください。 |
元に戻すウィジェット
有効にすると、UNDO 機能により、最近の編集履歴の任意のポイントに巻き戻したり早送りしたりできます。変更が検出されると、ステージの左下隅にコンパクトな元に戻すウィジェットが表示されます（以下の注釈を参照してください）：
タイムラインウィジェット
タイムラインでは、最新の変更を閲覧することができます。ウィジェットに表示されるのは：
- コンテンツ要素の種類（画像、テキストなど）を識別するためのアイコン
- 変更内容の説明、新しいプロパティ値（あれば）
- それが起こった正確な時間
これらの詳細は、どの変更が適用されたかを判断するのに役立ち、ユーザーがメッセージの以前のバージョンにリセットできるようにします。
元に戻すウィジェットは現在、タイムラインの最後の15件の編集を表示しますが、メッセージがエディタで最初に開かれた状態に戻すことで、それ以降のすべての変更を元に戻すことができます。
デスクトップまたはモバイルでコンテンツを非表示にする
オンにする非表示 機能は、コンテンツレベルと行レベルの両方で利用できます。特定の種類のデバイスから個々のコンテンツタイルや行全体を非表示にすることができます。
例えば：
| デスクトップに表示されるコンテンツ | モバイルで表示されるコンテンツ |
|---|---|
|
|
|
Do the following:
- プロパティパネルに移動します。
-
下にスクロールして
ブロックオプション
設定に移動します
-
非表示にする
を選択し、デスクトップまたはモバイルを選択します。
プレビューに移動してモバイルビューを選択することで結果を確認できます。
行を非表示
デザインの大部分を隠すには、代わりに行全体を隠します。
- 非表示にしたい行を選択してください。
- 行のプロパティ に移動します。
- 非表示 で、デスクトップまたはモバイルを選択します。
設定
設定 タブから、メッセージ全体に適用される一般設定を変更できます。
- コンテンツ領域の幅 : これは、コンテンツタイルが配置される領域の幅です。メールマーケティングのベストプラクティスによれば、通常は600px以下に設定する必要があります。これは、大きなデバイスで使用される最大幅であることに注意してください。デバイスの画面が小さい場合、メッセージは自動的に調整されます。
- 背景色 : メッセージの背景色です。この設定は、色が指定されていない行（および列）にのみ有効です。それ以外の場合は、そのコンテンツ構造に指定された背景色が使用されます。
- コンテンツ領域の背景色 : これはコンテンツ領域の背景色です。この設定は、色が指定されていない行と列にのみ有効です。
- デフォルトフォント : 他のフォントファミリーが指定されていない場合に使用されるデフォルトのフォントです。この設定は グローバルフォント を使用するように設定されたすべてのテキストに影響します。
- リンクの色 : これはリンクの色です。上記のように、この設定はデフォルトの色を使用するように設定されたすべてのテキストリンクに影響します。