メールエディタの操作方法（デザイン編集）

ドラッグ＆ドロップ式のメールエディターは、誰でも簡単に、美しく効果的なメールを作成できるように設計されています。メールエディターは、ブロックセクションとコンテンツセクションの2つで構成されています。ブロックセクションでは、画像やカラム、ボタン、テキストなどのコンテンツ要素を自由に追加・配置できます。コンテンツセクションでは、メール全体のスタイルを設定でき、テキストのデフォルトカラーや背景などのデザインを選ぶことが可能です。

画像をアップロードすることもすぐに使えるストック画像のライブラリーから選ぶこともできます。さらにチェック機能を使えば、編集内容を随時確認できます。

この記事では、エディターで利用可能な各機能をご紹介します。知りたいツールのタイトルをクリックするとすぐ移動できます

ブロック

各ブロックは1つ以上のカラムで構成されており、それぞれのカラム内にテキスト、見出し、画像、ボタンなど、さまざまなコンテンツ要素を追加できます。

ブロック・スタイリング・オプションを表示する方法

メール内でコンテンツの外側をクリックすると、ブロックの枠線が表示されます。その枠線のどこかをクリックすると、左側にスタイル設定のオプションが表示されます。「セクション」というタイトルが付いています。

ブロックのスタイリング・オプションについて

カラムの分割: ブロックは異なるサイズに分割することができます。 50:50, 33:33:33, 25:25:25:25, 等があります。

ブロックを選ぶ前でも後でも、使用するカラムの種類を選択することができます。

選択前

コンテンツ一覧からセクションを選んでエディター内にドラッグして挿入してください。

選択後

エディター内のブロックをクリックしてください。左側のメニュー内に表示されるカラムの種類からご希望のものを選んでください。

2列以上のカラムを選択すると、それぞれのカラムに対する編集オプションが表示されます。このセクションから、カラムを追加したり削除したりすることも可能です。

カラムごとの設定A

背景色やボーダーの追加とボーダーの色、ボタン内の余白サイズを選べます。

ボーダーとボタン内の余白では詳細設定が可能であり、上下左右それぞれに個別のスタイルを設定することができます。

ヒント: ボーダーを使用してテキストボックスの枠線を作成する

セクション全体の設定

「セクション全体の設定」では、セクション全体や各カラムの背景色をあらかじめ設定できます。追加するコンテンツに別の背景色を指定することも可能です。コンテンツの背景色が設定されていない場合は、セクションの背景色が適用されます。

注意: カラムの背景色はコンテンツの背景色より優先されます。

画像アップロード

セクションの背景用の画像をアップロードできます。

画像オプション を使用することで、画像の幅や表示域の編集が可能です。

ブロックの保存

メールの一部を保存するには、該当のブロックをクリックしてください。ブロックの右下に「保存」オプションが表示されます。保存時には、名前やタグを付けて整理しやすくすることもできます。

保存したブロックは左側のセクションのメニュー内で確認できます。

サンプル

1カラムのブロック+ 画像で、画像サイズとブロックの背景色の編集ができます。

トップに戻る ↑

コンテンツ

エディターでは、「コンテンツ」とはブロックの中に配置されるパーツのことを指します。ブロックは状況に応じて「セクション」や「カラム」と呼ばれることもあります。コンテンツを使うことで、テキスト、画像、ボタンなど、さまざまな要素を追加できます。

スタイリングのオプションは、使用する要素によって異なります。以下では、それぞれの要素に用意されている設定項目について順にご紹介します。

以下の項目をクリックして各項目の詳細を確認するか、このまま読み進めても詳細確認できます。

セクション	テキスト
見出し	画像
ボタン	区切り線/余白
メニュー	HTML
ビデオ	ソーシャル
タイマー

セクション

セクションを使うと、メールレイアウトに複数のカラムを追加できます。カラムを配置した後は、それぞれのカラム内にテキスト、画像、ボタンなどの他のコンテンツ要素を追加することができます。

Dragging Column element and adding three columns

テキスト

メール内にテキストを追加する時に使用します。
テキストには編集できるエリアが2つあります。1つはポップアップツールバー、もう1つはエディター左側のメニューです。編集するにはテキスト部分をクリックしてください。両方の編集エリアが同時に表示されます。

テキストツールバー

テキストの上に表示されるツールバーでは簡単な編集操作をすばやく行うことができます。たとえば文字のスタイルや配置の変更などが可能です。

(変更を適用したい箇所に該当するテキストを選択してください。)

太字, 斜体, 下線, ~~取消線~~
フォントの色の変更
ハイライト
絵文字の追加 😎
番号付きリスト、箇条書きリストの作成
ヒョウの挿入
テキストへのリンクの挿入
パーソナライズ

このオプションを使用してコンタクトのフィールド項目を引用させます。受信者個別の姓や名、企業名などをメール内に表示させることができます。

スマートテキスト

より良い文章作成にAIを活用してみましょう。スマートテキスト機能を使えば、スペルや文法の修正、要約、口調の変更、言い換え、さらには内容の拡充まで自動で行えます。

