サポートページ aero-right

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

Benchmark Emailのランディングページビルダーで出来ることをこちらのFAQページでご案内します。 洗練されたデザインのランディングページを誰でも簡単に作成することが可能です。   ランディングページ作成にあたって:  はじめてのランディングページ作成 ランディングページコピーの作成  セクション 背景画像を追加する方法  ブロック  登録フォーム テキスト編集 ブロックにアニメーションを設定する方法   はじめてのランディングページ作成 ランディングページを作成するには、まずはBenchmark Emailのアカウントにログインしてください。  アカウントのダッシュボードから、「ランディングページ」をクリックし、ランディングページの一覧ページへ  「新規ランディングページ作成」ボタンをクリックします。  ランディングページの名前を入力しましょう。これはアカウントの管理画面上の表示となり、訪問者には表示される事ありません。 一度作成したランディングページのコピーをしたい場合は、コピーしたいランディングページのタイトル横のオプションボタンをクリックし、「コピー作成」をクリックすると、コピーが作成されます。作成されたコピーのタイトルを編集後、「保存」をクリックしてください。 コピーされたランディングページは、コンテンツのみがコピーされます。 ランディングページ内のテキストや画像、リンクなどはそのまま引き継がれますが、公開するためにはチェックリストの設定を完了する必要があります。 メール作成と同じように、「チェックリスト」が表示されます。「ページ情報」「デザイン」「コンバージョンゴール」「ランディングページURL」の4項目があります。まだ「出力」ボタンがクリックできないようになっていますが、チェックリストの項目を全て設定した後には出力・稼働が出来るようになります。  「ページ情報」では、ランディングページの公開において必要な情報をチェックリストに沿って順番に埋めていきます。ランディングページのタイトル(title)や、概要(description)は、訪問者数に大きく関わってくる部分となります。 チェックリスト上の項目を設定・保存していくに従って、チェックマークが緑色になります。  「デザイン」編集ステップに移ります。ランディングページの内容を編集していきます。チェックリストの「デザイン」より、「ランディングページの編集」ボタンをクリックしましょう。   注意:ランディングページのエディタはBenchmark Emailのドラッグ&ドロップエディタに似た機能です。ドラッグ&ドロップエディタにあまり慣れていない方や、ランディングページエディタについて詳しく知りたい方は下記のステップに沿って確認してください。   ページ左側上部に、「レイアウト」・「ブロック」・「全体のスタイル」の3つのタブが表示されます。 エディタを最初に開いた際には、デフォルトで「レイアウト」が表示されるようになっています。ランディングページの作成にあたり、レイアウトの中から「白紙レイアウト」を選択し1から作成することや、「テンプレート」をクリックすることによって既にある程度仕上がっているデザインを編集しながら作成することも可能です。 ランディングページもモバイルレスポンシブとなっているので、作成する際にはモバイルからアクセスする方にも見やすいページを作ることを意識しましょう。   レイアウトが一度選択されたら、このような画面が表示されます。  レイアウト: こちらをクリックすることによって、再度レイアウト選択画面へと遷移します。現在選択しているレイアウトを異なるものへと変更する場合には、希望するレイアウトをクリックの上で保存してください。 注:レイアウトを変更した際には、現在編集しているコンテンツなどは全て消去されます。また、この操作は取り消すことが出来ません。  ブロック: このタブでは、以下の2つの項目が見られます。 セクション ブロック  全体のスタイル: このタブをクリックすることにより、ページの背景色を選択することが出来ます。また、背景画像オプションでランディングページ全体に背景画像を入れることが可能です。詳しくはこちらをご覧ください。なお、ヘッダーやボディの「テキスト編集」も可能です。  エリア名表示ボタン: このボタンをクリックすることによって、作成しているランディングページ上のセクションの区切りを表示させたり、セクション内に埋め込んだコラムの数を確認することができます。右側に表示される矢印でセクションを上下に移動したり、コピーや削除も可能です。また、歯車のアイコンをクリックすると画面左に「セクション設定」が表示され、背景やコンテンツレイアウトを変更することができます。  ブロックの表示ボタン: このボタンをクリックすると、ページ状に配置したブロックが緑色で囲まれて表示されます。ブロックの移動やコピー、削除の操作を行うことができます。  モバイル版表示ボタン: Benchmark Emailのエディタはレスポンシブ対応となっているため、自動的に配置したブロックなどはモバイル・スマホにおいても見やすい位置へと変換されています。 このボタンをクリックすることにより、現在作成中のページがモバイルではどのように表示されるか、ということを確認する事が可能です。もしこちらで表示されたモバイル版のレイアウトが気に入らない場合には、こちらのエディタから直接編集を行なった上で、お好みのデザインへと変更してください。 注:モバイル版表示の状態でページを編集した場合、デスクトップ表示も同様に編集されます。  タイトルバー: エディタの右上に、ランディングページの名前が表示されています。こちらはチェックリスト上で入力したものとは異なり、管理用の名前が表示されています。  チェックリストに戻る: こちらをクリックすることにより、現在編集中のデザインページからチェックリスト一覧へ戻る事ができます。  ランディングページレイアウト: 実際にランディングページを編集している画面の部分を指します。ランディングページに入力・挿入したい内容のブロックをドラッグ&ドロップし、ページを編集しましょう。  保存時間: Benchmark Emailでは数秒ごとにデータの自動バックアップを行なっています。最後に自動保存された時間がここには表示されます。  プレビュー: 現在作成中のランディングページがデスクトップ上でどのように表示されるかを確認する事ができます。  保存&次へ: このボタンをクリックすることにより、作成したランディングページを保存した上でチェックリストへ戻り、公開作業へと移ることができます。 非表示オプション ブロックをクリックした際に表示される「スマホで非表示」「パソコンで非表示」のトグルバーをクリックすることにより、該当するデバイスからページを見た際にその部分を非表示にすることができます。 image here トップに戻る   セクション セクションはランディングページ内に設置するコンテンツについての詳細を設定することができます。ランディングページを1枚だけではなく、セクション毎に区切ってより見やすいランディングページを作成することができます。 「セクション」オプションは「ブロック」タブ内の操作を行なった際に表示されます。お好みのコンテンツやカラムをドラッグ&ドロップして、ランディングページへ挿入しましょう。 1つのセクションには1つ〜4つのカラムを挿入する事が可能です。 セクション自体をランディングページに挿入したい際には、「ブロック」タブから「カラム」を選択した上でドラッグ&ドロップでページに挿入することにより、自動的にセクションが追加されます。セクション内には挿入できるコンテンツ数が表示されます。 ページ内の「セクション」を確認するには、「エリア名表示」をクリックしてください。青枠で表示され、ランディングページがいくつものセクションに分けられている事がわかります。また、セクション毎によって異なる数字が表示されており、これは挿入できるカラムの数のことです。セクションの右上に表示されるアイコンとその詳細は、以下の通りです。  上下ポインター:この矢印をクリックすることにより、現在選択しているセクションから他のセクションへと移動する事ができます。  セクション設定:このアイコンをクリックすると、左側にセクション設定画面を表示させる事ができます。背景色を変更したり、選択している特定のセクションの背景画像を挿入することが可能です。  ブロックのコピー:このアイコンをクリックすることで、該当するセクション全体のコピーをする事が可能です。コピーしたセクションはコピー元のセクションの下に置かれます。  ブロックの削除:クリックするとセクション内の全てが削除されます。※一度削除したセクションを復元することは出来ませんのでご注意ください。 セクション表示から通常の編集画面に戻る際には、「エリア名非表示」をクリックしてください。   トップに戻る 背景画像を追加する方法 「セクション毎」または「ランディングページ全体」に背景画像を追加することが可能です。以下、それぞれの手順に従ってください。 「セクション」に背景画像を追加する方法: 「セクション設定」から特定のセクションに背景画像を追加します。 チェックリストの「デザイン」編集を開き、画面上部の「エリア名表示」オプションをクリックします。 背景画像を追加したいセクションにカーソルを合わせ、右側に表示される「セクション設定」歯車のアイコンをクリックします。 画面左に「セクション設定」が表示されますので、「背景を追加」をクリックします。   「ランディングページ全体」に背景画像を追加する方法: 「全体のスタイル」タブから背景画像を追加し、ランディングページ全体に背景画像を反映させます。 チェックリストの「デザイン」編集を開き、画面左上に表示される「全体のスタイル」タブをクリックします。 「背景画像」オプションをクリックします。 「背景を追加」を選択します。   ここからは同じ手順となります: 画像ギャラリーが開きますので、既存の画像を選択、または新しい画像をアップロードします。画像ギャラリーの詳細については以下のFAQをご覧ください。 FAQ:画像ギャラリーの利用と画像のアップロード方法について 画像を挿入すると、新しい設定画面が表示されます。 セクション毎 ランディングページ全体   背景スタイル 塗りつぶし:ランディングページ全体もしくはセクション全体に背景が挿入されます。スクロールした際は背景画像も一緒に動きます。以下の例は、最初と最後のセクションに1つずつ背景画像を追加し、中央のセクションに前後に合った背景色を使うことで、グラデーション効果を出しています。 タイル:スクリーンのサイズに合わせて複製される画像数が調整され、タイル状に表示されます。 パララックス効果:ページをスクロールした際に立体感や奥行きを演出する視差効果のことです。背景画像は固定され、画面いっぱいに表示されます。画像の位置を設定することも可能です。注意:パララックス効果が一番現れるのはスクロールを上下する時です。以下のワインの例のように、新しい画像が前の画像を完全に覆い、前の画像が消えることで1つのセクションから次のセクションに移動することが可能です。 画像の位置:コントロールパネルで画像の位置を簡単に変更することができます。最適な位置を選択してください。 編集オプション 編集:画像エディタを使ってリサイズまたはエフェクトを追加します。 画像変更:クリックすると画像ギャラリーが開きますので、変更したい画像を選択してください。 リセット:画像を削除し、

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