成約につながるランディングページの作り方をWebエンジニアが解説

hisashi
記事内に商品プロモーションを含む場合があります

個人事業をはじめた。
副業が軌道に乗ってきたので、拡大を図っていきたい。

「ランディングページ作りましょう!」

事業がうまくいっている方から、そんなアドバイスや情報を耳にしたことがあると思います。でも、

「そもそもランディングページってなに?」
「作り方がわからない」
「作りたいけど発注する費用がない」

そのまま何もできずに指をくわえていませんか?
ずっと機会損失をしたままだと、あなたのお財布は分厚くなりませんよ。

のざき寿
のざき寿

こんにちは、のざき寿(ひさし)といいます。元芸人です。

当サイトに来てくださり、ありがとうございます!ゆっくり見ていってくださいね!

ぼくは、ホームページ制作会社に勤めていてWebエンジニアをしておりました。企業のホームページ制作を50社ほど担当し、もちろんランディグページも制作しました。ホームページ運用の経験もあります。

この記事では、ランディングページの作り方について解説していこうと思います。

  • 自分で作るランディングページ
  • お金のかからないランディングページの作り方

この2点を実現できるように、細かく解説していこうと思います。

ランディングページを作って集客を加速させましょう。そして収益を上げて、その収益でバカンスに行きましょう!

ランディングページとは何か

そもそもランディングページとは何か?について、知る必要があると思います。

ランディングは着地という意味があり、顧客が最初に見るページのことです。一般的なホームページとは違い、一枚の縦長のページで構成され、主に商品やサービスの購入や問い合わせを目的としています。

ランディングページの定義とは

一般的なランディングページの定義は次の通り。

  • 縦長であること
  • 売りたい商品以外の他ページへのリンクがない
  • 顧客の購買行動を促す(商品購入・問い合わせ)

ちなみに、この記事自体もランディングページといえば、ランディングページになります。つまり、一枚で構成された縦長の広告と思っていいでしょう。

一般的なホームページの種類については、つぎの記事で紹介しています。

こちらの記事もどうぞ
自分で作るホームページに必要な基礎知識
自分で作るホームページに必要な基礎知識

失敗しないランディングページの作り方

さぁ、ここからが本編です。

ラインディングページの制作で大切なことは、設計を作り込むことです。設計の段階で方向性を決めておかないと、のちに修正が難しくなってきます。

ランディングページの制作工程

ランディングページの制作に限らず、ホームページ制作全般の制作工程になります。

  1. 情報整理
  2. ターゲットの分析
  3. 訴求点・コンセプト策定
  4. 設計
  5. デザイン
  6. コーディング
  7. テスト・公開

大まかにこのような工程で制作していきます。ポイントは、いきなり作り始めるのではなく、情報整理や設計をしっかり行なってから制作に移るようにします。

建築を想像してみてもらうと、わかりやすいかもしれません。設計書がないまま施工を始めることはありませんよね。

一般的なホームページ制作の工程を知りたい方は、次の記事を参考にしてみてください。

こちらの記事もどうぞ
副業でWebサイト制作をしたい方へ向けて制作の流れを解説
副業でWebサイト制作をしたい方へ向けて制作の流れを解説

情報整理については、次の記事を参考にしてみてください。会社の基本情報や商品サービスの情報整理をしておきましょう。

こちらの記事もどうぞ
ユーザーに親切なWebサイトの構成に必要な情報整理とは
ユーザーに親切なWebサイトの構成に必要な情報整理とは

商品・サービスの情報整理には、マーケティングのフレームワークを使いましょう。

こちらの記事もどうぞ
コンテンツを伝えるためのマーケティング・ミックスの考え方とは
コンテンツを伝えるためのマーケティング・ミックスの考え方とは
こちらの記事もどうぞ
3C分析とは?テンプレートを使って自社分析しよう
3C分析とは?テンプレートを使って自社分析しよう

顧客が求めているのは、あなたの製品・サービスを使うことで得られる「ちょっといい未来」です。このことをベネフィットといいます。
ランディングページではベネフィットを提示することで、顧客の感情を動かしていきます。

