> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # ドラッグアンドドロップでメールをデザインする > OneSignalのドラッグアンドドロップメールビルダーを使用してレスポンシブメールを視覚的に構築します。設定、行、コンテンツブロック、パーソナライゼーション、コンプライアンスリンクについて説明します。 ## 概要 OneSignalのドラッグアンドドロップメールビルダーを使用すると、受信者の受信トレイに表示されるとおりに—完全なHTMLを記述することなく—レスポンシブメールを視覚的にデザインできます。 3つのコアコンポーネントを使用してメールを構築します： * **設定** – メール全体に適用されるグローバルスタイルとレイアウト * **行** – 構造とレスポンシブ性を制御する水平レイアウトコンテナ * **コンテンツ** – テキスト、画像、ボタン、HTMLなどの個別ブロック 以下のセクションでは、各コンポーネントとメール構築の推奨順序について説明します。 以下の機能が必要な場合は、ドラッグアンドドロップメールビルダーを使用してください： * 完全なHTMLを管理することなく視覚的にメールをデザイン（HTMLブロックが利用可能） * キャンペーン間で行やテンプレートを再利用 * 非技術的なチームメンバーが安全にコンテンツを編集できるようにする 完全なHTML制御、あらゆる場所でのカスタムフォント、または高度なダークモードロジックが必要な場合は、代わりに[HTMLエディター](./design-emails-with-html)を使用してください。 ### 推奨構築フロー 最良の結果を得て、レンダリングの問題を減らすために、この順序に従ってください： 1. **設定**でグローバルスタイルを設定 2. **行**を使用してレイアウト構造を追加 3. **コンテンツ**ブロックを挿入 4. パーソナライゼーションとリンクを追加 5. 購読解除リンクを追加（マーケティングメール用） 6. テンプレートとして保存または送信 完了後、メールは以下を満たすべきです： * 幅が600px以下 * モバイルとデスクトップできれいに表示される * 必要なコンプライアンスリンクが含まれている **レンダリングや配信に問題を引き起こす一般的なミス：** * **購読解除リンクの欠落** — マーケティングメールに必須です。ない場合、受信トレイプロバイダーがメールをスパムとしてフラグを立てる可能性が高くなります。 * **600pxを超えるメール幅** — モバイルで横スクロールが発生し、多くのクライアントでレイアウトが崩れます。 * **行への背景画像** — Outlookおよびいくつかのモバイルクライアントはレンダリングしません。代わりに画像ブロックを使用してください。 * **フォールバックフォントなし** — カスタムWebフォントはごく一部のクライアントでしか読み込まれません。必ずシステムフォントのフォールバックを宣言してください。 * **大きすぎる画像** — 1MBを超えるメールは読み込みが遅く、ブロックされる場合があります。個別の画像は200KB未満にしてください。 *** ## 設定 設定は、メールの基本的なレイアウトとスタイルを定義します。明示的にオーバーライドされない限り、これらの値は行とコンテンツブロックにカスケードされます。 Global settings panel in the Drag and Drop Editor | デザイン設定 | 説明 | | ----------- | -------------------------------------------- | | コンテンツエリア幅 | メールの幅（ピクセル単位）。**推奨:** `600px`。 | | コンテンツエリア配置 | コンテンツを左または中央に配置。 | | 背景色 | コンテンツエリアの背後の色。 | | コンテンツエリア背景色 | コンテンツエリア内の色。 | | デフォルトフォント | オーバーライドされない限り、すべてのテキストに適用。カスタムフォントにはHTMLが必要。 | | リンク色 | すべてのリンクのデフォルト色。 | | 言語 | アクセシビリティのためにHTML `lang`属性を設定。デフォルトは英語。 | **推奨デフォルト:** 一貫性を確保し、ブロックごとのオーバーライドを減らすために、設定で可能な限り多くのスタイリングを設定してください。 *** ## 行 行は、メールの水平レイアウトを定義します。各行には1つまたは複数の列を含めることができ、各列にはコンテンツブロックを含めることができます。 構造を構築するために、エディターに行をドラッグアンドドロップします。 Adding rows to structure an email レイアウトと間隔を制御するために行を使用してください。主要なレイアウト決定に個別のコンテンツブロックに依存することは避けてください。 ### 保存された行 保存された行を使用すると、メールやテンプレート間でヘッダー、フッター、または繰り返しセクションを再利用できます。 行の**保存アイコン**をクリックして保存します。 Saving a row for reuse **行 > 保存された行**から保存された行にアクセスします。 Selecting a saved row 保存された行のカテゴリ： * **空** – 空白の行テンプレート * **マイ保存行** – あなたまたはあなたのチームが作成した行 * **サンプル行** – OneSignalの例 ### 行のプロパティ 行レベルの設定を編集するために、行の外端をクリックします。 ホバー時に**行**ではなく**コンテンツ**が表示される場合は、コンテンツブロックを選択しています。ラベルが**行**と読めるまで外側のコンテナ端をクリックしてください。 | 行プロパティ | 説明 | | ------ | --------------------------------------- | | 背景 | 行の背後の色または画像。**推奨:** 一貫性のために設定で背景色を設定。 | | 境界線 | 境界線の色、幅、スタイル。 | | レイアウト | モバイルまたはデスクトップで行を表示または非表示。 | | 列 | 列を追加、削除、またはサイズ変更し、列パディングを調整。 | | 削除/複製 | 行を選択して**削除**または**複製**アイコンを使用して削除またはコピー。 | 行での背景画像の使用は避けてください。メールクライアントのサポートが一貫していません。行に画像のみが含まれる場合は、代わりに**画像ブロック**を使用してください。 *** ## コンテンツ コンテンツブロックは、受信者が見る要素—テキスト、画像、ボタン、区切り線、HTMLです。 コンテンツブロックを行の列にドラッグします。列幅に自動的に適応されます。 Available content blocks **コンテンツブロックの判断基準:** * ほとんどのコピーには**テキストブロック**を使用。 * ビジュアルまたはカスタムタイポグラフィには**画像ブロック**を使用。 * 高度なスタイリングまたは動作が必要な場合のみ**HTMLブロック**を使用。 ### カスタムフォント ドラッグアンドドロップエディターは、デフォルトでシステムフォントをサポートしています。カスタムフォントを使用するには、HTMLブロックを使用する必要があります。 ```html HTML block theme={null}

