サポートページ 
ランディングページの作成方法について
Benchmark Emailのランディングページビルダーで出来ることをこちらのFAQページでご案内します。洗練されたデザインのランディングページを誰でも簡単に作成することが可能です。
動画：ランディングページエディタについて
なお、ランディングページが公開できない場合はこちらのトラブルシューティングをご確認ください。
動画：PC表示とモバイル表示について
ランディングページを作成するには、まずはBenchmark Emailのアカウントにログインしてください。
1. アカウントのダッシュボードから、「ランディングページ」をクリックし、ランディングページの一覧ページへ
2. 「新規ランディングページ作成」ボタンをクリックします。
3. ランディングページの名前を入力しましょう。これはアカウントの管理画面上の表示となり、訪問者には表示される事ありません。
一度作成したランディングページのコピーをしたい場合は、コピーしたいランディングページのタイトル横のオプションボタンをクリックし、「コピー作成」をクリックすると、コピーが作成されます。作成されたコピーのタイトルを編集後、「保存」をクリックしてください。
コピーされたランディングページは、コンテンツのみがコピーされます。ランディングページ内のテキストや画像、リンクなどはそのまま引き継がれますが、公開するためにはチェックリストの設定を完了する必要があります。
4.レイアウトを選択します。ランディングページの作成にあたり、レイアウトの中から「白紙レイアウト」を選択し1から作成することや、「テンプレート」をクリックすることによって既にある程度仕上がっているデザインを編集しながら作成することも可能です。ランディングページもモバイルレスポンシブとなっているので、作成する際にはモバイルからアクセスする方にも見やすいページを作ることを意識しましょう。
レイアウトが一度選択されたら、このような画面が表示されます。
1. レイアウト：こちらをクリックすることによって、再度レイアウト選択画面へと遷移します。現在選択しているレイアウトを異なるものへと変更する場合には、希望するレイアウトをクリックの上で保存してください。注：レイアウトを変更した際には、現在編集しているコンテンツなどは全て消去されます。また、この操作は取り消すことが出来ません。
2. ブロック：このタブでは、以下の2つの項目が見られます。
3. 全体のスタイル：
このタブをクリックすることにより、ページの背景色を選択することが出来ます。また、背景画像オプションでランディングページ全体に背景画像を入れることが可能です。詳しくはこちらをご覧ください。なお、ヘッダーやボディの「テキスト編集」も可能です。
4. エリア名表示ボタン：このボタンをクリックすることによって、作成しているランディングページ上のセクションの区切りを表示させたり、セクション内に埋め込んだコラムの数を確認することができます。右側に表示される矢印でセクションを上下に移動したり、コピーや削除も可能です。また、歯車のアイコンをクリックすると画面左に「セクション設定」が表示され、背景やコンテンツレイアウトを変更することができます。
5. ブロックの表示ボタン：このボタンをクリックすると、ページ状に配置したブロックが緑色で囲まれて表示されます。ブロックの移動やコピー、削除の操作を行うことができます。
6. モバイル版表示ボタン：Benchmark Emailのエディタはレスポンシブ対応となっているため、自動的に配置したブロックなどはモバイル・スマホにおいても見やすい位置へと変換されています。このボタンをクリックすることにより、現在作成中のページがモバイルではどのように表示されるか、ということを確認する事が可能です。もしこちらで表示されたモバイル版のレイアウトが気に入らない場合には、こちらのエディタから直接編集を行なった上で、お好みのデザインへと変更してください。注：モバイル版表示の状態でページを編集した場合、デスクトップ表示も同様に編集されます。
7. タイトルバー：エディタの右上に、ランディングページの名前が表示されています。こちらはチェックリスト上で入力したものとは異なり、管理用の名前が表示されています。
8. チェックリストに戻る：こちらをクリックすることにより、現在編集中のデザインページから「チェックリスト」一覧へ移動します。
「デザイン」「ページ情報」「コンバージョンゴール」「ランディングページURL」の4項目があります。まだ「出力」ボタンがクリックできないようになっていますが、チェックリストの項目を全て設定した後には出力・稼働が出来るようになります。
ランディングページの公開において必要な情報をチェックリストに沿って順番に埋めていきます。ランディングページのタイトル（title）や、概要（description）は、訪問者数に大きく関わってくる部分となります。チェックリスト上の項目を設定・保存していくに従って、チェックマークが緑色になります。
ご注意
注意：ランディングページのエディタはBenchmark Emailのドラッグ＆ドロップエディタに似た機能です。ドラッグ＆ドロップエディタにあまり慣れていない方や、ランディングページエディタについて詳しく知りたい方は下記のステップに沿って確認してください。
9. ランディングページレイアウト：実際にランディングページを編集している画面の部分を指します。ランディングページに入力・挿入したい内容のブロックをドラッグ＆ドロップし、ページを編集しましょう。
10. 保存時間：Benchmark Emailでは数秒ごとにデータの自動バックアップを行なっています。最後に自動保存された時間がここには表示されます。
11. プレビュー：現在作成中のランディングページがデスクトップ上でどのように表示されるかを確認する事ができます。
12. 保存＆次へ：このボタンをクリックすることにより、作成したランディングページを保存した上でチェックリストへ戻り、公開作業へと移ることができます。
非表示オプション
ブロックをクリックした際に表示される「スマホで非表示」「パソコンで非表示」のトグルバーをクリックすることにより、該当するデバイスからページを見た際にその部分を非表示にすることができます。
セクションはランディングページ内に設置するコンテンツについての詳細を設定することができます。ランディングページを1枚だけではなく、セクション毎に区切ってより見やすいランディングページを作成することができます。「セクション」オプションは「ブロック」タブ内の操作を行なった際に表示されます。お好みのコンテンツやカラムをドラッグ＆ドロップして、ランディングページへ挿入しましょう。
1つのセクションには1つ〜4つのカラムを挿入する事が可能です。
セクション自体をランディングページに挿入したい際には、「ブロック」タブから「カラム」を選択した上でドラッグ＆ドロップでページに挿入することにより、自動的にセクションが追加されます。セクション内には挿入できるコンテンツ数が表示されます。
ページ内の「セクション」を確認するには、「エリア名表示」をクリックしてください。青枠で表示され、ランディングページがいくつものセクションに分けられている事がわかります。また、セクション毎によって異なる数字が表示されており、これは挿入できるカラムの数のことです。セクションの右上に表示されるアイコンとその詳細は、以下の通りです。
1. 上下ポインター：この矢印をクリックすることにより、現在選択しているセクションから他のセクションへと移動する事ができます。
2. セクション設定：このアイコンをクリックすると、左側にセクション設定画面を表示させる事ができます。背景色を変更したり、選択している特定のセクションの背景画像を挿入することが可能です。
3. ブロックのコピー：このアイコンをクリックすることで、該当するセクション全体のコピーをする事が可能です。コピーしたセクションはコピー元のセクションの下に置かれます。
4. ブロックの削除：クリックするとセクション内の全てが削除されます。※一度削除したセクションを復元することは出来ませんのでご注意ください。
セクション表示から通常の編集画面に戻る際には、「エリア名非表示」をクリックしてください。
「セクション毎」または「ランディングページ全体」に背景画像を追加することが可能です。以下、それぞれの手順に従ってください。
「セクション」に背景画像を追加する方法：
「セクション設定」から特定のセクションに背景画像を追加します。
1. チェックリストの「デザイン」編集を開き、画面上部の「エリア名表示」オプションをクリックします。
2. 背景画像を追加したいセクションにカーソルを合わせ、右側に表示される「セクション設定」歯車のアイコンをクリックします。
3. 画面左に「セクション設定」が表示されますので、「背景を追加」をクリックします。
「ランディングページ全体」に背景画像を追加する方法：
「全体のスタイル」タブから背景画像を追加し、ランディングページ全体に背景画像を反映させます。
1. チェックリストの「デザイン」編集を開き、画面左上に表示される「全体のスタイル」タブをクリックします。
2. 「背景画像」オプションをクリックします。
3. 「背景を追加」を選択します。
ここからは同じ手順となります：
画像ギャラリーが開きますので、既存の画像を選択、または新しい画像をアップロードします。画像ギャラリーの詳細については以下のFAQをご覧ください。
FAQ：画像ギャラリーの利用と画像のアップロード方法について
画像を挿入すると、新しい設定画面が表示されます。
セクション毎
ランディングページ全体
1. 背景スタイル
塗りつぶし：ランディングページ全体もしくはセクション全体に背景が挿入されます。スクロールした際は背景画像も一緒に動きます。以下の例は、最初と最後のセクションに1つずつ背景画像を追加し、中央のセクションに前後に合った背景色を使うことで、グラデーション効果を出しています。
タイル：スクリーンのサイズに合わせて複製される画像数が調整され、タイル状に表示されます。
パララックス効果：ページをスクロールした際に立体感や奥行きを演出する視差効果のことです。背景画像は固定され、画面いっぱいに表示されます。画像の位置を設定することも可能です。注意：パララックス効果が一番現れるのはスクロールを上下する時です。以下のワインの例のように、新しい画像が前の画像を完全に覆い、前の画像が消えることで1つのセクションから次のセクションに移動することが可能です。
2. 画像の位置：コントロールパネルで画像の位置を簡単に変更することができます。最適な位置を選択してください。
3 編集オプション
4. コンテンツレイアウト（セクション設定のみ）
フレーム付背景（Framed Background）：フレームで背景画像を囲み、サイドの空白枠やその背景色をお選び頂けます。コンテンツは中央に配置されます。
全枠背景（Full Width Background）：コンテンツの周りは空白枠なしで画面いっぱいに背景画像が表示されます。
完了しましたら、「保存＆閉じる」ボタンをクリックしてください。
ブロックはデザインに必要不可欠で機能的です。「ブロック」タブをクリックすると、その下に「カラム」と「コンテンツ」2つのオプションが表示されます。「コンテンツ」オプションをクリックすると利用可能なブロックが表示されます。
本文にブロックを挿入するには、ご希望のブロックをドラッグしお好きな場所にドロップしてください。
ご注意
ランディングページに挿入できるブロックは下記一覧となります。
アカウントの画像ギャラリーにすでにアップロードした画像や、新たに画像をアップロードの上で、ランディングページ内に挿入する事が出来ます。ブロックを編集しているページへドラッグし、画像を追加してください。画像ブロックはページ内に画像を挿入し、画像カードブロックは挿入した画像のすぐ近くにテキスト入力をする事が可能です。画像ブロックと画像カードブロックの違いはこのようになっています。
「画像ブロック」はシンプルに画像のみを挿入したい場合に「画像カードブロック」は画像と一緒に説明を挿入したい場合に向いています。
画像カードブロックは、画像の場所を動かすと入力した説明文も一緒に移動するようになっています。
画像カードブロックの挿入方法についてはこちら、画像ブロックの挿入方法についてはこちらをご参照ください。
関連FAQ：
「画像キャプションブロック」は画像内にテキストを入れることが可能となり、画像カードブロックとの違いは、画像キャプションブロックにおいては入力するテキストの枠がなく、お好みでテキストの入力枠を編集する事が可能です。下記の画像において、左側に画像キャプションブロック・画像カードブロックを右側に設置しています。
画像キャプションブロックの挿入方法についてはこちらをご参照ください。
ランディングページ内にテキストブロックを挿入し、文字を入力することが出来ます。テキストを挿入したいところに、テキストブロックをドラッグするだけです。設置した際には既存の文章が埋め込まれているので、ブロックをクリックし希望する文章を入力してください。
テキストブロックを使用する上で下記の注意点をご確認ください。
コピー＆ペーストに大活躍。貼付オプション機能では自社ウェブサイト、Google、Wordなどのコンテンツをメールエディタへ貼付する際に、コピー元の外部ソースの書式を使用するか、除外するかを選択できます。
貼付オプション機能の使用方法は以下をご参照ください。
重要
コピー＆ペースト
ランディングページに挿入するテキストをコピー＆ペーストにて入力をしたい場合には、直接テキストボックスに入力するのではなく「貼り付け」機能 
を利用することをお勧めします。貼り付け機能を使うことで、文字化けや余分なスペースが入力されることなく、スムーズにテキスト入力を行う事が可能です。
ソースコード
ソースコードを入力したい場合には、テキストボックス上でコードアイコン 
をクリックし、挿入してください。
もしコードアイコンがエディタ上に見つからない場合は、ツールバー右上の「メニュー」をクリックしてください。
ビデオは可視化できるとても効果的なツールの1つです。ビデオを挿入することによって、商品のクオリティを効率的に見せることや、他の競合製品と比べた上で優れている理由などを簡単に知る事が出来ます。メール配信時に挿入するように、ランディングページにも挿入してみましょう。
*iframeタグを用いて動画を挿入することはできませんので、動画ブロックをご利用ください。
アカウントの動画ギャラリーにビデオをアップロードする方法や、実際にランディングページへの挿入方法についてはこちらをご参照ください。
区切り線/スペースブロックを用いることによって、ランディングページ内のコンテンツの間をより見やすく区切る事が可能となります。区切り線ブロックをドラッグし、より見やすいページを作成してみましょう。ディバイダーブロックを用いた例は以下のFAQをご参照ください。
FAQ：ドラッグ＆ドロップエディタでブロック間の空白や区切り線を追加する方法
ランディングページにおいて重要となるのが、訪問者のCTA（コール・トゥ・アクション）です。ランディングページの成果はCTAによって決定すると言っても過言ではありません。
Benchmark Emailでは、ブロックを使って簡単にCTAを促すボタンを設定することができます。訪問者がクリックしたくなるようなページを作成しましょう！
ボタンを追加するには、ブロックよりボタンブロックを選択してメール本文のお好きな場所にドラッグ＆ドロップしてください。
挿入したボタンブロックをクリックすると、左にパネルが表示されますのでボタンのデザインやURLの挿入などの編集が可能です。
ボタンブロックにURLを挿入する方法
1. 挿入したボタンブロックをクリックすると、左に設定・コンテンツ画面が表示されますのでコンテンツタブを開きます。ボタンテキストボックスが表示されますので、訪問者がクリックしたくなるような文言を入力しましょう。
2. ドロップダウンメニューからリンクタイプを選択し、ウェブサイトURLボックス内にURLを追加します。注意：URLは外部ページでも同じランディングページ上のページでも挿入可能です。例）「登録」というボタンブロックを作成し、同じランディングページ内の登録フォームページに遷移させることができます。代替リンクを挿入したい場合は、以下の2通りの方法がございます。
a. 画面上部に表示されたメニューバーの「リンク挿入」アイコンをクリックします。ポップアップ画面でドロップダウンメニューから希望するオプションを選択します。b. 左のコンテンツタブ画面より、リンクタイプを選択することも可能です。その際に、「ウェブサイトURLボックス」をクリックすると、過去に使用したウェブサイトURLが表示されます。注：同ページ内のリンクへとつなげる場合には、先にアンカーリンクを設定する必要があります。詳しくはこちらをクリックしてください。
3. テキスト編集バーを使って、ランディングページ内のテキストやリンクを自由に編集することができます。
4. ランディングページ内に複数のボタンを設置させる場合、ボタンを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. 登録フォームアイコンをドラッグし、ページ内の希望する場所に設置します。
2. 左側のメニューに表示されるコンテンツから「埋込型フォーム（多項目）」のドロップダウンメニューから、既にアカウントにおいて作成した登録フォームを選択します。注意：ランディングページで設置できるのは、「埋込型（多項目）フォーム」のみとなります。
3. 登録フォームを選択後、自動的にフォームがランディングページ内に表示されます。ランディングページエディタにおいて、登録フォームの幅を自由に変更する事が可能です。「幅変更」トグルバーをクリック後、希望する幅を入力してください。ページに挿入した登録フォームを編集したい場合には、フォームデザインの下にある「フォームエディタを開く」リンクをクリックする事で、登録フォームのエディタへと遷移します。新規ウィンドウにて登録フォームエディタは開くので、編集を完了したら「保存＆出力」をクリックし、フォーム出力を行なってください。
4. 登録フォームエディタにて編集したフォームは数秒後にランディングページに反映されます。編集後のフォームが反映されない場合は、一度ランディングページ内に設置している登録フォームを削除します。フォームを削除する場合は、登録フォーム上にカーソルを移動させた上で、右上に表示される緑色の「ゴミ箱」アイコンをクリックしてください。
5. 再度登録フォームのブロックをドラッグし、編集したフォームを設置してください。
注意：一度設定したページ内の登録フォームはいつでも変更可能です。ページ内の登録フォームをクリックし、画面左に表示されるドロップダウンメニューから変更したいフォームを選択し、保存してください。
eコマースに欠かせない商品掲載に最適なブロックです。
eコマースブロックには以下の項目が含まれます：
1. 商品画像
2. 商品詳細
3. 価格
4. ボタンリンク
eコマースブロックをクリックし、メール本文の好きな位置にドラッグします。
eコマースブロックを編集するには、以下の手順に従ってください。.
1. 商品画像を挿入します。
2. 商品詳細を入力します。短く分かりやすい文章にしましょう。
3. 価格を入力します。
4. CTAボタンを編集します。
上記の項目で不要なものは、コンテンツタブで各項目のトグルバーをすべてオフにすることで非表示にできます。
完了しましたら、「保存」または「保存＆次へ」ボタンをクリックしてください。
以下は英語表記ですが、eコマースブロックを使ったデザイン例です。ご参考にしてください。
まず、メール編集画面の左からShopify商品ブロックをクリックしてランディングページの好きな場所にドラッグします。
Shopify商品ブロックを使用するには、Shopifyの稼働中の有料アカウントが必要です。このブロックを初めて使う際は、ShopifyとBenchmark Emailを連携する必要があります。連携方法については以下のFAQをご覧ください。
FAQ：ShopifyとBenchmark Emailを連携する方法は？
ShopifyアカウントとBenchmark Emailの連携が完了しましたら、利用可能な商品リストが表示されます。
商品リストから1つ選択します。Shopifyに登録されている商品詳細を使って情報が自動的に入力されます。Shopify商品ブロックには以下の項目が含まれます：
注意点：
＜Shopify商品ブロックを使ったデザイン例＞
お気に入りブロックは、作成したブロックを簡単に保存して再利用することができるので、ランディングページの作成時間を短縮できます。ブロックをお気に入りに保存すると、ブロックのデザインやテキスト、画像がそのまま保存されます。
また、保存したブロックをランディングページ内に挿入した後、ブロックの編集も可能です。内容を変更しても、保存された元のブロックはそのまま残ります。
ブロックを保存するには、編集画面で保存したいブロックにカーソルを合わせて、ブロックの保存アイコンをクリックします。ブロックに名前をつけて、「保存＆閉じる」をクリックします。
お気に入りブロックを使用する方法：
1.お気に入りブロックをランディングページ内にドラッグし、お好きな場所にドロップします。
2. 画面左から使用するブロックを選択し、ブロックの編集を続ける、または保存して閉じます。
お気に入りブロックを削除する方法：
1. お気に入りブロックをランディングページ内にドラッグします。画面左に過去に保存したブロックのリストが表示されます。
2. 削除したいブロックの右に表示されるゴミ箱アイコンをクリックします。ポップアップ画面で削除することを再度確認し、「削除」ボタンをクリックして完了です。
保存したブロックが残っていない場合は、ランディングページからお気に入りブロック自体を削除することができます。
グーグルフォントでランディングページを個性的なデザインにしましょう。
グーグルフォントにアクセスするには以下の手順に従ってください：
1. チェックリストの「本文＆デザイン」編集画面を開きます。
2. 「全体のスタイル」タブをクリックします。
3. 「テキスト編集」オプションをクリックします。
4. ヘッダーとボディそれぞれにお好みのフォントを選択してください。
ブロックにアニメーションを設定し、よりダイナミックで楽しいランディングページに仕上げ、読者を惹きつけましょう。
アニメーションを設定する方法は以下の通りです：
1. 「デザイン」編集画面を開きます。
2. ランディングページ本文にお好みのブロックをドラッグ＆ドロップします。※全てのブロックでアニメーション設定が可能です。
3. ブロックを挿入すると、左側に「設定」タブが表示されます。
4. 最下部の「アニメーション設定」をクリックします。
お好みのアニメーションタイプを選択し、次にアニメーションの「継続時間」を設定します。
また、ページが読み込まれてからアニメーションを開始するまでの時間を「配信間隔」で設定することも可能です。
「オフセット」はブラウザウィンドウの最下部とアニメーション設定をしたコンテンツの間隔を設定します。この間隔に達した時点でアニメーションが開始されます。
ご不明な点がございましたら、サポートチームまでお問い合わせください。
登録を完了させるには、認証メールのご確認をお願いします。