こちらの記事もどうぞ
ベネフィットの意味を理解してモノの価値を正確に伝えよう
ベネフィットの意味を理解してモノの価値を正確に伝えよう

ターゲットの分析については、次の記事を参考にしてみてください。ペルソナの設定について詳しく解説しています。

こちらの記事もどうぞ
届けたい相手を明確にするセグメンテーションとターゲティングとは
届けたい相手を明確にするセグメンテーションとターゲティングとは
こちらの記事もどうぞ
コンテンツを作りやすくするなるペルソナシートのテンプレートとは
コンテンツを作りやすくするなるペルソナシートのテンプレートとは

コンセプトとは「どのように商品・サービス伝えていくか」を決めていくことになります。
たとえば学習塾の入会を案内するランディングページなら、熱血指導を前面に押し出して暑苦しいデザインにしていくなどです。

こちらの記事もどうぞ
ポジショニングマップの軸の決め方とは
ポジショニングマップの軸の決め方とは

LP(ランディングページ)設計の作り方とは

ランディングページのことを、省略してLP(エル・ピー)というので覚えておきましょう。

とにかくランディングページは、設計がとても大事になってきます。設計を考える上で重要なポイントについて解説していきます。

何を売りたいのかをハッキリさせる

まず、いまから作るランディングページの目的を明確にしましょう。

  • 誰に
  • 何を
  • どのように
  • どうして欲しいか

どんなターゲットに対して、何を売りたいかをハッキリさせます。この情報整理がランディングページの方向性を決めていきます。

セールスライティングはランディングページの骨格です

ランディングページの構成は、まず文章に起こすことから始めていきます。

  • 商品を売るためのセールスライティングをする
  • イメージやデザインを決めていく
  • Webページにして公開する

必ずこの手順で制作を進めていきます。

ひとつめの「商品を売るためのセールスライティングをする」が、ランディングページの仕上がりを大きく左右し成果に直結します。デザインやWebページするのはあくまで、肉付けの部分にすぎません。

セールスライティングのポイント

では、セールスライティングのポイントについて解説していきます。

  1. 問題や悩みを提示する
  2. 問題を放置した時のさらなる問題を炙り立てる
  3. 共感や共感できるエピソードで読み手に寄り添う
  4. 解決策を提示する
  5. 解決策が提示できる実績を紹介する
  6. 解決策を具体的に紹介する
  7. 他社との差別化できるポイント
  8. 根拠となるデータ・比較を提示する
  9. 開発秘話などを語る
  10. 保証などがあれば提示する
  11. お客様の声を乗せる
  12. よくある質問
  13. 期限・キャンペンなどの案内
  14. 商品購入やお問い合わせを促す

ポイントは、いきなり商品を売ろうとしないことです。

とくに、項目1〜3が重要で、商品・サービスを買う気にさせるために、クライアント(顧客・お客さん)の感情に問いかけることを意識してください。

実例を知りたい方は、この記事を参考にしてみてください。この記事自体もセールスライティングの型をつかって構成されています。

のざき寿
のざき寿

詳しいセールスライティングの解説は、次の記事で紹介しています。

こちらの記事もどうぞ
商品が売れる稼げるセールスライティングの書き方
商品が売れる稼げるセールスライティングの書き方

文章全体の構成に関しては、次の記事を参考にしてみてください。

こちらの記事もどうぞ
相手に伝わる文章の構成と完読される書き方とは
相手に伝わる文章の構成と完読される書き方とは

ランディングページは最終的にWebページとして完成させる必要があります。Webに必要なライティング方法を取り入れるといいでしょう。

こちらの記事もどうぞ
副業をはじめたい人はWebライティングからはじめよう
副業をはじめたい人はWebライティングからはじめよう

見出しの書き方やクライアントに刺さる文章の書き方については、以下の書籍が参考になるでしょう。

クライアントの興味・関心を惹きつける短い文章、キャッチコピーについては以下の記事を参考にしてみてください。

こちらの記事もどうぞ
再現性のあるキャッチコピーの考え方
再現性のあるキャッチコピーの考え方

この段階で、とにかく覚えることや意識することが多いと感じるかもしれません。ですがこの工程をしっかり行なっておくと、後の作業はいくらでも修正することができます。

