何かお困りですか?よくある質問とその回答をまとめました。

サポートページ aero-right メールのセクション機能と各ブロックの説明

メールのセクション機能と各ブロックの説明

テンプレート&メールエディタ 更新日 4月 21, 2021

メール編集中に新しいセクションの追加やブロックの位置を変更することが可能です。セクション機能を使って新しいカラムを追加したり、ブロックを使用して画像、テキスト、またはボタンなどのコンテンツを挿入することができます。ドラッグ&ドロップエディタで簡単に素早くメールを編集し、購読者にとって魅力的なデザインに仕上げましょう!

目次:

 

 


 

セクション

 

セクションは編集画面でメールを構成するのに使用します。コンテンツを分けたり、コンテンツブロックの箱として機能します。メールを編集しながら新しいセクションの追加や削除、または移動などが可能です。セクション毎に編集ができます。

 

セクションのご利用方法:上記画像の番号順にご説明します。

+プラスアイコン:5種類の異なったセクションが表示されますので、任意のセクションを選択します。メールに挿入するセクションの数に制限はありません。利用可能なセクションは以下の通りです。

    • 1カラム
    • 2カラム
    • 3カラム
    • 左サイドバー2コラム
    • 右サイドバー2コラム

② 鉛筆アイコン:画面左にセクション設定が表示されます。全体またはカラム毎に背景色やボーダー(枠線)を選択することができます。

    • セクションエリア内の外側をクリックすると、左にセクション設定を開くことができます。
    • 各コンテンツブロックの編集はブロック設定で行うことが可能です。

③上下の矢印アイコン:セクションの並べ替えが可能です。

    • プレヘッダーとフッターセクション以外は自由に上下の移動が可能です。ただし、プレヘッダーの上とフッターの下に他のセクションを移動することはできません。
    • 購読リンクが挿入されているフッターブロックはメール内どこでも移動が可能ですが、購読者が配信停止や購読設定を変更しやすくするため、見つけやすいフッターセクションに配置することをお勧めしております。

④ ゴミ箱アイコン:セクションを削除することができます。一度削除しますと、ブロックやデザインなど追加したコンテンツは全て削除され、元に戻すことはできませんのでご注意ください。完全に削除される前に確認のため、以下のポップアップ画面が表示されるようになっております。

 

トップに戻る

 


 

全体のスタイル

 

全体のスタイルよりメール全体の配色を選択することができます。また、背景色やボーダー(枠線)を追加することも可能です。

①カラー設定

27種類の組み合わせからテーマに合ったお好きな配色をお選びください。選択した配色でセクションやブロックの色が指定されますが、変更することが可能です。

②背景色

背景色をクリックすると左に円が表示されます。それをクリックし、カラーパレット(カラーバー)上でお好みの色をクリック、あるいはカラーコード(hex値)をボックス内に入力して背景色を1色お選びください。また、セクションやブロック毎に背景色を選択することも可能です。詳しくは以下のFAQをご確認ください。

FAQ:メール全体またはブロックごとの背景を変更する方法

背景設定

背景設定でフルサイズメール、または背景別メールを選択することができます。フルサイズメールには追加のスタイルオプションはございません。

背景別メールのオプションでは、以下を追加または変更することが可能です: 

  • ボーダー(枠線)
  • ボーダーの色(枠線の色) 
  • ボーダーのサイズ(枠線の太さ)
  • 角丸調整
    • プレヘッダー/フッターを含む
④カラム名表示・非表示ボタン

カラム名表示」ボタンをクリックすると、メール内の全てのセクションを確認することができます。初期設定では非表示になっていますが、このボタンで表示・非表示の切り替えが可能です。また、全体のスタイルタブからブロックをクリックすると、ブロックの編集をすることができます。

 

トップに戻る


 

ブロック

 

セクションとは異なり、ブロックはデザイン要素や機能としてメールのコンテンツを挿入し、表示するのに使われます。例えば、ブロックにテキスト、画像、またはボタンを挿入することができます。各ブロックで異なったデザインの設定が可能です。

メールにブロックを挿入するには、任意のブロックをクリックしてセクションにドラッグします。

メールエディタでご利用可能なブロックは以下の通りです。

 


 

画像ブロック/画像カードブロック

 

