【初心者から始める】ランディングページの作り方をWebエンジニアが紹介します

個人事業や副業をはじめて、集客のためにランディングページを作ったほうがいいと聞いたけど、何から手をつけていいかわからない。

そうですよね、自分の専門分野で個人事業や副業をはじめた人が、必ずしも集客のプロではないからですよね。

企業が商品を売るためやサービスを認知するために、ランディングページを作ることは一般的なWeb戦略です。同じように個人でもランディングページを使って集客する人も増えてきました。個人事業主も独自で集客することが、どんどん一般的になってきています。

僕は現在、ブログ運用などをメインとして活動していますが、以前はWeb制作会社でホームページ制作を担当していました。コーポレートサイトをはじめ、いくつものランディングペーを制作してきました。

そこでこの記事では、ランディングページの作成に必要な知識をひとまとめにしています。素人がゼロからランディングページを完成させることを目標に、あらゆる視点で解説していきます。

• 個人でWeb制作をしているフリーランスの方
• これからWeb制作会社へ転職しようと勉強している方
• 企業のWeb担当の方
• 個人で事業をされている方

これらに該当する方は、いちど目を通していただけると嬉しいです。

あなたのビジネスが少しでも加速することを願って、記事を書き進めていきたいと思います。

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

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

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

一般的なランディングページの定義は以下の通りです。

1. 縦長であること
2. 他ページへのリンクがない
3. 顧客の購買行動を促す

とにかく縦長で、そのページだけで購入や問い合わせができる機能をもったページという認識でいいかと思います。

そのほか、一般的なホームページの種類について、つぎの記事で解説しています。

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

「誰に」「何を」「どのように」「どうして欲しいか」を分析することから、ランディイングページの制作をはじめましょう。設計やデザイン・コーディングなどの制作からはじめてしまうと、あとあと軌道修正がしづらくなり、大規模な修正、もしくは作り直しになりかねません。

おおまかに、以下の工程でランディングページの制作を進めていきます。

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

自社情報・自社製品を分析する

ランディングページのコンテンツを作るために、報整理と素材を集めましょう。マーケティングのフレームワークを使うと、もれなく情報を整理することができます。

他社と差別化できる強みや特徴、メリット・デメリットなど、文章にまとめていきましょう。

自社や市場を分析するフレームワーク

製品の強みを導き出すフレームワーク

ターゲット・ペルソナを決めよう

ランディングページを「誰に」見て欲しいか、ターゲットを決めます。ランディングページは顧客の感情を動かし、行動させることを目的としています。的を絞ったページ仕上げていくために、顧客を詳細にイメージしましょう。

「誰を」詳細に絞り込もう

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

ターゲットは、どのような日常や生活を送っているのでしょう。おすすめする製品と顧客との接点を考えるために、カスタマージャーニーマップを作成しましょう。

ベネフィットを考える

顧客が求めているのは、あなたの製品・サービスを使うことで得られる「ちょっといい未来」です。たとえば、歯磨きしたあとの爽快感やトレーニングしたあとの達成感などです。

ベネフィットといい、ランディングページではベネフィットを提示することで、顧客の感情を動かしていきます。製品の分析とターゲットの選定を踏まえた上で、ベネフィットを考えていきましょう。

目標となる競合サイトをベンチマークしよう

競合と同じ内容のランディングページを作ってしまうと、成果が上がりにくいページになってしまいます。同業他社のランディングページや製品サイトを調査したり、目標となるホームページを調査することを「ベンチマーク」と言います。

整理した情報をもとに設計・デザインをしよう

洗い出した情報をもとに、ページの設計をしていきます。ホームページ制作では設計書のことを「ワイヤーフレーム」と言います。ワイヤーフレームをもとに、レイアウトや装飾・画像などを組み込んで、デザインを仕上げていくわけです。

デザインに機能を持たせるコーディング

ホームページのデザインはそのままではインターネットで閲覧できません。HTMLというプログラング言語でデザインを再現し、サーバーにファイルをアップすることで公開・閲覧できるようになります。

詳しいプログラミングの解説は割愛していますが、以下の記事ではホームページ実装手順を解説しています。

テストをしてランディングページを公開しよう

コーディングを終えインターネットに公開できる状態になった段階で、テスト・デバッグを行います。表示の確認やお問い合わせの送信、アクセス解析などの計測など、公開後の運用も考えた項目をチェックしていきます。

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

お疲れ様でした。これでランディングページは完成です。実は一般的なホームページ制作の手順と同じ工程を踏んでいます。ここまでのまとめとして、以下の記事も参考にしてみてください。

顧客視点に立ったランディングページ構成の作り方

はじめはテンプレートに沿った構成で、ランディングページを作った方がいいでしょう。コンテンツを見せる順番が大事になってくるからです。
はじめから商品やサービスの説明ばかりしてしまうと、ユーザーは離れていってしまいます。興味や関心を惹きつけていないからです。