Webページのいいところは、チラシなどの印刷物とは違って何度も修正ができることです。

のざき寿
のざき寿

がんばりましょう!

設計の工程には時間をかけて大丈夫です!納得のいくまで何度も修正していきましょう。

カスタマージャーニーマップでターゲットの行動を予測しよう

クライアントは、どのような日常や生活を送っているのでしょう。

あなたが勧める商品やサービスとクライアントとの接点をカスタマージャーニーマップを使って考えていきます。

その商品は、お店で買える商品ですか?それともインターネットで購入するものでしょうか。
クライアントが商品の存在を知って、どのような感情の変化や問題を抱えているか、道筋をつくっていきます。

こちらの記事もどうぞ
商品購入に繋げるカスタマージャーニーマップの作り方
商品購入に繋げるカスタマージャーニーマップの作り方

動線設計については、次の記事を参考にしてみてくさい。

こちらの記事もどうぞ
集客を意識したホームページの動線設計とは
集客を意識したホームページの動線設計とは

困ったらランディングページをベンチマークして作り方を真似しよう

作り方を勉強して理解しても、そう簡単に作れるものではありません。ここまでの工程でも、形にできなくて困る方もいらっしゃると思います。

大丈夫です。そんなときは、ベンチマークしましょう。

検索サイトで「ランディングページ」「まとめ」で検索してみてください。

ギャラリーサイトといわれる、ランディングページのまとめサイトがヒットします。あなたと同じ業界のランディングページをピックアップし、設計だけに注目して真似してみてください。

目標となるランディングページがあると、制作のゴールイメージができるので格段に作りやすくなります。この真似するページを探すことを「ベンチマーク」といいます。

設計のための文章をかくのは、手書き・Word、なんでも構いません。方法にこだわらず、まずは書くことに専念しましょう。

文章に自信のない方は、AIツールや添削ツールを使って文章を磨いていってくださいね。

のざき寿
のざき寿

【まとめ】まずは文章だけで構成してみよう

ここまでが、設計の工程になります。いったんまとめておきますね。

  • 売りたいものを明確にする
  • 売りたい相手を明確にする
  • 商品・サービスのメリットやベネフィットを整理する
  • セールスライティングで文章で設計をする

文章の作成と構成・デザインなどの制作作業は同時に行わず、区切って作業することがポイントです。文章だけを仕上げることに専念しましょう。

ランディングページのデザインを簡単にする方法

さぁ、設計をもとにランディングページを形にしていく段階です。

いざ、デザインに取り掛かろうと思っても、何から始めていいかわからない方がいらっしゃると思います。デザインをするには、次のようなツールなどが必要になります。

  • 画像編集ソフト
  • デザイン制作ソフト
  • テキストエディタ

代表的なツールは、Adobe(アドビ)のデザインツールでしょう。有料のソフトです。無料で使えるデザインツールもありますが、仮にデザインツールを手に入れたとして、使い方を覚え表現を作り込むには、かなりの時間を学習に当てないといけません。

そしてクオリティーの高いランディングページを作れる保証もありません。

では、どうしたらいいのでしょうか。

WordPressを使ってランディングページのデザインを簡単にする

そこで、WordPress(ワードプレス)というツールを使うことをオススメしています。

WordPressは、ホームページを管理画面から更新できるようにするためのブログシステムです。要するに、はてなブログやアメーバブログのように、Webページを更新しやすい環境が整っている状態で、ランディングページが作れるようになります。

WordPressに関して詳しく知りたい方は、以下の記事を参考にしてみてください

こちらの記事もどうぞ
安価でできるWordPressを使ったホームページとブログサイトの作り方
安価でできるWordPressを使ったホームページとブログサイトの作り方

WordPressを使う準備をしよう

WordPress上でランディングページを作りながら、デザインを調整していきます。

まずは、手順を紹介します。

  • ドメインを取得する
  • サーバーをレンタルする
  • WordPressをインストールする
  • WordPressのテーマ(JIN:R)を購入する
  • 設計で書いた文章を流し込む
  • 画像やデザインを調整していく

これらの手順を踏めば、それなりのランディグページが出来上がります。

