0120-900-587
インターネットでは特定のWebサイトへアクセスするための経路は非常に多岐にわたります。そのなかでも、ユーザーが最初に訪問（ランディング）するページがランディングページ（LP）です。ランディングページでは商品の購買や登録など、ユーザーにアクションを起こしてもらうために用意するページですが、具体的にどのように作成すればよいのか気になるお客様も多いのではないでしょうか。
この記事では、ランディングページの基礎から必要となるスキル、使用するソフトウェア・ツール類、作成の流れなど、ランディングページの作り方を網羅的に解説します。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
このページの目次
記事監修者の紹介
真中 淳一
墓石、屋根、外構、防水工事の一括見積メディア運営を6年間経験致しましたので、お客様対応からポータルサイト一からの立ち上げの経験は豊富にあります。また、その他にもオリジナルCMS開発、予約システム、プラットフォームのディレクターも5年経験を積んでいるので、幅広いシステム開発の要件の知識やノウハウもあります。これからホームページを作成されるお客様のお力になれれば幸いです。
1. ランディングページの作り方1：そもそもLPとは？
ランディンページ（LP）は、ユーザーが最初に訪問（ランディング）するページです。主に商品の購買やユーザー登録などの目的のために作成されます。
ここで一つ覚えておいてほしいこととして、ランディングページには「広義のランディングページ」と「狭義のランディングページ」が存在します。広義のランディングページとは、検索エンジンなどからユーザーが対象のホームページに「最初に着地（アクセス）したページ」のことです。たとえば、Googleの検索結果からホームページのトップページにユーザーがアクセスした場合、広義のランディングページはトップページとなります。
狭義のランディングページとは、ユーザーにアクションを起こしてもらうことを目的に作成する縦長のレイアウトのページです。一般的には、こちらの方をランディングページとして扱うことが多く、この記事でも狭義のランディングページを主体に解説を進めます。
一般的なホームページでは、記事のなかにリンクを設けてさまざまなページへとつなげていますが、ランディングページは基本的に1枚もののページです。そのなかにユーザーが求める情報を記載し、最終的にアクションを起こしてもらうように作成します。
ランディングページの最終的な目的は、「ユーザーに何かしらのアクションを起こしてもらうこと」です。その目的は先に述べたとおり、商品の購買やユーザー登録になるわけですね。
2. ランディングページの作り方2：作成に必要なスキルを知る
ランディングページを作成する際、具体的にどのようなスキルが必要なのでしょうか。ここでは、3つのスキルに分けて解説しますので、一つずつ見ていきましょう。
2-1. コーディングスキル
ランディングページを作る際には、基本的に次の3つの言語を扱えなくてはなりません。
・HTML
・CSS
・JavaScript
HTMLはページの骨組みとなるものであり、CSSはHTMLを装飾するものです。この2つはWebページを作成する上で最低限必要なスキルとなります。あわせて、ランディングページでは、よりユーザーにアクションを促すために動的なコンテンツを表示する必要があります。その際に利用するものがJavaScriptなのです。
ランディングページを一から作成する際には、これらのコーディングスキルが欠かせません。さらに、お問合せフォームなどを設置するために、PHPも扱えるとよいでしょう。
2-2. デザインスキル
ランディングページの主な目的である「商品の購買」や「ユーザー登録」を促すためには、高いデザインスキルが必要です。ランディングページを作る際には、デザインの完成見本図である「デザインカンプ」も作成しなければなりません。最適なデザインができなければ、デザインカンプを作成することも難しいでしょう。
また、エンジニアとデザイナーに求められる能力が異なるように、コーディングスキルとデザインスキルは全く別物です。一から双方のスキルを身につけようとすると非常に時間がかかることは覚えておきましょう。
2-3. 販売スキル
ランディングページの目的を考えれば、販売スキルは欠かせません。仮にユーザー登録が目的であったとしても、最終的にユーザーに行動を起こしてもらうための導線づくりは変わらないため、販売スキルは必要といえます。
ユーザーが行動を起こすために必要な要素を考え、ユーザーの気持ちに沿ってコンテンツを制作しなければなりません。ランディングページを作成する上では、主に次の要素が必要となります。
・キャッチコピー
・共感
・オファー（商品の提示）
・お客様の声
・差別化
これらの要素を的確にコンテンツとして表すために、販売スキルが必要なのです。
3. ランディングページの作り方3：作成で利用するソフトウェア、ツールを知る
作成に必要なスキルをみて「難しそう」と思ったお客様もご安心ください。それらのスキルが足りていなかったとしても、簡単にランディングページを作成するためのツール（Webサービス）が存在します。ランディングページ作成ツールとあわせて、ランディングページを作成する際に利用されるソフトウェアやツール類を見ていきましょう。
3-1. デザインソフトウェア
ランディングページを作成する際には、デザインソフトウェアが必要です。デザインカンプだけでなく、ワイヤーフレームやコンテンツの素材となる画像の作成もしなければならないからです。その際に利用されるデザインソフトウェアの代表的な例を紹介します。
3-1-1. Adobe Photoshop / Illustrator
Adobe Photoshop / Illustratorは、デザインソフトウェアの代表格です。これらはデザインカンプの作成やコンテンツの素材を作成する際に利用します。
Adobe Photoshopは主に写真などの画像処理に向いており、Illustratorはロゴなどの作成で利用することが多いでしょう。それぞれが得意とする画像の種類が異なっており、Photoshopは「ビットマップ画像」、Illustratorは「ベクター画像」を得意としています。
Adobe Photoshop / Illustratorを利用する際には、双方の得意分野を理解した上で使用しましょう。
3-1-2. Adobe XD
Adobe XDはワイヤーフレームの作成で利用できるデザインソフトウェアです。ワイヤーフレームはWebページのレイアウトを決める設計図であり、ランディングページを作成する際にも必要となります。
Adobe XDはコーディング知識がなくともワイヤーフレームが作成でき、デザインカンプの作成も可能です。Adobe XDでできることを簡単にまとめると次のとおりとなります。
・ワイヤーフレーム、デザインカンプの作成
・プロトタイプの作成
・デザインの共有やコメント
ランディングページだけでなく、モバイルアプリなどのデザインでも利用されるデザインソフトウェアです。
3-1-3. moqups
moqupsもワイヤーフレームを作成するためのツールですが、ブラウザベースで利用できる無料のWebサービスです。こちらもAdobe XDと同じくコーディング知識がなくとも利用できます。ドラッグ＆ドロップで簡単にパーツが配置でき、直感的に操作できるためAdobe製品に慣れていないお客様は一度試してみてはいかがでしょうか。
海外製のWebツールであるため英語表記となっていますが、Google Chromeなどのブラウザの翻訳機能を使うことで、日本語でも利用可能です。
3-2. ランディングページ作成ツール
ここからは、コーディングスキルがなくともランディングページが作成できるWebツール類を紹介します。
3-2-1. ペライチ
ペライチは無料で利用できるランディングページ作成ツールです。デザインはテンプレートから選択するため、コーディングスキルやデザインスキルがなくとも簡単にランディングページを作成できます。
ペライチを利用して一般的なホームページの作成もできますが、ページ数が増えるほど料金がかかるため、ランディングページの作成に利用するとよいでしょう。注意点として、無料版では独自ドメインが使えなかったり、フォームの配置ができなかったりします。
テンプレートに従ってランディングページを作成したら、公開ボタンを押すだけですぐにランディングページが公開できるため、「とりあえずランディングページを作ってみたい」というお客様におすすめです。
3-2-2. Jimdo（ジンドゥー）
Jimdoはホームページ作成サービスとして有名なサービスです。もちろん、ランディングページの作成も可能であり、世界中で170万ユーザーが利用しています。Jimdoもデザインテンプレートから選択してランディングページを作成するため、コーディングスキルやデザインスキルがなくとも利用可能です。
Jimdoも無料版では独自ドメインが使えませんが、月額990円のSTARTプランから独自ドメインは利用できます。ランディングページとあわせて、ホームページも作成したい場合は利用してみてはいかがでしょうか。
3-2-3. Wix（ウィックス）
WixもJimdoと同じく世界的に有名なホームページ作成サービスです。世界190か国で利用されており、コーディング知識を必要とせずドラッグ＆ドロップでランディングページが作成できます。
Wixでは2万点以上の無料写真・動画素材を利用することができ、豊富なデザインテンプレートからランディングページが作成できるため、おしゃれなランディングページ作成がしたいお客様におすすめです。ただし、Wixも無料プランでは独自ドメインが利用できないため、月額1,300円のアドバンスプランを選ぶことをおすすめします。
3-2-4. WordPress
ホームページを作成するためのオープンソースのCMSであるWordPressでも、ランディングページの作成が可能です。WordPressに慣れているお客様であれば、こちらを使ってランディングページを作成することをおすすめします。
WordPressでランディングページを作成する際には、ランディングページ用のテンプレートを利用するとよいでしょう。もちろん、一般的なテンプレートからでも作成できますが手間がかかるため、ランディングページ用のテンプレートを利用することをおすすめします。
WordPressであれば、テンプレートやプラグインを利用することでランディングページに必要となる要素を簡単に構築できます。カスタマイズする際はコーディングスキル（プログラミングスキル）が必要となりますが、ランディングページ用のテンプレートを利用することで、簡単にランディングページを作成可能です。
4. ランディングページの作り方4：作成の流れを知る
ここからは、ランディングページを作成する際の流れについて見ていきましょう。ランディングページを作成する流れを5つのStepに分けて解説していきます。
4-1. Step1：ターゲット、訴求軸を決める
ランディングページを作成する上で最も重要となるStepです。ランディングページの目的に合わせてターゲット（ペルソナ）を作成し、訴求軸を決めていきます。作成するランディングページには、どのような悩みを持つユーザーがアクセスするのかを考えましょう。
ターゲットや訴求軸が想定ユーザーからずれてしまうと、効果的なランディングページが作成できません。なぜなら、ランディングページのなかに記載する情報や、その伝え方も変わってくるからです。
ターゲットはできるだけ細かい部分まで設定し、仮想の人物モデルである「ペルソナ」を作成しましょう。年齢や性別だけでなく、どのような暮らしをしているのか、どんな悩みを持っているのかなど、細かく決めていきます。そのうえで、そのターゲットがアクションを起こすための訴求軸を考えます。
4-2. Step2：コンテンツを制作
Step1のターゲット、訴求軸に沿ってコンテンツを制作します。はじめにワイヤーフレームを作成してから、実際に必要となるテキストや画像素材などの制作に移りましょう。先程もお話ししたとおり、ワイヤーフレームはページの設計図となるため、進め方としては骨組みとなるワイヤーフレームを作成した上で、コンテンツを肉付けしていくイメージです。
ランディングページの構成、必要なコンテンツ内容としては次のものが挙げられます。
・キャッチコピー（アイキャッチ）
・共感部分
・商品の提示
・ベネフィット
・ユーザーの声
・CTA（Call To Action）
これらの要素をワイヤーフレームに当てはめ、具体的にコンテンツの制作を進めていきます。
4-3. Step3：デザインする
ランディングページにおいて、デザインの質は最終的な結果に大きく直結するものです。たとえば、ランディングページの目的が「商品の購買」であれば、売上に繋がってきます。実際に、コンテンツの内容は変わっていないにもかかわらず、デザインを変更しただけで2倍の効果が得られた事例もあるほどです。
デザインの際も、Step1のターゲットにより響くものにする必要があります。基本的に人は文章を読みたくないものであるため、ターゲットに合わせて先に読み進めたくなるようなデザインにすることが重要です。
写真を活用したり、フォントサイズやカラーを変えたりと、ちょっとしたデザイン変更でもユーザーの反応が大きく変わる可能性があります。
4-4. Step4：コーディング
Step3まで完了したら、あとは実際に形にするだけです。ワイヤーフレームに従ってコーディングを進め、ランディングページを完成させます。
コーディングの際には、あわせてランディングページのURLや、ランディングページから問い合わせがあった際のメール文などを用意しておきましょう。ランディングページの見た目だけでなく、ユーザーが行動したあとの流れまで含めて対応する必要があります。
また、ランディングページを作成してからすぐに反応があるとは限りません。すぐに修正したい部分が出てくる可能性があるため、修正前提で準備を進めておきましょう。
4-5. Step5：公開、効果測定
Step4のコーディングまで完了したら、あとは公開するだけです。しかし、ランディングページは公開して終わりではなく、継続的な効果測定が必要不可欠です。なぜなら、ランディングページは公開してすぐに成果が出るようなものではないからです。
ランディングページを公開してから、どのくらいのユーザーがアクセスしているのか、アクセスしたユーザーの何%がアクションを起こしているのか、といった情報を得るために効果測定が必要不可欠となります。
効果測定の結果を見ながら、デザインやコンテンツの内容を修正しなければならず、効果的なランディングページにするためにユーザーの反応を見ながら改善を続けなければなりません。
5. ランディングページの作り方5：事例を参考にする
ランディングページは世の中に多く公開されています。それらをもとに、お客様が作成するランディングページのイメージを掴むことで、より効果的なランディングページが作成できるでしょう。ここでは、ランディングページの事例を参考にする重要性や、おすすめの事例まとめサイトを紹介します。
5-1. 既存のLPから構成などを学ぶことが大切
ランディングページを一から作成する場合、最初から効果的なランディングページを作成することは難しいでしょう。ランディングページは一般的なホームページと異なり、明確な目的を達成するために必要となるページです。
そのため、目的を達成するために最適化されたページを作成しなければなりません。そのようなランディングページを作るためには、既存のランディングページの構成などを参考に学ぶことをおすすめします。世の中には非常に多くのランディングページが公開されており、参考にするランディングページには事欠きません。
多くのランディングページを見ることで、効果的な構成や画像の使い方など、ある程度のパターンが見えてくるでしょう。それをもとに、お客様のランディングページを作成することで、より効果的なランディングページが作成できるようになります。
多くのランディングページを見るために事例のまとめサイトがあるため、そちらを2つ紹介します。
5-2. おすすめまとめサイト1：ランディングページ集めました。
「ランディングページ集めました。」は、Webデザイナーのためのランディングページリンク集です。カテゴリ別にさまざまなランディングページが集められており、サムネイルから気になるランディングページを確認し、直接対象のページにアクセスできます。
閲覧できるジャンルの一例としては、次のようなものがあります。
・PC、家電
・ゲーム
・ファッション
・健康食品
・医療、医薬品
・美容、化粧品
・飲料、食品
など
約3,000事例のランディングページが集められていますので、一度確認してみてはいかがでしょうか。
5-3. おすすめまとめサイト2：LP幹事
「LP幹事」は、事例の探しやすさを追求して作成されたランディングページのまとめサイトです。ランディングページの事例を探す際に、「業界」「カラー」「イメージ」から検索することができ、よりお客様の目的に合わせたランディングページの事例を探せます。
LP幹事では約2,600事例が集められており、随時更新されています。また、ランディングページの事例ごとに専用ページが用意されており、対象のランディングページにアクセスせずともページ画像を確認可能です。パソコンでの表示結果だけでなく、スマートフォン表示も一度に確認できるため、非常に使い勝手がよいまとめサイトとなっています。
6. ランディングページの作り方6：作成時の注意点
最後に、ランディンディングページを作成する際の注意点を紹介します。事前に注意点を知っておくことで、より効果的なランディングページを作成できるようになりますので、一つずつ見ていきましょう。
6-1. 継続的な効果測定、改善が必須
先にお伝えしたとおり、ランディングページは作成・公開したら終わり、というものではありません。あくまでも、はじめに作成したランディングページは製作者の思いだけで作られているものです。「こうしたら売れる（登録してくれる）のではないか？」という仮説に基づいたものであり、実際にターゲットが行動してくれるかどうかはわかりません。
そのため、継続的に効果測定を行い、改善していく必要があるのです。
ユーザーのアクセス数、ユーザーのアクション率などを細かくチェックし、改善を繰り返しながら効果的なランディングページになるように運用しなければなりません。
6-2. 伝えるべき内容は「魅力、メリット」ではなく「ベネフィット」
販売における基本的な部分ですが、ユーザーに伝えるべき内容は「（商品の）魅力、メリット」ではなく「ベネフィット」です。実はユーザーは商品がほしいわけではなく、商品を購入したことで自分にどのような効果があるのか、という点に基づいて行動を起こしています。
たとえば、プロテインサプリのランディングページを作る場合、「この商品は貴重な○○という成分を配合！」ではなく「筋肉がつくことでモテモテになります！」と伝えたほうが、よりユーザーに刺さりやすいランディングページになるのです。
例の前者は商品のメリットを伝えていますが、後者は商品を使ったあとのユーザーの未来を伝えています。この考え方はランディングページの目的が「ユーザー登録」などの場合も同様です。
6-3. 情報を詰め込みすぎない
ユーザーに伝えたい情報は非常に多いと思いますが、情報を詰め込みすぎることでページから離脱されてしまうかもしれません。人は基本的に文字を読みたくないものであるため、伝えるべき情報を厳選しましょう。また、文字だけでなく写真やグラフなどを使ってユーザーがイメージとして情報を受け取れるようにする工夫も必要です。
情報が少なすぎる、単調すぎるランディングページになってしまうと、それもユーザーが離脱してしまう原因になるため、ちょうどいい塩梅に調整しなければなりません。その点も、ランディングページが改善し続ける必要がある部分と繋がります。
6-4. 視線誘導を意識する
視線誘導とは、ユーザーが画面を見る視線の動きをスムーズに誘導するための技術です。ユーザビリティを向上させるために欠かせない要素であり、上手な視線誘導はランディングページの目的達成に繋がってきます。なぜなら、アクションを起こすためのボタンやリンクを視線誘導に従って配置することで、より効果を発揮できるからです。また、ユーザーはスムーズに視線が動かせないと「見づらいページ」と判断して離脱してしまう可能性があります。
視線誘導には大きく次の3つのパターンがあり、コンテンツの内容によって選択するとよいでしょう。
| 視線誘導のパターン | 説明 |
| グーテンベルク・ダイアグラム | 左上から右下に視線が移る考え方に基づき、コンテンツを4つの区画に分けて配置する。重要なコンテンツを左上、中央、右下に配置することで目立たせる。 |
| Z型 | アルファベットの「Z」のように視線が左上→右→左下→右に流れる考えに基づき、コンテンツを配置する。チラシや雑誌などで活用されている。 |
| F型 | アルファベットの「F」のように視線が左上→右→左（戻る）→下→右に流れる考えに基づき、コンテンツを配置する。ニュースアプリなどに多い型。 |
フレームワークを作成する段階で、視線誘導まで意識して作成することをおすすめします。
7. まとめ
ランディングページは、ユーザーが最初に訪問（ランディング）するページであり、主に商品の購買やユーザー登録などの目的のために作成されます。
ランディングページを作る際には、次の3つのスキルが必要となります。
・コーディングスキル
・デザインスキル
・販売スキル
これらのスキルが無くともランディングページ作成ツールを利用することで作成は可能ですが、いくつか制限がある点は注意しなければなりません。また、ランディングページを作成する際の流れとしては、次の5つのStepに従って作成するとよいでしょう。
・Step1：ターゲット、訴求軸を決める
・Step2：コンテンツを制作
・Step3：デザインする
・Step4：コーディング
・Step5：公開、効果測定
そのほかにも、事例や注意点を紹介しましたが、ランディングページの作成には多くの知識やスキルが必要であり、効果的なランディングページは作成が難しいものです。
効果的なランディングページを手早く作成するのであれば、専門の制作会社に依頼することも検討されてはいかがでしょうか。
制作会社を探される場合は、弊社へお問い合わせいただくことで、一括で優良制作会社を紹介する事が可能です。お客様に最適な制作会社をご提案いたします。
制作会社選びでお悩みのお客様は、どうぞお気軽に弊社へご相談ください。
