HTMLエディタの操作方法は?

HTMLエディタを使うことで、HTMLメールのデザインを簡単に作成することができます。 画像をアップロード、各ブロックをマウスで移動する等で視覚的にデザインを作成し、その内容がLTV-Labのメール作成画面に自動反映されます。

 

■HTMLメールの作成方法

  1. 配信管理>手動>新規作成
Notion image
  1. 「HTMLエディタ」をクリック
Notion image

3.テンプレートを選択

Notion image
  1. 全体設定メニューで共通の背景色や文字色の設定
Notion image
・件名:メールの件名を設定 ・全体背景色:ブラウザ表示領域の色設定 ・背景色:コンテンツ部分の色設定 ・文字色:テキスト部分の色設定 ・リンク文字色:リンクタグ内のテキスト文字色の設定 ・フォント:文字の種類(フォント)を設定 ・コンテンツ位置:コンテンツの配置
全体設定でフォント変更ができる他、ブロック毎でのフォント変更も可能です
Notion image
「☑スマホ用デザインをPCにも反映」にチェックをいれると

右のスマホ用デザインをPCにも反映することができます

Notion image

「☑PC用デザインをスマホにも反映」にチェックをいれると

左のPC用デザインをスマホにも反映することができます

Notion image

「☑ブロック間余白をクリア」にチェックを入れると

ブロック間の余白を無くすことができます

▼チェック無し

Notion image

▼チェック有り

Notion image

「☑英語の表示を最適化(海外)」にチェックを入れると

単語の途中等で改行が入らないよう最適化できます

 

5. HTMLエディタでも同様に絵文字追加することができます。

Notion image
 
  1. ブロックの追加・削除・移動
Notion image
+ボタンを押すとブロックの追加ができます
Notion image
ブロックを操作しメール全体の構造を決めてください
  1. ブロックごとの詳細編集

■画像

新規アップロードから画像を追加できます

Notion image
Notion image
Notion image
Notion image

HTMLエディタに保存可能な容量は100MBとなります

アップロードした画像に「リンクURL」に画像をクリックした先の遷移先ページURLを設定することが可能です(1列最大挿入画像数PC4枚、スマホ3枚)
過去にアップロードした画像を再利用する際、前回使用したリンクURLが反映されます
「+新規アップロード」から「画像URL」をいれて「適用」をクリックすると

画像URLから画像をアップロードすることができます

Notion image

「画像URL」から登録した場合は、HTMLエディタに画像は保存されません。

「画像URL」から登録することで、HTMLエディタの画像容量を抑えることが可能です

「余白調整」は+もしくは-で余白を調節できます
Notion image
選択画像の幅は以下に自動でリサイズを行う ・画像1枚:900px ・画像2枚:450px ・画像3枚:300px ・画像4枚:225px

■テキスト

Notion image
白枠内にテキスト形式で文章を入力 「名前挿入」をクリックでお客様名に変換される置換文字を挿入 「挿入機能」でポイント数・ポイント有効期限などを挿入  ※「挿入機能」は差し込み機能をご契約中の企業さまのみとなります
編集中テキストブロックの強調・調整、指定URLの挿入、絵文字の追加が可能 ※全体の調整は「全体設定」にて操作

■画像+テキスト

Notion image
Notion image

 ▲左記設定を反映後のイメージ

 
「画像+テキスト」が横並びの場合テキストの比率をパーセントで設定できます

■ボタン

Notion image
・形状:ボタン外枠の角の有無を選択 ・影:ボタン外枠の影の有無選択 ・サイズ:ボタンの外枠の横幅を調整 ・背景色:ボタンのベースとなる色の設定 ・文字色:ボタン内に表示させるテキストの色の設定 ・テキスト:ボタン内に表示させるテキストの入力 ・リンクURL:ボタンをクリックした際に遷移させるサイトのURLの設定 ・ボタン枠:ボタン外枠の枠線の有無選択 ・ボタン枠色:ボタン外枠の色設定 ・ボタン枠線太さ:ボタン外枠の太さ設定

■罫線

HTMLメールの中に罫線を表示

■SNSボタン

Notion image
「リンクURL」にて遷移先のサイトを設定

■ロゴ

「リンクURL」でロゴ画像クリック時に遷移先のサイトを設定

■マイデザイン

Notion image
💡

ブロック追加後、赤枠内のダウンロードボタンを選択すると選択したブロックが保存されます。

Notion image
💡

マイデザインから保存したブロックを呼び起こすことが可能です。

■レコメンド

Notion image
レコメンドオプション(カゴ離脱機能・売上/人気ランキング差込・ FutureShop2レコメンド)のご契約がある場合は、「レコメンド」にてHTML内にレコメンド情報を組み込むことが可能です。
 

▼行動履歴レコメンド

Notion image
 

▼ランキング

Notion image

ランキングは、カテゴリ・商品属性1が選択可能です

Notion image

■ブロックごとの背景色設定

Notion image
背景色設定したいブロックの赤枠の歯車のボタンをクリックすると右側の設定画面にブロック設定が表示されます。
Notion image
Notion image
背景色の赤枠部分を選択するとカラーパレットが表示されます 変更したい色を選択することで、ブロックの背景色が変更できます。

■件名の設定

Notion image
Notion image
HTMLエディタ内の画面右上         「全体設定▼」より、メールの件名が設定が可能です。
  1. デザイン完了したら左下の「Labに反映」をクリック
Notion image
件名を入力するとLTV-Labの「FreeHTML」に反映されます
件名を入力後に下記ポップアップが表示されるため シンプルメールを上書きしたくない場合は「No」を選択ください
Notion image

エディタ内でbyte数が確認できます

40,000byte以内で作成してください。

40,000byteを超えて、Labに反映をクリックするとアラートが表示されます。

 

▼40,000byte~60,000byte

Notion image

▼60,000byte~

Notion image

アラートが出た際は、容量の調整が必要です

 

8.プレビュー・テスト送信にて配信イメージを確認

9.完了

 

■レイアウト集

・新規レイアウト集

ロゴ・画像・テキストなど各ブロックの配置テンプレートより大枠を選択しそこから詳細のデザイン修正をしていきます。

Notion image

・LTVレイアウト集

施策ごとに本文の内容まであらかじめ設定されたテンプレートから詳細のデザイン修正をしていきます。

Notion image
 

■下書き保存 と MYテンプレート

・下書き保存

Notion image
デザインを作成中に「下書き保存」ボタンで保存、または「Labに反映」したデータの一覧となります。作成途中で保存したい、過去に配信した内容を呼び出して修正して再利用する際に使用します。

・MYテンプレート

Notion image
デザイン作成中に「Myテンプレート」のボタンで保存したデータの一覧となります。何度も再利用したいテンプレートをこちらに保存して使用します。
 
 

▼LTV-Lab 操作マニュアル HTMLエディタ機能

Did this answer your question?
😞
😐
🤩