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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームページとは  ホームページとは、複数のWebページから構成され各ページがリンクで繋がった情報コンテンツのことです。  ホームページを閲覧して...

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

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

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

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

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

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

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

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

ホームページ制作に必要な企業(自社)情報の整理  ホームページに掲載するコンテンツを考えるために、企業情報の整理・分析をしましょう。  きちんとした情報整理はユーザー利便性の向...
3C分析とは?テンプレートを使って自社分析しホームページ制作に活用しよう  3C分析は、ホームページ制作のコンテンツ企画・提案などに使えます。強く訴求するコンテンツを発見したり、競合分析をまとめたりなどです。...

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

マーケティング・ミックス(4P)とは?4つの視点と具体例  マーケティング・ミックスは、市場に商品・サービスを購入してもらうための施策です。4つの要素から構成されており「Product(製品)...

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

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

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

セグメンテーションとターゲティング(ペルソナ)の違いとは  セグメンテーションは市場のことを指します。ターゲティング(ペルソナ)は、セグメンテーションから絞り込んだ顧客層のことです。 要するに...
ペルソナシートのテンプレートを使ってターゲットを明確にしよう  ペルソナとは、商品やサービスを買って欲しい・利用してもらいたい人物像です。テンプレートを使うことで、ペルソナを設定するときのヌケ・モ...

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

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

カスタマージャーニーマップの作り方とは  カスタマーは訳すと顧客、ジャーニーは旅、マップは地図です。カスタマージャーニーマップは顧客の感情や行動を可視化した、顧客理解と顧客対...

ベネフィットを考える

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

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

ベネフィットの意味 - メリットとの違いベネフィットって何?メリットと何が違うの?マーケティング用語でよく使う「ベネフィット」。この記事では「ベネフィット」の正確な意味を「メリット」との違いを交え解説します。どんな場面「ベネフィット」は必要になるのかも具体例を挙げています。...

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

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

ホームページ制作のベンチマーク - 参考サイトの探し方  どんな形や表示・機能が実装されるか分からずに、ホームページを制作するのはとても不安です。 クライアントの立場に立って考えると、どうで...

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

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

ワイヤーフレームの作り方とは  ワイヤーフレームとは、ホームページの設計書です。たとえば家や建物を建築する場合、図面などの設計書をもとに建築しますよね。ワイヤーフレ...
コーポレートサイトのデザイン制作手順  ホームページのデザインは、次の制作手順で進めると効率よく作業できます。 グランドデザインの作成(主にトップページ) 主...

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

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

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

HTMLコーディングを効率的に作業するコツとは  ホームページのHTMLコーディングは、次のような手順で作業しましょう。 サイト全体の基本的な設定を決める ヘッダー・フ...

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

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

ホームページ公開まえのテスト・デバッグ・確認項目  ホームページの公開前は、表示確認や更新機能のテストを行いましょう。  確認をしなかったために、致命的な欠陥があるままホームペー...

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

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

ホームページ制作 - 全体の流れ  ホームページの制作の始まりは、要件定義・設計から始まります。ホームページの目的や目標を決める工程です。住宅の建築に例えると、土地を決...

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

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

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

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

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

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

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

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

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

キャッチコピーの作り方
キャッチコピーの考え方 - 作り方のコツとはキャッチコピーの作り方がわからない。考え方が色々ありすぎてどう書いたらいいのか。言葉を真似するだけではキャッチコピーは書けるようになりません。この記事では基本的な考え方を解説していきます。基本を抑えることで再現性のある書き方を身につけることができます。...

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

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

【稼ぐ力が身に付く】セールスライティングの型「PASONAの法則」とは あなたが書いたセールスレターの効果で商品が飛ぶように売れる。その実績が認められて次から次へと依頼が舞い込んでくる。 そんな未来を...

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

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

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

【独学で身につく】Webライティング初心者が身につけておきたい知識・技術・書き方とは 簡単にはじめられる副業として、たびたび目にするWebライティング。 「自分の今までの経験を活かしやすく、誰でも簡単に稼げます!」...

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

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

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

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

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

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

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

無料で使えるWordPress

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

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

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

WordPressはホームページ制作・更新を簡単にするブログシステム  WordPressを使用すると、ホームページの更新が簡単になります。 お知らせ記事の更新 ブログ記事の更新  ...

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

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

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

無料ホームページ制作ツールでランディングページを作る どうも、寿(ひさし)と言います。 元お笑い芸人、Web制作会社でエンジニアとして4年程勤務、現在は、主にライティングをメインに活...

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

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

ホームページへの導線を考えた運用・設計  ホームページはインターネット上に公開しただけでは誰にも見てもらえません。  見てもらうためには、認知や告知・宣伝をしてホームペ...

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

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

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

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

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

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

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

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

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

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