成果のあがるランディングページ（LP）の作り方とは？

「ランディングページ（LP）を作ることになったけど、よいランディングページの作り方がわからない」
Web広告が増えた時代で成果の出るランディングページを作るにはどうしたらよいのでしょうか？
この記事ではランディングページを作る手順から必要なスキル、成果が出るポイントまで徹底解説いたします。

ランディングページ（LP）とは

ランディングページとはユーザーがバナーや動画広告、SNSなどから遷移して最初に訪問するページのことを指します。

一般的にサイト訪問者にアクションをさせるためのページであり、サービスに興味を抱いたユーザーへ購入や申し込みなどのアクションを促します。

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

では具体的な制作方法を、制作前から公開後まで段階別に説明いたします。

目標・KPIの設定

コンテンツについて考える前に、まずは目標とKPIを決めましょう。
目標とは「ランディングページ内でユーザーにどのようなアクションを起こしてもらいたいか」ということです。

目標には、下記のような項目があげられます。

• 商品購入
• 資料請求
• 無料登録

次にKPIを設定します。KPIとはKGI（ゴール）を達成するための中間目標のことを指します。例えば、KGIが「年間売上が1億」だとすると、KPIとして「受注件数20件」「採用人員5人」のような形です。

これらの設定はランディングページに限らずコンテンツを作成する上で、何に向かって進んでいけばよいかを判断する指針になるため、後のちの判断材料として非常に重要になります。

ペルソナの分析と訴求軸の作成

ペルソナとは「商品・サービスを買ってくれる、架空の典型的ユーザー像」のことを指し、商品やサービスの企画に利用され、またそれらの改善の際にも用いられます。

詳しくは「マーケティングにおいてペルソナ設定がとても重要！！ペルソナ設定とは何か、方法まで詳しく解説」をご覧ください。

ペルソナを定めたあとは、ペルソナに向けた訴求内容を確定しましょう。

構成（ワイヤーフレーム）の作成

ではコンテンツの作成に取りかかりましょう。ランディングページは主に下記の3つのような構成からなります。

• ファーストビュー
• ボディコピー
• クロージング

各要素についてそれぞれ説明いたします。

ファーストビュー

ファーストビューとはサイトに入ったときにユーザーがはじめに目にする箇所であり、基本的にはサイトの最上部となります。

そのため、ファーストビューではユーザーの興味を惹きつけ、離脱をさせないかが重要になります。

ボディコピー

ボディコピーとはランディングページのメインコンテンツとなり、サービスや商品の詳細を掲載する項目になります。

またボディコピーではストーリー設計をする必要があります。ユーザーがランディングページに流入した際にはどのような感情なのか、ランディングページの各コンテンツではどのように変化していくのかのような順番を考えましょう。

ボディコピーは最も面積が大きく、サービスや商品がどのようにユーザーの役に立つかを説明する箇所となります。ボディコピーは主に下記の5つの構成要素から成り立ちます。

①サービスや商品のメリットとユーザーへの価値

ユーザーが求めているメリットを提示する箇所になります。

②具体的な情報

メリットに対する商品の詳細情報を具体的に示すことで信頼感の担保になります。

③信頼性の担保

商品情報に対して、成分や製造工程・製作者の想いなどのの紹介などを付け加えそれらが信頼できるものであることを提示します。

④客観的な視点

残ったユーザー不安感を払拭するために、客観的な情報を伝えます。メディア掲載やランキング・利用者の声などが多く見られます。

⑤よくある質問

最後にこれまでのコンテンツでは解決できそうにないユーザーの疑問点を解消するために、Q＆Aを作成するといでしょう。ユーザー視点を考え、できるだけ不明点を残さないよう意識することが重要です。

クロージング

クロージングは上部のコンテンツからユーザーの購入意欲を高めた最後にアクションを起こさせるような項目のことを言います。

例えば、商品購入ページに遷移するCTA、セミナー申し込みのためのエントリーフォームなどが上げられるでしょう。CTAに関してはのちほど説明いたします。

デザインソフトウェア（Adobe Photoshop / Illustratorなど）

ランディングページの構成が確定したら、具体的なデザインの作成に移りましょう。使用するツールは主にAdobeのPhotoshopやXDなどです。

デザインで重視すべき点は「ユーザーの目線を考慮した設計」です。ランディングページの目的は何か、訴求したい商品やサービスでどのような印象を与えたいのか、ターゲットはどのような人か、などターゲットに合わせたものを考慮しましょう。具体的な方法はのちほど説明いたします。

基本的にはにデザイナーに依頼することが好ましいですが、自社内でデザイナーがいない企業様もいらっしゃるかと思います。

その際は外部発注を利用しましょう。しかし、外部発注をした際に「発注先の制作物が想像と違う…」といったケースも発生します。そのような事態を防ぐために、双方の認識を事前に揃えておくことが重要です。

