ドラッグアンドドロップでメールをデザインする

概要

OneSignalのドラッグアンドドロップメールビルダーを使用すると、受信者の受信トレイに表示されるとおりに—完全なHTMLを記述することなく—レスポンシブメールを視覚的にデザインできます。 3つのコアコンポーネントを使用してメールを構築します：

設定 – メール全体に適用されるグローバルスタイルとレイアウト
行 – 構造とレスポンシブ性を制御する水平レイアウトコンテナ
コンテンツ – テキスト、画像、ボタン、HTMLなどの個別ブロック

以下のセクションでは、各コンポーネントとメール構築の推奨順序について説明します。

以下の機能が必要な場合は、ドラッグアンドドロップメールビルダーを使用してください：

完全なHTMLを管理することなく視覚的にメールをデザイン（HTMLブロックが利用可能）
キャンペーン間で行やテンプレートを再利用
非技術的なチームメンバーが安全にコンテンツを編集できるようにする

完全なHTML制御、あらゆる場所でのカスタムフォント、または高度なダークモードロジックが必要な場合は、代わりにHTMLエディターを使用してください。

推奨構築フロー

最良の結果を得て、レンダリングの問題を減らすために、この順序に従ってください：

設定でグローバルスタイルを設定
行を使用してレイアウト構造を追加
コンテンツブロックを挿入
パーソナライゼーションとリンクを追加
購読解除リンクを追加（マーケティングメール用）
テンプレートとして保存または送信

完了後、メールは以下を満たすべきです：

幅が600px以下
モバイルとデスクトップできれいに表示される
必要なコンプライアンスリンクが含まれている

レンダリングや配信に問題を引き起こす一般的なミス：

購読解除リンクの欠落 — マーケティングメールに必須です。ない場合、受信トレイプロバイダーがメールをスパムとしてフラグを立てる可能性が高くなります。
600pxを超えるメール幅 — モバイルで横スクロールが発生し、多くのクライアントでレイアウトが崩れます。
行への背景画像 — Outlookおよびいくつかのモバイルクライアントはレンダリングしません。代わりに画像ブロックを使用してください。
フォールバックフォントなし — カスタムWebフォントはごく一部のクライアントでしか読み込まれません。必ずシステムフォントのフォールバックを宣言してください。
大きすぎる画像 — 1MBを超えるメールは読み込みが遅く、ブロックされる場合があります。個別の画像は200KB未満にしてください。

設定

設定は、メールの基本的なレイアウトとスタイルを定義します。明示的にオーバーライドされない限り、これらの値は行とコンテンツブロックにカスケードされます。

Global settings panel in the Drag and Drop Editor

デザイン設定	説明
コンテンツエリア幅	メールの幅（ピクセル単位）。推奨: `600px`。
コンテンツエリア配置	コンテンツを左または中央に配置。
背景色	コンテンツエリアの背後の色。
コンテンツエリア背景色	コンテンツエリア内の色。
デフォルトフォント	オーバーライドされない限り、すべてのテキストに適用。カスタムフォントにはHTMLが必要。
リンク色	すべてのリンクのデフォルト色。
言語	アクセシビリティのためにHTML `lang`属性を設定。デフォルトは英語。

推奨デフォルト: 一貫性を確保し、ブロックごとのオーバーライドを減らすために、設定で可能な限り多くのスタイリングを設定してください。

行

行は、メールの水平レイアウトを定義します。各行には1つまたは複数の列を含めることができ、各列にはコンテンツブロックを含めることができます。構造を構築するために、エディターに行をドラッグアンドドロップします。

レイアウトと間隔を制御するために行を使用してください。主要なレイアウト決定に個別のコンテンツブロックに依存することは避けてください。

保存された行

保存された行を使用すると、メールやテンプレート間でヘッダー、フッター、または繰り返しセクションを再利用できます。行の保存アイコンをクリックして保存します。

行 > 保存された行から保存された行にアクセスします。

保存された行のカテゴリ：

空 – 空白の行テンプレート
マイ保存行 – あなたまたはあなたのチームが作成した行
サンプル行 – OneSignalの例

行のプロパティ

行レベルの設定を編集するために、行の外端をクリックします。

ホバー時に行ではなくコンテンツが表示される場合は、コンテンツブロックを選択しています。ラベルが行と読めるまで外側のコンテナ端をクリックしてください。

