LPブログ

LP制作初心者必見!作り方の基本の流れ・便利なツールをわかりやすく解説

X編集部
2023.04.21 22:00
LP制作初心者必見!作り方の基本の流れ・便利なツールをわかりやすく解説

LP運用をマーケティング施策の主軸とするビジネスモデルも増えており、「自社・自分でLP制作できないだろうか?」と考えている企業や個人事業主の方も多いのではないでしょうか。

はじめてのLP制作では、LPの特徴や制作の流れや、使用するデザイン・コーディングソフトなどの基礎知識を押さえておくと、スムーズに進めやすくなるためおすすめです。

この記事では、初心者向けにLP制作の基本的な手順と流れをわかりやすく解説します。

プロのデザイナーやエンジニアでなくても使いやすいLP制作ツールや、初心者に押さえておいてほしいポイントも紹介するので、ぜひ参考にしてください。

初心者がLP制作する際に覚えておきたい基礎知識

まずは基礎知識として、LPの意味・目的・特徴と、LP制作に必要なスキルを確認しておきましょう。なんとなく理解しているという方も、この機会に再確認してみていただければと思います。

LPの意味・目的・特徴

LP(エルピー)は、「Landing Page(ランディングページ)」の略称です。

LPの意味は、広義では「最初に着地(Landing)したページ」を指しますが、Webマーケティング業界などでは、「一つの商品・サービスの情報をまとめた一枚完結のページ」といった意味で用いられます。

LPは、ユーザーに「商品・サービスの販売」「資料ダウンロードの促進」といった特定のアクションを起こしてもらう目的で設計されており、このような行動転換を「コンバージョン」と呼びます。

LPでコンバージョンへ導くためには、ユーザーの行動心理にもとづいた設計が重要です。

そのため、コンバージョンに特化したLPには、次のような特徴があります。

  • 縦長で一枚完結型
  • 外部へのリンクが少ない
  • Web広告などの集客媒体と連動して使用する

ユーザーが興味をもってページを読み進め、最終的に狙ったアクションを起こしてもらえるよう、情報や導線の設計がされています。

LP単体で集客するというよりは、リスティング広告・メルマガ・SNS広告などの遷移先としてLPを設定し、LP内で徐々に購買意欲を醸成するという活用方法が一般的です。

関連記事:ランディングページ(LP)の6つの効果とは?必要性や作り方を基礎から解説

LP制作に求められる3つのスキル

LP制作では、ただページに商品・サービスの情報を掲載するのではなく、コンバージョンを意識した設計が必要です。

そのため、LP制作には次の3つのスキルが求められます。

  • デザインスキル
  • コーディングスキル
  • マーケティングスキル

デザインスキルは、ユーザーの興味を引き、コンバージョン率を向上させるために欠かせないものであり、コーディングスキルは、デザインを実際のLPに落とし込むために必要です。

ただし、デザイン・コーディングスキルがあるだけでは、見た目がきれいなLPは作れても、成果につながるLPの制作はむずかしいといわれています。

ユーザーの問題やニーズを理解し、その解決策をLPに反映させるためには、マーケティングスキルも磨かなくてはなりません。

また、制作・公開後のLPのアクセス解析など、コンバージョン率を改善するための施策を立てるためにも、マーケティングの知見が求められます。

これらのスキルを組み合わせることで、魅力的かつ効果的なLPを制作できます

なお、「社内にこれらのスキルを持った人がいない…」「自分ですべてのスキルを身に付けるのはむずかしい…」という場合は、プロのLP制作会社へ外注することも検討すると良いでしょう。

LP制作の流れを初心者向けに6ステップで解説

LPの基礎知識を確認したところで、さっそくLP制作の流れを見ていきましょう。初心者の方でもわかりやすいように、簡単な6ステップで解説します。

1. LPの目的・施策のゴール(KGI)を明確にする

最初に、LPで達成したい最終目標を定めましょう。LPを運用する目的・施策のゴールを明確にしておくことで、LPに必要な要素や設計を把握しやすくなります

LPのゴールは、扱う商材やビジネスモデルによっても異なりますが、たとえば「商品の購入」「問い合わせフォームの送信」「無料トライアルの申し込み」などがあげられます。

