顧客満足度No.1 企画×高品質デザイン×サポートで顧客の売上を最大化 株式会社ケイアートファクトリー

COLUMN

コラム

売り出したい商品やサービスがある場合、広告費用をかけてWeb広告を配信することで多くの人に情報を届けることが出来ます。広告をした時に、Webサイトに商品情報が掲載されていれば、そのページへ誘導する事もできます。

しかし商品やサービスの良さを知っていただく為には、通常の商品情報が掲載されただけのページでは訴求力が弱く、動線を整備しておかなければサイトに訪れたユーザーの関心を惹きつけることなく離脱してしまいます。そんな時に用意しておくべきものがランディンページ(LP)です。

 

通常サイトとLPの比較

 

しっかりとユーザーに情報を訴求し、関心をするためにランディングページ(LP)を作成する上での構成やデザインについてチェックポイントを現役マーケターがご紹介します。

 

ランディングページの役割

ランディングページは日本語にすると「着地するページ」となり、一般的にWeb広告を配信した時に誘導するページのことを指します。広告費用をかけてそのページにアクセス数を集めるため、出来るだけ離脱を防ぎ、商品やサービスの申し込み(購入・お問い合わせなど)に繋げるようにページを作ります。

その為、ランディングページは縦に長いページになることが多く、ページ内に多くの情報が掲載されています。この情報を整理しユーザーを誘導できる(コンバージョンを高める)ページにする必要があります。

 

 

構成やデザインが重要な理由

ランディングページに訪れたユーザーは「どこを見て」「どこまでスクロールして」「どれぐらい滞在して」くれているのでしょうか。LPを作るだけのWeb制作会社の場合、感覚的に見栄えだけを重視したデザインになりがちです。

しかし、マーケティングに強い制作会社は過去のノウハウやデータを元にLPをデザインしています。下の画像はランディングページをヒートマップ解析したものになります。制作段階からどういったデータが計測されそうか想定しておくと期待するコンバージョンが見込みやすくなります。

 

ヒートマップ解析

※『ヒートマップ』とは、ページ内の情報がどのように見られているかといった『熟読エリア』や『スクロール率』を色の濃淡で視覚的にデータ化したものです。

 

ランディンページはCV率をいかに上げるか

LPで成果を出すための指標として【アクセス数✕コンバージョン(転換)率✕単価】といった計算が用いられます。LPで出来ることは『コンバージョン(転換)率』をいかにあげるかです。その為、ユーザーに響く打ち出しが必須になります。

LPで成果を出すための指標

 

LP内におけるユーザーアクション『7つの傾向』

ヒートマップ解析でランディングページを分析すると、業種や商品が変わっても下記のような傾向がよく出ます。これらを想定しランディンページの構成やデザインを考えなければいけません。

 

  • ファーストビュー(ページ上部の訴求画像)を過ぎるとすぐに離脱がはじまる。
  • 下にスクロールするにしたがって少しずつ離脱し、ページ最下部までいくと大半が離脱している
  • 通常の文章部分は熟読されにくい
  • イラストや図は目を引きやすいが、訴求内容を反映していないと見られない。
  • 詳しく見たいと思ったところはクリック(タップ)される。※リンクの有無関わらず。
  • リンクがあるボタンは分かりやすくしないと気づかれない
  • ユーザーは隅々まで知りたいわけでなく、知りたい情報を出来るだけ早く見つけたい

 

見せたい情報と見たい情報はイコールではない

ノットイコール

運営者側の目線だと「他社よりも良い商品だ!」「価格以上の価値がある!」「試してもらえれば分かる!」という想いが強くなります。しかし商品やサービスの詳細を掲載しておくだけではユーザーは安心して購入や問い合わせをしてくれません。

商品のサービスの詳細情報以外にユーザーがよく見ている代表的な情報として「価格」「実績・事例」「お客様の声」「FAQ」などがあります。売れる(集客する)ランディングページにするためにこれらの構成要素を整理し、ユーザー体験を向上させるデザイン力が重要になります。

 

一貫性をもたせたランディングページを制作する為の手順

