> ## Documentation Index > Fetch the complete documentation index at: https://moengage.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # ドラッグ＆ドロップエディターでコンテンツを作成する > MoEngage のドラッグ＆ドロップエディターを使用して、メールコンテンツを視覚的にデザインします。コンテンツブロックの追加、プロパティのカスタマイズ、ダークモードやデバイスごとのプレビューが可能です。 ## はじめに ドラッグ＆ドロップエディターは、左側のメインのメッセージ編集セクションと右側のプロパティパネルという 2 つの主要なエリアに分かれています。基本的には、コンテンツ要素をステージにドラッグ＆ドロップし、そのプロパティを編集していきます。 ワークスペースでカスタムフォントが有効になっている場合、このエディターの機能もそれに応じて変わります。詳細については、[カスタムフォント](/docs/ja/user-guide/campaigns-and-channels/email/getting-started-with-email/custom-fonts)を参照してください。 ドラッグ＆ドロップエディターでコンテンツを作成する際には、次のオプションを使用できます。 * **ダークモードプレビュー**このオプションを使用すると、コンテンツをダークモードでプレビューできます。生成されるプレビューは近似的なものであり、デバイスや ISP によって異なる場合があります。 * **HTML エディターに切り替え**このオプションを使用すると、HTML エディターに切り替えてコンテンツを作成できます。一度切り替えると、ドラッグ＆ドロップエディターに戻すことはできません。詳細については、[HTML テンプレートの編集/貼り付け](/docs/ja/user-guide/campaigns-and-channels/email/create/create-content-with-custom-html-editor)を参照してください。 Screenshot 2024-09-18 at 2.54.54 PM.png * **プレビュー**\ このオプションを使用すると、作成したコンテンツをプレビューできます。**件名**、**プレビューテキスト**、**送信者名**、**送信元メールアドレス**、**返信先メールアドレス**をプレビューできます。2024-09-13_12-47-23.gif ドラッグ＆ドロップエディターには、レンダリング、パーソナライゼーション、およびエディター固有の既知の制限がいくつかあります。複雑なテンプレートを作成する前に、以下の[既知の制限](#known-limitations)セクションを確認してください。 ## プロパティパネル プロパティパネルは、次のセクションに分かれています。 * [CONTENT](/docs/ja/user-guide/campaigns-and-channels/email/create/create-content-with-the-drag-and-drop-editor#content) * [ROWS](/docs/ja/user-guide/campaigns-and-channels/email/create/create-content-with-the-drag-and-drop-editor#rows) * [SETTINGS](https://moengage-user-guide.mintlify.app/user-guide/campaigns-and-channels/email/create/create-content-with-the-drag-and-drop-editor#settings) ## CONTENT **CONTENT** タブでは、新しいコンテンツ要素を選択してメッセージに追加できます。コンテンツ要素（ボタン、画像、テキストタイル、透明または実線の区切り線、ソーシャルメディア共有）を左側のメッセージエリアにドラッグ＆ドロップします。 mceclip8.png ### TEXT ### mceclip2.png テキストコンテンツタイル内をクリックすると、編集ステージ上に直接テキストエディターのツールバーが表示されます。ここでは、フォントファミリー、フォントサイズ、基本的な書式設定、テキストの配置、番号付きおよび番号なしの箇条書き、フォントの色、リンクなど、さまざまなテキスト編集ツールを使用できます。 mceclip11.png フォントファミリーを *Global Font* に設定すると、**SETTINGS** タブで選択したフォントファミリーが継承されます。これにより、*SETTINGS* タブでそのプロパティを変更するだけで、複数の要素のフォントファミリーを一度に変更できます。 #### リンクを追加する テキストを選択し、Insert/edit オプションをクリックすると、リンクを追加できます。 mceclip0.png 「Insert link」ポップアップウィンドウが表示され、リンクの詳細を入力できます。 mceclip2.png #### パーソナライズされたリンクを追加する パーソナライズされたリンクは、More >> Links から追加できます。ポップアップウィンドウが開き、パーソナライズされた属性のリストにアクセスして選択できます。 personalised_links.png ### IMAGE mceclip3.png #### 画像を挿入するには 画像はファイルマネージャーを使用して挿入できます。エディターにはファイルマネージャーが組み込まれています。ファイルマネージャーは、メールメッセージで使用する画像やドキュメントを参照、検索、選択するためのコンポーネントです。便利なファイルマネージャーでは、次のことができます。 * 既存のファイルの参照、検索、並べ替え * リスト表示とグリッド表示の切り替え * 新しいファイルのインポート * 新しいフォルダーの作成 * 画像のプレビューとメッセージへの挿入 #### 表示イメージ ファイルマネージャーはエディターの上に開き、作業エリア全体を覆います。そのため、画面サイズや解像度を気にせずにファイルを参照できます。 上部のセクションには操作やナビゲーションのヘルパーがあり、スペースの大部分はファイルとその操作に必要な情報の一覧表示に使用されます。デフォルトでは、フォルダーと画像は *Grid view* で表示されます。*List view* に切り替えると、次回ファイルマネージャーを開いたときもその表示が使用されます。以下は、*Grid view* で表示したフォルダー内の画像の例です。 Grid_View.png 以下は、同じフォルダーを *List view* で表示したものです。 list_View.png #### アクセス方法 ファイルマネージャーは、次のような場合に読み込まれます。 * 画像コンテンツタイルをメッセージにドラッグ＆ドロップしたときに表示される画像プレースホルダーで **Browse** をクリックしたとき。Browse.png * 画像のプロパティパネルで **Change image** をクリックしたとき。Change_image.png * 画像やボタンの操作中に **Link file** をクリックしたとき。link_file.png #### ファイルをアップロードするには ファイルマネージャーにファイルをアップロードする最も簡単な方法は、コンピューターからファイルマネージャーウィンドウにファイルをドラッグし、ページ上の任意の場所にドロップすることです。 Upload_image.png 次の方法も使用できます。 * **Upload** を使用して、コンピューターから参照してアップロードする。 * この機能が有効になっている場合は、**Import** ボタンを使用して外部アプリケーションからインポートする（詳細は以下を参照）。 * この機能が有効になっている場合は、**Search free photos** ボタンを使用して無料のストック写真を検索してインポートする。 アップロードできるファイルの最大サイズは 5 MB です。 画像はファイルマネージャーからアップロードする（1 つあたり最大 5 MB）か、ホストされた画像 URL で参照してください。base64 でエンコードされた画像データをリンクや URL フィールド（例: `` の値）に直接貼り付けないでください。サイズの大きい base64 画像は送信時にメッセージサイズの上限を超え、キャンペーンが通知なく失敗し、Sent 数が 0 になる可能性があります。 #### 他のアプリケーションからファイルをインポートするには ***Import*** 機能を使用すると、DropBox、Google Drive、Instagram などの外部アプリケーションに接続し、ファイルをインポートできます。 Import_image.png #### ファイルを参照または検索するには 目的の画像やドキュメントを見つけるには、フォルダーを参照し、リスト上部の並べ替えラベルをクリックして、内容を *name*、*date*、*size*、または *type* で並べ替えます。 ラベルの横に矢印アイコンが表示されている場合は、それが現在のフィルターであることを示し、矢印の向きで昇順か降順かを示します。 選択したフォルダー内のファイルが多すぎる場合は、*レンズ* アイコンをクリックして検索を実行します。結果はその場でフィルタリングされます。この検索は現在のフォルダー内でのみ実行され、リポジトリ全体では実行されないことに注意してください。 #### ファイルを使用するには ファイルやフォルダーの上にカーソルを移動すると、その行がハイライトされ、右側に使用可能なアクションアイコンが表示されます。 * ファイルの場合は *Preview* * ファイルとフォルダーの両方の場合は *Delete* アクションが一時的に使用できない場合は、アイコンのツールチップテキストで通知されます。たとえば、ファイルを含むフォルダーを削除しようとした場合などです。削除できるのは空のフォルダーのみです。 複数のファイルやフォルダーを削除する場合は、チェックボックスを使用して選択すると、リストの上部に削除アクションが表示されます。削除可能な要素にのみ、選択可能なチェックボックスが表示されます。 preview.png #### フォルダーを整理するには ファイルを整理するために、好きなフォルダー構造を作成できます。新しいフォルダーを追加するには、*Add folder* アイコンを使用します。 フォルダー名には、英字（大文字と小文字）、数字、スペース、ピリオド（.）、ハイフン（-）、アンダースコア（\_）を使用できます。 親フォルダーに移動するには、上部のパンくずリストを使用します。ホームアイコンをクリックすると、ルートフォルダーに移動します。 #### 画像エディターの仕組み ##### 画像を編集する メールエディターには画像エディターが含まれており、エディターを離れることなく、任意の画像の切り抜き、回転、サイズ変更、フィルター/フレームの適用、ステッカーの追加を行えます。 editing.png ##### 画像エディターにアクセスする エディターで画像を選択すると、**Apply effects & more** ボタンが表示されます。このボタンをクリックすると、さまざまな方法で画像を編集できるツールにアクセスできます。 apply_effects.png このエディターには、フィルターからサイズ変更や切り抜きツールまで、便利な機能が多数用意されています。 editor_image.png 画像のサイズをすばやく簡単に変更できます。 image_size.png また、画像の見た目をすばやく変更できる定義済みのフィルターも多数用意されています。 Filter.png ### CONTENT BLOCK Screenshot 2025-06-19 at 12.53.39 PM.png Content Block タイルを使用すると、ドラッグ＆ドロップでプレーンテキストや HTML のコンテンツブロックをメールコンテンツに追加できます。詳細については、[コンテンツブロック](/docs/ja/user-guide/content/content-blocks/content-blocks)を参照してください。 コンテンツブロックを追加するには、次の手順を実行します。 1. コンテンツブロックタイルをメールコンテンツにドラッグ＆ドロップします。 2. **Add/Edit Content Block** をクリックします。 3. **Email Personalization** ポップアップで、追加するコンテンツブロックを検索します。ドラッグ＆ドロップでメールキャンペーンにコンテンツブロックを追加した場合、Content Block 機能で元のコンテンツブロックを編集するたびに、MoEngage はメールコンテンツを自動的に更新します。ただし、今後の編集と連動させずにコンテンツブロックを追加したい場合は、**Insert only the content of the content block** トグルをオンにします。これにより、元のコンテンツブロックを変更してもメールコンテンツが自動的に更新されなくなります。 content block toggle.png ### DYNAMIC CONTENT mceclip1.png ダイナミックコンテンツタイルを使用して、パーソナライズされた画像を追加できます。 1. ダイナミックコンテンツタイルを選択し、**Add Option** をクリックします。mceclip6.png 2. Personalized Content ポップアップウィンドウで、パーソナライズされた画像の詳細を入力します。mceclip7.png 1. **Image Source URL** フィールドに、パーソナライズされた属性を入力します。 2. **Target URL** フィールドに、ターゲットリンクを入力します。 Dynamic Content タイルを追加した後は、WYSIWYG エディターで編集やプレビューを行うことはできません。編集が必要な場合は、既存のタイルを削除して新しいタイルを作成してください。 ### HTML mceclip4.png HTML タイルを使用すると、エディターでデザインしているメールメッセージに HTML コードを追加できます。 #### HTML コードを追加するには コードを追加するには、HTML コンテンツ要素をメッセージにドラッグします。単独で配置することも、他の HTML コンテンツアイテムと一緒に配置することも、他の種類のコンテンツと組み合わせて配置することもできます。 新しく挿入したコンテンツタイルには、デフォルトのプレースホルダーテキストが表示されます。それをクリックすると、右側のプロパティパネルに HTML コード編集ペインが表示されます。編集エリア内にはプレースホルダーコードが入っています。 mceclip12.png HTML コードを貼り付けるか、編集エリアに直接記述します。システムが構文をハイライトし、コードをインデントして読みやすくします。 **注**: 独自のコードを使用すると、メールクライアントでのメッセージのレンダリングに影響し、画面サイズへの調整（つまりメッセージの「レスポンシブ性」）が妨げられる可能性があります。メールに準拠したレスポンシブな HTML を使用してください。 #### 使用できる HTML タグ HTML コンテンツでは、閉じられていない HTML タグなどの一部の問題が自動的に修正され、script タグや iframe タグなど使用できないコードは削除されます（これらのタグはほとんどのメールクライアントで許可されておらず、配信性の問題やセキュリティリスクの原因となる可能性があります）。 ##### 使用できるタグの一覧 ``, ``, ``, `
`, ``, ``, ``, ``, `
`, `