ゴールを設定したら、具体的なKGIを設定しましょう。「KGI(Key Goal Indicator:重要目標達成指標)」とは、簡単にいうと「ゴールを数値化したもの」です。

仮に、ゴールが「商品の購入」なのであれば、KGIとして「販売個数」「申込み数・ダウンロード数」などを設定しておくと良いでしょう。

KGIを決めておくことで、実際にLP制作・運用をスタートしたときに、定量評価できるようになります

このとき、注意してほしいのが、「商品販売」以外に、「ユーザーアンケート」「LINE登録」…など、あれもこれもLPに詰め込まないようにすることです。

コンバージョンは一つに絞ることで成果につながりやすくなるため、一番達成したい目的を決めておきましょう

【やるべきこと】

  • LPのゴールを一つ決める
  • ゴールを数値化したKGIを設定する

【ここでの注意点】

  • LPのゴールは複数設定しない

2. 目標数値(KPI)を決める

つぎに、KGIを達成するまでのプロセスにある指標である、「KPI(Key Performance Indicator:重要業績評価指標)」を設定しましょう。

ユーザーはLPを見に来て、いきなりコンバージョンボタンをクリックするわけではありません。ページをスクロールしたり、フォーム入力の途中で離脱したりと、さまざまな行動が想定されます。

コンバージョンに至るまでの各ポイントが適切かどうかを評価する指標がKPIであり、KPIの設定により、アクセス解析を通じて改善点の特定や、施策の評価ができるようになります

代表的なKPIには、「PV数(ページビュー数)」「セッション数(訪問数)」「UU数(ユニークユーザー数)」「コンバージョン率」「滞在時間」「離脱率」などがあります。

なお、KPIを決めるときは、実現可能な数値を設定することがおすすめです。適切な目標設定は、LPを運営していくうえでの達成感やモチベーションの向上につながるからです。

また、一つのKPIに固執せず、複数のKPIを設定し、総合的にLPのパフォーマンスを判断することも意識すると良いでしょう。

【やるべきこと】

  • KGIを達成するためのKPIを設定する

【ここでの注意点】

  • 実現可能なKPIにする
  • 複数のKPIを設定する

3. ペルソナを設定する

LP制作のステップ3で行うべきことは、LPのターゲットを明確にすることです。

「ペルソナ」と呼ばれる「商品・サービスを利用する理想の顧客像」を設定し、そのペルソナに合わせたコンテンツやデザインを考えていきます。

ペルソナの設定は、ターゲット層のニーズや課題の理解を深めるために重要な作業です。

具体的には、ペルソナの年齢層・職業・興味関心・ライフスタイルなどを想定し、それにあわせたLPの訴求ポイントを決定します。

ペルソナ設定の精度を高めるための手段として、アンケート調査や顧客インタビューなどの方法もあります。

【やるべきこと】

  • 架空のペルソナを一人設定する

【ここでの注意点】

  • 抽象的な人物像ではなく具体的にイメージする

4. 構成・ワイヤーフレームを作成する

LP制作における「構成・ワイヤーフレーム」とは、LPのページ構成やコンテンツ配置を考える作業のことです。LPの目的やターゲット層・コンバージョンを考慮し、ページの構成を考えてみましょう

つぎに、考えた構成をワイヤーフレームに落とし込んでいきます。ワイヤーフレームとは、ページのコンポーネント(各要素やコンテンツ)の配置、レイアウト・サイズなどを表した図面のことです。見た目のデザインに関わる要素は省略して、LPの構成の仮の骨組みを示しているのが特徴です。

ワイヤーフレームを作らずに、いきなり制作に入ることも不可能ではないですが、ワイヤーフレームがあるとデザインの修正や改良がしやすくなり、結果的に効率よく作業を進めやすくなります

ワイヤーフレームは手書きでも作成可能ですが、専用のツールを使うと効率的です。ワイヤーフレーム用のデザインソフトについては、次章で詳しく解説しています。

【やるべきこと】

  • ページの構成を考える
  • ワイヤーフレームを作成する

【ここでの注意点】

  • LPの完成形をイメージしながら作成する

構成・ワイヤーフレームの作り方については、こちらもあわせてご覧ください。

関連記事:【必見】売れるランディングページの構成テンプレート2選!

関連記事:LPのワイヤーフレームの作り方とは?作成手順や費用相場も解説

5. コンテンツを作成する

