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

サポートページ aero-right ランディングページの作成方法について

ランディングページの作成方法について

ランディングページ 更新日 3月 24, 2020

Benchmark Emailのランディングページビルダーで出来ることをこちらのFAQページでご案内します。 洗練されたデザインのランディングページを誰でも簡単に作成することが可能です。

 

landing-page-builder

ランディングページ作成にあたって:

  1.  はじめてのランディングページ作成
  2. ランディングページコピーの作成
  3.  セクション
  4.  ブロック
  5.  登録フォーム

 


はじめてのランディングページ作成

ランディングページを作成するには、まずはBenchmark Emailのアカウントにログインしてください。

  1.  アカウントのダッシュボードから、「ランディングページ」をクリックし、ランディングページの一覧ページへ
  2.  「新規ランディングページの作成」ボタンをクリック
  3.  ランディングページの名前を入力しましょう。これはアカウントの管理画面上の表示となり、訪問者には表示される事ありません。

一度作成したランディングページのコピーを作成したい場合は、コピーしたいランディングページのタイトル横のオプションボタンをクリックし、「コピー作成」をクリックすると、コピーが作成されます。作成されたコピーのタイトルを編集後、「保存」をクリックしてください。

コピーされたランディングページは、コンテンツのみがコピーされます。 ランディングページ内のテキストや画像、リンクなどはそのまま引き継がれますが、公開するためにはチェックリストの設定を完了する必要があります。

  1. メール作成と同じように、「チェックリスト」が表示されます。「ページ情報」「デザイン」「コンバージョンゴール」「ランディングページURL」の4項目があります。まだ「出力」ボタンがクリックできないようになっていますが、チェックリストの項目を全て設定した後には出力・稼働が出来るようになります。
  2.  「ページ情報」では、ランディングページの公開において必要な情報をチェックリストに沿って順番に埋めていきます。ランディングページのタイトル(title)や、概要(description)は、訪問者数に大きく関わってくる部分となります。 チェックリスト上の項目を設定・保存していくに従って、チェックマークが緑色になります。
  3.  「デザイン」編集ステップに移ります

ランディングページの内容を編集していきます。チェックリストの「デザイン」より、「ランディングページの編集」ボタンをクリックしましょう。

 

注意:ランディングページのエディターはBenchmark Emailのドラッグ&ドロップエディターに似た機能です。D&Dエディターにあまり慣れていない方や、ランディングページエディターについて詳しく知りたい方は下記のステップに沿って確認してください。

 

ページ左側上部に、3つのタブが表示されています。 エディターを最初に開いた際には、デフォルトで「レイアウト」が表示されるようになっています。ランディングページの作成にあたり、レイアウトの中から「白紙レイアウト」を選択し1から作成することや、「テンプレート」をクリックすることによって既にある程度仕上がっているデザインを編集しながら作成することも可能です。 ランディングページもモバイルレスポンシブとなっているので、作成する際にはモバイルからアクセスする方にも見易いページを作ることを意識しましょう。

