ランディングページとは商品やサービスの販売を目的としたセールスページです。コンテンツマーケティングで見込み客を集め、ランディングページに誘導することで販売につなげる狙いがあります。

Emanon Proでは、ランディングページ(セールス用)を固定ページに設定することができます。カスタマイズ機能を使ってデザインや文言を反映していくので、簡単にランディングページが仕上がります。

画像やバナー、キャッチコピーだけ準備すれば、下記リンク先のようなランディングページを設定することが可能です。

Emanon Proのランディングページデザイン例

ランディングページの設定

設定を開始する前に、固定ページのページ属性からテンプレート「ランディングページ」を選択し、固定ページを公開してください。

固定ページの設定

メニューにランディングページ用の固定ページを追加することで、カスタマイズ機能を使った設定がよりスムーズになります。

Emanon Proでは、WordPressの管理画面からランディングページを設定し、サイト訪問者(以下「お客様」)のニーズとウォンツに働きかけることができます。

WordPress管理画面 > 外観 > カスタマイズ > ランディングページ設置をクリックすると、下記画面が表示されます。

Emanon Proのランディングページは、パララックス効果による演出、商品・サービスのPR、お客様の声などの表示することができます。

ランディングページを設定する前に、お客様にどのようなアクションを取って欲しいのかあらかじめ決めておきましょう。

例えば、ランディングページで商品を販売する場合、その商品は、お客様のどのような課題・悩みを解決するのか整理しておくことでキャッチコピーなどの作成がスムーズになります。

ヘッダーCTAセクション

ランディングページにロゴマーク(またはサイト名)と、電話番号、営業時間、CTAボタンを表示することができます。ロゴマークは、カスタマイズ > ヘッダー設定 > レイアウトデザインで設定を行います。

CTAボタンは、CTAセクションにページ内リンクされており、URLの指定は不要となっております。

ヘッダーCTAセクションをスクロールに追尾させることができます。ヘッダーCTA設定を初期値から位置固定に変更してください。

ヘッダー画像

ヘッダー画像

ヘッダー画像では、ランディングページのファーストビューを設定する機能です。キャッチコピーとサブコピー、CTAボタン(CTAセクションにページ内リンク)、背景画像、レイアウトを設定することができます。

メッセージの配置

対象者を表記する「ターゲットメッセージ」、ランディングページの「テーマ」を明確にする「タイトル」と「サブタイトル」の3つから構成されています。「サブタイトル」は、テキストを改行表示することが可能です。

メッセージの配置は、左・中央・右の3つから選択できます。ヘッダー画像のデザインに合わせて、メッセージの配置をレイアウトしてください。

メッセージの配置

グラデーション機能

ヘッダー画像に2色のグラデーションを被せることができます。背景色[開始]がヘッダー画像左側。背景色[終了]はヘッダー画像右側を指定ます。角度とは、背景色[開始]と背景色[終了]の境界線の角度を意味します。

角度0は、背景色[終了]から背景色[開始]へのグラデーションになります。角度を増やすことで、始点が時計回りに回っていきます。角度90度では背景色[開始]から背景色[終了]へのグラデーションになります。

パターンフィルター

ヘッダー画像にパターンを被せることができます。パターンフィルターは、「フィルターなし」・「ドット柄」・「チェック柄」の3つから選択できます。

背景色の透過率

背景色の透過率スライダーを右に寄せると、背景色の透過が0の状態になり、ヘッダー画像が見えなくなります。

ヘッダーグローバルナビセクション

ランディングページにナビゲーションを追加することができます。

  • LPメニューの表示:ヘッダー画像の下に表示するメニュー
  • ハンガーメニューの表示:へッダーCTAセクションの右上に表示するメニュー(スマフォ時のみ)
  • モバイルメニューの表示:スマフォ時のにLPメニューの位置に表示する横スクロールメニュー
  • 右スクロールアイコン(モバイルメニュー用)の表示

LPメニューとモバイルメニューは、管理画面 >外観 > メニューでそれぞれ事前の設定が必要です。ハンガーメニューは、LPメニューが設定されていないと正しく表示されません。

メニューにページ内リンクを設定

ページ内リンクの設定方法は、カスタムメニューに各セクションのページ内リンクを指定します。


