ビジュアルエディタの利用方法

メール文面作成時に、文面タイプ「HTML(ビジュアルエディタ)」を選択すると、ビジュアルエディタが表示されます。

画像つきのHTMLメールが作成できます。スマートフォン等での表示にも対応しています。
マルチパートメールの作成には対応しておりません。

HTMLメールは「構造」と「コンテンツ」で成り立っています。複数の「構造」から構成され、それぞれの構造内に様々なコンテンツを配置できます。

基本的な編集手順

①メニュー「設定」タブで全体の設定を行う。「構造」タブでレイアウトを選択し、左パネルからドラッグ&ドロップする

構造の主な違いは「カラム数」で、1〜4カラムまで選択可能です。

複数の構造を使い分けることで、コンテンツが整理され、特にモバイル表示でも見やすくなります。

構造はテーブルのような役割を果たし、縦方向の整列や、狭い画面でのレイアウト崩れを防ぎます。

②メニュータブ「コンテンツ」のパーツを選択し、右のテンプレート編集エリアの構造へドラッグ&ドロップ

③テンプレート編集エリアで文面などの編集を行う

④操作のやり直しやプレビュー画面で確認を行う

※編集画面は自動保存されませんので、編集中はこまめに保存をお願いします。

※メールクライアントによって表示が異なる場合があるため、プレビューで必ず確認しましょう

 

コンテンツ

構造内には以下のようなコンテンツを追加できます。

テキスト
画像
GIF
ボタン
区切り
スペーサー
ソーシャル
HTML

「コンテンツ」タブからドラッグ&ドロップで追加し、各要素は左側のパネルで詳細設定が可能です。

 

テキスト

  • 編集したいテキストをクリックして直接入力
  • ツールバーで、フォント・フォントサイズ・斜体・太字・色・リンク・箇条書きなどの基本装飾が可能
  • 新しい段落は「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種類)、本文、ボタンテキストのフォント・色・サイズ
  • 余白設定

 

 

 

関連

更新