Readdy AI

【初心者向け】ランディングページ(LP)の作り方を解説!構成・ポイントも

Cover Image for 【初心者向け】ランディングページ(LP)の作り方を解説!構成・ポイントも

ランディングページ(LP)の作り方を初心者向けに解説。LPの構成・目的・効果から制作手順までを体系的に整理します。さらにノーコードツールReaddyを使ったランディングページ作成方法も紹介します。

フランク

フランク

フランクはReaddy.aiの創業者です。 10年以上のプロダクト開発経験を持つ元デベロッパーで、優れたデザインに強いこだわりがあります。 初めてスタートアップを立ち上げた当時に「こんなツールがあったらよかった」と感じたものを、自らの手で形にしています。

LPは、せっかく作っても「成果が上がらない」と感じるケースは少なくありません。

そもそも初心者が自作しようとすると、何を書くべきか分からなかったり、ホームページと大差ないページができてしまったりと作り方に悩んでしまうことも多いでしょう。

その原因は、デザインや文章が悪いのではなく、“LPの設計”にあるかもしれません。

本記事では、これからLP制作に取り組む初心者や、成果が出ないと悩む制作担当者に向けて、ランディングページの基本から作り方、成果を高めるポイントまでを体系的に解説します。

ランディングページ(LP)とは?

ランディングページ(LP)とは、SNS広告や検索結果などからサイトに訪問したユーザーが最初に見ることになる、1枚ものの縦長のWebページです。

最大の特徴は、商品購入や問い合わせ、資料請求など、ひとつの行動(コンバージョン)に特化して設計されている点にあります。

ランディングページの構成と目的、効果の基本項目について解説します。

ランディングページの構成

一般的にランディングページは、以下の要素で構成されています。

キャッチコピー&アイキャッチ画像

サイトの顔であり、ページを開いた瞬間にユーザーが目にするトップ画面

「誰の、どんな悩みを解決するページか」を伝える

CTA(アクション喚起)ボタン

ユーザーの行動を促すボタン

「購入する」「申し込む」「無料で試す」など、行動を明確に示し促す

導入文

LPに訪れたユーザーの悩みに共感する

ユーザーがページを見て自分ごととして捉えてもらうことが狙い

商品やサービスの情報

商品やサービスの詳細を解説する

特徴や強みをアピールすることはもちろん、他者との違いを具体的に説明

メディア掲載実績・体験談

口コミによってダメ押しを図る

第三者の評価を示して、商品やサービスの信頼性を高める

よくある質問・導入の流れ

ユーザーの行動を促す

商品やサービスに対してユーザーが抱く不安や疑問を解消し、行動に対する心理的なハードルを下げる

入力フォーム行動を完結させるための最終着地点

ランディングページの目的

LPの目的はとてもシンプルで、ページを訪れたユーザーに購入や申し込みといった明確なアクションを起こしてもらうことです。

網羅的にサービスや他の商品を紹介するホームページとは違い、ユーザーが読んだ流れのまま購入や申し込み(コンバージョン)へと行動してもらうよう設計されています。

ランディングページとはいわば、見せるためのページではなく、行動させるためのページといえるでしょう。

ランディングページの効果

LPは、目的に沿って適切に設計すれば、広告の費用対効果を高めることができます。

商品やサービスを限定し、載せる情報をあえて絞り込んでいるため、ユーザーの意思決定の迷いを防ぎ、コンバージョン(CV)へと導く効果があります。

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

では、実際にLPを作る流れを解説します。

これは「制作会社に依頼する場合」も「自作する場合」も、考えるべき根幹の部分は同じです。

今回は、実際に公開されている資生堂「エリクシール」のランディングページを教科書として、プロがどのようにページを設計しているのかを紐解きながら解説します。  

資生堂「エリクシール」のLPの全体

資生堂「エリクシール」のLPの全体(左からページ上部・中部・下部)

目的・ゴールを明確にする

LPを作る前に、まず「このページのゴールは何か?」を決めます。

実際に資生堂「エリクシール」のLPを確認してみましょう。

資生堂「エリクシール」のLPの中にあるCTA「ご購入はこちら」

各商品の下部には、上記のように「取扱店舗を探す」や「ご購入はこちら」といったボタンを配置しています。

このLPの最大の目的は、「商品の認知」だけでなく、最終的に「店頭へ足を運ばせるか、公式オンラインショップで購入してもらうこと」にあると分かります。

ゴールが明確だからこそ、ユーザーが「欲しい」と思った瞬間にいつでも押せる位置にボタンを配置するなど、導線設計に迷いがありません。

こういったボタンやリンクを専門用語で「CTA=Call to Action」と呼びます。

ユーザーに何か行動を起こさせる場所であり、そもそものLPから購入や来店、問い合わせを促すための最も重要なパーツです。

ターゲット(ペルソナ)を設定する

次に「誰に」伝えるかを決めます。

資生堂「エリクシール」のLPのキャッチコピー「エリクシールの『つや玉』」や、モデルの石田ゆり子さん、そして「大人の肌に」という文言に注目してください。