ちょっとしたランディングページの場合、「ページのデザイン」→「コーディング」といったシンプルな流れで公開します。しかし、なんとなく作ったLPでは、期待以上の成果をあげることは難しい場合が多いのが現状です。その為に下記のような流れにそって運用開始(広告配信など)出来ると良いでしょう。

  1. 1.ターゲット(ペルソナ)の設定
  2. 2.競合調査
  3. 3.掲載情報の整理と準備 →この記事ではココと
  4. 4.ワイヤーフレーム作成 →ココと
  5. 5.デザイン制作 →ココのお話です
  6. 6.コーディング
  7. 7.テストアップ・本公開
  8. 8.本公開
  9. 9.運用開始

 

 

11コの掲載情報を整理し準備する

一般的なランディングページには「これは載せておくべき情報」「ここは大切!」という基本的な構成要素やデザインがあります。掲載に必要な情報を準備することは大変手間のかかる作業ですが、この手間を惜しむか惜しまないかで成果が変わります。ランディングページは制作会社と依頼者が協力して作ることで良いページに仕上がりますので、相談しながら進めましょう。

 

1.ファーストビュー

ランディングページに訪れた全てのユーザーが見る一番重要な要素です。ここでいきなり離脱するユーザーがいますので、興味をひき、期待させる内容を訴求することが大切です。下記の掲載項目例などを変えながら複数用意しておき、公開後にA/Bテストを重ねながら検証するのがオススメです。

 

ファーストビュー

 

【掲載項目例】

  • 商品やサービスのイメージ画像
  • 一文で惹きつけるメインコピー(USP)
  • 権威付け、数値実績(「◯◯No.1」「導入実績◯◯◯件」「◯◯◯賞受賞」など)
  • CTA(申し込みやお問い合わせに誘導するボタン)

 

2.メインコピー、ボディコピー

ページ内に掲載されている文章は、思っている以上に読まれにくいものです。文章が多い時は特に見出しだけ見て内容を飛ばされます。訴求したい内容を簡潔にまとめたコピーを見出しに設置することで、その後の文章の熟読率が変わります。メインコピーやサブコピーはインパクトがあって魅力的なものをライティングします。

 

コピー例

 

3.CTA(コールトゥアクション)

ユーザーにコンバージョンを促すボタンやバナーなどの事をCTAと言います。CTA次第でコンバージョン数が変わるため、『配置する場所』『サイズ』『コピー』『色』に工夫が必要です。ファーストビューと同じくよくA/Bテストで検証される要素でもあります。

ランディングページには複数のCTAが設置されるのが一般的です。なぜならランディングページは縦長のページになっている事が多いからです。CTAを設置する場所に合わせてコピーを変えることでクリック率が上がることもあります。

 

【クリックされやすいボタンのコツ】

下記ボタンの場合、右側の赤いボタンの方がクリックされやすくなります。

CTA

 

工夫するポイントは以下のようなことです。

 

ポイント1クリックされやすい色を使う。よく利用されるのは下記のような系統の色味です。(※ページの色味によってクリックされやすい色は変わります。)

CTA

 

ポイント2ユーザー目線の行動をコピーにする。

CTA

 

ポイント3コピーにアイコンをプラスします。アクションをイメージできるアイコンにすると良いでしょう。

CTA

 

ポイント4ボタンに立体感を出します。そうする事で「リンクがあるボタン」ということが伝わります。

 

4.特典

ユーザーが申し込むにあたってメリットがある場合は、内容と条件を整理しておきましょう。魅力的な特典を用意できる場合は、ファーストビューに設置することも検討します。コンバージョンの後押しをしてくる要素になります。

 

【商品やサービス自体に特典を設ける場合】

『期間限定』『対象者限定』などで条件をつけ◯◯◯◯円OFFや◯%OFFを記載します。

 

【ハードルを低くした特典を設ける場合】

『無料体験』『無料会員登録』のようにユーザーにとってリスクがないもの。メリットもあわせて記載します。

 

【プレゼントや資料提供などの特典を設ける場合】

ユーザーの情報(会社名、氏名、電話番号、メールアドレスなど)を取得する為に設定される事が多い特典です。見込み客としての温度感は低いユーザーになりますが、メールマーケティングなどを通じて育成できると良いでしょう。

 

特典例

 

5.ベネフィット

その商品やサービスが提供される事によって、ユーザーが得られるメリット(利益、恩恵)は何でしょうか。ベネフィットは商品説明のことではなく、クライアントや消費者のニーズ・課題を「解決させる」「満足させる」といった変化を感じさせるという点が重要なポイントです。

 

【ベネフィットの例】

