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

​
概要

OneSignalのドラッグアンドドロップメールビルダーを使用すると、ユーザーの受信トレイに表示されるとおりにメールを視覚的にデザインできます。これは3つのコアコンポーネントで構成されています：
  • Settings（設定） – メッセージ全体に適用されるグローバル構成
  • Rows（行） – コンテンツを水平にレイアウトする構造コンテナ
  • Content（コンテンツ） – 画像、テキスト、ボタンなどの個別ブロック
このガイドでは、各コンポーネントとそれらを使用してメールを作成する方法について説明します。追加機能の詳細については：

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

すでにメールテンプレートをお持ちですか？次のオプションでOneSignalアプリに追加できます：
  1. メールテンプレート転送
  2. Create Template API
  3. HTMLエディターにHTMLをコピー＆ペースト

​
設定

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

ビルダーの設定を示す画像

デザイン設定説明
Content area width（コンテンツエリア幅）メールの幅（ピクセル単位）。デフォルトは600pxです。
Content area alignment（コンテンツエリア配置）コンテンツを左または中央に配置します。
Background color（背景色）コンテンツエリアの背後の背景色。
Content area background color（コンテンツエリア背景色）コンテンツエリア内の背景色。
Default font（デフォルトフォント）行またはコンテンツレベルでカスタマイズされない限り、メール全体に適用されるフォント。カスタムフォントにはHTMLが必要です。
Link color（リンクカラー）すべてのハイパーリンクテキストの色。
Language（言語）アクセシビリティのためにHTMLのlang属性を設定します。デフォルトは英語です。

​
行

行は、メールレイアウトの水平方向の構成要素です。各行には複数の列とコンテンツブロックを含めることができます。 メールエディターに行をドラッグアンドドロップするだけで追加できます。

複数の行を使用する機能を示す画像

各行とその列はグローバル設定をオーバーライドでき、デザインとレスポンシブ性をきめ細かく制御できます。

​
行の削除と複製

行を選択して、**delete（削除）とduplicate（複製）**アイコンを使用します。

行を削除および複製する機能を示す画像

​
保存された行

任意の行の保存アイコンをクリックして、テンプレート間で再利用できます。保存された行への更新は、オプションでそれを使用するすべてのテンプレートに適用できます。

行を保存する方法

保存された行にアクセスするには、Rowsタブに移動して保存された行のドロップダウンを開きます：

保存された行を選択

ドロップダウンカテゴリ：
  • Empty（空） – 空白の行テンプレート
  • My Saved Rows（マイ保存行） – 保存した行
  • Sample Rows（サンプル行） – OneSignalによる事前構築済みテンプレート

​
行のプロパティ

行をクリックしてプロパティを編集します。行の上にカーソルを置いたときに「Row」という単語が表示されていることを確認してください。そうでない場合、Contentブロックを選択します。
行のプロパティ説明
Backgrounds（背景）コンテンツエリアの背後の背景色または画像。推奨： 一貫性のためにSettingsで背景色を設定します。クリック可能なコンテンツがない場合は、行の背景画像の代わりに**Image Block（画像ブロック）**の使用を検討してください。
Borders（境界線）境界線の色、幅、スタイル。
Layout（レイアウト）モバイルとデスクトップで行をカスタマイズまたは非表示にします。
Columns（列）行内の列を追加、削除、調整して、さらにContentブロックを追加します。列固有のパディングを調整します。

​
コンテンツ

コンテンツブロックは、メッセージのコア（画像、テキスト、ボタンなど）を表します。 コンテンツブロックを行の列にドラッグすると、幅に合わせて調整されます。各ブロックには、パディング、フォントサイズ、配置などの独自の設定があります。

メールをデザインするためのドラッグアンドドロップコンテンツブロックを選択

​
カスタムフォント

設定にないフォントが必要な場合、HTMLブロックを使用してカスタムフォントを追加できます。例えば： 
<!-- Paste 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;">
  Welcome!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Thanks for subscribing.
</p>
ドラッグアンドドロップエディターでの使用方法：
  1. メールの上部にHTMLブロックを追加し、スニペットを貼り付けます。
  2. Bebas Neueでさらに見出しを追加する場合：
    • 追加のHTMLブロックを使用して同じh1スタイルをコピーするか、または
    • テキストブロックを使用してインラインCSSをfont-family:'Bebas Neue', Arial, Helvetica, sans-serif;に設定します。
多くのメールクライアント（Gmail、Outlook for Windowsなど）はWebフォントを読み込みません。上記のスタックから自動的にArial/Helveticaにフォールバックします。特定のフォントを「強制」するには、代わりに目的のフォントを含む画像を使用して、メールに画像を追加することを検討してください。これにより、場合によってはより多くの制御が可能になります。

​
画像と動画

アップロードされた画像は、チーム全体でアクセスできます。トリミング、フィルタリングなどの画像への変更と影響の適用をエディターで直接行います。 画像と動画へのURLを使用できます。提供されたURL経由で利用可能であることを確認してください。

​
リンク

リンクトラッキングはデフォルトで有効になっています。マルチリンクトラッキングが利用可能です。詳細については、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ブロックでカスタムHTMLを追加します。JavaScriptはサポートされていません。インラインCSSが推奨されます。一部のメールクライアントは、クラスまたはID属性を削除します。
カスタムHTMLブロックは、ダークモードオーバーライドなどの高度なスタイリングを追加するのに最適な場所です。 ガイダンスについては、Dark mode styling best practicesを参照してください。
<div style="background: red;">This now has custom styling!</div>

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

Liquidテンプレートを使用してメッセージをパーソナライズします。例：{{ first_name | default: "there" }}

タグ置換の使用を示す画像

詳細：

​
絵文字

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

異なるメールクライアントでの絵文字のレンダリングを示す画像

​
作業を保存

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

テンプレートとして保存する方法を示す画像

​
FAQ

​
ダークモードをどのように考慮しますか？

ほとんどのメールはダークモードとライトモードで正しく表示されますが、テストすることをお勧めします！ 追加のガイダンスについては、Dark mode styling best practicesを参照してください。

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

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

​
関連記事