Benchmark Emailアカウントの画像ギャラリーにすでにアップロードしている画像や、新たに画像をアップロードした上で、メール内に挿入する事が出来ます。 詳しくはこちら

画像ブロックはメール内に画像を挿入し、画像カードブロックは挿入した画像のすぐ近くに文章(テキスト)を入力する事が可能です。

 左の写真は画像ブロック、右は画像カードブロックです。

どちらを使うべき?

画像ブロック」はシンプルに画像のみを挿入したい場合に、 「画像カードブロック」は画像と一緒に説明を入れたい場合にお使いになれます。

画像カードブロック」は、画像の場所を動かすと入力した説明文も一緒に移動するようになっています。

画像カードブロックの挿入方法についてはこちら、画像ブロックの挿入方法についてはこちらをご参照ください。

関連FAQ:

 

ブロック一覧メニューへ戻る


 

画像キャプションブロック

 

画像キャプションブロック」は画像内にテキストを入れることが可能となり、画像カードブロックとの違いは、画像キャプションブロックにおいては入力するテキストの枠がなく、お好みでテキストの入力枠を編集する事が可能です。 

下記、左側に「画像キャプションブロック」を、右側に「画像カードブロック」を設置しています。

画像キャプションブロックの挿入方法についてはこちらをご参照ください。

 

ブロック一覧メニューへ戻る


 

テキストブロック

 

メールにテキストブロックを挿入し、文字を入力することが出来ます。テキストを挿入したいところに、テキストブロックをドラッグするだけです。初期設定の文章が埋め込まれていますので、ブロックをクリックし希望する文章に入れ替えてください。

テキストブロックを使用する上で下記の注意点をご確認ください。

コピー&ペースト

コピー&ペーストしたテキストをメールに挿入したい場合は、「貼り付け」機能 を利用することをお勧めします。 貼り付け機能を使うことで、文字化けや余分なスペースが入力されることなく、スムーズにテキスト入力を行う事が可能です。

ソースコード

ソースコードを入力したい場合には、テキストボックス上でコードアイコン をクリックし、挿入してください。

もしコードアイコンがエディタ上に見つからない場合は、ツールバー右上の「メニュー」をクリックしてください。

 

ブロック一覧メニューへ戻る


 

動画ブロック

 

動画はとても効果的な視覚ツールです。動画をメールに挿入することで、商品の良さや特徴、他社の競合製品よりも優れている点を直感的に伝えてくれます。 アカウントの動画ギャラリーにビデオをアップロードする方法や、メールへの挿入方法についてはこちらをご参照ください。

 

ブロック一覧メニューへ戻る


 

区切り線/スペースブロック

 

区切り線/スペースブロックを使って、メールの各セクション、またはブロックとの間に余白を作ることができます。ブロックタブより「区切り線ブロック」を選択し余白を入れたい所にドラッグ&ドロップするだけで、より読みやすくすっきりしたデザインになります。 区切り線/スペースブロックについての詳細は、以下のFAQをご参照ください。

FAQ:ドラッグ&ドロップエディタでブロック間の空白や区切り線を追加する方法

 

ブロック一覧メニューへ戻る

 


 

ボタンブロック

 

CTAとはコール・トゥ・アクションの事で、購読者に起こしてほしい行動を促すフレーズ/デザインを指します。メルマガでもCTAは重要な役割を担っており、商品ページやセミナー登録ページなど、売上やコンバージョン目的のページへのクリックを誘うために使用します。メール内にCTAボタンを設置することで、購読者をランディングページに導くことも可能です。

Benchmark Emailでは、ボタンブロックを使って簡単にCTAボタンを設定することができます。ボタンを挿入するには、ブロックタブより「ボタンブロック」を選択し、メール本文のお好きな場所にドラッグしてください。

挿入したボタンブロックをクリックすると、左にパネルが表示されます。そこでボタンのデザインやURLの挿入などの編集を行います。

ボタンブロックにURLを挿入する方法

上記画像の番号順にご説明します。

① 挿入したボタンブロックをクリックすると、左に設定・コンテンツ画面が表示されますのでコンテンツタブを開きます。ボタンテキストボックスが表示されますので、訪問者がクリックしたくなるような文言(CTA)を入力しましょう。

② ドロップダウンメニューからリンクタイプを選択し、ウェブサイトURLボックス内にURLを追加します。