では、詳しく解説してきます。

ランディングページの住所・ドメインを取得しよう

ドメインとは、ランディングページを設置する住所です。

「https://〜」から始まる、URLを用意する必要があります。ドメインの取得には料金がかかります。どこで取得してもいいですが、レンタルサーバーと同じ会社でドメインを取得しておくと管理が楽になります。

ドメインの決め方については、会社名や商品名・サービス名を使うようにしましょう。
覚えやすいドメインの方が、クライアントが覚えやすいなどランディングページを運用する上でなにかと便利です。

また、無料でドメインを使えるサービスもありますが、無料のドメインは一部URLが変えられないなど、制限がありますので、必ず独自ドメインを取得しておきましょう。後々、変更ができなくなります。

のざき寿
のざき寿

レンタルサーバーを契約しよう

次にランディングページを設置する、レンタルサーバーを契約します。

インターネット上に、ホームページ公開するには、さまざまなプログラミングファイルや画像ファイルを置いておかなくてはいけません。その設置場所となる倉庫がレンタルサーバーです。

レンタルサーバーを提供している会社はいくつかありますが、ぼくはXサーバーを使っています。安定性と管理画面の使いやすさがメリットです。
また、ドメインを取得した会社と同じ会社が運営しているサービスなので、管理がしやすくなるメリットもあります。

WordPressをインストールしよう

レンタルサーバーを契約しドメインの関連付けを行なったら、WordPressのシステムをインストールします。

レンタルサーバーの管理画面へログインすると「WordPressかんたんインストール」というボタンがあります。案内に沿って情報を入力し、ボタンを押し画面を進めていけば、ホームページが閲覧できるようになります。

この段階でご自身のURLにアクセスしてみてください。ホームページが出来上がっているかと思います。

WordPressはインストールした時点で、すでにWebサイトが出来上がっている状態で閲覧できるようになっています。これはWordPressの「テーマ」といわれるもので、洋服を着せ替えるように見た目を簡単に変えることができる便利な機能が備わっています。

のざき寿
のざき寿

WordPressのテーマを「JIN:R」に変更しよう

WordPressの管理画面にログインすると、ホームページを裏側から操作・編集できるようになります。
この管理画面で記事を更新したり、ランディングページを作り込んだりしてくことになります。

そのままの状態でWordPressを使用してもいいのですが、淡白な見た目と制作のしづらさを解消するために、有料のテーマを購入します。

のざき寿
のざき寿

JIN:R」という、WordPressのテーマをオススメしています。

JIN:Rのサイトへ移動

実は、このサイトも「JIN:R」を使って制作しています。企業などのコーポレートサイトはもちろん、ランディングページやブログサイト・オウンドメディアなどにも、どんなホームページの形態にも対応している優れたWordPressのテーマです。

  • ホームページ制作に必要な機能がほとんど備わっている
  • デモサイトやマニュアルが充実している
  • 質問できるコミュニティーがある
  • 実績のある会社が運営している
  • クオリティーの高いサイトが作りやすい

メリットを挙げるといろいろあるのですが、元Webエンジニアのぼくからしても、ハイクオリティーなサイト制作を実現できます。

正直な話、ランディングページをホームページ制作会社に依頼すると、物によりますが50万〜からなど、かなり高額な費用が掛かってしまうことがあります。たとえ、フリーランスの方に依頼しても、20万〜など、決して安いものではありません。

ここまで、ドメイン・レンタルサーバー・WordPressテーマを紹介してきましたが、これらの金額を合わせても、5万円でお釣りがきます。もちろん制作にかかる時間は必要となりますが、個人で事業をされる方は、ホームページの仕組みを勉強する上でも、一度ご自身で制作してみることをオススメします。

また、ランディングページは制作すればすぐに成果が上がるものではありません。修正と改善を繰り返しながら運用していくものです。まずは金額をかけず、スモールスタートで始める方がいいでしょう。

のざき寿
のざき寿

WordPressのテーマを使えばコーディングは不要

本来、ランディングページを制作するには、プログラミングをしなくてはいけません。

HTMLやCSSなどのプログラミング言語を書いて、ファイルを作りサーバーにアップするといった作業が必要です。しかし、WordPressとWordPressのテーマを使うことにより、プログラミングはしなくてよくなります。