たとえば、洋服を買いにいった時を想像してください。店員さんにいきなり「このジャケットがいいですよ」と、セールスされて嫌な思いをしたことはありませんか？
「こんな洋服をお探しですか？」と、あなたは自分の悩みを聞いてほしいのではないでしょうか。ランディングページも同じように、顧客視点でコンテンツを展開したほうが効果が上がります。

「喚起」「未来」「共感」「信用」で構成する

では、一般的なランディングページの構成「喚起」「未来」「共感」「信用」をみていきましょう。

1. ベネフィットを伝えるビジュアルとキャッチコピー
2. 顧客の悩みに寄り添ったリード文
3. 悩みの解決策である、商品・サービスの提示
4. 商品・サービスの具体的な内容・根拠やデータ
5. 開発に至ったストーリー・自己紹介
6. お客様の声
7. よくある質問
8. 保証やアフターフォローで安心を与える
9. 期限・キャンペーンなどの訴求
10. お問い合わせ

すべて掲載する必要はありませんが、大まかな構成は変えないようにすることがポイントです。

顧客の興味を惹きつけるキャッチコピー

ユーザーを関心を惹きつける短い文章、キャッチコピーを書きましょう。ポイントはベネフィット「顧客にとって、ちょっといい未来」を語ることです。

顧客の感情を動かすセールスライティング

顧客視点でコンテンツを制作していく方法として、セールスライティングのテクニックをオススメします。とくに「PASONAの法則」は、顧客の感情を動かすことができる理論で、購買欲求を刺激する文章構成を簡単に構築できます。

検索上位を意識したSEOライティング

Webページは、検索エンジンの検索結果を意識し、検索上位をねらって作った方がいいでしょう。そのための技術がWebライティング、いわゆる「SEOライティング」です。SEOとは「Search Engine Optimization」の略で、検索エンジン最適化を意味します。

具体的には、検索キーワードの選定や見出しタグ（HTML）を理解し、適切に構成することです。そして、検索意図にそった文章に仕上げていきます。

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

ランディングページの構成案を考えるときは、以下の工程に切り分けて作業すると整理しやすくなります。

1. 文章だけで構成する
2. 文章から連想される画像やデータ、図などを集める
3. 顧客の行動をイメージしてみる
4. レイアウトや装飾を考える

つまり、文章の作成とデザインは同時に行わず、まずはセールスレターやメルマガをイメージして文章だけを仕上げることが、効率よくランディングページを作るコツになります。

ランディングページを制作を後押ししてくれるツール

Webページは本来、HTMLやCSS、JavaScriptといったプログラミング言語を用いて実装していきます。それらの技術を覚えなくてはランディングページを作るとが難しいかといえば、そうではありません。

プログラミング言語をマスターしていなくても、Webページ簡単に作れるサービスが存在します。

無料で使えるWordPress

世界のWebサイト、4割以上がWordPressを用いて作られているそうです。WordPressはCMSといわれるシステムを搭載しています。CMSとは「コンテンツ・マネジメント・システム」の略で、いわゆるブログ更新の機能が搭載されているホームページを簡単に実装できるアプリケーションの総称です。

主に複数ページに渡ったコーポレートサイトの構築に使われますが、ランディングページにも使うことができます。お問い合わせフォームの設置なども、機能を追加するプラグインの導入で簡単に実装できます。

使用する際の注意点は、WebやITに関する基本的な知識がないと、扱うことに難しさを感じる点でしょう。また、トラブルが起こった際、自身で解決しなくてはいけない点が挙げられます。

プログラミング不要のノーコードツール

パソコンの基本的な操作ができれば、簡単にホームページ制作がでる「ノーコードツール」でもランディングページを作れます。ドラッグ&ドロップができれば問題なくランディングページを作成できます。

WordPressの導入が難しい場合、ノーコードツールを使ってランディングページを作成してみましょう。

導線をつくってランディングページを見てもらおう

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

分析をして改善していくことで成果を出す

Webページの利点として、アクセスの状況をデータで集計できることが挙げられます。これは、チラシや新聞広告では計測できない指標です。

アクセス解析のデータをもとに、改善や修正をおこなっていきましょう。無料で使えるアクセス解析のツール「Google Analytics」の導入は必須です。

公開してからの運用がもっとも重要

ランディングページは公開してからがスタートです。

ページを作ったからといって、すぐに効果を期待してはいけません。過度な期待をすると思ったように効果が出ない時に、運用をやめてしまうからです。

Webマーケティングの視点では、効果が出ていなランディングページもひとつの成果ととらえましょう。そして、改善点を洗い出し修正を加えていくことが、のちに大きな成果を生むことになります。

短期的な視点では広告を使用します。ですが長期的な集客を期待するのであれば、運用をおろそかにしては成果はでません。

顧客が求める欲求は、時代の変化とともに常に変化しています。ランディングページも変化に対応し、育てていきましょう。

この記事が、あなたの参考になれば嬉しいです。最後まで読んでいただき、ありがとうごあざいました。