「SATORI」のメールテンプレート機能では、直感的な操作でメールテンプレートを作成できる「beefree」というブロックエディタを採用しています。

画像やリンクの挿入といった基本的な操作が、コーディングやHTMLの知識がなくても簡単に行えます。
エディタには「Desktop表示」と「Mobile表示」の2つの表示モードがありますが、本マニュアルでは主に「Desktop表示」での操作をご案内します。
※掲載内容は2025年6月20日時点の情報です。

基本設定：メール全体の幅や背景色などの基本的な設定
レイアウト作成：ブロックを使ったメールの構成
テキスト編集：フォントや書式の設定、リンクの挿入
画像の挿入と編集：画像のアップロードと挿入、リンク設定
その他の操作：レイアウトサンプルの読み込み、トラッキングURLの設定、プレビュー表示

はじめて利用する方は、「基本設定」や「レイアウト作成」から順に読み進めることをおすすめします

また、「SATORI」には、すぐに利用できるレイアウトサンプル集が用意されています。新規作成時に活用することで効率的にデザインを仕上げることが可能です。

基本設定

メールテンプレートの作成にあたって、メール全体の幅や初期値の設定などの基本設定を行います。

基本設定を表示する

エディタ右上の「ボディ」タブを選択すると「基本設定」が表示されます。

①コンテンツ領域の幅

「コンテンツ領域の幅」のスライダーを操作すると、メール全体の幅を480px～900pxの間で調整できます。

②コンテンツの配置

「コンテンツの配置」から「左揃え」または「中央揃え」を選択できます。選択した配置はメール全体に適用されます。

③背景色

構造（行）ごとの背景色のデフォルト値を指定できます。

④コンテンツ領域の背景色

テキストなど、各コンテンツの背景色を選択できます。

⑤デフォルトフォント

メール本文のデフォルトフォントをリストから選択できます。
※任意のフォントを追加することはできません。

⑥リンクの色

メール本文中に挿入したリンクの文字色を選択できます。

※「コンテンツ領域の幅」以外の設定項目（コンテンツの配置、背景色、フォント、リンクの色など）は、デフォルトの設定が適用されますが、各要素ごとに個別の変更も可能です。

レイアウト作成

ブロックエディタでは、まず構造（行）をドラッグ＆ドロップで左側の画面に配置します。その後、各行の中にコンテンツをドラッグ＆ドロップで追加することで、大枠のレイアウトを作成できます。

ブロックを組み合わせて作成したHTMLメールのレイアウト例

行のプロパティを表示する

配置した行を選択すると「構造」タブ内に「行のプロパティ」として各種設定項目が表示されます。
※行の両脇にある空白の領域をクリックしてください。

①背景

行の背景設定で、行やコンテンツの背景色を指定できます。

②ボーダー

選択した行に対して枠線の種別、太さ、色を指定します。

③レイアウト

行内のコンテンツを垂直方向にどのように配置するかを選択します。

④列構造

追加した行内の列構造を編集できます。

新規追加
行の中に新しい列を追加します。
列構造は最大で12分割することができ、ハンドル（中央の点が並んだ部分）を左右にスライドして割合を調整できます。
削除
選択した列（カラム）を削除できます。
カラムの背景
選択した列（カラム）の背景色を指定できます。
パディング（内側の余白）
選択した列（カラム）のパディング（内側の余白）を調整できます。
ボーダー
選択した列（カラム）に対して枠線の種別、太さ、色を指定できます。

行やブロックの位置を上下移動する

行やブロックを選択中に表示される十字矢印をドラッグすると上下左右に移動できます。

行やブロックを複製・削除する

行やブロックを選択中に表示されるアイコンから複製・削除が行えます。

ブロックを余白を調整する

ブロックを選択すると表示される「ブロック設定」で、パディング（内側の余白）を調整できます。
「その他のオプション」を有効にすると、各辺の余白を個別に調整することも可能です。

テキスト編集

ツールバーの概要