注意:URLは外部ページでも同じメール内でも挿入可能です。代替リンクを挿入したい場合は、以下の2通りの方法がございます。

a. 画面上部に表示されたメニューバーの「リンク挿入」アイコンをクリックします。ポップアップ画面でドロップダウンメニューから希望するオプションを選択します。

b. 左のコンテンツタブ画面より、リンクタイプを選択することも可能です。その際に、「ウェブサイトURLボックス」をクリックすると、過去に使用したウェブサイトURLが表示されます。 ご注意:同ページ内のリンクへとつなげる場合には、先にアンカーリンクを設定する必要があります。詳しくはこちらをクリックしてください。

③ テキスト編集バーを使って、メール内のテキストやリンクを自由に編集することができます。

④ メール内に複数のボタンを設置させる場合、ボタンを1つずつ編集する必要はありません。1つのボタンを編集する際に、コンテンツタブの「全てのボタンに適用」にチェックを入れるだけでメール 内に配置した全てのボタンに同じフォント形式が反映されます。

 

 

ブロック一覧メニューへ戻る


 

ソーシャルメディア/ソーシャルシェアブロック

 

ソーシャルメディアブロックはメールにとって必要不可欠なものです。ソーシャルネットワークを挿入するには、以下の2種類のブロックがございます。ドラッグ&ドロップでブロックをメール内に挿入してください。

ソーシャルメディア/ソーシャルフォローブロック:Facebook、Twitter、Whatsapp、Linkedin、YouTube、Pinterest、RSS、Vimeo、TripAdvisorなどを含めた20種類のソーシャルメディアアイコンを追加することが可能です。

使い方:メール受信者をソーシャルネットワークに誘導したい場合にお使い頂けます。購読者が好きなソーシャルメディアをクリックして、いいね!をしたり、お気に入りに追加したりすることができます。

ソーシャルシェアボタンブロック:Facebook、Twitter、Linkedin、Myspace、instapaperのシェアボタンを追加することができます。ユーザーがランディングページを上記のソーシャルネットワークですぐシェアできます。

使い方:購読者にメールのコンテンツをシェアして欲しい場合は、こちらのブロックが最適です。

 

各ブロックに「その他のサービスを追加する」方法は以下の通りです:

1. 本文内にソーシャルメディアまたはソーシャルシェアブロックをお好きな場所にドラッグ&ドロップします。

2. 画面左に表示される「コンテンツ」タブをクリックします。

3. 「その他のサービスを追加する」をクリックし、ドロップダウンメニューよりお好みのサービスを選択します。

4. ボックスの右側に表示される「+」アイコンをクリックして追加完了です。

5. 本文に新しいサービスのアイコンが表示されます。画面左の「設定」と「コンテンツ」タブよりカスタマイズしてください。

6. ソーシャルメディアブロックの「コンテンツ」タブより「その他のサービスを追加する」をクリックし、ドロップダウンからウェブサイトを選択し「+」アイコンをクリックし追加します。追加したアイコンをクリックし、URLリンクを追加します。アイコンのカスタマイズも可能です。完了後、「設定をすべてのボタンに適応する」オプションを選択し、以下のように他のアイコンも同じ形(例は丸型)にすることができます。

 

 

また、本文内のシェアアイコンにカーソルを合わせると、移動または削除することができます。

 

 

ブロック一覧メニューへ戻る


 

ナビゲーションバーブロック

 

ナビゲーションバーを使って購読者をアンカーでメールの別の場所に誘導したり、外部リンクを挿入したりすることができます。

 

1. リンクを挿入するには、アイコンをクリックします。 リンクの編集は、左側に表示されるリンクオプションに沿って行なってください。最大6つまで、テキストまたは画像によるリンクの挿入が可能です。

2. ナビゲーションバーリンクにおいては、3タイプのレイアウトを変更する事が可能です。画像とテキストのリンクどちらがいいかを実際にメールに挿入し、比較してみましょう。 メールに合ったナビゲーションバーリンクを挿入しましょう。

3. ナビゲーションバーのリンク内のボーダーをお好みで設定しましょう。それぞれのリンクと、区切り線の間には一定のスペースが挿入されます。