行プロパティ	説明
背景	行の背後の色または画像。推奨: 一貫性のために設定で背景色を設定。
境界線	境界線の色、幅、スタイル。
レイアウト	モバイルまたはデスクトップで行を表示または非表示。
列	列を追加、削除、またはサイズ変更し、列パディングを調整。
削除/複製	行を選択して削除または複製アイコンを使用して削除またはコピー。

行での背景画像の使用は避けてください。メールクライアントのサポートが一貫していません。行に画像のみが含まれる場合は、代わりに画像ブロックを使用してください。

コンテンツ

コンテンツブロックは、受信者が見る要素—テキスト、画像、ボタン、区切り線、HTMLです。コンテンツブロックを行の列にドラッグします。列幅に自動的に適応されます。

コンテンツブロックの判断基準:

ほとんどのコピーにはテキストブロックを使用。
ビジュアルまたはカスタムタイポグラフィには画像ブロックを使用。
高度なスタイリングまたは動作が必要な場合のみHTMLブロックを使用。

カスタムフォント

ドラッグアンドドロップエディターは、デフォルトでシステムフォントをサポートしています。カスタムフォントを使用するには、HTMLブロックを使用する必要があります。

HTML block

<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  ようこそ！
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  ご購読ありがとうございます。
</p>

多くのメールクライアント（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を使用（多くのクライアントが<style>タグを除去）
背景画像を避ける（クライアントサポートが一貫していない）
クライアント間でテスト — Gmail、Outlook、Apple Mailはすべて異なるレンダリングをする
Outlookは画像の寸法を無視することが多いため、HTMLでwidthとheight属性の両方を設定

リンク

OneSignalはデフォルトでリンクトラッキングを有効にし、マルチリンクトラッキングをサポートしています。

リンク

メールのリンクトラッキング、マルチリンクトラッキング、クリック分析を設定します。

ディープリンク

メールリンクからアプリ内の特定の画面に受信者を誘導します。

購読解除リンク

すべてのマーケティングメールには購読解除リンクを含める必要があります。ない場合、受信トレイプロバイダーがメールをスパムとしてフラグを立てる可能性が高くなります。受信者がOneSignalのデフォルト購読解除リンクをクリックすると、メールのSubscription（サブスクリプション）が自動的に購読解除に設定されます。メールに[unsubscribe_url]タグを追加するには、以下のいずれかの方法を使用します：

エディター（Special links）
HTMLブロック

購読解除リンクにしたいテキストを選択します。
ツールバーのリンクアイコンをクリックします。
Special links > Unsubscribeを選択します。

Adding the unsubscribe link using Special links in the editor

以下をHTMLブロックに貼り付けます：

<a href="[unsubscribe_url]">Unsubscribe</a>

購読解除リンク

コンプライアンス要件とOneSignalが購読解除を処理する方法。

カスタム購読解除ページ

デフォルトの購読解除フローを独自のブランドページに置き換えます。

HTMLブロック

ドラッグアンドドロップのコンテンツブロックでは提供できない制御が必要な場合にHTMLブロックを使用します：

ダークモードオーバーライド — prefers-color-scheme CSSを追加します。以下のダークモードスタイリングを参照してください。
カスタムフォント — フォールバックスタックを含む@font-faceルールを宣言します。
高度なレイアウト — 複数列グリッド、条件付きコンテンツ、またはOutlook固有のマークアップ。

JavaScriptはメールではサポートされていません。インラインCSSを使用してください — 多くのクライアントが<style>タグ、クラス、IDを除去します。

パーソナライゼーション

Liquidテンプレートを使用して、名前、タグ、またはフォールバック値などのサブスクライバー固有のコンテンツを挿入します。例：{{ first_name | default: "there" }}

Using Liquid templating to personalize messages

メッセージパーソナライゼーション

利用可能なパーソナライゼーション変数とその使用方法。

Liquid構文の使用

条件文、フィルター、ループ、および高度なLiquidパターン。

ダークモード

ほとんどのメールは変更なしでダークモードで許容可能にレンダリングされます。しかし、ブランドカラー、白い背景のロゴ、または色付きセクションを含むメールは調整が必要な場合があります。

ダークモードスタイリングが必要かどうか

メールに以下のいずれかが含まれる場合はダークモードオーバーライドを追加してください：

ブランドカラーのセクション — 鮮やかな色はダークモードで見づらくなり、読みやすさを損ないます
白/明るい背景のロゴやアイコン — 画像は明るいままで背景が反転し、見えなくなる場合があります
色付き背景のテキスト — 反転した背景が反転していないテキストカラーと衝突する場合があります
コール・トゥ・アクションボタン — ボタンの背景が予期しない色に反転する場合があります

