BLOG

WEB&ITのナレッジキャピタル

【初心者向け】ランディングページ(LP)の作り方や手順、ツールも解説

  • ホームページ制作

最終更新日:2023年12月12日

【初心者向け】ランディングページ(LP)の作り方や手順、ツールも解説

企業が商品やサービスをWeb上で販売したい場合、ランディングページ(LP)を活用するのがおすすめです。ターゲットとなる消費者にダイレクトに訴求できるので、効果的なランディングページを作ることができれば、短期間で高い成果を期待できます。

ここではきちんと結果を出せるランディングページの作り方や、制作過程における重要なポイント、初心者におすすめの作成ツール等を詳しく解説します。

CONTENTS

ランディングページ(LP)を作る際のメリットとデメリットを初心者にもわかりやすく解説

ランディングページ(LP)を作る際のメリットとデメリットを初心者にもわかりやすく解説

ランディングページ(LP)は通常のホームページと異なり、1ページに商品・サービス概要や特徴・PRをすべて盛り込むのが通常です。ページの遷移は、(フォーム一体型のLPでなければ)フォームくらいなので、消費者が興味を示せば、こちらが伝えたいことを余すことなく伝えられるのがランディングページの魅力と言えます。

しかし、ランディングページを作成するにあたっては、メリットだけではなくデメリットもしっかりと覚えておかなければなりません。以下ランディングページの特徴を把握した上で、ランディングページとホームページのどちらを作成すべきかを検討してみてください。

【メリット1】ターゲットユーザーにコンパクトに商品・サービスを訴求できる

ランディングページは1ページが基本となるので、ターゲットとなる消費者に対してダイレクトに伝えたい内容や魅力を読んでもらうことができます。

ホームページや通販サイトの場合、本当に読んでほしい記事にユーザーが辿りつかないケースが考えられ、自社の商品・サービスの魅力を十分に訴求する前にユーザーが別のページに移ってしまったり、ブラウザバックしてしまうこともよくあるため、専用のランディングページを用意し適切に誘導することで、ユーザーにしっかりと訴求できる点がメリットの一つです。

【メリット2】サイト運営者の理想の形でCVまで誘導できる

ユーザーが問い合わせや購入、カートに入れる行為など、Webサイトの目的を達成することをCVと呼びますが、1ページで構成されるランディングページだと、サイト運営者の理想の形でCV誘導が可能となります。問い合わせやカートボタンを記事のどこにでも設置できるのはランディングページの大きな強みとなります。

一方でホームページの場合は記事ページに数多くのリンクが貼られているため、ユーザーが記事を読み終わったあとにどのページやバナーをクリックするのか、挙動が読みづらい点が挙げられます。もちろんレイアウト次第である程度のユーザー操作は可能ですが、ランディングページの方がよりシンプルかつ確実に誘導できると言えます。

【デメリット1】SEO対策が難しい

ただし、ランディングページにはデメリットも幾つかあります。その一つが「SEOの施策が難しい」ことです。Googleのキーワード検索で上位表示を目指す行為をSEO対策と呼び、通常は定期的に質の高い記事をサイト内に投稿することでサイト評価を高めていきます。

しかし、1ページで構成されるランディングページはSEO記事を投稿するページがないため、インデックスも少なく、サイト評価をGoogleからなかなか得られない欠点があります。ランディングページはキーワード検索で上位表示が困難なことから、一般的には広告主体となるため、運営者は広告マーケティングの知識も必要となります。

【デメリット2】質の高いランディングページは制作費用も安くない

ランディングページは1ページに商品の魅力をすべて詰め込み、アクションボタンを適所に設置してCVRを高める必要があります。そのため、第一印象が決まるファーストビュー、ページに使用する画像、テキストの質、アクションボタンの設置場所など、すべてにこだわらなければなりません。

見た目のデザインは良くても、ユーザーが読みにくい、買いたいと思った場所にアクションボタンが設置されていないなど、高いテクニックも要求されるので、本当に質の高いランディングページを作成するのであれば、制作費用も決して安くはありません。

また、ランディングページはHTMLやCSS、JavaScriptなどの技術を使ってコーディングするため、自社にITに精通した社員が不在だと、制作会社から納品後に修正や改善点が発生した場合、自力の対応が困難ケースがあります。