テキストの入力・編集ができるブロックを選択すると、ツールバーが表示されます。その概要は以下の通りです。

	太字	選択したテキストを太字にします。
	斜体	選択したテキストを斜体にします。
	下線	選択したテキストに下線を引きます。
	取り消し線	選択したテキストに取り消し線を引きます。
	テキストの色	選択したテキストの色を指定します。
	背景色	選択したテキストの背景色を指定します。
	上付き文字	選択したテキストを上付き文字にします。
	下付き文字	選択したテキストを下付き文字にします。
	特殊文字	ギリシャ文字など特殊な文字を挿入します。
	固定スペース	半角スペースを挿入します。
	ツールバーを最小化	ツールバーを最小表示します。
	書式をクリア	選択したテキストの書式をクリアします。
	リンクの挿入・編集	リンクを挿入・編集します。
	リンクの削除	挿入済みのリンクを削除します。
	特殊リンク	テンプレートグループに応じて特殊リンクを選択、挿入します。・カスタマー送信用/フォーム自動返信用：配信停止用URL・トラッキングURL ・シナリオ通知用/フォーム通知用：カスタマー詳細ページのURL
	特殊変数	特殊変数を挿入します。
	ファイルダウンロードURL	ファイルダウンロードURLを挿入します。

リンクを挿入する

リンクを挿入したいテキストを選択し、リンクアイコンをクリックするとリンク設定が表示されます。
トラッキングURL化したい場合、リンク先のURLを「{{URL}}」の形式で設定してください。

例：{{https://example.co.jp}}　※中括弧 （波括弧）の記号は半角で入力してください。

ブロックエディタでメールテンプレートを作成する_250620_2.png

特殊変数を挿入する

特殊変数を挿入したい箇所を選択し、特殊変数アイコンをクリックすると、挿入可能な特殊変数の一覧が表示されます。
特殊変数は、メール送信時に登録済みの情報に置き換えられます。
詳細はこちらのマニュアルをご参照ください。

ブロックエディタでメールテンプレートを作成する_250620_3.png

テキストの上下左右に余白を設定する

テキストの入力・編集ができるブロックを選択すると表示されるブロック設定で、パディング（内側の余白）を調整できます。
「その他のオプション」を有効にすると、各辺の余白を個別に調整することも可能です。

画像の挿入と編集

画像を挿入する

画像ブロックには、ファイルをドラッグ＆ドロップして画像を挿入できます。ドラッグ＆ドロップした画像ファイルはSATORIの管理画面の「画像」にアップロードされ、画像ファイルリストから確認できます。
ブロック内の「参照」をクリックすると、ファイルマネージャが開き、アップロード済みの画像ファイルリストから選択して挿入できます。

※ドラッグ＆ドロップで画像ファイルをアップロードした場合、同じ画像でも別々の画像ファイルとして扱われます。
同じ画像を複数箇所で使用する場合は、「参照」から選択してください。

画像サイズを変更する

画像ブロックを選択すると表示される設定画面で、画像サイズを変更できます。
幅を自動調整の設定を無効にすると、画像の幅を5%～100%の間で調整できます。

画像にリンクを挿入する

画像ブロックを選択すると表示される設定画面で、アクションを設定できます。
リンクを挿入するには、リストタブで「Webページを開く」を選択し、URLを入力してください。
トラッキングURL化したい場合、リンク先となるURLを「{{URL}}」の形式で設定してください。

例：{{https://example.co.jp}}　※中括弧 （波括弧）の記号は半角で入力してください。

その他の操作

レイアウトサンプルを読み込む

メールテンプレートの新規作成時に、レイアウトサンプルを利用できます。
メールテンプレート作成画面の右上・右下にある「レイアウトサンプル集を読み込む」ボタンから、レイアウトサンプルを選択できます。
レイアウトサンプルの読み込みに関する詳細はこちらのマニュアルをご参照ください。

トラッキングURLに置換

エディタ右上の「トラッキングURLに置換」をクリックすると、メールテンプレート内の全てのリンクがトラッキングURLに置換されます。
トラッキングURLの詳細はこちらのマニュアルをご参照ください。

作成したメールをプレビューする

エディタ右上の「プレビュー」をクリックすると、作成したメールテンプレートのプレビューが表示され、ダークモードや端末ごとの表示を確認できます。

※実際のメールは、プレビュー表示と完全に同じようには表示されない場合があります。ご利用のメールソフトによっては、レイアウトが崩れる可能性があることにご留意ください。

注意事項

ブロックエディタの操作や具体的な手順に関するサポートは、beefreeの仕様に基づくものでありサポート対象外となります。
ブロックエディタでは、ソースコードを直接編集することはできません。
メールタイプがテキスト形式の場合は、ブロックエディタを利用できません。

ブロックエディタでメールテンプレートを作成する

目次

本マニュアルの構成