メールがほぼテキストのみでスタイリングが最小限の場合、デフォルトのレンダリングは通常許容範囲内です。

エディターでダークモードをプレビュー

プレビューモードボタンを使用して、ダークモードレンダリングの大まかなプレビューを確認します。このプレビューは近似値であり、実際のレンダリングは受信トレイプロバイダーによって異なります（以下のクライアント動作テーブルを参照）。

Preview mode in the Drag and Drop Editor

Light and dark mode toggle in the Drag and Drop Editor

メールクライアントのダークモード処理方法

すべてのメールクライアントはダークモードを異なる方法で適用します。この動作を直接制御することはできませんが、すべてのモードで適切にレンダリングされるメールをデザインすることができます。

クライアント	動作	`prefers-color-scheme` CSSを尊重するか？
Apple Mail（iOS/macOS）	完全なカラー反転	はい
Gmail（iOS/Androidアプリ）	部分的な反転 — 明るい背景を変更するが、すべての色ではない	いいえ
Gmail（Web）	ダークモードレンダリングなし	N/A
Outlook（Windows）	Wordレンダリングエンジンを使用した完全な反転	いいえ — ほとんどのCSSオーバーライドを無視
Outlook（Mac/iOS）	部分的な反転	はい
Yahoo Mail	部分的な反転	いいえ
Samsung Mail	完全な反転	いいえ

注意すべき一般的なダークモードの問題：

消えるロゴ — 透明なPNG上のダークロゴは暗い背景で見えなくなります。白または明るいアウトラインを追加するか、明るい背景が組み込まれたバージョンを使用してください。
読めないテキスト — 明るい背景上のダークテキストは、背景が反転した後も暗いままの場合があります。テキストカラーのオーバーライドと背景のオーバーライドは必ず組み合わせて設定してください。
ブランドカラーの衝突 — 白背景では見栄えの良い鮮やかなブランドカラーが暗い背景では見づらくなります。彩度を下げた代替案をテストしてください。
見えないボタン — ブランドカラーの背景に暗いテキストのCTAボタンは、部分的な反転後にコントラストを失う場合があります。

デザインのヒント：

純白（#FFFFFF）と純黒（#000000）を避けてください。完全反転クライアントへの影響を軽減するために、オフホワイトと濃いグレーを使用してください。
透明なPNGは慎重に使用してください。どんな背景にもよく馴染みますが、透明な背景上のダークロゴはダークモードで見えなくなります。ロゴには薄いアウトラインを追加するか、背景が組み込まれたバージョンを使用してください。
テキストを含む画像では、暗いテキストを白いアウトラインで囲んで判読性を確保してください。暗い背景の白いテキストには黒いアウトラインを使用してください。

ドラッグアンドドロップでのダークモードスタイリング

ダークモードで一部の要素のみがうまくレンダリングされない場合、それらをHTMLブロックに置き換え、CSSクラスと!important宣言を使用してスタイリングを直接オーバーライドできます。

メールの上部にHTMLブロックを追加

メールの最初の行にHTMLブロックをドラッグします。

Adding an HTML block to the top of your email

ダークモードCSSを追加

以下をHTMLブロックに貼り付けます。prefers-color-scheme: darkメディアクエリは、受信者のメールクライアントがダークモードの場合にのみスタイルを適用します。

HTML block

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>

問題のあるコンテンツをHTMLブロックに置き換え

ダークモードで正しくレンダリングされないコンテンツブロックを、上記で定義したCSSクラスを使用するHTMLブロックに置き換えます。

<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>

プレビューモードに戻り、ダークモードスタイルが正しく適用されていることを確認します。

作業を保存

将来使用するために、メールデザインをテンプレートとして保存します。

FAQ

カスタム購読解除リンクを追加する方法は？

デフォルトの[unsubscribe_url]を独自のURLに置き換えます。受信者が購読解除した際に、OneSignal内のメールサブスクリプションステータスを更新する責任があります。設定の詳細については、カスタム購読解除ページの作成を参照してください。

Outlookでメールの表示が異なるのはなぜですか？

Windows版OutlookはMicrosoft Wordレンダリングエンジンを使用しており、モダンなCSSをサポートしていません。一般的な問題には、無視されるmax-width、崩れる背景画像、読み込まれないWebフォントなどがあります。Outlookで特にテストし、画像には明示的なwidthとheight属性を含むインラインCSSを使用してください。