上記のようにURLにタグを指定することで各セクションにジャンプするメニューの設定が完了します。#offer-sectionは、オファーセクションにページ内リンクを指定しています。各セクションのタグは以下を参照ください。

  • 共感セクション #empathy-section
  • 利点・強みセクション #advantage-section
  • コンテンツセクション #lp-content-section
  • 比較セクション #comparison_section
  • お客様の声セクション #testimonial-section
  • オファーセクション #offer-section
  • ベネフィット・特典セクション #benefits-section
  • クロージングセクション #closing-section
  • CTAセクション #cta-section
  • FAQセクション #faq-section
  • 追伸セクション #postscript-section

共感セクション

見込み客が抱えている悩みや課題を表記することで、解決したいという欲求を明確にするのが、共感セクションの役割です。共感セクションでは、表示レイアウトが2種類あります。上記の画像は、画像を中央配置の例です。

提供する商品やサービスがどのような悩みや課題を解決するのか整理し、販売対象者の気持ちに沿った言葉で表現します。共感セクションでは、テキスト形式で最大5つまで悩みや課題を設定することが可能です。

ランディングページを見た見込み客が、思わず「そうそう!!」と頷くような表現が理想です。

利点・強みセクション

商品やサービスを購入・利用することでお客様の課題・悩みがなぜ解決するのか表記するのか、他の製品との違い、強みを表示するセクションです。共感セクションで示した悩みや課題が解決できることを示すことで、ランディングページへの関心度を高める狙いがあります。

クローズアップセクション

タイトルには、商品・サービスを購入、利用することで得られる利点や他にはない強みを入力します。

サブタイトルには、商品・サービスの特長を簡潔に表現し、次に続くタイトル[1]からタイトル[3]と説明[1]から説明[3]に詳細な情報を表記します。アイコンは、WebフォントFort Awesomeか、正方形の画像(90px 90px以上のサイズ)を適用することができます。

Fort Awesomeの使い方

Webフォント

上記画像は、アイコンにFort Awesomeを適用した例です。

アイコンのテキスト入力欄に、Fort Awesomeのタグを入力するだけで、上記画像のようにアイコンが表示されます。

Font Awesomeの使い方

上記画像では、「fa fa-line-chart」タグ(チャートグラフのアイコン)を入力しています。

Fort Awesomeのタグは、Fort Awesomeのアイコン一覧ページから探します。

アイコン一覧

アイコンをクリックすると下記のような使用例ページが表示されるので、「fa fa-」から始まるタグをコピーし、アイコンのテキスト入力に反映させます。

アイコン一タグ

利点・強みセクションのアイコンに画像を使用したい場合は、正方形サイズの画像(90px 90px以上のサイズ)を準備し、アップロードしてください。Font Awesomeタグが入力されていると画像がアイコンに表示されませんので、注意してください。

CTAセクション[ボタン]

クリックするとCTAセクションに自動スクロールするボタンを設置できます。表示場所は、ページ内表示位置[上部](利点・強みセクションの下)と、ページ内表示位置[中部](お客様の声セクションの下)、ページ内表示位置[下部](追伸セクションの下)以上3箇所です。

CTAセクション[ボタン]を利用する際は、ランディングページのCTAセクション設定の表示を有効にしてください。

コンテンツセクション

コンテンツセクションの表示とは、ランディングページに指定している固定ページの内容を表示することを意味ます。ランディングページに指定している固定ページに、特に何も入力しない場合、コンテンツセクションの表示をオフにしてください。

比較表セクションの表示

競合サービス、商品と比較することでことで、自社の商品の特長を訴求することができます。My アイテム、My 推奨メッセージ、My 特長の3項目が左側の列に表示されます。

比較表は最大3つまで表示することが可能です。

お客様の声セクション

商品・サービスの特長・効果を説明しても、見込み客の心理状態にはまだ不安要素が残ります。商品の購入者やサービス利用者の声を掲載することで、不安要素を排除し、実績があることをPRします。

お客様の声

お客様の声セクションでは、実際に商品・サービスを購入、利用しているお客様の顔写真や推薦文を設定することができます。利用者の声を記載することで、不満要素を軽減することができます。

お客様の声はスライド形式で表示するため、最低2名分の情報が必要です。お客様の声は、最大6件までスライド形式で表示することができます。

お客様の声に、偽名や無料素材写真などの顔写真を掲載することはおすすめしません。意図的に作成された「お客様の声」は信憑性が損なわれる可能性があります。