商品の価格変更、誤字脱字の修正、画像の差し替えなどが発生すると、その都度業者に依頼しなければなりません。

ランディングページ(LP)の作り方と導入までの流れ

ランディングページ(LP)の作り方と導入までの流れ

ここではランディングページの制作過程を紹介します。自社で内製化できない場合、Web制作会社やWebマーケティング会社に依頼することになります。そのため、依頼を検討している企業は、業者がどのような過程を踏んで制作から納品・公開に至るかを知っておくことで、より良好な取引関係を築けるでしょう。

ターゲットユーザー・目的の設定

デザインを決める前に、ターゲティングする消費者像(ペルソナ)を設定します。どんな人に読んでもらいたいのかをできるだけ細かく決めることで、デザインの方向性を定めやすくします。

また、リスティング広告やSNS広告では広告表示させるユーザーの詳細を決められるので、今のうちから具体的に設定することで、ぶれなく読んでほしいユーザーに届けることができます。

ランディングページのラフ案の制作

ランディングページのデザインは自社で予めイメージ案を作っておくことで、修正回数を最小限に抑えることができ、また自社が考えるイメージに限りなく近いデザインが完成します。

制作会社に一から丸投げもできますが、多くの業者はデザイン案は1案のみとなるので、「ちょっとイメージしたデザインと違う」と言う場合も変更ができないケースがほとんどです。

デザインのラフ案の作り方に決まったフォーマットやルールはないので、専用の無料・有料ツールを使うのも良いですし、パワーポイントで自己流で作るのも構いません。ラフ案作成のポイントとしては、

  1. 参考にしてほしいデザインやアクションボタンがあれば、サイトURLを記載する
  2. 要望がある場合は吹き出しを入れて分かりやすく文章で伝える
  3. 使ってほしい画像素材は予め用意しておく

などを守った上で案を作ることで、業者と自社がイメージするデザインのギャップを小さくできます。

デザインカンプの制作

デザイン案ができたら、制作会社に在籍するデザイナーが案を基にカンプを作ります。実際のコーディングではFigmaやXDといったファイルを使用しますが、デザインカンプの時点では、PNGやJPEGの画像ファイルを使って依頼企業と制作会社でデザインの確認や修正といったすり合わせを行うのが普通です。

コーディングがはじまってしまうと、大きな修正・変更ができない可能性があるので、カンプの制作途中は何度も業者担当者と意見をすり合わせてください。

テキストの埋め込み

デザインカンプの制作過程でランディングページのテキストも埋め込んでいきます。文章の作成は業者に依頼もできますが、追加料金がかかりますし、商品・サービスを一番よく理解しているのは自社の人間のため、できるだけ自分たちで考えるようにしましょう。

テキストは最初に作っておくのもいいですし、デザインカンプがある程度できた時点で、デザインを見ながら埋め込んでいく方法でもかまいません。

コーディング

デザインカンプが完成した後は、「コーディング」と呼ばれる、実際にWebサイトに表示させるためにソースコードの作成に取り掛かります。コーディングはプログラミングの基礎でありながら、エンジニアの技術力が試される工程です。

技術力が低い、あるいは実務経験が少ないエンジニアに依頼してしまうと、デザインカンプ通りにならなかったり、サイトの挙動がおかしくなることもあります。

小規模のWeb制作会社の場合、デザインカンプを制作したデザイナーがコーディングをする例もあります。コーディングはコーダーという専門の技術者がいるほど重要な作業となるので、誰がコーディング作業をするかも業者選定の重要な指標となるでしょう。

Webサイト上に公開・測定

コーディングが完了した後は、納品・ネットに公開となります。公開=運用開始となるので、不具合などは納品された時点で解消しておかなければなりません。具体的には下記をチェックするようにしましょう。

  • サイトおよびページのタグ回り
  • 文章の誤字脱字
  • 画像の解像度
  • レイアウト崩れ
  • スマホ画面のレイアウト
  • アクションボタンの挙動

また、クリック数など詳細のサイト分析をしたい場合はGoogleアナリティクスとGoogleコンソールの連携も忘れないようにしてください。

業者によって納品後の修正・改善対応は異なるため、どの時点から修正料金が発生してしまうかは契約前に打ち合わせするようにしてください。

ランディングページ(LP)の構成のポイントと注意点

