ランディングページの良し悪しは、自社の商品やサービスの売上に大きく影響します。
例え、良い商品やサービスを提供していてもランディングページの出来によっては、成果につながらないこともあるでしょう。
しかし、
「ランディングページの作り方が分からない…」
「どんなポイントを意識すれば良いの？」
とランディングページ作りに悩みがある人もいるかもしれません。

本記事ではそのような悩みがある人に向けて、

• 成果の出るランディングページの作り方
• 成果が出る5つのポイント
• ランディングページ作成後の注意点

について解説していきます。
ランディングページで成果を出したいという人はぜひ参考にしてください。

ランディングページとは

ランディングページ（LP）とは、ユーザーが最初に訪問したページを指します。URLを直接入力すれば、どんなページでもある意味ランディングページとも言えますが、一般的には広告やCTAボタン（※）をクリックした遷移先のページを指すことが多いです。
（※Webサイト内にあるアクションを促すためのボタン）

ランディングページには以下のような特徴があります。

• 1ページで作られていることが多い
• 他ページへのリンク（外部リンク）は基本的にはない
• 特定の商品（サービス）の紹介や資料請求などが書かれている
• 視覚的に訴える要素が強い
• SEO（自然検索）による流入は不向き

会社や事業を認知させるトップページに対して、ランディングページはユーザーのアクションの誘導を目的としています。

ランディングページのメリット

ランディングページは、基本的に1ページで完結するため、ユーザーの欲しい情報だけを詰め込めます。つまり、回遊率を目的とする通常のページと比べて離脱率が少なく、効果を得やすいことがメリットです。
また、通常のページと比べてデザインの自由度が高いため、魅力的な画像やマンガを使った視覚に訴えた魅せ方もできます。

ランディングページのデメリット

ランディングページの制作には、ライティング・デザイン・コーディングなど、あらゆるスキルが求められます。ホームページ制作会社など外部に依頼もできますが、その場合、約50万円ほどの費用が必要です。
また、広告の運用作業や結果に基づいたランディングページの変更など、定期的な見直し・作業などの手間がかかるのもデメリットといえるでしょう。

ランディングページの作り方【6つの手順】

ランディングページを作りたいけど、作り方が分からないという人のために、ここではランディングページの基本的な作り方について解説します。
ランディングページ作成には、大きく分けて以下の6つの手順が必要です。

• 目的・ターゲットを決める
• 訴求軸を決める
• ワイヤーフレームを決める
• ページのデザインを決める
• コーディングを行う
• 効果測定と改善をする

それぞれ解説します。

【手順1】目的・ターゲットを決める

目的とターゲットを明確にすることは、ランディングページを作る上でとても重要です。

目的

目的とは、ユーザーに取ってほしい具体的行動です。
以下が具体的行動の例となります。

• 資料請求を増やす
• 商品の購入数を増やす
• 会員登録に促す

あれもこれもと目的を増やすのではなく、シンプルで明確にすることが重要です。

ターゲット

ターゲットとは、目的としたアクションを起こしてほしいユーザー層を指します。
「30代」など抽象的なユーザーではなく、特定の一人に向けたユーザー層を想定することがポイントです。
（この明確なユーザー層のことを”ペルソナ像”と呼びます）
ペルソナ像を設定するときの代表的な項目は以下です。

• 性別
• 年齢
• 家族構成
• 趣味やライフスタイル
• 仕事
• 現在の悩み

ペルソナ像を具体的に決めておくことで、効果の高い訴求が生まれやすくなります。

【手順2】訴求軸を決める

ターゲットを絞り込んだあとは、想定したペルソナ像に向けた効果の高い訴求軸を考えます。
訴求軸決定のポイントは以下の4つです。

• 想定したペルソナ像がどんなことで悩んでいるかを書き出す
• 商品やサービスの特長を分析する
• 競合他社の商品と比較し、自社にしか出せない魅力を伝えられるようにする
• ペルソナ像に対してのベネフィットを考える

（※ベネフィット…商品によって与えられるユーザーの未来や変化）

訴求軸の決定は、ユーザー視点を意識することが何よりも重要です。
目的やターゲットを明確にして訴求軸がぶれないようにしていきましょう。

【手順3】ワイヤーフレームを決める

ワイヤーフレームとは、ランディングページの構成・設計です。
ランディングページのワイヤーフレームは以下の3つで成り立っています。

1. ファーストビュー
2. ボディコピー
3. クロージング

ファーストビュー

ファーストビューとは、ランディングページにアクセスしたときの一番はじめに表示される画面を指します。ユーザーはファーストビューを見て約3秒で自分にとって価値があるかを判断するため、非常に重要なポイントです。
ファーストビューで離脱されないためのポイントは以下のようなものが挙げられます。