専門学校:(2年間独自のカリキュラムで学ぶことで)大好きな企業に就職できる

化粧品:(毎日のお手入れで肌がキレイになり)若く見られる

飲食店:(記念日の料理プランとサプライズの演出で)友達に喜んでもらえる

家電:(最新IT家電で)主婦の家事が効率化し自分の趣味の時間を作ることができる

衛生用品:(ウイルス除菌率99%なので)安心して生活をおくれる

不動産:(信頼性のある技術と安心保証で)老後も安心して長く暮らせる

 

 

6.商品情報

クライアントや消費者が直接的にお金を支払う対象が商品です。商品を購入する際に、判断基準となる情報を掲載します。この項目では、商品やサービスの内容によっては「人(技術者・販売員・生産者など)」「申し込みの手順や保証」「エビデンス」なども含まれます。

これらの情報はランディンページで細かく掲載しすぎことでコンバージョンの弊害要因になることがあります。『よくあるご質問』に掲載したり、サービスサイトページへのリンクなどで適度に調整しましょう。

 

7.料金(価格)

コンバージョンに至るユーザーのほとんど気にする項目になります。競合他社よりも優位性のある価格設定の場合は、出来るだけ分かりやすく掲載します。類似商品との比較表を掲載しても良いでしょう。

コースやプランを用意できる場合は『松竹梅』になるような料金設定を用意します。申込み(購入)後にアップグレードやダウングレードが可能な場合は明記しておくことで、コンバージョンの後押しにもなります。価格が高い商品の場合、ユーザーの検討時間は長くなりがちです。一度のアクセスでコンバージョンしない確率が上がりますのでリマーケティング広告も同時に検討します。

 

料金プラン

 

8.実績や事例

そのサービスを導入している他企業の実績や事例はユーザーにとって安心感に繋がります。特に知名度がある企業や有名人が使用していれば尚更です。また、TVや雑誌などのメディアで取り上げられたことも活用できます。知名度が無い場合は量で勝負します。導入企業のロゴを並べるといったデザインだけでもイメージアップに繋がります。

名前を使えない場合は、「販売(導入)件数」などの数値でアピールしたり「業界初」「地域初」といった新しさで訴求する方法もあります。

 

ロゴ

 

9.お客様の声

「口コミ」「レビュー」「お客様の声」は、第三者目線での評価になり、ユーザーが注目する項目でもあります。ECサイトやポータルサイトなどでは評価が高い「口コミ」が多いと売れやすい(集客しやすい)傾向もありますが、これはLPでも同じような効果が期待できます。

「顔出し」「実名」で掲載することでより信憑性が高まります。顧客に協力して頂き事前に「お客様の声」を収集しておきましょう。たくさんの「お客様の声」を掲載できる場合、そのまま載せるパターンもありますが、横スクロールなどで設置しユーザビリティを損ねないようにデザインします。

 

10.FAQ(よくあるご質問)

LP内で掲載できなかったことや、顧客から質問されるような内容をここで掲載します。ユーザーは分からないことがあっても簡単に問い合わせしてくれません。興味を無くしてそのまま離脱してしまいます。ランディングページではページ下部に設置されることが多い構成要素ですが、質問内容によっては熟読率が高く(ヒートマップで赤く)なることもあります。

 

11.フォーム

コンバージョンに繋がるフォームは『LP内に設置』する場合と『別ページのフォームに遷移』させる場合があります。最低限の情報を入力するフォームの場合LP内に設置する事も多いですが、たくさんの情報を入力しないといけないフォームの場合は別ページに遷移させるのが一般的です。フォームの入力項目のチェックポイントとしては以下のようなことが考えられます。

  • 入力項目を出来るだけ少なくしているか。
  • 入力内容に合わせて入力フィールドが入力しやすくなっているか。
  • 間違っている時にエラー表示が出るか。
  • 入力項目に合わせて入力例が記載されているか。
  • セキュリティが確保されているか。
  • 自動返信メールが送信されるか。

 

 

デザインで大切にすべきポイント

ランディングページの制作では、複数のメンバーが関わります。広報担当者、開発担当者、ディレクター、マーケター、デザイナー、ライター、エンジニアなどです。実際にページ内のすべての情報をデザインする前に共通認識をもっておく必要があります。

 

色(カラー)