レイアウトが一度選択されたら、このような画面が表示されます。

  1.  レイアウト こちらをクリックすることによって、再度レイアウト選択画面へと遷移します。現在選択しているレイアウトを異なるものへと変更する場合には、希望するレイアウトをクリックの上で保存してください。 注:レイアウトを変更した際には、現在編集しているコンテンツなどは全て消去されます。また、この操作は取り消すことが出来ません。
  2.  ブロック このタブでは、以下の2つの項目が見られます。
        1. セクション
        2. ブロック
  3.  全体のスタイル このタブをクリックすることにより、ページの背景色を選択することが出来ます。下記の画像のように、ページの背景色を変更してみましょう。
  4.  エリア名表示ボタン このボタンをクリックすることによって、作成しているランディングページ上のセクションの区切りを表示させたり、セクション内に埋め込んだコラムの数を確認することができます。
  5.  ブロックの表示ボタン このボタンをクリックすると、ページ状に配置したブロックの全てに緑色で囲まれて表示されます。ブロックの移動やコピー、削除の操作を行うことができます。
  6.  モバイル版表示ボタン Benchmark Emailのエディターはレスポンシブ対応となっているため、自動的に配置したブロックなどはモバイル・スマホにおいても見やすい位置へと変換されています。 このボタンをクリックすることにより、現在作成中のページがモバイルではどのように表示されるか、ということを確認する事が可能です。もしこちらで表示されたモバイル版のレイアウトが気に入らない場合には、こちらのエディターから直接編集を行なった上で、お好みのデザインへと変更してください。 注:モバイル版表示の状態でページを編集した場合、デスクトップ表示も同様に編集されます。
  7.  タイトルバー エディターの右上に、ランディングページの名前が表示されています。こちらはチェックリスト上で入力したものとは異なり、管理用の名前が表示されています。
  8.  チェックリストに戻る こちらをクリックすることにより、現在編集中のデザインページからチェックリスト一覧へ戻る事ができます。
  9.  ランディングページレイアウト 実際にランディングページを編集している画面の部分を指します。ランディングページに入力・挿入したい内容のブロックをドラッグ&ドロップし、ページを編集しましょう。
  10.  保存時間 Benchmark Emailでは数秒ごとにデータの自動バックアップを行なっています。最後に自動保存された時間がここには表示されます。
  11.  プレビュー 現在作成中のランディングページがデスクトップ上でどのように表示されるかを確認する事ができます
  12.  保存&次へ このボタンをクリックすることにより、作成したランディングページを保存した上でチェックリストへ戻り、公開作業へと移ることができます。

非表示オプション

ブロックをクリックした際に表示される「スマホで非表示」「パソコンで非表示」のトグルバーをクリックすることにより、該当するデバイスからページを見た際にその部分を非表示にすることができます。

 

トップに戻る


 

セクション

セクションはランディングページ内に設置するコンテンツについての詳細を設定することができます。ランディングページを1枚だけではなく、セクション毎に区切ってより見やすいランディングページを作成することができます。 セクション」オプションは「ブロック」タブ内の操作を行なった際に表示されます。お好みのコンテンツやカラムをドラッグ&ドロップして、ランディングページへ挿入しましょう。

1つのセクションには1つ〜4つのカラムを挿入する事が可能です。

セクション自体をランディングページに挿入したい際には、「ブロック」タブから「カラム」を選択した上でドラッグ&ドロップでページに挿入することにより、自動的にセクションが追加されます。セクション内には挿入できるコンテンツ数が表示されます。

セクション」オプションについては、「エリア名表示」を選択すると、青枠によって表示されます。 エリア名表示」をクリックすることにより、ランディングページがいくつものセクションに分けられている事がわかります。また、セクション毎によって異なる数字が表示されており、これは挿入できるカラムの数を表示しています。 セクション毎にそれぞれ右側に表示されるアイコンは、下記の通りとなっています。

  1.  上下ポインターこの矢印をクリックすることにより、現在選択しているセクションから他のセクションへと移動する事ができます。
  2.  セクション設定このアイコンをクリックすると、セクションの設定画面を表示させる事ができます。左側に表示されたセクションの背景色を変更することにより、選択している特定のセクションの色を変更することも可能です。
  3.  ブロックのコピーこのアイコンをクリックすることで、該当するセクション全体のコピーをする事が可能です。コピーしたセクションはコピー元のセクションの下に置かれます。
  4.  ブロックの削除クリックするとセクション内の全てが削除されます。※一度削除したセクションを復元することは出来ないのでご注意ください。

セクション表示から通常の編集画面に戻る際には、「エリア名表示」をクリックしてください。

 

トップに戻る


ブロック

