GENIEEMAではメール・ランディングページのビルダー画面にGrapesJSという外部システムを搭載しております。HTML形式のメールやランディングページをドラッグアンドドロップで直観的に作成することができます。
■ヘッダーについて
ビルダー画面を開くと上記のような画面に遷移いたします。
ビルダー画面の上部に搭載されている機能は以下の通りです。
- 画面左上・中央
A：デバイス別のプレビュー表示
デバイス別のビルダー内のプレビューを表示させる機能です。
左 … PC
中央 … タブレット
右 … スマートフォン
B：本番想定のプレビュー表示
サイトページが自動生成されます。
C：戻る・進む
編集を戻したり、進めたりする機能です。
- 画面右上
A：ビルダーの点線表示/非表示の設定
B：全画面表示
C：コード画面表示
左 … 閲覧のみ
右 … 編集可能
D：編集画面表示
E：挿入可能な要素一覧表示
次のセクションにて主要な機能をご紹介しております。
F：適用・終了
左 … 適用
右 … 終了
■主要機能について
ビルダー画面に表示される機能について主要機能である4機能は以下の通りです。
| 項目名 | 概要 |
| 1.カラム | メールやランディングページの土台となる機能です。 |
| 2.テキスト編集 | ビルダー内にテキストを挿入する機能です。 |
| 3.画像編集 | ビルダー内に画像を挿入する機能です。 |
| 4.ボタン編集 |
ビルダー内にボタンを作成できる機能です。 |
1.カラム
メールやランディングページの作成においてカラムは土台となる重要な機能です。
カラムは、ビルダー画面右上の「Open Blocks」をクリックして右側に表示される「Sections」の中にございます。
- カラムの種類
ビルダーには計4種類のカラムをご用意しております。用途に合わせて選択してください。
使用例は以下の通りです。
・1Section：シンプルな告知メールやモバイルデバイス向けのメールを作成する場合
・1/2Section：製品やサービスの比較紹介や画像とテキストを組み合わせたメールを作成する場合
・1/3Section：複数の製品やサービスを紹介するメールを作成したい場合
・3/7Section：画像やテキストの片方を目立たせて強調したメールを作成したい場合 - 挿入方法
1.ご希望のカラムをドラッグします。
2.ドラッグしたカラムを差し込みたい箇所にドロップしてください。
3.挿入する箇所には緑色のラインが表示されます。
※緑色のラインを目印にご希望の箇所に設置してください。
2.テキスト編集
テキストではメールやランディングページの中に文字列を差し込むことができます。
テキストは、ビルダー画面右上の「Open Blocks」をクリックして右側に表示される「Blocks」または「Basic」の中にございます。
- テキストの種類
メール・ランディングページいずれのビルダー画面にも2種類のテキストをご用意しております。それぞれのご利用イメージは上記の通りです。用途に合わせてご利用ください。
- 挿入方法
1.ご希望のテキストをドラッグします。
2.差し込みたいカラムにドロップしてください。
3.挿入する箇所は緑色のラインが表示されます。
※緑色のラインを目印にご希望の箇所に設置してください
4.テキストをドロップするとテキストのEdit画面が表示されます。
「Insert your text here」と記載の箇所に文章を記入します。
編集画面上部には太字・フォント・字体カラー等を変更できるバーが表示されます。
編集バーに表示されるそれぞれの機能については以下の通りです。
編集が完了したら、左下の「save」をクリックします。
| 編集内容を進める・戻す | 文字背景カラー | ||
| 太字 | 文字寄せ（左・中央・右より選択） | ||
| 斜体 | インデント | ||
| 下線 |
|
引用 | |
| 取り消し線 | 表 | ||
| 文字サイズ（12サイズより選択） | リスト（箇条書き・番号より選択） | ||
| 文字フォント（19種類より選択） |
リンク |
||
| 文字カラー | インサート |
- テキスト編集ー文字装飾やcolumnの変更ー
テキストの編集は画面右側の「Open style manager」から行うこともできます。それぞれの機能は以下の通りです。
| 項目名 | 概要 |
| Dimention | columnや要素（テキスト）の寸法を設定します。 |
| Typography | テキスト自体のデザインを設定します。 |
|
Decorations |
テキストの入ったcolumnのデザインを設定します。 |
DimentionTypography
Decorations
※Edit画面のテキスト編集内容は「Open style manager」から変更を加えることが出来ません。
後から編集を加える場合は「Open style manager」でのテキスト編集を推奨いたします。
-
テキスト編集ーリンクー
1.Textをドラッグします。
2.作成した文章から、リンクを埋め込みたい箇所をドラッグで選定します。
3.Textの編集画面に遷移後、右上の「リンク」のアイコンをクリックしてください。
表示される空欄にご希望のリンクURLを記載し、緑色の「✓」をクリックいただくことでリンクが出現します。編集画面左下「save」をクリックし、リンクが表示されていることをご確認ください。 - テキスト編集ーその他コンテンツ挿入ー
1.Textをドラッグします。
ビルダー内に挿入できるコンテンツがプルダウンで表示されます。
2.差し込みたいカラムにドラッグします。
3.Textの編集画面に遷移後、左上の「Insert token」をクリックしてください。
ご希望のコンテンツをクリックし、左下の「save」をクリックしてください。
ランディングページに右のいずれかの形式で表示されたら挿入完了です。
「Insert token」から挿入可能なコンテンツはメールとランディングページでそれぞれ以下の種類がございます。
・ウェブビューのURL
・コンタクトのカスタムフィールド
・会社のカスタムフィールド
・ランディングページ
・アセット
・購読解除
・テキストウェブビューのテキスト
・署名
・件名
・登録解除URL
3.画像編集
ビルダー内に画像を挿入する機能です。
画像を挿入する機能は、ビルダー画面右上の「Open Blocks」をクリックして右側に表示される「Blocks」または、「Basic」の中にございます。
- 挿入方法
1.「Image」のアイコンをドラッグします。
2.差し込みたいカラムにドロップしてください。
3.挿入する箇所は緑色のラインが表示されます。緑色のラインを目印にご希望の箇所に設置してください。
4.アイコンをドロップすると画像を選択できる画面が表示されます。
以下3つの方法にて挿入が可能でございます。ご希望に併せてご活用ください。
A：外部フォルダからドラッグアンドドロップでアップロードする方法
B：画像のURLリンクを記入してアップロードする方法
C：A/Bいずれかの方法で既にアップロードした画像を選択する方法
5.アップロードが完了するとビルダー内に画像が表示されます。
問題無くアップロードされていることを確認してください。
※誤った画像をアップロードしてしまった場合は画像をWクリックすると再度画像を選択できる画面が表示されます
-
画像の編集方法
画像の編集は画面右側の「Open style manager」から行うことができます。
それぞれの機能の概要は以下の通りです。項目名 概要 Dimention columnや要素（テキスト）の寸法を設定します。 Typography テキスト自体のデザインを設定します。 Decorations テキストの入ったcolumnのデザインを設定します。
Dimention
Typography
※メールで画像の寄せを調整する場合はcolumnをクリックの上、TypographyのAlignから設定を行ってください
Decorations
4.ボタン編集
ビルダー内でボタンを作成できる機能です。
ボタンは、ビルダー画面右上の「Open Blocks」をクリックして右側に表示される「Blocks」の中にご
ざいます。
-
挿入方法
1.ボタンを挿入する際はボタンのアイコンをドラッグし、差し込みたいカラムにドロップしてください。挿入する箇所は緑色のラインが表示されます。緑色のラインを目印にご希望の箇所に設置してください。
2.ボタンを挿入するとデフォルトデザインのボタンがビルダー上に表示されます。
ボタンをWクリックするとボタン内テキストの編集を行うEdit画面が表示されます。
ご希望のテキスト記載が完了しましたら、左下の「save」をクリックしてください。 -
ボタンの編集方法
ボタンの編集は画面右側の「Open style manager」から行うことができます。
それぞれの機能の概要は以下の通りです。
| 項目名 | 概要 |
| Dimention | columnや要素（テキスト）の寸法を設定します。 |
| Typography | テキスト自体のデザインを設定します。 |
| Decorations |
テキストの入ったcolumnのデザインを設定します。 |
Dimention
Typography
Decorations