• 目を惹くアイキャッチ画像を入れる
• 短いフレーズで商品のメリットやベネフィットを伝える
• スクロールを促すような文章や仕組みを取り入れる

ファーストビューのデザインに迷った際は、他社のファーストビューを参考にするのもオススメです。魅力的なファーストビューを作りましょう。

ボディコピー

ボディコピーとは、商品やサービスの魅力を伝える文章を指します。
ファーストビューで興味をもったユーザーに対して、さらに詳しく知りたいと思ってもらうことを心掛けましょう。
ボディコピー作りに取り入れるポイントは以下です。

• ターゲットの抱える悩み
• 悩みの解決につながる根拠
• 具体的な効果（数値による実績やお客様の声など）
• 競合より優れている点
• 検索キーワード

ユーザーの興味関心をくすぐり、行動へと向かわせるボディコピーを意識するのが大切です。

クロージング

クロージングはランディングページの締めの部分を指します。
クロージング作成の際は以下の要素を含めましょう。

• 魅力的なオファー（期間限定、特典など）
• 分かりやすく簡潔なフォーム
• CTAボタンのデザインや位置の工夫

（※CTAボタン…アクションを促すボタン）

ファーストビューやボディコピーで商品やサービスに魅力を感じていても、決断に迷うユーザーも少なくありません。そんなユーザーに対して、行動を引き起こさせるクロージングを意識するのが大切です。

【手順4】ページのデザインを決める

ワイヤーフレームで全体の内容と流れを押さえたあとは、ページのデザインを考えます。
全体的なカラーやフォントサイズ、画像選びなどデザインはとても奥が深いです。
力強く見せたいときは赤系、暖かさを感じてほしい場合にはオレンジ系、クールな雰囲気を出したいときは青系など、色によってユーザーに与える印象は大きく変わります。自社商品に合う色選びや派手になりすぎないようにすることも大切です。
デザインが上手く作れないときは以下を検討してみましょう。

• 他社のランディングページのデザインを参考にする
• デザインテンプレートを利用する
• クラウドソーシングサイトで外部に発注する

【手順5】コーディングを行う

ランディングページは最後にコーディング作業をする必要があります。
コーディングとは、HTML・CSS・Javascriptなどの言語を使って、ソースコードを作成する作業です。
（※ソースコード…Webサイトに内容を理解させるための記述）
コーディングを行うことで、

• ページの見やすさを改善する
• ページ評価を高める
• PCやスマートフォンなど端末によるデザイン崩れを無くす
• 動的な配信をする

などが可能になります。
コーディングはWebサイトを作る上で非常に重要ですが、高度なスキルが求められます。自社でコーディングに長けた人材がいない場合には、コーディング支援ツールの利用や外部への依頼を検討してください。

【手順6】効果測定と改善をする

ランディングページは作成して終わりではなく、効果を出すことが大切です。
運用後は定期的に効果測定をして、現状の成果を分析しましょう。
効果測定におすすめなのがヒートマップツールです。
ヒートマップツールを使うことで、

• 離脱したポイント
• クリックされたかどうか
• スクロール率

などが分かります。
この結果によって「ファーストビューに魅力がないのか？」「キャッチコピーが悪いのか？」「ボタンの位置が良くないのか？」など、改善のポイントが見えてくるはずです。
効果測定と改善を繰り返し、より効果の出るランディングページを運用してください。

ランディングページで成果を出すための5つのポイント！

ランディングページ制作は、商品やサービスの売上に貢献する重要な戦略といえるでしょう。
ここではさらに成果を出すために、ランディングページ制作に意識すべき5つのポイントを紹介します。

①魅力ある文章で差を付ける

ランディングページの文章は、ユーザーの行動促進につながる大切な要素です。
実績やメリットを伝えるのは大切ですが「宣伝っぽくて胡散臭い」と思われてしまう文章にならないように注意しましょう。
ランディングページにおける文章作りのポイントは、行動に至るまでの一連のストーリーを意識することです。
ストーリー性の出るライティングの型をいくつか紹介します。

PASONAの法則

①Problem：問題
　→ユーザーが抱えている問題

②Agitation：扇動
　→問題をさらに意識させる

③Solution：解決策
　→問題は商品やサービスによって解決できること

④Narrow down：絞込
　→期間限定など特別感を演出する

⑤Action：行動
　→行動を促す、最後の一押しを加える

ストーリーフォーミュラ

①似ている現状

②挫折
　→想定したユーザーの現状や挫折を想起させる

③きっかけ
　→あるきっかけによって現状の変化が起きる

④成功体験
　→商品・サービスを試したことによって成功する

⑤成功理由の分析
　→なぜなら商品・サービスには〇〇のメリットがあるから

⑥他者の成功事例
　→商品・サービスを使った他者は〇〇になった（実績）

