ブロックエディタでHTMLコンテンツを作成する

「SATORI」では、直感的な操作でHTMLコンテンツを作成できる「Beefree」というブロックエディタを採用しています。

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

デザイン設定
レイアウト作成
テキスト編集
画像の挿入と編集
その他の操作
注意事項
関連オンラインマニュアル／FAQ

デザイン設定

HTMLコンテンツの作成にあたって、ウェブページやメール全体の幅や初期値の設定などの基本設定を行います。

デザイン設定（DESIGN SETTINGS）を表示する

1.エディタ右上の「ボディ」タブを選択します。

2.「デザイン設定（DESIGN SETTINGS）」が表示されます。

①コンテンツ領域の幅

「コンテンツ領域の幅」のスライダーを操作すると、メールテンプレート機能は全体の幅を480px～900px、
ウェブページ機能は320px～1440pxの間で調整できます。

②コンテンツの配置

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

③背景色

コンテンツ全体の背景色を指定できます。

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

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

⑤デフォルトフォント

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

⑥リンクの色

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

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

レイアウト作成

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

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

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

①背景

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

②ボーダー

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

③レイアウト

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

④列構造

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

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

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

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

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

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

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

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

テキスト編集

ツールバーの概要

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

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

リンクを挿入する

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

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

特殊変数を挿入する

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

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

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

画像の挿入と編集

画像を挿入する

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

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

画像サイズを変更する

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

画像にリンクを挿入する

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