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

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

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

ランディングページ 更新日 9月 25, 2020

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

 

landing-page-builder

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

  1.  はじめてのランディングページ作成
  2. ランディングページコピーの作成
  3.  セクション
  4. 背景画像を追加する方法
  5.  ブロック
  6.  登録フォーム
  7. テキスト編集
  8. ブロックにアニメーションを設定する方法

 


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

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

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

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

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

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

 

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

 

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

ランディングページもモバイルレスポンシブとなっているので、作成する際にはモバイルからアクセスする方にも見やすいページを作ることを意識しましょう。

 

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

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

非表示オプション

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

トップに戻る


 

セクション

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

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

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

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

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

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

 

トップに戻る


背景画像を追加する方法

「セクション毎」または「ランディングページ全体」に背景画像を追加することが可能です。以下、それぞれの手順に従ってください。

「セクション」に背景画像を追加する方法:

「セクション設定」から特定のセクションに背景画像を追加します。

  1. チェックリストの「デザイン」編集を開き、画面上部の「エリア名表示」オプションをクリックします。
  2. 背景画像を追加したいセクションにカーソルを合わせ、右側に表示される「セクション設定」歯車のアイコンをクリックします。
  3. 画面左に「セクション設定」が表示されますので、「背景を追加」をクリックします。

 

「ランディングページ全体」に背景画像を追加する方法:

全体のスタイル」タブから背景画像を追加し、ランディングページ全体に背景画像を反映させます。

  1. チェックリストの「デザイン」編集を開き、画面左上に表示される「全体のスタイル」タブをクリックします。
  2. 背景画像」オプションをクリックします。
  3. 背景を追加」を選択します。

 

ここからは同じ手順となります:

画像ギャラリーが開きますので、既存の画像を選択、または新しい画像をアップロードします。画像ギャラリーの詳細については以下のFAQをご覧ください。

FAQ:画像ギャラリーの利用と画像のアップロード方法について

画像を挿入すると、新しい設定画面が表示されます。

セクション毎

ランディングページ全体

 

  1. 背景スタイル
    1. 塗りつぶし:ランディングページ全体もしくはセクション全体に背景が挿入されます。スクロールした際は背景画像も一緒に動きます。以下の例は、最初と最後のセクションに1つずつ背景画像を追加し、中央のセクションに前後に合った背景色を使うことで、グラデーション効果を出しています。
    2. タイル:スクリーンのサイズに合わせて複製される画像数が調整され、タイル状に表示されます。
    3. パララックス効果:ページをスクロールした際に立体感や奥行きを演出する視差効果のことです。背景画像は固定され、画面いっぱいに表示されます。画像の位置を設定することも可能です。注意:パララックス効果が一番現れるのはスクロールを上下する時です。以下のワインの例のように、新しい画像が前の画像を完全に覆い、前の画像が消えることで1つのセクションから次のセクションに移動することが可能です。
  2. 画像の位置:コントロールパネルで画像の位置を簡単に変更することができます。最適な位置を選択してください。
  3. 編集オプション
    1. 編集:画像エディタを使ってリサイズまたはエフェクトを追加します。
    2. 画像変更:クリックすると画像ギャラリーが開きますので、変更したい画像を選択してください。
    3. リセット:画像を削除し、別の画像または背景色を使うことができます。
  4. コンテンツレイアウト
    1. フレーム付背景(Framed Background):フレームで背景画像を囲み、サイドの空白枠やその背景色をお選び頂けます。コンテンツは中央に配置されます。
    2. 全枠背景(Full Width Background):コンテンツの周りは空白枠なしで画面いっぱいに背景画像が表示されます。
  5. 完了しましたら、「保存&閉じる」ボタンをクリックしてください。

トップに戻る


ブロック

ブロックはデザインに必要不可欠で機能的です。「ブロック」タブをクリックすると、その下に「カラム」と「コンテンツ」2つのオプションが表示されます。「コンテンツ」オプションをクリックすると利用可能なブロックが表示されます。

本文にブロックを挿入するには、ご希望のブロックをドラッグしお好きな場所にドロップしてください。

 

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

 

トップに戻る


 

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

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

どちらを使うべき?

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

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

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

関連FAQ:

 

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


 

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

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

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

 

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


 

テキストブロック

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

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