4. モバイル表示の際の設定は、モバイルレイアウトにて設定が可能です。初期段階ではデフォルトが選択されていますが、中央寄せのたて揃えなどに変更する事ができます。 モバイル版でどのように表示されるかを確認しながら、お好みのデザインを選択してください。

 

 

ブロック一覧メニューへ戻る


 

セクションを活用したメルマガデザイン例

 

ここでは、セクション機能を活用してメールを最適化する方法を例を交えてご説明します。

メルマガをデザインする過程で使用したセクションおよびブロックを表示しておりますので、メールを作成する際にご参照ください。

例 1

まず初めに、ヘッダーセクションにナビゲーションバーを挿入しました。メールのタイトルは左サイドバーセクションを使い、ボディには、画像カードブロックを使って画像とテキストを追加しました。最後に、左サイドバーカラムを使ってソーシャルメディアアイコンを挿入し、右側に「leave feedback」と記載して購読者にフィードバックをリクエストしました。

 

 

例 2

「1:2コラム」セクションを使って、以下のメールを作成しました。メールの本文(白い部分)を際立たせるため、全体のスタイルから「背景別メール」(フレーム付の背景)を選択し、角丸の調整も使用しています。

 

 

3

最後の例は、複数コラムのセクションを使ってメールを作成しました。セクションとセクションの間に余白を設けるため、区切り線を使いました。画像ブロック、テキストブロック、ボタンブロック、ソーシャルメディアブロックと動画ブロックを使用しています。

このようにセクション機能を使って自由自在にメルマガを作ってみてください。

 

 

トップに戻る


 

用語集

 

編集するブロックによって設定タブの内容は異なります。ここでは設定タブでご利用できる項目をご説明します。

背景色

ブロックの背景色を設定できます。画面左の円をクリックし、カラーバーより色を選択します。カラーコード(HEX値)を使用する場合は、ボックス内にコードを入力してください。完了後「保存」ボタンをクリックしてください。「リセット」オプションは、元の状態に戻します。

ボーダーおよび線の太さ

一部のブロックでは、ボーダーや線の太さを設定することができます。ボーダーの下に表示される円をクリックし、カラーバーより色を選択します。こちらでもカラーコード(HEX値)をご使用頂けます。ボーダーのスタイルは9種類から、線の太さは0〜99の間でお選び頂けます。線をなくすには色を透明に変更するか、線の太さをゼロにしてください。「リセット」オプションは、元の状態に戻します。 

角丸調整

一部のブロックで角丸調整オプションをご利用頂けます。要素(画像やボタンなど)の四隅の丸みを0〜20の間で調整することができます。ボタンブロックでは「全てのボタンに適用」オプションがあり、ボックスにチェックを入れると他のボタンも変更が適用されます。緑色のスクロールバーを左右に動かして、四隅の丸みを調整してください。

間隔調整

間隔調整はナビゲーションバー、ソーシャルフォローやソーシャルシェアなどのブロックでご利用できるオプションです。緑色の点(0〜20の範囲で)を左右に動かすことで要素と要素の間隔を調整してください。

サイドの空白枠および上下の空白枠

サイド・上下の空白枠は画像やボタンなどの要素の周りの余白のことです。スライドバーを左右に動かして余白を調整してください。

位置調整

位置調整オプションは、中央、左、右、上、下に要素を配置することが可能です。任意の位置をクリックして設定します。

行間

テキストブロックのコンテンツタブでのみ行間を選択することが可能です。シングル、1.25、1.5、二重よりお選び頂けます。 

カラーコード(HEX値)

カラーコード(HEX値)は色を表現した値です。#から始まり、その後に6桁の16進数を使います。16進数とは、0〜9までの10この数字と、AからFまでの6個のアルファベットを使って数値を表現する方法です。(例:#CFCFDA)カラーコードHEXが分からない方はデザインソフト、またはカラーピッカーをお使いください。

トップに戻る

 


ご不明な点がございましたら、サポートまでご連絡くださいませ。

 

 

>>「メール作成:編集操作」のまとめページに戻る


FAQの情報は役に立ちましたか?
あなたはすでに投票済みです!

Benchmarkから業界トレンド&最新情報をお届けします

ご登録頂きありがとうございます!

登録を完了させるには、認証メールのご確認をお願いします。

質問の回答が見つかりませんか?

サポートへお問い合わせ