デザインエディタの使い方
目次
デザインエディタをご利用になる前に
デザインエディタをご利用される場合には小さな画面で設定されますと、メールコンテンツ全体を見通せず、作成効率の低下を招く可能性がございます。デザインエディタをご利用しメールを作成する場合には、セカンドモニタなど大きな画面でのご利用を推奨します。
デザインエディタでのメール作成方法について
具体的な作成例をあげて、デザインエディタでの作成手順をご案内しております。
この詳細な使い方と合わせて、全体的な流れもご確認ください。
デザインエディタの画面構成
- メニュータブ
「コンテンツ」「レイアウト」「全体」と、メールコンテンツを作成をするうえで必要な機能をタブで切り替えることができます。- コンテンツ
メールを構成する要素で一つひとつを「ブロック」と呼びます。テキストや画像、ボタンなどを、ドラッグ&ドロップで簡単に配置することができます。 - レイアウト
1列、2列、3列・・・など、1行あたりのレイアウトを指定することができます。レイアウトも「ブロック」としてドラッグ&ドロップで簡単に配置できます。 - 全体
メール全体の幅や背景色、フォントなどを指定することができます。
- コンテンツ
- パネル
各メニューにおける詳細な要素が表示されますので、こちらからドラック&ドロップをしたり、マウス操作で詳細な設定を行っていただくことができます。[ コンテンツ ] パネルからドラック&ドロップできる要素を「ブロック」と呼びます。 - ワークスペース
[ コンテンツ ] パネル、または、[ レイアウト ] パネルから、ブロックをドラッグ&ドロップして、メールコンテンツを組み立てていく場所です。作成中の状態をリアルタイムで確認することができますので、細かな微調整がしやすいです。 - プレビューデバイス切替
デスクトップ、または、モバイルでの表示を簡易的に確認することができます。実際のデバイスでの表示を完全に保証するものではございませんのでご注意ください。| - 非表示ブロック表示切替
設置したコンテンツを、デバイスごとに非表示することができる機能をご用意しております。その場合に、どのブロックで設定されているかを「ぼやかして」表示しますが、本来の設定通り非表示にすることができる切替ボタンです。 - 編集履歴
デザインエディタを表示したときからの編集履歴の一覧を参照いただくことができます。指定の作業位置まで戻ったり、もう一度最新の状態に戻すことができたりしますので、間違って操作してしまった場合に非常に便利な機能です。 - 元に戻す / やり直し
直近の操作を元に戻したり、やり直すことができます。
コンテンツ
[ コンテンツ ]パネルでは、メールのコンテンツを組み立てるためのブロックを提供します。ワークスペース内にドラッグ&ドロップすることで、メールコンテンツを直感的に組み立てることが可能です。
■メールコンテンツに設定できるブロック |
テキスト
文章や見出しなどを構成するためのブロックで、各種テキスト装飾も可能です。
■プロパティ
■ブロック設定
|
■テキストの装飾
<テキストブロックの全体像> |
|
画像
表示したい画像をドラッグ&ドロップでアップロード、及び、差し込むことができます。またアップロードした画像は専用の画面より管理することができます。
■プロパティ
■アクション
■ブロック設定
|
■画像の加工
※画像を加工した後に保存した画像は「editor_images」というフォルダに格納されます。ファイル名はシステム側で自動的に付与されます。 |
■画像の選択・変更
|
■画像のアップロードの方法
方法1:画像ブロックの上にアップロードを行う
- 画像ブロック上に、画像をドラッグ&ドロップすることで、自動的にアップロードされます。
- この場合、アップロードした画像は「editor_images」というフォルダに格納されます。
方法2:画像の選択・変更画面からアップロードを行う
- アップロードボタンからアップロードするか、画像の選択・変更画面へ直接ドラッグ&ドロップすることで、画像をアップロードすることができます。
- アップロードする前に、アップしたいフォルダを選んでから、アップロードを行うようにして下さい。ファイルの移動機能はありませんので、適切なフォルダに格納できなかった場合は、一度削除して、適切なフォルダに移動後アップロードしてください。
■アップロードの仕様について
- 画像をアップできる容量について
画像をアップロードする容量は全体で 100MB までとなります。
1ファイルのサイズは 20MB が上限となります。 - アップロードできるファイルの種類について
jpg , jpeg , gif , png , ico , bmp , svg, webp がアップロード可能です。 - フォルダやファイル名の名称について
半角英数字、ドット、ハイフン、アンダーバーが使用できます。名称の先頭に「ドット」は利用できません。 - フォルダあたりの上限について
1フォルダあたりファイル100個、フォルダ50個となります。 - フォルダの階層について
フォルダ階層は5階層までの表現となります。
- ヒント:
- メールにおいては svg や webp に対応している環境が一部となっており、まだ表示できない可能性が高いです。そのため、最も安定的に表示できる jpg , jpeg , png などを用いて作成したほうが安定したコンテンツを提供できます。
ボタン
ボタンを利用することで、リンクよりも目立たせてお客様のアクションを促すために効果的なブロックです。
■アクション
■ボタン設定
■ブロック設定
|
■テキストの装飾
<ボタンブロックの全体像> |
|
動画
Youtube、または、Vimeoの動画のURLを設定することで自動的にトップ画像や、タイトルを取得し自動設定することができ、動画への誘導を視覚的に行うことができます。
<動画ブロックの全体像> |
■プロパティ
■ブロック設定
|
スペース
ブロック間での余白を設定し、余裕をもったデザインにすることができます。
■プロパティ
■ブロック設定
|
区切り線
区切り線を利用し、コンテンツの区切りを明確にすることができます。
■プロパティ
■ブロック設定
|
ソーシャル
Facebook、X(旧Twitter)、Instagramなどのソーシャルアカウントにアクセスするための視覚的なリンクを設定することができます。
■プロパティ
■ブロック設定
|
HTML
HTMLの知識をお持ちで細かな設定を行い、メールコンテンツを構築したい場合にご利用いただくことができます。
ただし、このブロックをご利用して独自のHTMLコードを使用すると表示に影響が出る可能性がございますので、その注意点を十分ご理解いただいたうえでご利用をお願いいたします。
■プロパティ
■ブロック設定
|
レイアウト
[ レイアウト ]パネルでは、メールの全体的なレイアウトを決めるためのブロックを提供します。例えば、横2列に分けたり、3️列に分けたり・・・ということを行う事が可能です。ワークスペース内にドラッグ&ドロップすることで、レイアウトを組み合わせることで、より自由なデザインを実現できます。1列〜4列のレイアウトをご用意しておりますが、設定によって自由に列を表現できます。
■プロパティ
■ボーダー
■レイアウト
■列構造
|
全体
メール全体に関わるデザインを設定できます。
■基本設定
|