コピー&ペースト

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

ソースコード

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

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

 

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


 

動画ブロック

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

 

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


 

区切り線ブロック

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

FAQ:区切り線(ディバイダーブロック)の使い方

 

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


 

ボタンブロック

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

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

このブロック内では、コール・トゥ・アクション(CTA)の効果をより高めるボタンを設置します。ボタンを設置することによって、あなたのランディングページがマーケティング対象となります。 CTAはランディングページのゴール達成の指標となります。訪問者の気を惹く言葉を入力しましょう。

ランディングページの訪問者に向けて、遷移させたいURLを追加しましょう。ここに挿入するURLは別のランディングページのURLであったり、外部の別サイトURLを入力しましょう。 例:「登録」というボタンがページ内にあった際には、ボタンをクリックした後に遷移するページは同じランディングページ内の登録フォームのリンクとなります。

外部のサイトのURLを挿入したい場合は以下の手順に従ってください。

    1. 挿入したボタンブロックをクリックし、画面上部に表示されたメニューバーの「リンク挿入」アイコンをクリックします。
    2. 表示されるポップアップにおいてドロップダウンメニューから希望するオプションを選択します。
    3. また、左のコンテンツタブ画面より、リンクタイプを選択することも可能です。その際に、「ウェブサイト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.  登録フォームアイコンをドラッグし、ページ内の希望する場所に設置します。
  2. 左側のメニューに表示されるコンテンツから「埋込型フォーム(多項目)」のドロップダウンメニューから、既にアカウントにおいて作成した登録フォームを選択します。注意:ランディングページで設置できるのは、「埋込型(多項目)フォーム」のみとなります。
  3. 登録フォームを選択後、自動的にフォームがランディングページ内に表示されます。ランディングページエディタにおいて、登録フォームの幅を自由に変更する事が可能です。「幅変更」トグルバーをクリック後、希望する幅を入力してください。 ページに挿入した登録フォームを編集したい場合には、フォームデザインの下にある「フォームエディタを開く」リンクをクリックする事で、登録フォームのエディタへと遷移します。 新規ウィンドウにて登録フォームエディタは開くので、編集を完了したら「保存&出力」をクリックし、フォーム出力を行なってください。
  4. 登録フォームエディタにて編集したフォームは数秒後にランディングページに反映されます。編集後のフォームが反映されない場合は、一度ランディングページ内に設置している登録フォームを削除します。フォームを削除する場合は、登録フォーム上にカーソルを移動させた上で、右上に表示される緑色の「ゴミ箱」アイコンをクリックしてください。
  5. 再度登録フォームのブロックをドラッグし、編集したフォームを設置してください。

注意:一度設定したページ内の登録フォームはいつでも変更可能です。ページ内の登録フォームをクリックし、画面左に表示されるドロップダウンメニューから変更したいフォームを選択し、保存してください。

 

 

トップに戻る


テキスト編集

グーグルフォントでランディングページを個性的なデザインにしましょう。

グーグルフォントにアクセスするには以下の手順に従ってください:

  1. チェックリストの「デザイン」編集画面を開きます。
  2. 「全体のスタイル」タブをクリックします。
  3. 「テキスト編集」オプションをクリックします。
  4. ヘッダーとボディそれぞれにお好みのフォントを選択してください。

 

トップに戻る


ブロックにアニメーションを設定する方法

ブロックにアニメーションを設定し、よりダイナミックで楽しいランディングページに仕上げ、読者を惹きつけましょう。

アニメーションを設定する方法は以下の通りです:

  1. デザイン」編集画面を開きます。
  2. ランディングページ本文にお好みのブロックをドラッグ&ドロップします。※全てのブロックでアニメーション設定が可能です。
  3. ブロックを挿入すると、左側に「設定」タブが表示されます。
  4. 最下部の「アニメーション設定」をクリックします。

お好みのアニメーションタイプを選択し、次にアニメーションの「継続時間」を設定します。

また、ページが読み込まれてからアニメーションを開始するまでの時間を「配信間隔」で設定することも可能です。

オフセット」はブラウザウィンドウの最下部とアニメーション設定をしたコンテンツの間隔を設定します。この間隔に達した時点でアニメーションが開始されます。

トップに戻る


 

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

 

 

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


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

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

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

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

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

サポートへお問い合わせ