ランディングページ(LP)の構成のポイントと注意点

ランディングページの構成を考えたり、制作会社へ依頼する際は、幾つかのポイントを押さえておくと、運用後に高い成果が期待できます。

顧客の立場になってランディングページの制作を請け負ってくれる優良業者であれば、担当者の方から指摘してくれますが、残念ながら業者の中には1日でも早く納品するために、おざなりな対応をするところも少なくありません。

そのため、少なくともランディングページの制作に関する以下の点は知っておくといいでしょう。

ランディングページは流れを意識する

ランディングページの構成を考えるときは、流れを大切にしなければなりません。Webに詳しくない人は構成を考えるのも一苦労ですが、ネット上に公開されているランディングページを模倣すると手っ取り早いです。

ほとんどのランディングページは商品やサービス、デザインは異なってもページの流れ自体は同じであることが理解できるはずです。

  1. ファーストビュー
  2. 導入文
  3. 商品情報・PR
  4. 実績(メディア掲載や累計販売本数など)
  5. レビュー・体験談
  6. よくある質問・商品やサービス購入までの流れ
  7. 問い合わせ・注文フォーム

上記が一般的なランディングページの流れとなります。

可能な限り画像ではなくテキストで作る

Web上に公開されているランディングページを見てみると、ページ全体が画像のみで構成されているものも多く見受けられます。テキストを含めて画像を埋め込んでいるだけなので、簡単に作成できる一方でSEOの観点から見ると、サイト評価が得られないためおすすめできません。

近年はランディングページといってもSEO対策のためにブログページを設ける「サイト一体型LP」が業界によって人気があります。将来的に自社のランディングページもSEO対策に力を入れる可能性があれば、画像ではなくテキストでページを作るよう制作会社に依頼するのがいいでしょう。

「3つのNOT」を乗り越える構成・コンテンツを考える

ランディングページを含むWebサイト上で商品やサービスといった自社商材を販売するのは一筋縄ではいきません。近年はネット決済や購入の敷居も低くなっているとはいえ、基本的に消費者は「読まない・信じない・行動しない」という心理を持っています。

読まない(Not Read):
どんなに美しいデザインで、訴求力のある文章を考えても、消費者はすべてを読んでくれません。

信じない(Not Believe):
ランディングページで紹介する商品・サービスがどれくらい優れているかは、消費者は詳しく理解できません。多くの消費者は「本当かな?」と疑ってかかることを想定しなければなりません。

そのため、メディア掲載の実績や専門家の意見などを交えて、商品を購入するメリットや効果をしっかりと伝えることが大切です。

行動しない(Not Act):
うまく問い合わせ・購入ボタンまで消費者を誘導できても、「やっぱりもう少し考えよう」、「他の商品も見てみよう」と最後のクリックは心理的に躊躇するのが普通です。

氏名や住所などすべて入力し終えた後に躊躇いが生じてブラウザを閉じて離脱するケースもよくあります。

離脱率を下げるためには、ランディングページ上で消費者が抱く疑問を先回りして回答したり、いま購入するべき理由を説得力ある文章で説明する必要があります。

ファーストビューのコツ

ファーストビューのコツ

ランディングページの最上部に表示される画像を「ファーストビュー」と呼び、ページの第一印象を決める重要な画像となります。

ファーストビューの画像の質が低いと、ユーザーは下にスクロールせず即座にブラウザバックすることも少なくありません。

1ページで集客しなければならないランディングページにおいて、ファーストビューに盛り込む内容は非常に大切なので、以下に上げるコツを把握しておいてください。

ファーストビューにCTAを設置する

ネット上に出回るランディングページを確認すると、ファーストビューにアクションボタンを設置していないページもたまに見かけます。

ファーストビューに設置するアクションボタンは、「期間限定〇〇無料」、「〇〇日無料お試し」など、ユーザーがボタンを押す動機付けとなるメリットを盛り込むといいでしょう。

分かりやすく端的なキャッチコピー・メッセージを考える

ファーストビューに使う画像はユーザーにダイレクトに視覚効果を与えるので、ただお洒落で見栄えのいいものを使うだけでは十分な効果を期待できません。

ターゲットとなるユーザーの性別や年齢など具体的なペルソナを作り、伝えたいメッセージや特徴を端的に盛り込むようにしましょう。