資生堂「エリクシール」のLPのファーストビュー

ここで想定しているターゲットは、「30代〜50代の、肌のハリや衰えが気になり始めた女性」です。

彼女たちが好む「上品さ」「清潔感」「科学的な信頼感」を意識したトーン&マナーで統一しており、ターゲットに深く刺さる設計になっています。

構成(ワイヤーフレーム)を作る

スプレッドシート(Excel)で構成を作っている様子

いきなりデザインをするのではなく、まずは「何をどの順番で伝えるか」という構成(ワイヤーフレーム)を作ります。

資生堂「エリクシール」のLPの構成は見事なまでに以下の「売れるLPの鉄板法則」に沿っています。

  1. **ファーストビュー:**タレントと商品画像で「何のページか」を一瞬で理解させる。
  2. 権威付け:「売上No.1」などの実績を見せて信頼を得る。
  3. 問題提起・共感:「大人の肌には…」とターゲットの悩みに寄り添う。
  4. **解決策(商品提示):**商品の特徴や成分(コラーゲン・サイエンスなど)を解説。
  5. ベネフィット(未来):「つや玉」が輝く肌になるイメージの共有。
  6. **クロージング:**商品ラインナップを見せ、購入ボタンへ誘導する。

この順番で情報を出すことで、ユーザーの心理を「興味」から「納得」、そして「行動」へとスムーズに誘導しています。

コピーとデザインを作る

構成が決まったら、実際に文章とデザインを作り込みます。

資生堂「エリクシール」のLPのデザインを確認すると、ブランドカラーであるゴールドと白を基調とした統一感のある配色を採用しています。

資生堂「エリクシール」のLPの中にある見出しの一部

また、文字の大きさにもメリハリがあり、スマホでスクロールしながらでも「つや玉」「厳選された成分」といった重要なキーワードだけが目に飛び込んでくるように工夫しています。

これが「読ませる」のではなく「見させる」デザインです。

技術実装(ツール)

デザインができあがったら、それをWebブラウザで表示するように実装(コーディング)します。

資生堂「エリクシール」のLPでは、スクロールに合わせてふわっと文字を表示するアニメーションや、スライダー機能などの技術も実装しています。

資生堂「エリクシール」のLPの中にある「スライド部分」

これらはユーザーを飽きさせないための重要な演出です。

自作する場合は、Readdyのようなツールを使えば、こうした動きのある実装もノーコードで簡単に行えます。

公開して効果測定・改善

GSCで効果測定・改善

公開後は、数値データをもとに改善を継続します。

大規模なLPでは、購入ボタンの色やファーストビューの写真などについてABテストを実施し、成果を検証するケースが一般的です。

例えば、「Google Search Console」などの無料ツールを活用すれば、検索流入やクリック率などのデータを確認できます。

LPは公開して終わりではなく、数値を分析しながら改善を重ねることで成果を高めていくものです。

ノーコードでランディングページを自作する方法

HTMLやCSSの知識を身につけてゼロから制作する方法もありますが、一定の学習時間と制作工数が必要になります。

しかし、今は「Readdy(リーディー)」のようなAI搭載のノーコードツールがあります。

これを活用すれば、専門知識がなくても一定水準のLPを効率的に作成可能です。

その手順をステップバイステップで紹介します。

ステップ1:アカウント作成

Readdyのトップページ

まずは、Readdy公式サイトにアクセスし、アカウントを作成します。

Readdyのアカウント作成画面

Googleアカウントがあれば数秒で完了します。

ステップ2:AIに「作りたいLP」を伝える

Readdyのホームページ制作画面

ログインしたら、AIとのチャット画面が開きます。

ここに、あなたの作りたいLPのイメージを入力します。

例)
美容液のランディングページを作って。ターゲットは30代女性。オーガニック成分配合で、初回限定1,980円のキャンペーンを訴求したい。清潔感のある白とピンクのデザインで。

といった形でも問題ありません。

もちろん、こだわりたい部分をもっと細かく指定すればさらにイメージ通りのLPに仕上がります。

ステップ3:AIが自動で構成・デザイン・文章を生成

生成されたセクション構造

指示を出すと、AIがその内容の解析を始めます。

少しだけ待つと、上の図のような「セクションリスト」の画面に切り替わります。

これはどんな画面構成のLPにするか、その内容をある程度決めているところです。

今回の構成は以下のような提案でした。

Hero・・・LPのヒーローエリア。ヒーローエリアは最上部の訪れた顧客が一番最初に目にする場所のことをいいます。

Benefits・・・商品のベネフィット。これは商品を買うとどんな効果が得られるかを訴える場所です。

Ingredients・・・商品の原材料を訴える場所を設定しています。

Pricing&Campaign・・・価格とキャンペーンを訴える場所です。

Testimonials・・・いわゆる「お客様の声」が該当します。

Call to Action・・・先ほども出てきたCTA(購入ボタンや問い合わせボタン)です。

