メインコンテンツへスキップ

​
概要

OneSignalのドラッグアンドドロップメールビルダーを使用すると、ユーザーの受信トレイに表示されるとおりに—完全なHTMLを記述することなく—レスポンシブメールを視覚的にデザインできます。 3つのコアコンポーネントを使用してメールを構築します：
  • 設定 – メール全体に適用されるグローバルスタイルとレイアウト
  • 行 – 構造とレスポンシブ性を制御する水平レイアウトコンテナ
  • コンテンツ – テキスト、画像、ボタン、HTMLなどの個別ブロック
このガイドでは、各コンポーネントについて説明し、最初から最後までメールを構築する推奨方法を示します。
以下の機能が必要な場合は、ドラッグアンドドロップメールビルダーを使用してください：
  • 完全なHTMLを管理することなく視覚的にメールをデザイン（HTMLブロックが利用可能）
  • キャンペーン間で行やテンプレートを再利用
  • 非技術的なチームメンバーが安全にコンテンツを編集できるようにする
完全なHTML制御、あらゆる場所でのカスタムフォント、または高度なダークモードロジックが必要な場合は、代わりにHTMLエディターを使用してください。

​
推奨構築フロー（デフォルト）

最良の結果を得て、レンダリングの問題を減らすために、この順序に従ってください：
  1. 設定でグローバルスタイルを設定
  2. 行を使用してレイアウト構造を追加
  3. コンテンツブロックを挿入
  4. パーソナライゼーションとリンクを追加
  5. 購読解除リンクを追加（マーケティングメール用）
  6. テンプレートとして保存または送信
完了後、メールは以下を満たすべきです：
  • 幅が600px以下
  • モバイルとデスクトップできれいに表示される
  • 必要なコンプライアンスリンクが含まれている

​
独自のテンプレートをインポート

HTMLメールテンプレートを既にお持ちの場合は、以下の方法でOneSignalに追加できます：
  1. メールテンプレート転送
  2. Create Template API
  3. HTMLエディターにHTMLをコピー&ペースト

​
設定

設定は、メールの基本的なレイアウトとスタイルを定義します。明示的にオーバーライドされない限り、これらの値は行とコンテンツブロックにカスケードされます。
ビルダーの設定
デザイン設定説明
コンテンツエリア幅メールの幅（ピクセル単位）。推奨: 600px。
コンテンツエリア配置コンテンツを左または中央に配置。
背景色コンテンツエリアの背後の色。
コンテンツエリア背景色コンテンツエリア内の色。
デフォルトフォントオーバーライドされない限り、すべてのテキストに適用。カスタムフォントにはHTMLが必要。
リンク色すべてのリンクのデフォルト色。
言語アクセシビリティのためにHTML lang属性を設定。デフォルトは英語。
推奨デフォルト: 一貫性を確保し、ブロックごとのオーバーライドを減らすために、設定で可能な限り多くのスタイリングを設定してください。

​
行

行は、メールの水平レイアウトを定義します。各行には1つまたは複数の列を含めることができ、各列にはコンテンツブロックを含めることができます。 構造を構築するために、エディターに行をドラッグアンドドロップします。
メール構築のための行追加
レイアウトと間隔を制御するために行を使用してください。主要なレイアウト決定に個別のコンテンツブロックに依存することは避けてください。

​
行の削除と複製

行を選択して、削除と複製アイコンを使用します。
行の削除と複製コントロール

​
保存された行

保存された行を使用すると、メールやテンプレート間でヘッダー、フッター、または繰り返しセクションを再利用できます。 行の保存アイコンをクリックして保存します。
再利用のための行保存
行 > 保存された行から保存された行にアクセスします。
保存された行を選択
保存された行カテゴリ：
  • 空 – 空白の行テンプレート
  • マイ保存行 – あなたまたはあなたのチームが作成した行
  • サンプル行 – OneSignalの例

​
行のプロパティ

行レベル設定を編集するために、行の外端をクリックします。
ホバー時に行ではなくコンテンツが表示される場合は、コンテンツブロックを選択しています。ラベルが行と読めるまで外側のコンテナ端をクリックしてください。
行プロパティ説明
背景行の背後の色または画像。推奨: 一貫性のために設定で背景色を設定。
境界線境界線の色、幅、スタイル。
レイアウトモバイルまたはデスクトップで行を表示または非表示。
列列を追加、削除、またはサイズ変更し、列パディングを調整。
行での背景画像の使用は避けてください。メールクライアントのサポートが一貫していません。行に画像のみが含まれる場合は、代わりに画像ブロックを使用してください。