また、素材サイトの画像を使用する際は、できるだけ他サイトでは見かけない画像を選ぶのもポイントです。

無料かつ自分で作りたいなら「Canva」がおすすめ

Canvaはオーストラリア発のデザインツールです。自分で撮影した画像やCanva内のテンプレートを加工してオリジナルの素材に仕上げることができます。

背景の陰影や切り取り、ぼかし、合成など一通りの加工ができるので、自社でファーストビューを作成する場合はCanvaを利用するのもおすすめです。

Canvaは無料と有料のプランがあります。使えるテンプレート数や加工方法に違いがありますが、基本的な画像作成は無料プランでも十分です。

最初は無料プランで活用してみて、使いたいテンプレートや加工方法が有料プラン限定であったら、その時にアップグレードを検討するのが良いでしょう。

また、有料プランだとInstagramやFacebookなどSNSへの予約投稿もCanva上で可能となります。

公式HP:https://www.canva.com/

ランディングページ作成ツールを紹介

ランディングページ作成ツールを紹介

Canvaは画像加工ツールとなりますが、もし自社でランディングページすべてを作りたいという場合は、以下で紹介する作成ツールを使ってみてください。

いずれも初心者でも比較的簡単にランディングページを作ることができます。

  1. ペライチ
    1ページもののホームページやランディングページを作成できる人気のツールです。テンプレートを選んで画像とテキストを埋め込んでいくだけなので、誰でも気軽に作ることができます。ただし、無料プランだと広告が表示されるほか、有料と比較して使える機能が大きく制限されます。また、累計1万PVを超えると自動的に非公開になってしまいます。
    公式HP:https://peraichi.com/
  2. ジンドゥー
    ドイツに本社を置くホームページ作成ツールで、日本ではKDDIが運営しています。数あるホームページ作成ツールの中でも日本人向けのUIとなり、使い勝手も非常に優秀と評判です。他のツールと比較するとテンプレートの数は少なめですが、ある程度のカスタマイズが可能です。無料プランだと独自ドメインが使えないので、商用利用を考えているなら有料プランへのアップグレードを検討するのが良いでしょう。
    公式HP:https://www.jimdo.com/jp/
  3. MOSH
    「スマホで簡単にサイト制作ができる」ことをコンセプトにしたWebサイト作成ツールで、予約ページ付きのランディングページの作成が可能です。商品よりはサービス販売向けのサービスが充実していて、サブスクや回数券といった機能を無料で付けることができます。MOSHの利用は無料ですが、注文が入ると8%の手数料が発生するほか、テンプレートのデザインのカスタマイズができないことにも注意が必要です。
    公式HP:https://mosh.jp/
  4. STUDIO
    ノーコードでホームページを作れると評判のSTUDIOはランディングページの制作に対してもおすすめできます。国産ツールのため日本人に親しみのあるテンプレートが豊富で、画像の埋め込みやライティングといった編集画面が非常に使いやすいのが特徴です。ランディングページの制作自体は無料で可能ですが、PVによって公開制限があります。
    公式HP:https://studio.design/ja/
  5. Wix
    イスラエルに本社を構えるWixは、ホームページ作成ツールとしては大手の会社です。800以上のテンプレートを提供しているため、ターゲット層に応じて最適なデザインを選んでランディングページを作れます。WixはPVによる従量課金制ではないため、無料でもずっと使い続けることができますが、ジンドゥーと同様に独自ドメインが使えません。
    公式HP:https://ja.wix.com/

ランディングページを依頼する方法と手段

ランディングページを依頼する方法と手段

ランディングページの制作を外部に依頼する場合、目的や予算、求める品質に応じて委託先を決めるのがおすすめです。

以下ではランディングページの委託先とそれぞれのメリットデメリットを解説します。

マッチングサイトでフリーランスに依頼する

クラウドワークスやランサーズ、ココナラといったビジネスマッチングサイトを使い、フリーランスのエンジニアにランディングページを依頼することもできます。

Web制作会社と比較して安い費用で依頼できる一方、実務経験が浅いエンジニアや専門学生なども登録しているため、自社でイニシアティブをとらなければならないこともあります。

納期や品質管理を自社でできて、なおかつ優秀なエンジニアに依頼できれば、費用対効果の高いランディングページの作成が期待できます。