ここでもし追加したいセクションがあれば「+セクションを追加」ボタンから追加していきましょう。

ステップ4:LPのロゴの生成

ロゴの生成画面

次に進むとロゴの生成画面になります。

気に入ったロゴであればそのまま「次へ」をクリックします。

もし、気に入らない場合は「再生成」ボタン、もしくは決まったロゴがある場合は「Logoアップロード」から登録します。

「次へ」をクリックすると、以下のような画面に切り替わります。

作業中の画面

あとは数分待つだけで、キャッチコピーから構成、デザイン、ダミー画像までが入ったLPの初稿があっという間にできあがります。

従来は専門知識と多くの制作工数を必要としていた作業も、AIの活用により短時間で自動生成が可能になっています。

制作の効率化という点でも、大きな変化が起きているといえるでしょう。

ステップ5:編集・調整して公開

わずかなステップで生成されたLP

(左からページ上部・下部)

ほんの数分で上図のようなLPを生成します。

ここから生成したLPに、実際の商品写真や文章などの調整も可能です。

ランディングページの効果を高めるポイント

LPの最大の目的であるCVを軸に考えると、LPは作成後にLPO(ランディングページ最適化)として、定期的な見直しが不可欠です。

  • ファーストビューのキャッチコピーや画像を変える
  • CTAボタンの位置や配色を変える
  • LPページの構成の順番を入れ替える

これらの作業はほんの少しであっても、ユーザーのLPに対する反応が大きく変わりやすい部分です。

ほんのちょっと色や形を変えただけで、CVが上がることは珍しくありません。

また、以下のようなポイントで相乗効果を意識する必要もあります。

  • 集客方法をセットで考える
  • 厳選された質問項目で構成されたフォーム
  • モバイルに対する最適化

LPは、リスティング広告やSNS発信など別の集客施策とセットで設計することで効果は最大化しやすくなります。

集客施策で広くユーザーをLPへと導き、CVさせていくイメージです。

また、せっかくCVさせかけているユーザーを取り逃がさないためにも、フォームの入力項目は必要最低限にします。

スマホ表示を前提に、Webページの表示やデザインの配置などを最適化することも忘れてはなりません。

ランディングページとホームページの違い

ランディングページ(LP)とホームページ(HP)の違いは、構成と目的です。

まず、目的についてまとめると以下のようになります。

  • LP:ユーザーに購入や申し込み、資料請求など特定の行動を促すこと
  • HP:企業情報の提供やサービスや商品などのブランディング

次に、構成についてまとめると違いは以下の通りです。

  • LP:縦に長い1ページ構成
  • HP:複数ページとリンクで構成

LPは商品やサービスの情報を順番に並べながら、途中や最後にCTAボタンを設置し、成約へ導きます。

一つの商品やサービスについて、ユーザーに共感して問題提起し、解決策を提示してメリットや強みで信ぴょう性を持たせ、口コミやレビューで安心感を与えるという流れです。

一方、ホームページでは幅広い情報を網羅的に伝えることができます。

つまり、ひとつの成果に集中するのがLP、企業全体を伝えるのがHPという違いがあります。

よくある質問

ランディングページの作り方について、よくある質問をまとめました。

LPとHPのどちらが効果的ですか?

LPとHPのどちらが良いかは目的次第です。

成約やCVを重視するならLP、広くあまねく会社やサービスに関する情報提供ならHPが向いています。

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

LPは作り込みによっては情報量が多くなりすぎたり、ユーザーが欲しいと思う情報を的確に表示できなかったりという理由で離脱されやすいことがデメリットです。

LPを作るのに何日くらいかかりますか?

LPは、ノーコードで自作するなら最短1日で公開まで進めることも可能です。

制作会社に依頼する場合は、最低でも数週間を必要とするでしょう。

ランディングページを作るのに必要なものは?

ランディングページ作りに必要なのは、文字や写真・画像といった素材だけではありません。

LPの目的やターゲット、商品情報、CTA設計といった、ユーザーの行動に対する動線設計が必要です。

ランディングページの直帰率は?

ランディングページの直帰率は、一般的に60〜90%程度といわれています。

Webページとしては決して少なくない数が直帰しているので、CV率を持って成果を図ることが望ましいでしょう。

まとめ

ランディングページは、ユーザーに商品やサービスの購入・利用を促すための強力な手段の一つです。

目的を明確にして正しい構成で作成し、公開後も継続して改善を重ねることで、高い成果を生み出せます。

ReaddyはAIを搭載したノーコードツールであり、テンプレートを活用することで初心者でも効率的にLP制作を進められます。

制作工数を抑えながら成果を目指したい場合は、有力な選択肢の一つとなるでしょう。

フランク

フランク

フランクはReaddy.aiの創業者です。 10年以上のプロダクト開発経験を持つ元デベロッパーで、優れたデザインに強いこだわりがあります。 初めてスタートアップを立ち上げた当時に「こんなツールがあったらよかった」と感じたものを、自らの手で形にしています。