左側のテキストメニュー

エディター左側のテキストメニューでは、以下のようなオプションを使ってテキストを自由にカスタマイズできます。:

フォントの種類
フォントの大きさ

標準
太字

これらの設定は、そのセクションに新しく追加されたテキストに適用されます。

テキストの配置

この設定を適用すると、セクション内のすべてのテキストが同じ位置に揃えられます。別々に配置したい場合は、新たにテキストセクションを追加する必要があります。

行間

ここで行間の調整ができます。

文字間スペース

文字の間隔を調整できます。

リンクのデザイン設定

ハイパーリンクの個所の編集が可能です。 デフォルトでは「本文スタイル」の設定を引き継ぎます。

見出し

見出しや小見出しを作成するのに見出しを使用します。

見出しツールバーは通常のテキストツールバーとは多少異なります。

見出しツールバーでは見出しの簡単な編集は可能ですが、表やリストの挿入、スマートコンテンツの使用はできません。

画像

画像ブロックでは画像をアップロードするか、ストック画像から選んで使用できます。メールテンプレートに画像ブロックを追加すると次の操作が可能になります。:

画像を安全にドラッグ＆ドロップで追加できます
ストック画像を閲覧して選択できます
画像をアップロードして追加できます
画像のURLを指定して挿入できます

ストック画像から使用した画像はアップロード済みの画像に自動で追加されます。

ボタン

ボタンブロックを使えば、メールに明確なCTAを追加できます。テキスト、リンク、色、サイズ、配置を自由にカスタマイズでき、ブランドやレイアウトに合わせて調整可能です。スマートボタン機能では、ボタンの文言に応じた提案が表示され、さらにキーワードを追加することで、スマートアシストがテキストに対する代案を自動生成します。

メール内のボタンは読者に行動を促すための重要な要素です。明確でクリック可能なCTAとして機能し、次のステップへと導きます。

アクションタイプ

各アクションタイプではそれぞれ異なるオプションが設定できます。

ウェブサイトを開く

URLを挿入
リンクの開き方
- 同じタブ上で指定したURLのページを開く
- 新しいタブを開く

メールを送信

メールアドレス等の情報をあらかじめ記入しておけます。

利用可能なオプション:

送信先
件名
本文

電話番号

電話
- クリックすると受信者のスマートフォンにインストールされている対応アプリのみが表示されます。

メール内のアンカーへ移動

以前に名前を付けたアンカーはドロップダウンメニューに表示されます。この機能を使うとメール内の別の個所へ読者を誘導するクリック可能なリンクを作成できます。

たとえばメールの冒頭に「続きを読む」ボタンを配置すると、読者がそのボタンをクリックした際に、指定した個所まで自動でスクロールします。

アンカーへ移動の機能を使うには、まずアンカーに名前を付ける必要があります。アンカー名を設定するには目的のブロックをクリックし、左側のメニューで「アンカー名」までスクロールして名前を入力してください。

ボタンオプション

以下のオプションを利用してボタンを任意のデザインに編集できます。

背景色
テキストの色
フォント種類
サイズ調整
- スライドバーをスライドさせてボタンのサイズを変更できます。自動オンにすれば自動で調整されます。
フォント太さ
- 標準
- 太字
フォントサイズ
- ボタン内のテキストのサイズを指定できます。
行間
- 行間の設定が行えます。
文字間スペース
- 各文字のスペースの設定が行えますし。

間隔

間隔オプションではボタンのサイズ、形、配置などメールに合った変更が可能です。以下の設定が可能となっています。

配置
ボタン内の余白
ボーダー
角を丸くする

一般

余白の調整

ブロック内のボタンの周りの余白を調整します。

区切り線/余白

区切り線/余白ブロックを使用するとメールに横線を追加できます。この線はセクション同士を視覚的に区切る際に便利です。線の幅、太さ、余白などは、メールのデザインに合わせてカスタマイズできます。

例: 区切り線/余白ブロックを使って商品紹介と締めくくりのメッセージを区切ったり、ニュースレター内の複数の記事を分けたりする際に活用できます。

メニューブロックを使うとウェブサイトのナビゲーションメニューのように、メール内にクリック可能なリンクの横並びメニューを追加できます。各メニュー項目には、ウェブページへのリンク、電話番号、メール内のアンカーへのジャンプ、またはメール作成用のmailtoリンクを設定できます。

メニューブロックを使用するには、エディター内にドラッグして配置し、左側メニュー内の「メニュー項目」内をクリックして追加したい項目を決定してください。

「スタイル」タブ内でメニューのデザインをカスタマイズできます。カラー、フォント、レイアウトに合わせて調整しましょう。

例: メールの上部や下部に「リソース」「会社情報」「お問い合わせ」などのリンクを含むメニューを配置することでナビゲーションが向上し、読者の関心を高める効果があります。

HTML