企業規模などによっても異なりますがコーポレートカラーというものが存在します。しかしランディングページで使用するキーカラーは異なる場合があります。状況に合わせてカラーを選択できると良いでしょう。

 

【カラーイメージの検討材料】

  • 商品やサービスのイメージカラーを使用する
  • ターゲットに合わせる(男性なら青、女性ならピンクなど)
  • 訴求イメージに合わせる(誠実さを強調するなら紺、温かさを出すなら暖色など)
  • 季節感を出す(春なら緑やピンク、夏なら水色など)
  • 業界でよく使われている色に合わせる(ラーメンなら黄、IT系なら青など)

 

カラーチャート

※同じ「青」でも様々な色が存在します。

 

フォント

フォントは『字体』や『大きさ』でイメージが異なります。『字体』は大きく分けるとゴシック体と明朝体に分かれます。しかし、LPでは訴求力を出すためにテキスト情報を画像にして設置する場合も多くあります。通常のサイトと比較すると自由度は大きくなると考えて良いでしょう。デザイナー以外の方がフォントを指定することは基本的にありませんので、デザイナーに提案してもらうのがオススメです。

 

フォント

 

イメージ

漠然としたイメージはすれ違いをおこしてしまいます。視覚化されたビジュアルですり合わせを行い、イメージを膨らませれると良いでしょう。このようなイメージにおいて参考にしたいのが、類似サービスを展開している企業のランディングページです。そういったランディングページを1つひとつ探すのは効率的ではありません。ここで活用できるのが、ランディングページがまとめられているサイトです。他企業で実際に公開されている(いた)LPを見つけることが出来ます。

 

【LPがまとめられているサイト】

・ランディングページ集めました

http://lp-web.com/

・ランディングページまとめサイト

http://www.lp-matome.com/

・Web Design Clip

https://lp.webdesignclip.com/

・LP advance

https://site-advance.info/

 

 

 

構成やデザインが合っていたのか答え合わせする

ランディングページを作成し終わっていよいよ公開すると、たくさんのユーザーがLPにアクセスしてきます。ページに掲載した情報をちゃんと見てもらえてるのか検証することで、構成やデザインが良かったのかどうかが分かります。

 

【分析】Googleアナリティクスで出来ること

通常のWebサイトの分析ツールで使用されることが多いのがGoogleアナリティクスです。ですのでランディングページに設置するのがスムーズなのがメリットです。以下のような数値データが確認できます。

  • ・流入チャネル、アクセス数、滞在時間、直帰率、次に遷移したページなど
  • ・バナーやボタンのクリック数(イベントトラッキングの設定が必要)
  • ・スクロール率(GTMで設定が必要)

 

レポート

 

【分析】ヒートマップ解析ツールで出来ること

上記のGoogleアナリティクスで分析できないことも、ヒートマップを設置することによってデータを計測することが出来ます。ヒートマップでは以下のようなデータが確認できます。(ツールによって異なります。)

  • ・熟読率(どこでスクロールが止まっているか分かります)
  • ・スクロール率(GAと比較して視覚的に分かりやすいです)
  • ・クリックされた場所(リンクが無い場所でもクリックされていれば分かります)

 

ヒートマップ解析

 

【検証】A/Bテストツールで出来ること

より良いランディングページにするために有効な手段が『A/Bテスト』です。オススメのツールは、グーグルが提供するGoogleオプティマイズです。高機能なのに無料で使えるツールです。

公開時にテストを行えることはもちろん、ページの改善にあたり仮説をたてたものを現状と比較することができます。ちょっとしたテストなら、サーバーのデータをいじらずに、管理画面から設定がすべて完了できます。定期的にWebマーケティングに関わる方は操作に慣れておいて損はありません。

 

A/Bテスト

Googleオプティマイズ:https://marketingplatform.google.com/intl/ja/about/optimize/

 

まとめ

ランディングページの成果は、構成やデザイン段階から勝負がはじまっています。しっかりと準備を行うことで一貫性と訴求力がある『自社の商品の良さを詰め込んだページ』が出来上がります。そうすることで、たくさんの人に知ってもらう事に繋がるのです。

 

ランディングページの相談(無料)をする

 

CONTACT US
制作に関するご相談は、
お気軽にお問い合わせください。

お問い合わせはこちら

お電話でのご注文・お問い合わせ
📞06-4390-1313

受付時間平日 9:00〜18:00
(※土日祝祭日・GW・年末年始は除く)

#
#