​
コンテンツ

コンテンツブロックは、ユーザーが見る実際の要素—テキスト、画像、ボタン、区切り線、HTMLです。 コンテンツブロックを行の列にドラッグします。列幅に自動的に適応されます。
利用可能なコンテンツブロック
コンテンツブロックの判断基準:
  • ほとんどのコピーにはテキストブロックを使用。
  • ビジュアルまたはカスタムタイポグラフィには画像ブロックを使用。
  • 高度なスタイリングまたは動作が必要な場合のみHTMLブロックを使用。

​
カスタムフォント

ドラッグアンドドロップエディターは、デフォルトでシステムフォントをサポートしています。カスタムフォントを使用するには、HTMLブロックを使用する必要があります。
HTMLブロック
<!-- これをメールの上部のHTMLブロックに配置 -->
<style type="text/css">
  /* Bebas Neueを宣言（Webフォントをサポートするクライアントでのみ読み込まれます） */
  @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–200KB未満に保つ
  • 総メールサイズ（画像を含む）を1MB未満に保つ
  • 小さい = より速い読み込み時間とより良い配信性
ファイル形式:
  • JPG: 写真に最適
  • PNG: グラフィック、ロゴ、透明性に最適
  • GIF: 簡単なアニメーション用（ファイルサイズを小さく保つ）
  • WebP: メールではまだ広くサポートされていない—避ける
その他のヒント:
  • アクセシビリティのため、および画像が読み込まれない場合のためにaltテキストを常に含める
  • スタイリングにはインラインCSSを使用（多くのクライアントが<style>タグを除去）
  • 背景画像を避ける（サポートが一貫していない）
  • クライアント間でテスト（Gmail、Outlook、Apple Mailはすべて異なる表示）
    • Outlookは画像の寸法を無視することが多いため、HTMLで幅と高さの属性を設定

​
リンク

リンクトラッキングはデフォルトで有効になっています。マルチリンクトラッキングが利用可能です。詳細については、LinksおよびDeep Linkingを参照してください。

​
購読解除リンク

すべてのマーケティングメールには購読解除リンクを含める必要があります。購読解除リンクがないと、メールがスパムとしてマークされる可能性が高くなります。詳細については、Unsubscribe linksを参照してください。 OneSignalは、使用すると、ユーザーのメールSubscriptionを購読解除するデフォルトの購読解除リンクを提供します。必要に応じて、独自のカスタム購読解除URLを含めることもできます。メールサブスクリプションを正しく管理していることを確認してください（詳細はCreate a custom unsubscribe pageを参照）。 OneSignalのデフォルト[unsubscribe_url]をメールに追加する方法：
  • HTML Block: <a href="[unsubscribe_url]">Unsubscribe</a>
  • テキストを選択してエディターの**Special links（特別なリンク）**オプションを使用するか、URLフィールドに[unsubscribe_url]を設定します

​
HTMLブロック

HTMLブロックでは、カスタムマークアップとスタイリングが可能です。
  • JavaScriptはサポートされていません
  • インラインCSSが推奨されます
  • 一部のクライアントがクラスとIDを除去します
HTMLブロックは、ダークモードオーバーライドなどの高度なスタイリングに最適な場所です。ダークモードスタイリングのベストプラクティスを参照してください。

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

Liquidテンプレートを使用してメッセージをパーソナライズします。例：{{ first_name | default: "there" }}
Liquidテンプレートを使用したメッセージのパーソナライゼーション
詳細については、メッセージパーソナライゼーションおよびLiquid構文の使用を参照してください。

​
絵文字

絵文字は、メールプラットフォーム間で異なるレンダリングがされる場合があります。

​
作業を保存

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

​
FAQ

​
ダークモードをどのように扱いますか？

ほとんどのメールはダークモードで許容可能に表示されますが、必ずテストしてください。高度なダークモードスタイリングには、HTMLブロックを使用し、ダークモードスタイリングのベストプラクティスを参照してください。

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

詳細については、Create a custom unsubscribe pageを参照してください。

​
関連記事