HTMLブロックを使用するとカスタムHTMLコードをメールテンプレートに直接挿入できます。署名、フォーム、その他のHTML要素を追加する際に活用できます。

ビデオ

動画のURLを貼り付けるだけでメール内に再生ボタン付きの動画プレビューを追加できます。動画自体はメール内で再生されず、プレビューボタンをクリックするとブラウザの新しいウィンドウで再生されます。

ビデオブロックを使用してメールに動画のプレビューを追加できます。動画はメールの中では再生されませんが、再生アイコン付きのサムネイルが表示されます。

ビデオブロックを使用するためには動画のURLが必要です。編集可能なオプションが表示されます。

動画はメール内で直接ホストまたは再生されないため、再生アイコンをクリックすると新しいブラウザウィンドウが開いて再生されます。

カスタマイズ:

再生アイコンのタイプ（さまざまな形状から選択可能）
再生アイコンの色（黒、白、赤）
再生アイコンサイズ
余白の調節

動画のタイトルやサムネイルの変更など、動画自体の編集は動画がホストされているプラットフォーム上で行う必要があります。
多くのメールクライアントではメール内での動画の直接再生に対応していません。ビデオブロックは、クリックを促すための再生アイコン付きプレビュー画像を表示するだけの機能です。

ソーシャルブロックを使うとソーシャルメディアプロフィールへリンクするアイコンを簡単に追加できます。これらのリンクをメールに含めることでエンゲージメントの向上やソーシャルページへの誘導、ブランドの認知拡大につながります。

ソーシャルブロックの使い方:

ドラッグ＆ドロップでソーシャルブロックをメールレイアウト内に挿入します。
左側のメニューで追加したいソーシャルメディアのアイコンをクリックすると、メールに挿入されます。
ソーシャルリンクフィールドでソーシャルメディアのプロフィールページのURLを貼り付けます。（例： https://facebook.com/yourbrand）
上記の手順を必要なソーシャルアイコン分繰り返します。

スタイルオプション

アイコンタイプを選択:

サークル、サークル　黒、サークル　白、ラウンド、ラウンド　黒、ラウンド　白、正方形、正方形　黒
アイコンの種類は黒と白のみ利用可能です。白い円形スタイルを選び、ブロックに背景色を設定すると、その色がアイコンの背後にある円の中に表示されます。以下の例をご覧ください。:

配置
アイコンの大きさ
アイコンの間隔

タイマー

タイマーブロックを使うとリアルタイムのカウントダウンをメールに追加できます。受信者がメールを開くと設定したタイムゾーンに基づいてタイマーが自動的にカウントダウンを開始します。

タイマーブロックは、セールやイベント、製品の発売、期間限定オファーなどで緊急感を演出するのに最適です。

以下の手順でタイマーブロックを使用してください:

ドラッグ＆ドロップでタイマーブロックをレイアウト内に挿入してください。
挿入したタイマーブロックをクリックして設定を表示させます。
左側のメニューで終了時間、タイムゾーン、言語を設定します。
1. 終了時刻は、カウントダウンが終了する正確な時刻です。受信者がその時刻を過ぎてメールを開いた場合、タイマーは「00-00-00」と表示されます。

タイマースタイルオプション

ラベル
- 「日」「時間」などのラベルは、デザインに合わせて表示・非表示を切り替えることができます。
背景
数字の色
ラベルの色
数字フォント
ラベルフォント
画像のサイズ調整
- タイマー全体のサイズを調整できます。幅（ピクセル数）を大きくするほど、タイマーも大きく表示されます。
配置
代替えテキスト
- タイマー画像に代替テキストを追加しましょう。画像が読み込まれない場合でも内容が伝わりやすくなり、スクリーンリーダー対応などアクセシビリティの向上にもつながります。
アクションタイプ（リンク設定）
- タイマーにURLを設定することで、クリック可能にできます。受信者がカウントダウンをクリックすると、指定したリンク先に移動します。

トップに戻る ↑

全体設定

「ボディ」セクションでは、メール全体の基本デザインを設定します。主要な要素のデフォルトスタイルがここで定義されるため、各ブロックを個別に装飾しなくても、統一感のあるプロフェッショナルな見た目を保つことができます。

全体設定で設定できること

テキストの色
- メール全体のテキストブロックに適用される、デフォルトのフォントカラーを設定します。個別のブロックごとに上書きすることも可能ですが、ここで設定した色が基本スタイルとして適用されます。

背景色
- コンテンツの背後に表示される、メール全体の背景色を設定します。
コンテンツの幅
- メール内のコンテンツエリアの幅を設定します。
- デフォルトは600pxで、これはほとんどのメールクライアントで最適に表示される標準の幅です。
コンテンツの配置
- メール内のコンテンツの配置を、左寄せ・中央揃え・右寄せのいずれかに設定します。
フォント種類
- メール全体で使用するデフォルトのフォントを設定します（例：Arial、Helvetica など）。
フォント太さ
- 標準
- 太字
リンクのテキストの色
- メール内で使用されるハイパーリンクのデフォルトの文字色を設定します。