ようこそ！

ご購読ありがとうございます。

``` 多くのメールクライアント（GmailやWindows版Outlookなど）はWebフォントを読み込みません。本文テキストにはシステムフォントを使用し、カスタムフォントは見出しのみに留めてください。必ずフォールバックフォントを含めるか、保証されたタイポグラフィのために画像を使用してください。 ### 画像と動画 OneSignalダッシュボードに画像を直接アップロードして、チームが再利用できるようにします。エディターはトリミング、フィルタリング、その他のエフェクトをサポートしています。外部でホストされている画像や動画をURLで参照することもできます。各URLが公開アクセス可能であることを確認してください。 #### メール用推奨画像サイズ * ヘッダー/バナー画像: `3:1`または`4:1`（例：`600×200`または`600×150`） * ヒーロー画像: `16:9`または`2:1`（例：`600×338`または`600×300`） * 正方形画像: `1:1`（例：`300×300`）—製品グリッドに適している * サムネイル: `1:1`または`4:3` * 最大幅: `600–700px`が標準（ほとんどのメールクライアント） * Retinaディスプレイ用に`2x`でデザイン（例：`1200px`幅、`600px`で表示） * 個別画像を`100–200 KB`未満に保つ * 総メールサイズ（画像を含む）を`1 MB`未満に保つ * 小さい画像は読み込み時間の短縮と配信性の向上につながる * **JPG** — 写真に最適 * **PNG** — グラフィック、ロゴ、透明性のある画像に最適 * **GIF** — シンプルなアニメーション用（ファイルサイズを小さく保つ） * **WebP** — メールではまだ広くサポートされていない；避けること * アクセシビリティのため、および画像が読み込まれない場合のために常にaltテキストを含める * スタイリングにはインラインCSSを使用（多くのクライアントが` ``` ダークモードで正しくレンダリングされないコンテンツブロックを、上記で定義したCSSクラスを使用するHTMLブロックに置き換えます。 ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` プレビューモードに戻り、ダークモードスタイルが正しく適用されていることを確認します。 *** ## 作業を保存 将来使用するために、メールデザインを[**テンプレート**](./templates)として保存します。 Save email as a template *** ## FAQ ### カスタム購読解除リンクを追加する方法は？ デフォルトの`[unsubscribe_url]`を独自のURLに置き換えます。受信者が購読解除した際に、OneSignal内のメールサブスクリプションステータスを更新する責任があります。設定の詳細については、[カスタム購読解除ページの作成](./create-custom-unsubscribe-page)を参照してください。 ### Outlookでメールの表示が異なるのはなぜですか？ Windows版OutlookはMicrosoft Wordレンダリングエンジンを使用しており、モダンなCSSをサポートしていません。一般的な問題には、無視される`max-width`、崩れる背景画像、読み込まれないWebフォントなどがあります。Outlookで特にテストし、画像には明示的な`width`と`height`属性を含むインラインCSSを使用してください。 ### メールの最大サイズは？ 総メールサイズ（HTML + 画像）を1MB未満に保ってください。HTMLが102KBを超えるメールはGmailによってクリップされ、折り畳み以下のコンテンツが「メール全体を表示」リンクの後ろに隠れます。この閾値以下に保つために、画像を最適化し、未使用のコードを削除してください。 ### メールの一部を複数のキャンペーンで再利用できますか？ はい。行の保存アイコンをクリックして、任意の行を**保存された行**として保存します。保存された行は**行 > マイ保存行**に表示され、任意のメールにドラッグできます。メール全体を再利用するには、デザイン全体を[テンプレート](./templates)として保存します。 ### 送信前にメールをプレビューする方法は？ トップツールバーの**プレビュー**ボタンを使用して、デスクトップとモバイルでのメールのレンダリングを確認します。実際のテストを送信するには、**テストメールを送信**をクリックして受信者アドレスを入力します。テストメールは受信トレイに配信されるため、実際のメールクライアントでレンダリング、リンク、パーソナライゼーションを確認できます。 ### 絵文字はメールで機能しますか？ はい、ただしメールクライアント間でレンダリングが異なります。Windows版Outlookが最も一貫性がなく、絵文字が白黒のアウトラインやボックスとして表示される場合があります。件名やCTAテキストに絵文字を使用する場合は、送信前にクライアント間でテストしてください。 ### 既存のHTMLメールテンプレートをインポートする方法は？ OneSignalに既存のHTMLテンプレートを取り込む方法は3つあります： 1. [メールテンプレート転送](./email-template-forwarding)を使用してOneSignalにメールを転送 2. [Create Template API](/reference/create-template)を使用してHTMLをプログラムでアップロード 3. [HTMLエディター](./design-emails-with-html)にHTMLを直接コピー&ペースト ## 関連ページ OneSignalでメールを送信するためのエンドツーエンドガイド。 完全なHTML制御、ダークモードオーバーライド、高度なスタイリング。 キャンペーン間でメールデザインを保存して再利用します。 コンプライアンスのためのデフォルトまたはカスタム購読解除リンクを追加します。 タグ、Liquid構文、動的コンテンツでメールをパーソナライズします。 件名、コンテンツ、送信時間をテストしてエンゲージメントを最適化します。