⑦行動を促す
　→行動を促す、最後の一押しを加える

AIDAの法則

①Attention：注意
　→「えっ？」「それ本当？」と思わせられるようにユーザーの注意を引く

②Interest：興味
　→ユーザーの興味が出るような商品・サービスの特長を伝える

③Desire：欲求
　→商品・サービスによって得られるメリットやベネフィットを伝える

④Action：行動
　→行動を促す、最後の一押しを加える

どのライティングにおいてもユーザー視点を持ち、共感や商品によって得られる未来を伝えることが非常に大切です。自社商品の魅力が伝わる文章の型を選ぶようにしましょう。

②商品の魅力を最大限に伝える

ランディングページで紹介する商品・サービスは、最大限に魅力が伝わるように工夫しましょう。
魅力が伝わる工夫の例としては、以下のようなものがあります。

• より魅力的に見える画像を選定する
• 他社商品と比較したときの良さを示す
• 実績を示すときは具体的な数字を含める
• 安心材料を伝える（レビュー、F&Q、アフターサポートなど）

商品やサービスの魅力を伝えることは大切ですが「10キロ痩せる」「お客様満足度100％」など、大げさな表現や事実を偽った表現は信頼性を損なうどころか、景品表示法に触れてしまうため十分に注意してください。

③広告文との関連性を意識する

ランディングページで成果を出すためには、広告文との関連性に注意してください。
「広告文では〇〇と書いてあったのに、クリックした先のページではその情報が書かれていなかった」など、クリックした先のページを見てがっかりした経験はありませんか？
もしもそのような状況になった場合、ユーザーは自分にとって価値のないページと判断し、高確率で離脱します。
広告文に書かれている内容を踏まえ、整合性について確認した上でランディングページを作成しましょう。

④A/Bテストを実施する

いかに魅力的なランディングページを作成できたとしても、必ず効果が出せるとは限りません。
手間はかかりますが、ランディングページを2つ作成し、A/Bテストを実施することをおすすめします。
（※A/Bテスト…2つのページをランダムにユーザーに表示して効果を比較する方法）

A/Bテストを一定期間実施することで、商品をどのように訴求すれば売れるかが分かります。
A/Bテストでは以下のいずれかの点で変化をつけましょう。

• ファーストビューの見栄えを変化させる
• キャッチコピー（文章）を変化させる
• フォントサイズや画像サイズを変化させる
• CTAボタンのデザインを変化させる

A/Bテストによる分析と改善を繰り返すことで、ユーザーに刺さる効果的なランディングページを作成できます。

⑤フォームを最適化する

ファーストビューや文章に拘りすぎて意外と抜けてしまうのが、フォームの最適化です。
せっかく購入のクリックを押してもらったのに、フォームによって「やっぱりやめた」とならないようにしましょう。
フォームの最適化で注意する点は以下のようなものがあります。

• 見やすくシンプルな設計にする
• 入力する項目数はなるべく減らす
• 氏名を打つと自動的にフリガナも入力されるようにする
• 全角入力を自動的に半角入力へ変換させる
• 電話番号は項目を分けずに入力できるようにする
• 入力漏れを分かりやすく表示する

フォームは離脱率に関わる重要な要素です。
以上の点に気を付けて、ユーザーにとってストレスの無いフォームを作成してください。

ランディングページ作成後の注意点

ここまでは、成果の出るランディングページの作り方やポイントについて解説しました。
最後に作成後の注意点についても紹介します。

スマートフォンユーザーに配慮する

スマートフォンの普及に伴い、サイトの閲覧をスマートフォンを使うユーザーは年々増えている状況です。
そのため、スマートフォン表示を必ず確認するのがおすすめです。
気を付けるポイントは以下の3つが挙げられます。

• フォントサイズは適切か
• 画像がきちんと表示されているか
• 読みにくい改行になっていないか

PCでもスマートフォンでも見栄えの良いランディングページを作成しましょう。

表示速度を意識する

表示速度は離脱率に関わる大切な要素です。
画像やJavascriptを使った動的コンテンツを盛り込んだランディングページの場合、読み込みに時間がかかる可能性もあります。

TinyJPGなど画像の圧縮加工ができるサイトを利用して、画像による負担を減らすことを意識しましょう。
またPage speed insightsでは、速度の測定や問題点の洗い出しをすることも可能です。
ユーザーの利便性を高めるため、細かい部分への配慮を意識することで、成果は大きく変わるはずです。

ユーザー目線を意識したページ作りを

ランディングページは目的やターゲットを明確にし、そのユーザーに向けた訴求を考えることが何よりも大切です。
また制作後は、より良いランディングページにするために分析と改善を続けましょう。
本記事では、ランディングページの作り方や成果の出るポイントをまとめています。
ランディングページ作りの参考にしていただけたら幸いです。