詳しくは「クリエイティブの外部発注で認識の齟齬を防ぐためのポイントとは？」にて解説しておりますので、ぜひご覧ください。

コーディング（HTML・CSS・JavaScript）

コーディングとはHTML、CSS、JavaScriptを使用して実際にWebページを構築していく作業です。一般的にはコーディングの知識が必要になるため、コーダーやエンジニアに依頼することになるでしょう。

デザイン同様、社内にリソースがない場合は外部発注することも考慮に入れておきましょう。

ランディングページ公開

コーディングまで完了したらいよいよ公開に移ります。公開時にはアップロードするサーバーやURLの設定、問い合わせ後の対応も考慮しておくことも重要です。

また、ランディングページは制作して終了ではなく、改善運用していくことが前提になります。改善運用の具体的な方法に関しては後述いたします。

成果を出しやすいランディングページの特徴

ここまでランディングページの作り方を段階に分けて説明しました。では成果を出しやすいランディングページの特徴とは一体どのような要素なのでしょうか？

ファーストビュー内に共感するキャッチコピーやメインビジュアルを入れる

先述のとおりファーストビューでは訪れたユーザーをいかに離脱させないかが重要になります。

一般的に人間の脳は視覚的な要素で多くを判断し、目に入る情報のうち約3秒で好感度を判定すると心理学では言われています。
参考：「Eye-tracking studies: first impressions form quickly on the web」

ランディングページの場合も同様でユーザーがファーストビューの情報に求めているものがなければ離脱してしまう可能性が高くなります。

したがって、いかにファーストビューでユーザーが探し求めていた情報で惹きつけるかが重要になります。流入したユーザーを離脱させないためにも、ファーストビュー内のキャッチコピー文は共感を促し興味を引く効果的な要素です。
さらに、メインビジュアルに用いる画像もユーザーの注目を集め、具体的なイメージが浮かびやすくなるようなものを使用しましょう。

そのため、ファーストビューのメインビジュアルとキャッチコピーはユーザーが求めている内容になっているか、イメージしやすい画像になっているかを確認しましょう。この際に制作者だけの確認だと、どうしても先入観が入ってしまう可能性があるため、社内のさまざまな方に確認してもらうのも効果的です。

ランディングページ内の行動意欲が高まる位置にCTAを設置

CTAとは、Call To Actionと言われ、Webサイトに訪れたユーザーにアクションを促す、ボタンやテキスト、画像などを指します。

CTAはユーザーのアクションを促すために重要です。なぜならユーザーによってランディングページを訪れる理由はさまざまであり、目的と異なったCTAを配置しても効果は期待できず、むしろユーザーに嫌悪感を抱かせてしまうからです。

また、ユーザーの行動意欲が高まる瞬間にCTAが設置されていないと、すぐにアクションに移せず、機会損失を招く可能性があります。

CTAでは下記の2点を参考にしてみてください。

1.設置場所

CTAは主にユーザーの行動意欲が高まる箇所に設置しましょう。
ただし、必要以上に設置することはかえって逆効果となるため注意が必要です。

2.デザイン

CTAのデザインによって、ユーザーがアクションを起こすかどうかは大きく変化します。

ベネフィットを提示

成果を出しやすいランディングページの特徴として、ユーザーにとってのベネフィットを伝えていることがあげられます。

ここで注意したいのはベネフィットとはサービスや商品の特徴ではないことです。
ベネフィットとは「ユーザーが利用したあとどのようなメリットを得て、どのような状態になるか」を言います。

流入元から想定されるユーザーのニーズを分析し、仮説建てて検証していくことが重要です。

利用者の声・口コミ情報を掲載

ここまでのコンテンツで、ユーザーはサービスや商品を理解できたとして、それでも不安感が消えずアクションに移らない場合があります。

このような場合には他の利用者の声を掲載しましょう。残った不安感を払拭できる可能性があります。また、利用者の声だけでなく、「〇〇ランキング1位」などの権威的な評価の掲載も効果的です。

ただし、この際に客観的な評価や信頼性のあるものを載せることです。掲載した利用者の声が不信感を抱かせるような内容であった場合、「この口コミを投稿した人は本当に存在しているのか？」などの逆効果を招くことにもなります。

ランディングページを作るときの注意点

「自社の商品やサービスの特徴をわかってほしい」という想いから、すべての機能を掲載してしまうケースがあります。

機能の説明は最小限に

「自社の商品やサービスの特徴をわかってほしい」という想いから、すべての機能を掲載してしまうケースがあります。

しかし、ユーザーがアクションを起こす際は商品の特徴に惹かれるのではなく、ベネフィットとして自分がどのような状態になるかに魅力に感じるときということを意識しておきましょう。

企業側が商品の特徴を推しても、ユーザーにとってどのようなとらえ方をするかはさまざまです。

一方的に多くの情報を与えたところで、ユーザーがベネフィットを感じなければ元も子もありません。どのような機能がユーザーがベネフィットに感じるかを考え、検証し改善していくことが重要です。

