サポートページ 
メールのセクション機能と各ブロックの説明
動画：カラムの増やし方
メール編集中に新しいセクションの追加やブロックの位置を変更することが可能です。セクション機能を使って新しいカラムを追加したり、ブロックを使用して画像、テキスト、またはボタンなどのコンテンツを挿入することができます。ドラッグ＆ドロップエディタで簡単に素早くメールを編集し、購読者にとって魅力的なデザインに仕上げましょう！
目次:
セクションは編集画面でメールを構成するのに使用します。コンテンツを分けたり、コンテンツブロックの箱として機能します。メールを編集しながら新しいセクションの追加や削除、または移動などが可能です。セクション毎に編集ができます。
セクションのご利用方法：上記画像の番号順にご説明します。
① ＋プラスアイコン：5種類の異なったセクションが表示されますので、任意のセクションを選択します。メールに挿入するセクションの数に制限はありません。利用可能なセクションは以下の通りです。
② 鉛筆アイコン：画面左にセクション設定が表示されます。全体またはカラム毎に背景色やボーダー（枠線）を選択することができます。
③上下の矢印アイコン：セクションの並べ替えが可能です。
④ ゴミ箱アイコン：セクションを削除することができます。一度削除しますと、ブロックやデザインなど追加したコンテンツは全て削除され、元に戻すことはできませんのでご注意ください。完全に削除される前に確認のため、以下のポップアップ画面が表示されるようになっております。
動画：背景色の調整方法
全体のスタイルよりメール全体の配色を選択することができます。また、背景色やボーダー（枠線）を追加することも可能です。
27種類の組み合わせからテーマに合ったお好きな配色をお選びください。選択した配色でセクションやブロックの色が指定されますが、変更することが可能です。
背景色をクリックすると左に円が表示されます。それをクリックし、カラーパレット（カラーバー）上でお好みの色をクリック、あるいはカラーコード（hex値）をボックス内に入力して背景色を1色お選びください。また、セクションやブロック毎に背景色を選択することも可能です。
背景設定でフルサイズメール、または背景別メールを選択することができます。フルサイズメールには追加のスタイルオプションはございません。
背景別メールのオプションでは、以下を追加または変更することが可能です：
「カラム名表示」ボタンをクリックすると、メール内の全てのセクションを確認することができます。初期設定では非表示になっていますが、このボタンで表示・非表示の切り替えが可能です。また、全体のスタイルタブからブロックをクリックすると、ブロックの編集をすることができます。
セクションとは異なり、ブロックはデザイン要素や機能としてメールのコンテンツを挿入し、表示するのに使われます。例えば、ブロックにテキスト、画像、またはボタンを挿入することができます。各ブロックで異なったデザインの設定が可能です。
メールにブロックを挿入するには、任意のブロックをクリックしてセクションにドラッグします。
メールエディタでご利用可能なブロックは以下の通りです。
Benchmark Emailアカウントの画像ギャラリーにすでにアップロードしている画像や、新たに画像をアップロードした上で、メール内に挿入する事が出来ます。 詳しくはこちら
画像ブロックはメール内に画像を挿入し、画像カードブロックは挿入した画像のすぐ近くに文章（テキスト）を入力する事が可能です。
左の写真は画像ブロック、右は画像カードブロックです。
「画像ブロック」はシンプルに画像のみを挿入したい場合に、 「画像カードブロック」は画像と一緒に説明を入れたい場合にお使いになれます。
「画像カードブロック」は、画像の場所を動かすと入力した説明文も一緒に移動するようになっています。
画像カードブロックの挿入方法についてはこちら、画像ブロックの挿入方法についてはこちらをご参照ください。
関連FAQ：
「画像キャプションブロック」は画像内にテキストを入れることが可能となり、画像カードブロックとの違いは、画像キャプションブロックにおいては入力するテキストの枠がなく、お好みでテキストの入力枠を編集する事が可能です。
下記、左側に「画像キャプションブロック」を、右側に「画像カードブロック」を設置しています。
画像キャプションブロックの挿入方法についてはこちらをご参照ください。
メールにテキストブロックを挿入し、文字を入力することが出来ます。テキストを挿入したいところに、テキストブロックをドラッグしてください。初期設定の文章が埋め込まれていますので、ブロックをクリックし希望する文章に入れ替えます。
テキストブロック：メールレイアウトにテキストボックスが追加されます。
テキストボックスブロック：テキストボックスの周りにフレームが追加されます。
画像＋テキスト： 画像にテキストを追加したい場合は、画像カードブロックまたは画像キャプションブロックをお使いください。
テキストブロックを使用する上で下記の注意点をご確認ください。
コピー＆ペーストに大活躍。貼付オプション機能では自社ウェブサイト、Google、Wordなどのコンテンツをメールエディタへ貼付する際に、コピー元の外部ソースの書式を使用するか、除外するかを選択できます。
貼付オプション機能の使用方法は以下をご参照ください。
重要
テキスト形式で貼り付け
コピー＆ペーストしたテキストをメールに挿入したい場合は、「テキスト形式で貼り付け」機能
を利用することをお勧めします。
通常のコピー&ペーストで文章を貼り付けるとコピー元の形式が反映されてしまい、以下のような問題が発生する場合があります。
コピー＆ペーストした文章をテキスト形式で貼付ける方法：
をクリック（スクリーンのサイズによっては表示されないので、メニューのプルダウンメニューから選択してください）
ソースコード
ソースコードを入力したい場合には、テキストボックス上でコードアイコン をクリックし、挿入してください。
もしコードアイコンがエディタ上に見つからない場合は、ツールバー右上の「メニュー」をクリックしてください。
テキストブロックの編集方法
テキストブロックをクリックすると、画面左に編集オプションが表示されます。
設定タブでは、背景色、サイド・上下の空白枠、テキストボックスブロックではボーダー（外枠）を設定することができます。
コンテンツタブでは、行間を調整したり、必要に応じてコラム数を変更できます。
他のテキストエディタと同様に、ここでも基本的なフォーマットを編集するツールをご用意しております。画面上部の編集バー（太字、斜線、下線、取り消し線、文字の色やサイズ）でお好きなフォーマットに変更してください。
配置オプション（左寄せ・中央寄せ・右寄せなど）を使用したり、段落番号または箇条書きを追加したりすることもできます。
また、リンクの挿入やアンカー、画像、動画、ドキュメントファイルを追加することができます。
このようなテキストブロックを使ってメールをパーソナライズ化することができます。詳しくは以下のFAQをご覧ください。
FAQ：購読者毎の情報をメールや件名に差し込む方法（パーソナライズ機能）
ご利用可能なフォントについては、以下のFAQでご確認ください。
FAQ：ドラッグ＆ドロップエディタでフォント・文字サイズ・行間を調整する方法は？
また、ランディングページでグーグルフォントをお使いになりたい場合は以下のFAQをご覧ください。
FAQ：ランディングページのテキスト編集
テキストブロックにリンクを挿入することもできます。詳しくは以下のFAQをご覧ください。
FAQ：メールにリンクを挿入する方法
ランディングページ内のテキストついての詳細は、以下のFAQをご参照ください。
ご注意：テキストブロックを編集する際に以下のように右下にTinyMCEロゴが表示されますが、配信されるメールには表示されることはありませんのでご安心ください。TinyMCEはドラッグ＆ドロップの動作をより早く優れたものにするため、弊社が利用している第三者企業です。
動画はとても効果的な視覚ツールです。動画をメールに挿入することで、商品の良さや特徴、他社の競合製品よりも優れている点を直感的に伝えてくれます。 アカウントの動画ギャラリーにビデオをアップロードする方法や、メールへの挿入方法についてはこちらをご参照ください。
区切り線/スペースブロックを使って、メールの各セクション、またはブロックとの間に余白を作ることができます。ブロックタブより「区切り線ブロック」を選択し余白を入れたい所にドラッグ＆ドロップするだけで、より読みやすくすっきりしたデザインになります。 区切り線/スペースブロックについての詳細は、以下のFAQをご参照ください。
FAQ：ドラッグ＆ドロップエディタでブロック間の空白や区切り線を追加する方法
CTAとはコール・トゥ・アクションの事で、購読者に起こしてほしい行動を促すフレーズ/デザインを指します。メルマガでもCTAは重要な役割を担っており、商品ページやセミナー登録ページなど、売上やコンバージョン目的のページへのクリックを誘うために使用します。メール内にCTAボタンを設置することで、購読者をランディングページに導くことも可能です。
Benchmark Emailでは、ボタンブロックを使って簡単にCTAボタンを設定することができます。ボタンを挿入するには、ブロックタブより「ボタンブロック」を選択し、メール本文のお好きな場所にドラッグしてください。
挿入したボタンブロックをクリックすると、左にパネルが表示されます。そこでボタンのデザインやURLの挿入などの編集を行います。
ボタンブロックにURLを挿入する方法
上記画像の番号順にご説明します。
① 挿入したボタンブロックをクリックすると、左に設定・コンテンツ画面が表示されますのでコンテンツタブを開きます。ボタンテキストボックスが表示されますので、訪問者がクリックしたくなるような文言（CTA）を入力しましょう。
② ドロップダウンメニューからリンクタイプを選択し、ウェブサイトURLボックス内にURLを追加します。
ご注意：URLは外部ページでも同じメール内でも挿入可能です。代替リンクを挿入したい場合は、以下の2通りの方法がございます。
a. 画面上部に表示されたメニューバーの「リンク挿入」アイコンをクリックします。ポップアップ画面でドロップダウンメニューから希望するオプションを選択します。
b. 左のコンテンツタブ画面より、リンクタイプを選択することも可能です。その際に、「ウェブサイトURLボックス」をクリックすると、過去に使用したウェブサイトURLが表示されます。ご注意：同ページ内のリンクへとつなげる場合には、先にアンカーリンクを設定する必要があります。詳しくはこちらをクリックしてください。
③ テキスト編集バーを使って、メール内のテキストやリンクを自由に編集することができます。
④ メール内に複数のボタンを設置させる場合、ボタンを1つずつ編集する必要はありません。1つのボタンを編集する際に、コンテンツタブの「全てのボタンに適用」にチェックを入れるだけでメール 内に配置した全てのボタンに同じフォント形式が反映されます。
動画：ソーシャルメディアへの送客について
ソーシャルメディアブロックはメールにとって必要不可欠なものです。ソーシャルネットワークを挿入するには、以下の2種類のブロックがございます。ドラッグ＆ドロップでブロックをメール内に挿入してください。
※2023年9月に、TwitterアイコンをXアイコンに変更しました。作成途中のメールの場合、挿入済みのTwitterアイコンをクリックするとXアイコンに変わります。アイコン色は元の設定が引き継がれますので、変更したい場合は左メニュー「アイコンの色」にて編集してください。
ソーシャルメディア/ソーシャルフォローブロック：Facebook、Twitter（現X）、Whatsapp、Linkedin、YouTube、Pinterest、RSS、Vimeo、TripAdvisorなどを含めた20種類のソーシャルメディアアイコンを追加することが可能です。
使い方：メール受信者をソーシャルネットワークに誘導したい場合にお使い頂けます。購読者が好きなソーシャルメディアをクリックして、いいね！をしたり、お気に入りに追加したりすることができます。
ソーシャルシェアボタンブロック：Facebook、Twitter（現X）、Linkedin、Myspace、instapaperのシェアボタンを追加することができます。ユーザーがランディングページを上記のソーシャルネットワークですぐシェアできます。
使い方：購読者にメールのコンテンツをシェアして欲しい場合は、こちらのブロックが最適です。
各ブロックに「その他のサービスを追加する」方法は以下の通りです：
1. 本文内にソーシャルメディアまたはソーシャルシェアブロックをお好きな場所にドラッグ＆ドロップします。
2. 画面左に表示される「コンテンツ」タブをクリックします。
3. 「その他のサービスを追加する」をクリックし、ドロップダウンメニューよりお好みのサービスを選択します。
4. ボックスの右側に表示される「＋」アイコンをクリックして追加完了です。
5. 本文に新しいサービスのアイコンが表示されます。画面左の「設定」と「コンテンツ」タブよりカスタマイズしてください。
6. ソーシャルメディアブロックの「コンテンツ」タブより「その他のサービスを追加する」をクリックし、ドロップダウンからウェブサイトを選択し「＋」アイコンをクリックし追加します。追加したアイコンをクリックし、URLリンクを追加します。アイコンのカスタマイズも可能です。完了後、「設定をすべてのボタンに適応する」オプションを選択し、以下のように他のアイコンも同じ形（例は丸型）にすることができます。
また、本文内のシェアアイコンにカーソルを合わせると、移動または削除することができます。
動画：ナビケーションバーの作り方
ナビゲーションバーを使って購読者をアンカーでメールの別の場所に誘導したり、外部リンクを挿入したりすることができます。
1. リンクを挿入するには、アイコンをクリックします。 リンクの編集は、左側に表示されるリンクオプションに沿って行なってください。最大6つまで、テキストまたは画像によるリンクの挿入が可能です。
2. ナビゲーションバーリンクにおいては、3タイプのレイアウトを変更する事が可能です。画像とテキストのリンクどちらがいいかを実際にメールに挿入し、比較してみましょう。 メールに合ったナビゲーションバーリンクを挿入しましょう。
3. ナビゲーションバーのリンク内のボーダーをお好みで設定しましょう。それぞれのリンクと、区切り線の間には一定のスペースが挿入されます。
4. モバイル表示の際の設定は、モバイルレイアウトにて設定が可能です。初期段階ではデフォルトが選択されていますが、中央寄せのたて揃えなどに変更する事ができます。 モバイル版でどのように表示されるかを確認しながら、お好みのデザインを選択してください。
動画：ECサイトの商品を紹介する方法
eコマースに欠かせない商品掲載に最適なブロックです。
ブロックには以下の項目が含まれます：
1. 商品画像
2. 商品詳細
3. 価格（または割引クーポンなど）
4. ボタンリンク
eコマースブロックをクリックし、メール本文の好きな位置にドラッグします。
eコマースブロックを編集するには、以下の手順に従ってください：
1. 商品画像を挿入します。
2. 商品詳細を入力します。短く分かりやすい文章にしましょう。
3. 価格を入力します。
4. CTAボタンを編集します。
上記の項目で不要なものは、コンテンツタブで各項目のトグルバーをすべてオフにすることで非表示にできます。
5. 完了しましたら、「保存」または「保存＆次へ」ボタンをクリックしてください。
＜eコマースブロックを使ったデザイン例＞
Shopify商品ブロックを使用するには、Shopifyの稼働中の有料アカウントが必要です。このブロックを初めて使う際は、ShopifyとBenchmark Emailを連携する必要があります。連携方法については以下のFAQをご覧ください。
FAQ：ShopifyとBenchmark Emailを連携する方法は？
1. メール編集画面の左からShopify商品ブロックをクリックして好きな場所にドラッグします。
2. ポップアップ画面が表示されますので、ストア名、Shopify API キーとパスワードを入力します。
3. ShopifyアカウントとBenchmark Emailの連携が完了しましたら、利用可能な商品リストが表示されます。
4. 商品リストから1つ選択します。Shopifyに登録されている商品詳細を使って情報が自動的に入力されます。
Shopify商品ブロックには以下の項目が含まれます：
注意点：
＜Shopify商品ブロックを使ったデザイン例＞
動画：お気に入りブロックの使い方
お気に入りブロックは、作成したブロックを簡単に保存し再利用できるため、メールの作成時間の短縮に役立ちます。ブロックをお気に入りに保存すると、ブロックのデザインやテキスト、画像がそのまま保存されます。
また、お気に入りブロックをメール本文に挿入した後、ブロックの編集も可能です。内容を変更しても、保存された元のブロックはそのまま残ります。
ブロックを保存するには、メール編集画面で保存したいブロックにカーソルを合わせて、ブロックの保存アイコンをクリックします。ブロックに名前をつけて、「保存＆閉じる」をクリックします。
お気に入りブロックの保存アイコン
お気に入りブロックを使用する方法：
1. お気に入りブロックをメール本文内にドラッグし、お好きな場所にドロップします。
2. 画面左から使用するブロックを選択し、ブロックの編集を続ける、または保存して閉じます。
お気に入りブロックを削除する方法：
1. お気に入りブロックをメール本文内にドラッグします。画面左に過去に保存したブロックのリストが表示されます。
2. 削除したいブロックの右に表示されるゴミ箱アイコンをクリックします。ポップアップ画面で削除することを再度確認し、「削除」ボタンをクリックして完了です。
保存したブロックが残っていない場合は、メール本文からお気に入りブロック自体を削除することができます。
ここでは、セクション機能を活用してメールを最適化する方法を例を交えてご説明します。
メルマガをデザインする過程で使用したセクションおよびブロックを表示しておりますので、メールを作成する際にご参照ください。
まず初めに、ヘッダーセクションにナビゲーションバーを挿入しました。メールのタイトルは左サイドバーセクションを使い、ボディには、画像カードブロックを使って画像とテキストを追加しました。最後に、左サイドバーカラムを使ってソーシャルメディアアイコンを挿入し、右側に「leave feedback」と記載して購読者にフィードバックをリクエストしました。
「1:2コラム」セクションを使って、以下のメールを作成しました。メールの本文（白い部分）を際立たせるため、全体のスタイルから「背景別メール」（フレーム付の背景）を選択し、角丸の調整も使用しています。
最後の例は、複数コラムのセクションを使ってメールを作成しました。セクションとセクションの間に余白を設けるため、区切り線を使いました。画像ブロック、テキストブロック、ボタンブロック、ソーシャルメディアブロックと動画ブロックを使用しています。
このようにセクション機能を使って自由自在にメルマガを作ってみてください。
編集するブロックによって設定タブの内容は異なります。ここでは設定タブでご利用できる項目をご説明します。
背景色
ブロックの背景色を設定できます。画面左の円をクリックし、カラーバーより色を選択します。カラーコード（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が分からない方はデザインソフト、またはカラーピッカーをお使いください。
メール全体、セクションごと、ブロックごとに背景色を変えることはできますか？
前述にもありましたが、すべて簡単に変更することができます。以下の各手順に従って変更を行ってください。
＜メール全体の変更＞
1. メール編集画面から左上の全体のスタイルタブをクリック
2. 背景色のタブをクリックし、画面左の円をクリック（またはボックス内にHEX値を入力）
3. カラーバーよりお好きな色を選択し、保存をクリックして完了
＜セクションごとに背景色を変更する方法＞
1. 変更したいセクションの右側に表示される鉛筆アイコン、またはブロックの外側をクリック
2. 左にセクション設定が表示されます。背景色の下に表示される円をクリック（またはボックス内にHEX値を入力）
3. カラーバーよりお好きな色を選択（ベーシック色、または前回使用した色からも選択可）
4. 保存をクリックして完了
＜ブロックごとに背景色を変更する方法＞
1. 編集したいブロックにカーソルを合わせ、クリック
2. 画面左側の設定タブをクリック
3. 背景色の下に表示される円をクリック（またはボックス内にHEX値を入力）
4. カラーバーよりお好きな色を選択（ベーシック色、または前回使用した色からも選択可）
5. 保存をクリックして完了
ご注意：変更を加えても色が変化しない場合は、背景画像が原因と考えられます。背景画像の変更または削除をお試し下さい。
ブロックごとに背景画像を設定することはできますか？
ご注意：こちらの作業にはHTMLコーディングの知識が必要になります。
1. 使いたい画像のURLを取得します。画像ギャラリーにアップロード済の背景画像がある場合は、ギャラリーより画像URLを取得が可能です。
2. 背景画像を挿入したいブロックをクリックします。
3. 右上のメニューをクリックし、コード参照アイコン</>をクリックします。
4. ポップアップでHTMLコード参照ボックスが表示されます。
5. ボックス内の最初の行の<div style=“line-height: 150%;” の後に以下のコードを追加してください。
style="background-image:url(画像ファイルのURL);"
6.「保存＆閉じる」ボタンをクリックし、背景画像が正しく表示されているか確認します。
7. 左下の「保存＆閉じる」ボタンをクリックしてブロックの編集を終了します。
ご注意：背景の画像はメーラーによっては正しく表示されないこともあります。
画像ギャラリーの画像URLを取得する方法については以下のFAQをご参照ください。
HTMLコードを参照する方法の詳細については、以下のFAQをご覧ください。
FAQ：ドラッグ＆ドロップエディタで作成したメールのHTMLコードを参照できますか？
複数のカラムを横並びに挿入した時にカラムに出来てしまう空白を埋めるには？
複数のカラムを横並びに挿入した際、各カラムの背景色の範囲がバラバラになってしまい、空白ができてしまう事がございます。その場合は、セクション設定からカラム毎に背景色を選ぶことで空白をなくすことができます。以下の手順に従ってください：
1. 編集したいメールを開きます。
2. メール本文内の右側にカーソルを合わせるとセクション機能が表示されます。
3. 鉛筆アイコンをクリックします。
4. セクション設定の画面下に表示される「左カラム」「中央カラム」「右カラム」より空白を埋めたいカラムをクリックします。
5. 背景色の下に表示される円をクリックし、背景色を選択して完了です。
ご不明な点がございましたら、サポートチームまでお問い合わせください。
登録を完了させるには、認証メールのご確認をお願いします。