構成作成時に決めた大枠の要素をもとに、コンテンツを作っていきます。

たとえば、LPのなかで商品の機能を3つ紹介する場合、どの機能を紹介するのか検討し、どのような表現で伝えるのかを考えます。

具体的には、目的やターゲット層にあわせたキャッチコピー・見出し・文章・画像・動画・グラフ・表などの詳細を決めていきます。必要に応じて、画像・テキストなどの素材も用意しましょう。

このとき、コンテンツを読みやすく整理するために、箇条書き・段落などのレイアウトも工夫すると良いでしょう。

また、コンテンツの説得力や信頼性を高めるためには、根拠となるデータ・実績・口コミなどの情報を掲載することもおすすめです。

【やるべきこと】

  • 構成をもとにコンテンツを作成する
  • 画像・テキストなどの素材を用意する

【ここでの注意点】

  • レイアウトも工夫する
  • コンテンツの信頼性につながるデータも盛り込む

6. デザイン・コーディング

最後のステップは、デザイン・コーディングです。作成した構成・ワイヤーフレーム・コンテンツをもとに、LPのデザインを決定し、コーディングを行っていきます。

商品のブランドイメージや訴求内容に沿って、配色・フォント・レイアウトなどを選定し、ワイヤーフレームをもとに具体的なデザインを作成します。

その後、HTML・CSS・JavaScriptなどのマークアップ言語・プログラミング言語を用いてコーディングし、LPを具現化していきます。

必要に応じて細かい修正を行い、最終的に完成したページを確認しましょう。

デザインやコーディングに不慣れな場合は、コーディング不要のLP制作ツールを利用したり、外部のデザイナーやコーダーに依頼したりすることも検討すると良いでしょう。

【やるべきこと】

  • 具体的なデザインを作成する
  • デザインをもとにコーディングする

【ここでの注意点】

  • 細かい修正をしながら完成形を目指す

関連記事:LP作成の方法は6つの手順で完結!ツールの使用や外注化もできる!

初心者向けLP制作に役立つデザインソフト

実際にLP制作する際に役立つデザインソフトを、3種類ご紹介します。それぞれ、特徴・初心者におすすめしたい理由・主な機能・料金をまとめてあります。(以下は、2023年4月時点での情報です)

Figma(フィグマ)

Figma_top
引用:Figma

Figmaは、クラウド上で動作するデザインソフトです。ワイヤーフレームやプロトタイプ作成など幅広く対応しています。

初心者におすすめしたい理由は、使いやすさや無料で手軽に使える点です。オンラインで同時編集ができるため、チームでのLP制作にも適しています。

【特徴】

  • 異なる機種やOSでも動作可能なマルチプラットフォームでの使用
  • リアルタイムでの共同作業
  • 豊富なプラグイン

【主な機能】

  • 描画ツール
  • オートレイアウト
  • PDF形式などでのエクスポート など

【料金】

  • スターター:無料
  • Figmaプロフェッショナル:1,800円
  • Figmaビジネス:6,750円

Cacoo(カクー)

Cacoo_top
引用:Cacoo

Cacooは、オンラインで利用できるデザインソフトです。多様なテンプレート・アイコン・画像などの素材があり、初心者でも簡単にワイヤーフレームを作成できます

はじめて利用する場合は14日間の無料トライアルがあるため、コストをかけずに始められる点もおすすめポイントです。

【特徴】

  • リアルタイム共同編集が可能
  • バージョン管理や履歴管理ができる
  • オフラインでも使用可能

【主な機能】

  • シート数無制限
  • バージョン管理、履歴管理
  • プロジェクト管理
  • テンプレート・アイコン・画像などの素材 など

【料金】

  • プロプラン(個人利用向け):月額660円
  • チームプラン(組織・チーム利用向け):月額1,980円

Sketch(スケッチ)

Sketch_top
引用:Sketch

Sketch(スケッチ)は、海外で人気のデザインソフトです。LP制作初心者におすすめしたい理由は、直感的に使えるシンプルなUIと、充実したコミュニティサポートがある点です。また、最初の30日間は無料で利用できます。

サービストップページ自体が、デザインツールの操作を模したものとなっており、コンテンツを動かしてレイアウトを変更できるため、興味があれば実際に操作して体験してみると良いでしょう。