ブロックはランディングページのデザインの材料であり、機能面において重要なものとなります。「ブロック」タブをクリックすることにより、「カラム」と「コンテンツ」2つのオプションが表示されます。 編集中のランディングページに挿入したいコンテンツを、「ブロック」タブをクリックしたのちに「コンテンツ」オプションを探してみましょう。 現在編集中のランディングページ内にコンテンツを載せる際には、希望するコンテンツをドラッグ&ドロップするだけです。

 

ランディングページに挿入できるブロックは下記一覧となります。

 

トップに戻る


 

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

アカウントの画像ギャラリーにすでにアップロードした画像や、新たに画像をアップロードの上で、ランディングページ内に挿入する事が出来ます。 ブロックを編集しているページへドラッグし、画像を追加してください。 画像ブロックはページ内に画像を挿入し、画像カードブロックは挿入した画像のすぐ近くにテキスト入力をする事が可能です。 画像ブロックと画像カードブロックの違いはこのようになっています。

どちらを使うべき?

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

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

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

関連FAQ:

 

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


 

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

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

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

 

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


 

テキストブロック

ランディングページ内にテキストブロックを挿入し、文字を入力することが出来ます。テキストを挿入したいところに、テキストブロックをドラッグするだけです。設置した際には既存の文章が埋め込まれているので、ブロックをクリックし希望する文章を入力してください。

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

コピー&ペースト

ランディングページに挿入するテキストをコピー&ペーストにて入力をしたい場合には、直接テキストボックスに入力するのではなく「貼り付け」機能 を利用することをお勧めします。 貼り付け機能を使うことで、文字化けや余分なスペースが入力されることなく、スムーズにテキスト入力を行う事が可能です。

ソースコード

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

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

 

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


 

動画ブロック

ビデオは可視化できるとても効果的なツールの1つです。ビデオを挿入することによって、商品のクオリティを効率的に見せることや、他の競合製品と比べた上で優れている理由などを簡単に知る事が出来ます。 メール配信時に挿入するように、ランディングページにも挿入してみましょう。 アカウントの動画ギャラリーにビデオをアップロードする方法や、実際にランディングページへの挿入方法についてはこちらをご参照ください。

 

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


 

区切り線ブロック

区切り線ブロック(ディバイダーブロック)を用いることによって、ランディングページ内のコンテンツの間をより見やすく区切る事が可能となります。区切り線ブロックをドラッグし、より見やすいページを作成してみましょう。 ディバイダーブロックを用いた例はこちらをご参照ください。(英語記事)

 

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


 

ボタンブロック

ランディングページにおいて重要となるのは、訪問者からのCTA(コール・トゥ・アクション)です。ランディングページのデザインによって、ページを訪れた人によりクリックしたいかどうか変わってきます。 ただリンクを挿入するだけでなく、ボタンを挿入する事で見栄え良く、なおかつクリックしたくなるようなページを作成しましょう。

ボタンブロックをドラッグし、ページ内の挿入したい箇所に挿入しましょう。一度ページに設置したボタンは、左側のパネルにおいてサイズや幅などを変更する事ができます。 ボタンブロックについての詳細は以下をお読みください。

  1.  このブロック内では、コール・トゥ・アクション(CTA)の効果をより高めるボタンを設置します。ボタンを設置することによって、あなたのランディングページがマーケティング対象となります。 CTAはランディングページのゴール達成の指標となります。訪問者の気を惹く言葉を入力しましょう。
  2.  ランディングページを訪れた訪問者に向けて、遷移させたいURLを追加しましょう。ここに挿入するURLは別のランディングページのURLであったり、外部の別サイトURLを入力しましょう。 例:「登録」というボタンがページ内にあった際には、ボタンをクリックした後に遷移するページは同じランディングページ内の登録フォームのリンクとなります。 別途外部のサイトのURLを挿入したい場合:
    1. リンクオプションをクリックし、テキスト編集のためのバーを画面上部に表示
    2. メニューバーのリンクボタンをクリックし、表示されるポップアップにおいてドロップダウンタブから希望するオプションを選択しましょう。 注:同ページ内のリンクへとつなげる場合には、アンカーリンクを設定する必要があります。アンカーリンクを設定するためには、こちらをクリックしてください。

  1.  テキスト編集バーの様々な機能を用いて、ランディングページ内のテキストやリンクオプションをカスタマイズしましょう。
  2.  ランディングページ内に複数のボタンを設置させる場合、ボタンを1つずつ編集する必要はありません。1つのボタンを編集した際に、「全てのボタンに適用」をクリックすることによってランディングページ内全てのボタンへと設定がコピーされ、同じフォント形式へと反映されます。

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


 

 