のざき寿
のざき寿

JIN:Rのテーマを適応しましょう!この時点でそれなりの見た目になっているはずです!

あとは、商品やサービスを売るための文章構成にしたがって、ページの調整を進めていけばランディイングページの完成となります。

のざき寿
のざき寿

あともうちょっとです!がんばりましょう!

管理画面からランディングページの見た目を調整していく

固定ページの編集画面で、WordPressの機能を使いながら見た目を調整してきます。

この作業は何度でも変更・修正ができるので、時間をかけて納得のいくまで作り込んで構いません。ただ、ある程度の完成でやめておかないと、あなたが本来の目的である、商品やサービスを売ることができないので、注意してくださいね!

のざき寿
のざき寿

おつかれさまでした!

一旦ここまでが、ランディングページの作り方になります。今まで解説してきた工程を何度も見直して、作り込んでいってください。

このランディングページが、あなたの事業を助けてくれるはずです!

【まとめ】ランディングページの作り方

作り方の最後に、ここまでをまとめておきます。

  • ドメインを取得する
  • サーバーをレンタルする
  • WordPressをインストールする
  • WordPressのテーマ(JIN:R)を購入する
  • 設計で書いた文章を流し込む
  • 画像やデザインを調整していく

細かい部分まで解説できなくて申し訳ないですが、WordPressは情報量も多く、検索すれば方法は必ず見つかります。心配しないで制作をつづけてくださいね!

【番外編】プログラミング不要のノーコードツール

この記事ではWordPressを中心に紹介していますが、無料でホームページが作れるサービスや簡単にランディングページが作れるサービスはいくつもあります。

ノーコードツールといわれ、ドラッグ&ドロップ操作で簡単にホームページ制作ができてしまいます。
WordPressの導入が難しい場合、ノーコードツールを使ってランディングページを作成してみるのもいいでしょう。

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

インターネット上にランディングページを公開しただけでは、クライアントはページに辿り着くことはできません。SNSやインターネット広告を使用して、ランディングページへ誘導しましょう。

ランディングページの公開を、X(エックス)やinstagram(インスタグラム)などのツールを使って認知してもらいます。Googleマップにリンクを貼るのもいいでしょう。

検索順位を上げるには

Google検索などで、検索上位に表示させるには、主に二つの方法があります。

  • Googleに広告を出稿する
  • SEO対策で時間をかけて上位表示する

前者はGoogleに料金を支払って広告出稿する方法です。後者は、検索エンジン対策といい、検索エンジンに評価されるページやコンテンツに仕上げていく方法です。料金はかからないものの、確実性がないことと時間がかかるため、ランディングページ公開当初は難しい施策になります。

よって公開当初は、SNSを使った拡散を中心に運用することをオススメします。

アクセス解析でランディングページを分析して改善していこう

ホームページの利点は、ランディングページのアクセス状況をデータで集計できることです。これは、チラシや新聞広告では計測できない指標です。

データ集計をするには、アクセス解析ツールである「Google Analytics(グーグルアナリティクス)」を導入します。Googleが提供している、無料で使えるアクセス解析ツールです。

設置の手順は少し知識が必要なので割愛しますが、こちらも検索して調べると情報がたくさん拾えるので、必ず設置するようにしてください。

ホームページやブログは運用がいちばん大切

ランディングページは公開してからが本番です。

制作していると、出来上がった段階で満足してしまいがちです。しかし、本来の目的はランディングページを利用して成果をだすことにあります。成果とは、

  • 売り上げがあがる
  • 問い合わせがくる
  • 認知が上がる

これらのことを目標としてください。

ぼくはホームページ制作会社でランディングページページをいくつも作ってきましたが、公開してから何もメンテンナンスを行わない方をたくさんみてきました。

成果が出ないページを持ち続けることは、費用を捨てているようなものです。修正や改善を繰り返し、きちんと運用すれば必ず何かしらの成果は得られます。

短期的に結果をもとめず、長期的な視点で運用を続けていきましょう。

何かご質問あれば、こちらへどうぞ!

記事URLをコピーしました