ただし、例えば工業製品など、専門的な商材や機能説明を詳細にした方が良い場合もあるため、社内で吟味した後にどのような内容を掲載するかを判断する必要があります。

ファーストビューに情報を詰め込みすぎない

ファーストビューではユーザーの共感を促し、離脱を防ぐことが重要と先述しました。
ここで注意したいのは、ファーストビューに多すぎる情報を掲載してしまうことです。

たしかにある程度ファーストビュー内で完結させることは効果的ですが、やりすぎは厳禁です。かえって何がメリットなのかを理解しづらくなります。

「決定回避の法則」と心理学では言われており、「選択肢が多すぎると、アクションを起こしづらくなる」という心理現象です。

繰り返しにはなりますが、ユーザーがどのようなベネフィットを求めているか、それを伝えるにはどのような表現をするとよいかを常に考え、改善を繰り返していくことが重要です。

ランディングページは運用改善していくことが大切

先述のとおり、ランディングページは制作して完了ではなかなか成果もでません。

効果検証および改善を繰り返すことで、成果の改善を実施していく必要があります。本章ではその具体的な方法を解説します。

解析ツール

ここでは2つのツールを紹介します。

Google Analytics

Google AnalyticsとはWebサイトに訪れたユーザーの解析をおこなうツールです。

例えば性別、年代、使用デバイスなどが分析可能項目としてあげられます。

また、直帰率や離脱率、ページ閲覧時間などもデータとして出力されるため、データに基づき、何を改善すればよいかの仮説を立てることが可能です。

詳しくは「【GAとは？】Googleアナリティクスの導入方法・使い方を分かりやすく解説」で説明しておりますので、ぜひご覧ください。

ヒートマップ

ヒートマップとはサイト内でユーザーがどのような行動をしたかを分析するツールです。

分析可能な項目として、例えばユーザーの目線の動きやマウススクロール、どのコンテンツに時間を割いているかなどがあります。

ランディングページの改善運用では、ユーザーがどのコンテンツを最も見ているかによってより上部に配置したり、企業側が訴求したいコンテンツが想定より刺さりが悪い場合は別の訴求の仕方を考えるなどがあげられます。

詳しくは「ヒートマップを活用したサイト改善の方法とは」で説明しておりますので、ぜひご覧ください。

A/Bテスト

次に改善運用の手法としてA/Bテストを紹介します。

A/Bテストとは検証する際にAとBの2パターンを用意し、どちらがより成果を出せるのかを検証するテストのことをいいます。Webサイトに限らず、バナーや動画などの広告クリエイティブで多く用いられる手法です。

A/Bテストの便利なツールとしてGoogleオプティマイズがあります。

Googleオプティマイズは先述のGoogle Analyticsと連携させ、アカウントを持っていれば誰でも利用できる無料ツールです。テスト結果の集計が容易になり、改善運用をより効率的におこなうことができます。

詳しくは「Googleオプティマイズの使い方‐導入方法から改善まで徹底解説」で説明しておりますので、ぜひご覧ください。

また、A/Bテストと似たものとして「多変量テスト」もあります。これは複数の箇所を変更し、考えうる組み合わせをテストする手法です。A/Bテストと違い、考えうる全てのパターンを検証するため、労力はかかりますが、網羅的にテストすることができます。

弊社事例

最後に実際に弊社が担当したランディングページの例を紹介いたします。
本記事で紹介する例以外にも多数の実績がございますので、ご興味のあるかたは「実績紹介｜株式会社デジタルアイデンティティ」よりご確認ください。

全国生協連「総合保障型」記事型ランディングページ

こちらのランディングページはファイナンシャルプランナーが解説していく形のランディングページです。

ユーザーのペルソナおよび訴求軸を分析し、生命保険の比較検討をしているユーザーへ、ニュースアプリからの流入を想定し制作しました。

信頼性を担保するために専門家の情報や、保険を意識していないようなユーザーに対しても「総合保障型」の認知を重視しています。

堀江薬局「調爽源」ランディングページ

こちらは婦人科領域や不妊症を中心とした漢方薬局を専門としている堀江薬局様のランディングページです。

食物繊維などのこだわった素材で信頼性を担保し、スッキリする気持ちよさというベネフィットを伝えるような流れで制作しました。

また、デザインは配色を豊富にすることで盛り上がりを表現しながら、切替や段落を調整しユーザーの読みやすさを重視しております。

まとめ

本記事ではランディングページの作り方や改善運用方法、注意点について解説しました。

構成や使用ツール、ユーザーのベネフィットを意識した設計などを心がけ、自社のサービスや商品を効果的に訴求しましょう。

また、これからランディングページの制作を検討されていたり、既存のランディングページの改善運用を実施しようと考えている企業様は、先述のとおり多くの実績がございますので専門のスタッフがご支援いたします。
お気軽にお問い合わせください。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら