ランディングページの作り方で効果が決まる!絶対押さえるべき基本とコツ

Web制作ノウハウ

ランディングページの作り方で効果が決まる!絶対押さえるべき基本とコツ

ぱら

WRITERぱら 広報

  • TOP
  • ブログ
  • ランディングページの作り方で効果が決まる!絶対押さえるべき基本とコツ

SAHRE

ランディングページの作り方で効果が決まる!絶対押さえるべき基本とコツ

Web施策のなかでもランディングページの作成を検討されている担当者の方も多いのではないでしょうか。
ランディングページにもいくつか考え方があります。

「集客できるLPお願いね!」
と上司にいわれてお困りのあなた。

「何からはじめていいかわからない!」
という方のためにランディングページの意味や注意点、見てもらえるLPの作り方についてご説明します。

もくじ

  1. ランディングページの役割と目的
  2. ランディングページの作り方
    • 目的、KPIの設定
    • ペルソナ設定
    • 情報整理
    • LPの構成(ワイヤーフレーム)
    • デザイン・コーディング
    • 公開、運用
  3. ランディングページ制作時の注意点
    • ファーストビューの位置
    • ストーリー性
    • フォームのアクセシビリティ
    • LPO
  4. ランディングページの事例集
  5. まとめ

ランディングページの役割と目的

ランディングページのランディング(landing)とは「着地する」という意味。
つまり、ユーザーが最初に着地する、訪問するページのことをランディングページと言います。
外部リンクやSNS、QRコードⓇ(※)などから遷移して最初に訪問するページのことです。
もしこの記事に検索エンジンからやってきたという方がいれば、この記事もランディングページということになりますね。

ただ広く知られているLPは、リスティング広告などから遷移させユーザーに購買、問い合わせを促すような長い1枚もののページの場合が多いです。
ユーザーにはアクションをしてほしいので商品やサービスがどんな人におすすめなのか、ベネフィット、効果について詳しく書かれています。
1ページ完結で外部へのリンクもなく、申し込みフォームへのリンクのみということが多いです。

この記事でご紹介するLPの目的は、「ユーザーに何かしらのアクション(購入、問い合わせ)をさせるためのもの」ということになります。

※「QRコード」は株式会社デンソーウェーブの登録商標です。

ランディングページの作り方

ではここから流れに沿ってランディングページの作り方をご紹介してきます。
具体的な流れは別の記事でも詳しくご紹介しています。
複数ページにわたるサイトも1ページのLPも、基本的な流れは同じなので、ぜひ参考にしてみてください。
【関連記事】ホームページ制作の流れを徹底解説!Web制作フローの基礎知識から担当者のタスクリストまで

目的、KPIの設定

まずはLPを作る目的を決めましょう。
半年後、1年後に商品、サービスがどうなっていてほしいか、ユーザーにどうなっていてほしいかなどを検討すると良いでしょう。
そして、数値として

  • 1ヶ月間のCV(コンバージョン)数を50件
  • LPからの申し込みを半年で300万円

など、KPIも設定しておきましょう。

ペルソナ設定

Webサイト制作では重要なペルソナ。
他の記事でも何度かご紹介していますが、ペルソナとは売り出していく商品やサービスの具体的なユーザー像のことです。
ペルソナをしっかりと定めておくと、LP制作でも方向性のブレが少なくなります。
ペルソナ設定の仕方は以下の記事を読んでみてくださいね。
【関連記事】BtoB企業のペルソナ設定は必要?設定方法と注意点を徹底解説

情報整理

商品・サービスを販売している当事者の立場だと、おすすめしたいポイントはたくさんあり、良い部分もたくさん知っていますよね。
ですがユーザーからすると、1ページにあれもこれもと情報が詰め込まれたLPは「結局何が言いたいの?」ということになりかねません。

上記で設定したペルソナが一番ほしい情報はなにかを考え、「ほしかった情報が得られる!」と感じさせる内容にしましょう。

LPの構成(ワイヤーフレーム)

KPI設定や情報整理が終わったら構成に入っていきます。
サイト構成を落とし込んだものをワイヤーフレーム(画面設計書)といいますが、このフェーズは基本的に制作会社が担当します。

どの情報をどこに配置するか、どのようなテキストや図で表現するかなど、デザインになる前の骨組みにあたります。
ランディングページの制作を依頼する場合、構成は重要なポイントなので、目的にあったものになるようにチェックしておきましょう。

デザイン・コーディング

構成ができたら実制作に入ります。
デザインを起こし、Webブラウザで見られる状態にするコーディングを行います。
このフェーズも制作会社が担当することが多いですね。
商品のイメージと合っているか、文字は見やすいかなどさまざまな角度からチェックを行います。

特に商品が一般消費者向けの場合、今はスマホで見ることが主流のためスマホでの見やすさ、アクションのしやすさを心がけることが大切です。
PCページはあえて作らずに、スマホのみのLPを制作することもあります。

また、問い合わせフォームに関しては記載していませんが、フォームの制作が必要な場合はシステム開発が必要になるので注意しましょう。
制作会社に確認をして事前に依頼しておくようにすると良いでしょう。

公開、運用