オファーセクション

オファーセクション

商品の価格を単に表示するだけでは、見込み客にその付加価値を伝えることができず、購入アクションにつながりません。商品の価格は、何と比較して欲しいのか明確にすることが重要です。

また、価格だけなく、商品の機能や付帯サービスなどの提示(オファー)をすることで、価格以外の付加価値を伝えることができます。オファーセクション設定では、商品画像を右に配置し、オファーを3つ左に配置することができます。

ベネフィット・特典セクション

ベネフィット・特典セクションでは、商品購入によりお客様の悩みがどのように解決するのか?(ベネフィット)、または、商品購入により得られるサービス(特典)を表記することで、CV率をあげる役割があります。

ベネフィットとは、商品の購入によってお客様が得られるメリットのことです。次の言葉はこ存じでしょうか?

「ドリルを買いに来た人が欲しいのはドリルではなく穴である」

マーケティングの世界で有名なこの言葉がベネフィットの概念をわかりやすく捉えています。

特典とは、見込み客を購入へとリードするための仕組みです。

TVショッピングをご覧いただくと、ほとんどの商品には特典がついています。中には、販売商品以上の価値があると感じさせる特典もあり、消費者の気持ちを鷲掴みにします。

ランディングページで販売したい商品の内容に応じて、ベネフィットや特典を表示してください。

クロージングセクション

お客様に商品購入やサービス申し込み、資料請求などのアクションを取っていただくための、「最後の一押し」を伝えるセクションです。

クロージングセクション

「最後の一押し」とは、商品購入やサービス申し込みしないことによりお客様に発生する「デメリット」であったり、今アクションすることで得られる「メリット」を表記します。ベネフィット・特典セクションから次に続くCTAセクションへつなげる役割があります。

クロージング例として、期限表記(特典はXX日まで!)や数量表記(先着100名様だけ)などの表記があります。

クロージングセクションは、背景画像を設置することで、パララックス効果を演出することができます。商品やサービスに関連した画像をアップロードして、お客様の購買意欲を高めるのに利用できます。

CTAセクション

CTAセクションは、プラグインContact Form7に対応しています。例えば、無料冊子プレゼントというクロージングの場合、入力フォームの項目は氏名・メールアドレスだけにし、お客様の入力負荷をさげることを意識します。またURLを入力することで、商品販売ページに飛ばすことも可能です。

ランディングぺージ CTA

FAQセクション

お客様は、インターネットで情報収集を行い競合他社の商品・サービスを比較します。その最大の動機は、商品・サービスの購入、利用で損をしたくない、失敗をしたくないという気持ちからです。

よくある質問

FAQ(よくある質問と回答)には、単に商品・サービスの問い合わせと回答を掲載するのでなく、競合品と何が違うのか、優位性を説明するよう心がけてください。FAQは最大6つまで掲載できます。

追伸セクション

ランディングページの最後のセクションです。縦に長いコンテンツであるランディングページは、流し読みされるケースが多いため、追伸セクションを用意することで、フッター部分で視線を一旦止めさせる役割がありあます。

ランディングページを飛ばし読みした見込み客向けに、ページの要約文(もっとも伝えたい要素)を表記します。商品によって実現したい世界観、販売者の想いを添えることで、ランディングページ自体に興味を喚起させることができます。

モバイルCTAセクション

モバイルCTAセクション

スマフォ、タブレットからランディングページを見た場合、フッター部分に最大3つのアイコンを固定表示することができます。

電話へのリンクや、問い合わせ、購入などのアクションを設置することで、より高いCV率をねらう仕組みです。

ランディングページ作成方法

ランディングページ作成は、コンテンツの設計からデザインまでを外注すると安くても20万円は最低必要です。しかし、Emanon Proを使うことで、手軽にランディングページを作成することができます。

あとは、どのような内容でランディングページのコンテンツの設計がとても重要な作業となります。しかし、初めてランディングページを作成する方にとって、コンテンツ設計はハードルが高い作業です。そこでおすすめしたいのが、こちらの記事「成果の出るランディングページの作り方|15の構成テンプレート付き」です。

これは、スモールビジネス特化の学び舎「このは屋」様が公開されているコンテンツで、Emanon Proのランディングページ機能も参考にしてます。ランディングページを使って集客したい方は、ぜひご覧下さい。

スポンサーリンク