Web制作会社に依頼する

企業が自社の事業発展を目的にランディングページを制作するならば、しっかりとしたWeb制作会社に依頼するのがおすすめです。

個人のフリーランスと比べると費用は高くなりますが、ランディングページのネット集客におけるノウハウがありますし、Web運営にまつわる悩みも質問できるので、よきパートナーとして委託できます。

費用を抑えたいときは依頼する範囲を限定する

ランディングページの制作費用はフリーランスに依頼すると10~20万円。Web制作会社だと20~50万円が相場となります。

小規模事業者や零細・中小企業からすると、決して気軽に出せる費用ではありません。そこで、初期費用をできるだけ抑えたいときに考えてほしいのが「依頼する工程を限定する」ことです。

デザイン案や画像素材、テキスト作成、WordPressへの搭載などすべての工程を依頼すると、50万円では収まらないことも多々あります。

一方で、デザインカンプはフリーランスに安く依頼して、Web制作会社にはコーディングとWordPressへの搭載だけを依頼する、など依頼範囲を限定することによって、費用を抑えることが可能です。

その場合、デザインや画像・テキストデータは漏れなく自社で準備したのち、Web制作会社に問い合わせるようにしましょう。

ランディングページ作成を依頼する際の確認事項とおすすめWeb制作会社

ランディングページ作成を依頼する際の確認事項とおすすめWeb制作会社

Web制作会社は全国に数多く存在しますし、ホームページ上の企業情報を見ただけではどこの会社に依頼すべきか分かりません。

以下ではランディングページの制作実績が豊富なおすすめのWeb制作会社を紹介するとともに、契約前に確認すべき事項を解説します。

関西圏を中心に大阪や東京にもビジネスエリアを持つ老舗Web制作会社「ホームページ制作大阪ドットコム」

東京と大阪にビジネスエリアを持つ老舗Web制作会社「ホームページ制作大阪ドットコム」

「ホームページ制作大阪ドットコム」は、大阪をはじめ関西圏を中心に東京にも拠点があるWeb制作会社です。創業1998年の老舗を誇るIT企業で、システム開発やECサイト制作など高い技術力を持つエンジニアが在籍しているのが特徴です。

ランディングページに関してもあらゆる業界・業種の制作事例・実績を有しているため、自社の目的・目標の実現に沿ったデザインやコンテンツの提案を受けることができます。

公式HP:https://gelatocms.com/

相見積もりよりも会社の制作事例を確認する

Web制作会社によってランディングページの制作費用は異なりますが、そこまで高値を請求する業者は滅多にありませんので、相見積もりに熱中するよりは、業者の制作事例の比較・確認に時間を費やすのがおすすめです。

Web制作会社のホームページを確認すれば制作物の一覧ページがあるので、ランディングページのクオリティを比較するといいでしょう。

ただし、ランディングページの制作にあたり、企業と業者は秘密保持契約を交わすため、業者はクライアントの許可なく実績をWeb上に公開することができません。

「この業者に依頼したいけど、実績が少ない」と感じる場合は、一度問い合わせてみれば非公開の実績を教えてくれることもあります。

公開後のアフターフォローを確認する

ランディングページの制作会社を選ぶもう1つの基準は「運用後のフォロー」です。不具合や改善箇所があった場合の無料保証期間や料金体系などは業者によって大きく異なります。

業者によってはランディングページの制作は安く提供し、アフターフォローでサイト維持費としてランニングコストを設定するところもあります。

自社のランディングページの運用方針や予算などを鑑みて、適切なプランを提案してくれる業者と契約するようにしましょう。

まとめ:ランディングページ(LP)はネットビジネスの基本。最適な作り方を模索する

まとめ:ランディングページ(LP)はネットビジネスの基本。最適な作り方を模索する

自社の商品やサービスをWeb上で販売したり、コンシューマー・マーケティングを実践したい場合、ランディングページ(LP)はネットビジネスの基本となります。

ただし、たったの1ページの中に、あらゆるテクニカルな要素が詰め込まれているので、本当にネット集客を成功させたいのであれば、然るべき技術者に依頼するのがおすすめです。



CONTACT

お問い合わせ

お見積もりのご相談・お問い合わせはこちら。
外注・業務委託も承っております。
お気軽にお問い合わせください。