ナビゲーションバー

ナビゲーションバーを用いることで、ランディングページの訪問者によりあなたのビジネスについてを詳しく知ってもらうことができます。

  1.  リンクを追加するためには、アイコンをクリックしてください。 リンクの編集は、左側に表示されるリンクオプションに沿って行う事が可能です。最大6つまでのテキストまたは画像によるリンクの挿入が可能です。
  2.  ナビゲーションバーリンクにおいては、3タイプのレイアウトを変更する事が可能です。画像とテキストのリンクどちらがいいかを実際にページに挿入し、比較してみましょう。 自分のランディングページデザインに沿ったタイプのナビゲーションバーリンクを挿入しましょう。
  3.  ナビゲーションバーのリンク内のボーダーをお好みで設定しましょう。それぞれのリンクと、区切りのボーターの間には一定のスペースが挿入されます。
  4.  モバイル表示の際の設定は、モバイルレイアウトにて設定が可能です。初期段階ではデフォルトが選択されていますが、中央寄せのたて揃えなどに変更する事ができます。 モバイル版のランディングページにおいてどのように表示されるかを確認しながら、お好みのデザインを選択してください。

 

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


 

登録フォーム

ランディングページを購読者習得のために活用しましょう。 購読者が増えれば増えるほど、あなたの情報はより多くの人に知り渡り、営業利益も上がることとなります。

ランディングページに挿入できる登録フォームは、既にアカウントにおいて作成した埋込型(多項目)フォームとなります。埋込型フォームを作成するには、こちらをクリックしてください。

  1.  登録フォームアイコンをドラッグし、ページ内の希望する場所に設置します。
  2. 左側のメニューに表示されているコンテンツから「埋込型フォーム」のドロップダウンメニューをクリックし、既にアカウントにおいて作成した登録フォームを選択します。注:ランディングページにおいて設定できるのは、埋込型(多項目)フォームのみとなります。
  3. 登録フォームを選択後、自動的にフォームがランディングページ内に表示されます。ランディングページエディターにおいて、登録フォームの幅を自由に変更する事が可能です。「幅変更」トグルバーをクリック後、希望する幅を入力してください。 ページに挿入した登録フォームを編集したい場合には、フォームデザインの下にある「フォームエディタを開く」リンクをクリックする事で、登録フォームのエディターへと遷移します。 新規ウィンドウにて登録フォームエディターは開くので、編集を完了したら「保存&出力」をクリックし、フォーム出力を行なってください。
  4. 登録フォームエディターにて編集したフォームはすぐにはランディングページに反映されません。編集したフォームを確認するためには、一度ランディングページ内に設置している登録フォームを削除します。フォームを削除する場合は、登録フォーム上にマウスを移動させた上で、ゴミ箱ボタンをクリックしてください。
  5. 再度登録フォームのブロックをドラッグし、設置してください。

注:一度設定したページ内の登録フォームは、いつでも変更する事が可能です。変更を希望するドロップダウンメニューから選択し、フォームを選択した上で保存してください。

 

トップに戻る


 

ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。

 

 

>>「ランディングページ」のまとめページに戻る

FAQの情報は役に立ちましたか?
0 0

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

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

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

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

サポートへお問い合わせ'

お問い合わせ履歴を閲覧する