メール文面作成時に、文面タイプ「HTML(ビジュアルエディタ)」を選択すると、ビジュアルエディタが表示されます。
画像つきのHTMLメールが作成できます。スマートフォン等での表示にも対応しています。
マルチパートメールの作成には対応しておりません。
HTMLメールは「構造」と「コンテンツ」で成り立っています。複数の「構造」から構成され、それぞれの構造内に様々なコンテンツを配置できます。
基本的な編集手順
①メニュー「設定」タブで全体の設定を行う。「構造」タブでレイアウトを選択し、左パネルからドラッグ&ドロップする
構造の主な違いは「カラム数」で、1〜4カラムまで選択可能です。
複数の構造を使い分けることで、コンテンツが整理され、特にモバイル表示でも見やすくなります。
構造はテーブルのような役割を果たし、縦方向の整列や、狭い画面でのレイアウト崩れを防ぎます。
②メニュータブ「コンテンツ」のパーツを選択し、右のテンプレート編集エリアの構造へドラッグ&ドロップ
③テンプレート編集エリアで文面などの編集を行う
④操作のやり直しやプレビュー画面で確認を行う
※編集画面は自動保存されませんので、編集中はこまめに保存をお願いします。
※メールクライアントによって表示が異なる場合があるため、プレビューで必ず確認しましょう
コンテンツ
構造内には以下のようなコンテンツを追加できます。
「コンテンツ」タブからドラッグ&ドロップで追加し、各要素は左側のパネルで詳細設定が可能です。
テキスト
- 編集したいテキストをクリックして直接入力
- ツールバーで、フォント・フォントサイズ・斜体・太字・色・リンク・箇条書きなどの基本装飾が可能
- 新しい段落は「Enter」、改行のみは「Shift+Enter」
- コンテンツのマージン(余白)、行の高さ、は左パネルで調整
※ツールバーの「パーソナライゼーション」はご利用になれません。
画像
-
画像をドラッグして挿入、ダブルクリックから画像を追加
画像ストレージ機能を利用し、PC上の画像をそのままドラッグすることで配置が可能です。
画像ストレージのファイル管理ツール上でフォルダを作成し、画像をアップロードしてから選択することもできます。画像ストレージ機能を利用する場合、メール配信により公開された当該画像へのアクセス量(データ転送量)により超過料金が発生する場合がありますのでご注意ください。 - 画像エディタで編集可能
- 画像クリックでリンク挿入、幅・サイズ・配置(左・中央・右)、マージン調整
- altテキスト(代替テキスト)の設定
※画像は必ずaltテキストを設定しましょう。画像非表示設定の受信者にも内容が伝わります。 - jpeg・png形式、最大2MB、幅600pxまで(多くのメールクライアントで600pxを超える画像は非対応のため)
- 既存のWeb画像を使う場合は「ダイナミックイメージ」欄にURLを貼り付け
※この場合は超過料金は発生しません。
ファイル管理ツール
※ファイルをアップロード後にフォルダに移動することはできません。
GIF
- GIFアニメアップロードサービスGIPHYのURLを指定してGIFアニメを挿入可能
自社サーバURLの指定も可能(カスタムソース) - GIFアニメのリンクを挿入し、クリックでWebページへ遷移可能
- 代替テキスト、配置、サイズ、マージンも設定可
ボタン
- テキスト、リンク先、配置、マージン、形状(角丸・四角)、色、フォントサイズ、余白などを自由に編集
区切り
- 線の色・マージン・太さ・スタイル(実線・点線・破線)・高さをカスタマイズ
スペーサー
- コンテンツ間の縦スペースを追加し、高さを自由に設定
- 複数カラムの場合は上下の位置調整にも活用
ソーシャル
- Facebook、X(旧Twitter)、LinkedInなど主要SNSのアイコンを追加
- 「+カスタムアイコンを追加」で追加可能
- アイコンの形状(丸・四角)は「アイコンのスタイル」で選択
- 各アイコンのリンクは「ネットワークの設定」で編集
HTML
- 独自のHTMLコードを挿入可能(上級者向け)
- セキュリティ上、スクリプト(JavaScript等)は動作しません。挿入は非推奨
構造
カラムやレイアウトを決めて、左パネルからドラッグ&ドロップでテンプレート編集エリアに追加します。
構造の枠外をクリックすると編集モードになり、ドラッグで移動、アイコン操作で複製や削除ができます。
構造ごとに左パネルから以下の設定が可能です。
- カラム数
- 背景色(画像がない場合や狭い構造用)
- 構造の幅
- 境界線のスタイル・太さ
- レイアウト(端まで広げる/狭くする)
- 上下のマージン(高さ調整)
- 背景画像の設定・差し替え
- カラムごとのプロパティ
設定
「設定」タブでは、以下の項目をカスタマイズできます。
- 「プレビューテキスト」で、メール一覧画面で表示させるテキスト設定が可能(表示はメーラの設定によります)
- テンプレート全体やボタン、構造、リンクの背景色
- 見出し(3種類)、本文、ボタンテキストのフォント・色・サイズ
- 余白設定
関連
更新