【特徴】

  • ベクターデータで保存するため軽量
  • 一度に複数のファイル形式でエクスポートが可能

【主な機能】

  • リアルタイムプレビュー
  • 豊富なUIキット
  • マルチプラットフォーム

【料金】

  • Standard(個人向け):$9
  • Business(チーム向け:$20

初心者でも使えるLP制作のコーディング・開発ソフト

つづいて、LP制作のコーディング・開発ソフトをご紹介します。初心者からプロのエンジニアまで広く利用されているものを、3つピックアップしました。(以下は、2023年4月時点での情報です)

Visual Studio Code(ビジュアルスタジオコード)

Visual Studio Code_top
引用: Visual Studio Code

Visual Studio Codeは、Microsoftが提供するコーディング・開発ソフトウェアです。コード入力補完機能や豊富な拡張機能によって、高速なコーディングが可能です。

初心者におすすめしたい理由は、多くのプログラマーが利用していることから、使い方やエラーの解決方法などの説明記事なども多く、学習しやすい点です。また、機能の制限などなく、無料で使える点も魅力の一つです。

【特徴】

  • 軽量で高速なエディタ
  • 多様なプログラミング言語に対応

【主な機能】

  • コード補完
  • デバッグ(ソースコードのエラーやバグを見つけて修正)
  • Git管理(バージョン管理) など

【料金】

  • 無料

AWS Cloud9(エーダブリューエス クラウドナイン)

AWS Cloud9_top
引用:AWS Cloud9

Amazon Web Serviceのサービスの一つであるAWS Cloud9は、クラウド環境でアプリケーションの開発やデータベースなどを利用できるサービスです。

初心者にとって、コードの記述から動作テストなどまで、LP制作に必要な機能を網羅している点と、無料利用枠がある点は大きな魅力といえます。

【特徴】

  • プロジェクト・ファイル・コードの共有が可能
  • 無料利用枠がある

【主な機能】

  • コードエディター
  • SSHクライアント
  • ターミナル
  • デバッグ
  • プレビューページ など

【料金】

  • 無料利用枠あり(新規アカウント作成から12ヶ月の期間、月間750時間まで)
  • その後は使用量に応じた課金制

GitHub(ギットハブ)

GitHub_top
引用:GitHub

GitHubは、コードを管理するためのオンラインプラットフォームです。バージョン管理や共同作業を簡単に行えます。

学習用のオープンソースプロジェクトが多数公開されており、初心者からプロまで活用できる環境が整備されています

【特徴】

  • コードの共有・管理・バージョン管理ができる
  • チーム開発に適したコラボレーションツールが豊富
  • 大規模なプロジェクトでも高速かつ拡張性が高い
  • 多様なプログラミング言語に対応

【主な機能】

  • Gitによるソースコード管理
  • 問題追跡システム「Issue」
  • コードレビュー機能「Pull Request」
  • プライベートリポジトリの作成
  • Webページのホスティング

【料金】

  • Free(個人ユーザー向け):無料
  • Team(個人および小規模プロジェクト):$48
  • Enterprise:$252

初心者向けコーディング不要のLP制作ツール

デザインやコーディングに不慣れな場合は、コーディング不要(ノーコード)のLP制作ツールを利用するという方法もあります。

初心者向けの3つのLP制作ツールの特徴・メリット・デメリットをご紹介します。

LP制作ツール① Wix(ウィックス)

Wix_top
引用:Wix.com

Wixは、コーディング不要で初心者でも簡単にLP制作できるツールです。多彩なテンプレートやウィジェットがあり、アプリストアからの機能拡張も可能です。

SEO対策やモバイル対応が初期設定されているため、はじめてでもプロのようなLP制作が可能です。

【メリット】

  • 多彩なテンプレート
  • 初心者が手軽に使いやすい

【デメリット】

  • 独自ドメインの利用は有料
  • 一部の高機能は有料プラン限定

関連記事:Wixを活用したLPの作り方を解説!初心者向けのコツや事例も紹介

LP制作ツール② ペライチ

ペライチ_top
引用:ペライチ

ペライチは、初心者向けのLP制作ツールです。テンプレートやブロックが多数用意されているため、デザイン力に自信がない方でも、イメージに合わせたカスタマイズが行いやすいでしょう。

【メリット】

  • 基本的な機能は無料
  • テンプレートやブロックの種類が豊富

【デメリット】

  • テンプレートを使うため、オリジナリティに欠ける場合がある
  • 細かなデザインの要望がある場合は不向き

関連記事:【画像付き】ペライチを使ったLP(ランディングページ)の作り方や事例まとめ!

LP制作ツール③ Jimdo(ジンドゥー)

Jimdo_top
引用:ジンドゥー

Jimdoは、簡単な操作で使えるLP制作ツールです。ドイツのJimdo GmbH社が運営しており、日本語版もあります。

複数の質問に答えるだけでLPが自動で生成される「AIビルダー」と、細かいカスタマイズに対応している「クリエイター」の2種類のサービスがあるため、目的にあわせて活用できます。

【メリット】

  • 多様なデザインテンプレートがある
  • レスポンシブデザインを採用(スマホ対応)
  • 独自ドメインが利用できる

【デメリット】

  • カスタマイズ性は低め
  • 日本語のドキュメントがやや不十分な点もある

LP制作ツール④ WordPress(ワードプレス)

WordPress_top
引用:WordPress

WordPressは、世界中で利用されているオープンソースのCMS(コンテンツ管理システム)の一つであり、LPのスタイルにも対応しています。

多様なテーマやプラグインを使用でき、コーディング不要で簡単にカスタマイズできます。また、SEO対策も行いやすく、多言語対応やEC機能の搭載も可能です。

【メリット】

  • 無料で利用できる
  • 利用者が多く情報が豊富なため、トラブルが発生した際の解決策が見つけやすい

【デメリット】

  • 使用方法を学ぶ必要がある
  • セキュリティ対策が必要

関連記事:【無料】WordpressでLPは自作可能!テーマやプラグインのおすすめを紹介

関連記事:ランディングページ作成ツールとは?メリットや無料で試せるツールを紹介

初心者がLP制作する際のポイント

これからLP制作をはじめるにあたって、せっかくなら成果につながるLPを目指したいですよね。ここでは、初心者がLP制作を成功させるためのポイントを2点解説します。

デザイン性だけにとらわれず、ユーザー第一で考える

LP制作で重要なのは、ユーザー視点で設計することです。

はじめてのLP制作では、作る側の好みや、流行りの技術の搭載などに傾倒しがちですが、LPは成果につながってこそ価値が生まれることも事実です。

デザイン性だけにとらわれず、LPを訪れたユーザーが何を求めているのか、どのような問題を抱えているのかを理解し、その解決策を提供するという視点を忘れずに制作を進めることが大切です。

LP制作のゴールを意識し改善する

LP制作の最終目的は、KGIの達成です。ゴールまでのプロセスにあるKPIで良い結果が出た場合でも、最終目標のKGIを意識し改善することを忘れないようにしましょう。

LP制作のゴールを意識し改善することで、より高いコンバージョンを維持できるようになるはずです。

初心者なら、ノウハウ・実績のあるLP制作会社の活用もおすすめ

LP制作で成果につなげるためには、デザイン・コーディング・マーケティングのスキルが必要であることは間違いありません。

もしも、ここまでの内容で、「本格的なデザイン・コーディングは自社・自分ではむずかしそう…」と感じている場合は、ノウハウ・実績のあるLP制作会社の活用もおすすめです。

LP制作会社は、豊富な経験と知識を持ったプロのデザイナーやエンジニアを抱えているため、高品質なLPを制作できます

自分で制作する場合に比べて短時間で完成させるうえに、LPの効果測定や改善提案も行ってくれるため、最適なLP制作が可能になります。

まとめ

LP制作では、ただ単に商品・サービスの情報を掲載するのではなく、コンバージョンを意識し、ユーザーの行動心理にもとづいた設計を行うことが必要です。

初心者がLP制作に挑戦する場合、無料のLP制作ツールやテンプレートを使うという方法もありますが、デザイン性や効果に限界があることも事実です。

成果にこだわるなら、LP制作・運用のノウハウと実績のある弊社クロスバズの、“バズLP”をご活用ください。経験豊富なスタッフが、効果的なLP制作をサポートいたします。

関連記事:LP制作(ランディングページ作成)は外注すべき?依頼前の確認事項や費用相場を紹介

\ X BUZZの定額リスティングサービス /
「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

カテゴリから記事をさがす

カテゴリ