制作が完了したらいよいよ公開です。
LPは冒頭でもお話したとおり、ユーザーが着地するページです。
着地してもらうために、例えばリスティング広告やSNSでの拡散、メディア媒体での紹介など、訪問してもらうための工夫を凝らす必要があります。

それでもLPはすぐ成果が出るものではありません。
効果を見て検証しながら運用していくことがLPの効果をアップさせる方法です。

ランディングページ制作時の注意点

ランディングページ制作時の注意点

ランディングページを制作する際に注意するべきポイントを4つまとめてみましたのでそれぞれご説明していきます。

ファーストビューの位置

ファーストビューとは、Webページを表示したときにスクロールせずに最初に見える範囲のことです。

ファーストビューはどのWebサイト全般で大切なものですが、LPではユーザーにアクションをしてもらうことが目的なのでとくに重要。
ファーストビューでの直帰率は平均で70%ともいわれています。
せっかく訪問してくれた人に直帰されないために、ファーストビューで商品がいかに魅力的かをこのエリアで伝えなければならないのです。

ファーストビューでの注意点はおもに

  • 何の商品か見た瞬間にすぐにわかること
  • たくさんの情報を詰め込みすぎない
  • お申し込みボタンの配置
  • 関連性の薄いデザインや画像を使用しない

などがあげられます。

ストーリー性

LPは縦長のページであることが多く、ユーザーはもちろん上から順にスクロールして閲覧しますよね。
商品の購買に至るには、このスクロールの間で購買意欲を刺激するストーリーが必要になるわけです。
購買プロセスとして有名なものでは「AIDA」、「AIDMA」、「AISCEAS」、「AISASⓇ(※)」の法則などがありますが、そこにストーリー性をもたせます。
例えば家電商品のLPの場合、

  1. 時間がないとお悩みの方はこれを使えば解決!
    (結果を提示することで商品の情報を知りたくなる)
  2. いつも帰ってきてからの準備が大変
    (これまでの悩みや従来の解決方法の紹介でユーザーが納得)
  3. 自社商品と従来品との違いを紹介
    (商品を使うことでのメリットや口コミ、評価の高さを知る)
  4. 商品のベネフィットの強調、きちんとデメリットやユーザーの疑問点を解決
    (買いたくなる)

あくまで一例ですが、このような順番でストーリー性を持たせユーザーの購買意欲をかきたてます。

※「AISAS」は株式会社電通の登録商標です。

フォームのアクセシビリティ

「購入を決意してるユーザーならフォームは改善しなくていいんじゃないの?」
と思われる方もいるかもしれませんが、いざLPから購入を決意しても、お申込みフォームの入力項目の数が膨大だったらどうでしょうか?
めんどくささから「やっぱりやめとこうかな…」と感じてしまう人もいると思います。

こういったフォームの使い勝手もLP制作においてはとても重要です。
詳しいフォームの最適化については以下の記事でご紹介しているのでぜひ読んでみてください!
【関連記事】EFO(入力フォーム最適化)とは?~フォームを改善して問い合わせ数を増やす方法~

LPO

LPO(Landing Page Optimization)とは、「ランディングページ最適化」のことで、公開して終わりではなく、PDCAを回しながらLPを改善して効果を高めることです。

同じ訴求内容のLPでも、デザインやお申込みボタンの位置や色、テキストの変更などで成果は変わってきます。
試行錯誤しながらテストしていくことでLPの成果を上げることがLPOなのです。

制作、公開もとても重要ですが、LPは運用していくことの方が重要といえるかもしれません。

ランディングページの事例集

ランディングページの事例集

ここまでいろいろご紹介しましたが、実際に公開されているランディングページを参考にすることも重要ですよね。ランディングページをたくさん掲載している事例集をご紹介しますので、ぜひ今後の参考にしてみてください。

LP ARCHIVE

見やすくクオリティの高いLPを集めたポータルサイトです。
数万点に及ぶLPの参考が見られるので、お手本にしたいものが見つかりそうですね。
LP ARCHIVEを見る

WebDesignClip

国内だけでなく海外のWebデザインも集めた事例集です。
ランディングページのリンク集からは魅力的なLPがたくさん並んでいます。
WebDesignClipを見る

ランディングページ(LP)集めました。

Webディレクターだという管理人さんが立ち上げたサイトです。
カテゴリや色あいで探せたり、過去のアーカイブも見ることができます。
ランディングページ(LP)集めました。を見る

まとめ

いかがだったでしょうか。
ランディングページはたった1ページですが、ユーザーはそれを見て商品、サービスの良し悪しを判断するといっても過言ではありません。
いいところをただ詰め込んだだけのLPではなく、購入、問い合わせをしてもらうために戦略的な構成が求められます。

ジーピーオンラインは、広告、ブランディング問わずランディングページの制作実績も豊富です。
戦略にお悩みの際はぜひ一度お問い合わせください!

この記事の著者
ぱら

WRITERぱら 広報

コンテンツマーケティング会社でSNS運用を経験したのち、2018年にジーピーオンライン入社。Webサイト制作に関する情報をWeb担当者さま目線で分かりやすくお伝えします。

関連記事
制作実績

制作実績一覧へ