メールの最大サイズは？

総メールサイズ（HTML + 画像）を1MB未満に保ってください。HTMLが102KBを超えるメールはGmailによってクリップされ、折り畳み以下のコンテンツが「メール全体を表示」リンクの後ろに隠れます。この閾値以下に保つために、画像を最適化し、未使用のコードを削除してください。

メールの一部を複数のキャンペーンで再利用できますか？

はい。行の保存アイコンをクリックして、任意の行を保存された行として保存します。保存された行は行 > マイ保存行に表示され、任意のメールにドラッグできます。メール全体を再利用するには、デザイン全体をテンプレートとして保存します。

送信前にメールをプレビューする方法は？

トップツールバーのプレビューボタンを使用して、デスクトップとモバイルでのメールのレンダリングを確認します。実際のテストを送信するには、テストメールを送信をクリックして受信者アドレスを入力します。テストメールは受信トレイに配信されるため、実際のメールクライアントでレンダリング、リンク、パーソナライゼーションを確認できます。

絵文字はメールで機能しますか？

はい、ただしメールクライアント間でレンダリングが異なります。Windows版Outlookが最も一貫性がなく、絵文字が白黒のアウトラインやボックスとして表示される場合があります。件名やCTAテキストに絵文字を使用する場合は、送信前にクライアント間でテストしてください。

既存のHTMLメールテンプレートをインポートする方法は？

OneSignalに既存のHTMLテンプレートを取り込む方法は3つあります：

メールテンプレート転送を使用してOneSignalにメールを転送
Create Template APIを使用してHTMLをプログラムでアップロード
HTMLエディターにHTMLを直接コピー&ペースト

メール概要

OneSignalでメールを送信するためのエンドツーエンドガイド。

HTMLでメールをデザインする

完全なHTML制御、ダークモードオーバーライド、高度なスタイリング。

メールテンプレート

キャンペーン間でメールデザインを保存して再利用します。

購読解除リンク

コンプライアンスのためのデフォルトまたはカスタム購読解除リンクを追加します。

メッセージパーソナライゼーション

タグ、Liquid構文、動的コンテンツでメールをパーソナライズします。

ABテスト

件名、コンテンツ、送信時間をテストしてエンゲージメントを最適化します。

はじめに & 設定

メッセージングチャネル

ジャーニー

オーディエンス & カスタムイベント

分析 & 統合

プライバシー & セキュリティ

​概要

​推奨構築フロー

​設定

​行

​保存された行

​行のプロパティ

​コンテンツ

​カスタムフォント

​画像と動画

​メール用推奨画像サイズ

​リンク

リンク

ディープリンク

​購読解除リンク

購読解除リンク

カスタム購読解除ページ

​HTMLブロック

​パーソナライゼーション

メッセージパーソナライゼーション

Liquid構文の使用

​ダークモード

​ダークモードスタイリングが必要かどうか

​エディターでダークモードをプレビュー

​メールクライアントのダークモード処理方法

​ドラッグアンドドロップでのダークモードスタイリング

​作業を保存

​FAQ

​カスタム購読解除リンクを追加する方法は？

​Outlookでメールの表示が異なるのはなぜですか？

​メールの最大サイズは？

​メールの一部を複数のキャンペーンで再利用できますか？

​送信前にメールをプレビューする方法は？

​絵文字はメールで機能しますか？

​既存のHTMLメールテンプレートをインポートする方法は？

​関連ページ

メール概要

HTMLでメールをデザインする

メールテンプレート

購読解除リンク

メッセージパーソナライゼーション

ABテスト

概要

推奨構築フロー

設定

行

保存された行

行のプロパティ

コンテンツ

カスタムフォント

画像と動画

メール用推奨画像サイズ

リンク

購読解除リンク

HTMLブロック

パーソナライゼーション

ダークモード

ダークモードスタイリングが必要かどうか

エディターでダークモードをプレビュー

メールクライアントのダークモード処理方法

ドラッグアンドドロップでのダークモードスタイリング

作業を保存

FAQ

カスタム購読解除リンクを追加する方法は？

Outlookでメールの表示が異なるのはなぜですか？

メールの最大サイズは？

メールの一部を複数のキャンペーンで再利用できますか？

送信前にメールをプレビューする方法は？

絵文字はメールで機能しますか？

既存のHTMLメールテンプレートをインポートする方法は？

関連ページ