失敗しないためのWEBマーケティング研究所

【成果につながる】ランディングページ(LP)の作り方完全ガイド

「ランディングページを作ることになったが、肝心の作り方がわからない!」

この記事はそんな人に向けたランディングページの作り方ガイドです。

ランディングページでは『作るだけ』と『作って成果につなげる』とはまったく別物です。

この記事では、作り方の手順から、ワンランク上のランディングページの作り方まで紹介していくことで、『作って成果につなげる』状態まで到達することを目的としています。

これから紹介していく情報を、ぜひ自分のランディングページ作りに活かしてください。

ランディングページの作り方を手順でご紹介

ランディングページの作り方を手順でご紹介

ランディングページの作り方は以下の手順に分かれます。

・コンバージョンの目的・目標を決める
・調査・分析を行う
・ターゲットを明確にして訴求軸を決める
・構成を決める
・ワイヤーフレームとコンテンツを作成する
・デザイン制作
・コーディング(テスト環境)
・リリース(本番環境への移行)と運用、効果測定

それぞれ順番に紹介していきます。

コンバージョンの目的・目標を決める

ランディングページを作る理由は、コンバージョンを達成することです。今どきの言葉で言うと『ポチってもらう』ために作るということですね。

まずは、このコンバージョンの『目的』を明確にしましょう。例えば、『問い合わせをしてもらう』『商品を購入してもらう』『資料請求をしてもらう』などが目的にあたります。

目的が決まったら、達成度を測るための『目標』を設定しましょう。 具体的な数値で目標が設定されていれば、リリース後に改善しやすくなります。

調査・分析を行う

次のステップでターゲットや訴求軸を決めるために、調査・分析を行います。

例えば、以下のような情報を収集しましょう。

  • 業界の動向やトレンド
  • 競合他社の訴求ポイント
  • ユーザーの年齢や職業

可能な限りさまざまな切り口で情報を収集してください。

ターゲットを明確にして訴求軸を決める

まずは、以下のように人物像や持っている悩み、購買行動の特徴がわかる明確さでターゲットを考えます。(いわゆるペルソナ分析です)

  • 山田洋子
  • 22歳女性
  • IT企業の営業職で毎日残業
  • 独身、一人暮らし
  • 週末にランニングやトレーニングをするのが趣味
  • 健康意識は高いがお金があまりないので、化粧品はコスパが良いものを買おうと思っている

このように、ターゲットがどのような人物像で何に悩んでいるかが見えてくると、どのようなシーンでランディングページに流入するのかが見えてきます。

例えば、この山田洋子さんが化粧品のランディングページに流入する場合を考えると、『今使っている化粧品より肌にやさしいものを探しているとき』『もっとコスパの良い化粧品を探しているとき』などが挙げられます。

ここまで見えてきたら、『肌へのやさしさ』『同価格帯の競合製品と比べての顧客満足度の高さ』などの訴求軸を決めていきます。

ここで決めた内容はコンテンツやデザインに影響するので、可能な限り具体的に決めると良いです。

構成を決める

ランディングページの基本構成は結起承転なので、この順序を守りながら構成を作っていきましょう。

ほとんどのランディングページの構成は、『特徴 起点』『実績・事実 起点』『親近感・安心感 起点』のいずれかに該当します。

商品やサービスの訴求軸がどの起点に該当するか考え、それに合った構成を作りましょう。

化粧品で考えた場合の例は以下の通りです。

特徴を起点にした化粧品の構成例
【結】(特徴パート):化粧水・乳液・美容液がこれひとつで
【起】(共感パート):忙しい朝の時間に肌ケアを怠り、夕方になったら肌がカサつくことありますよね。
【承】(提案パート):当商品にはオールインワンで最高の肌ケアができる工夫がたくさんあります。
どんな人でもたった30秒で完璧な肌に生まれ変わります。
【転】(後押しパート):オールインワンだから忙しい毎日でも続けられる(お客様の声も掲載)
実績・事実を起点にした化粧品の構成例
【結】(実績パート):〇〇化粧品部門 顧客満足度 第1位
【起】(共感パート):働く女性の肌は日々ダメージに晒されている。しっかりとした実績のある商品を【安心して使いたいですよね。
【承】(提案パート):当商品が選ばれる理由
【転】(後押しパート):オールインワンだから忙しい毎日でも続けられる(お客様の声も掲載)
親近感・安心感を起点にした化粧品の構成例
【結】(親近感パート):忙しい毎日に無理なく続けられる新しい化粧品
【起】(共感パート):働く女性は忙しく、毎朝完璧な肌ケアをするのは大変ですよね。だからといって、手を抜きたくないですよね。
【承】(提案パート):片手で開封できて、使ったあとは水だけでさっと落ちる。忙しいあなたに使っていただくために、商品の使い心地をゼロから見直しました。
【転】(後押しパート):オールインワンだから忙しい毎日でも続けられる(お客様の声も掲載)

もし構成が思いつかなければ、他社のランディングページを見てイメージを膨らませるようにしてください。

ランディングページの制作事例を一覧で見れるおすすめギャラリーサイトは『【初心者でもわかる】ランディングページ(LP)とは?制作のプロが徹底解説』にまとめているので参考にしてください。

ワイヤーフレームとコンテンツを作成する

構成が決まったら、ワイヤーフレームとして設計図に落とし込んでいきます。

ここでは、重要なポイントを以下のパーツでそれぞれ説明していきます。

・ファーストビュー
・ボディ
・クロージング

ワイヤーフレームを作りながら、同時にコンテンツも作って調整していくと良いでしょう。

ファーストビュー

ファーストビュー

ランディングページの顔となる部分で、最も重要であると言っても過言ではないでしょう

構成の中の『結』がここに入ります。

ファーストビューの代表的な構成要素は以下の通りです。

キャッチコピー
訴求軸を一言で伝えるキャッチコピーを入れます。
よくありがちな間違いは、ただの説明文にしてしまっていることです。
先のステップで決定したターゲットの視点に立ち返り、閲覧目的が満たされたり、訴求軸が伝わったりするか、キャッチコピーを見直しましょう。
画像
情報伝達力を表す例えとして、画像は文字の7倍の情報を伝えられると言われています。
従って、画像はランディングページの第一印象を決める要素となります。
ひと目で訴求軸が伝わる商品やサービスの画像を入れると良いでしょう。
CTA
CTAとは行動喚起を意味し、ユーザーに何かしらの行動を起こしてもらうための要素を指すマーケティング用語です。
『問い合わせ』『予約』『購入』などのCTAをファーストビューに配置することで、コンバージョン率の向上が期待できます。
権威性
これは必須ではありませんが、『お客様満足度』『実績』『受賞履歴』 のような権威性を示すと、商品やサービスの良さが伝わりやすくなります。
ただし、誇張しすぎると胡散臭さが出るので、印象を考えながら調整すると良いでしょう。

これら全ての要素を最適化したファーストビューを作成してください。

分からなければ、競合他社のランディングページを見てイメージを膨らませるようにしてください。

ボディ

ボディ

文字通りランディングページの胴体となる部分で、最も面積の多い部分です。

構成の中の『起・承・転がここに入ります。

面積が多いぶん、テンポ良く端的な構成にすると良いでしょう。ユーザーに飽きられたり、頭を使わないと理解できない内容だったりすると、ページから離脱されてしまいます。

ボディの代表的な構成要素は以下の通りで、CTAを挟みながら示していくことが多いです。

共感パート
ストーリーなどで感情に働きかけ、共感してもらうパートです。
ユーザーに語りかけるような内容になっていることが多いです。
提案パート
具体的な内容を提案していくパートです。
商品やサービスの特徴とメリット、料金プランなどがこれに当たります。
後押しパート
ユーザーに信頼や安心を与え、コンバージョンしてもらうための後押しをするパートです。
お客様の声や実績、他社比較、よくある質問などがこれに当たります。

クロージング

クロージング

ファーストビュー、ボディでユーザーの気持ちを動かし、最後にクロージングでコンバージョンに結びつけます

クロージングの代表的な構成要素は以下の通りです。

入力フォーム
ランディングページ内で全てを完結させる場合は入力フォームを設置します。具体的には後述しますが、EFO(入力フォーム最適化)によって、ユーザーが入力しやすい内容にすることが大切です。
CTA
自社サイトに入力フォームを持っている場合は、そこに流入してもらうためのCTAを設置することが多いです。

デザイン制作

事前に決めておいたターゲット像とワイヤーフレーム、コンテンツに沿ってデザインを作ります。

トーン&マナーと素材の準備はしっかり行い、統一感のあるデザインに仕上げましょう。

ちなみに、これ以降のステップはプロに依頼したり、サービスを使って作成したりすることにより、完成度の向上や作業の効率化が期待できます。

株式会社Abentryでは、上場企業から中小企業まで様々な業種の制作で得たノウハウをもとにランディングページ制作を行なっています。

ランディングページ制作でお困りの方は、以下のリンクよりぜひ問い合わせをお願いします。

ランディングページを作ることができるおすすめサービスについては後述します。

コーディング(テスト環境)

デザインをもとに、HTML・CSSでコーディングを行っていきます。

装飾をする場合はJavaScriptを用いますが、過度な装飾は離脱を招くので加減には注意しましょう。

ちなみに、コーディングを自力で行う場合は、Bootstrapを使うことをおすすめします。ランディングページに必要なUIを簡単に作成でき、完成度や作業効率も向上するからです。

リリース(本番環境への移行)と運用、効果測定

テスト環境で開発が完了し、問題ないことを確認したらリリース作業を行います。

ランディングページは、サーバーにアップロードしてURLを設定するだけなので比較的簡単にリリースできます。WordPressなどのCMSでサイトを既に作っている場合は、HTML・CSSで作った雛形をCMSに導入しましょう。

リリース後は、結果を見ながら改善を行うとより効果的に運用できます。

ワンランク上のランディングページの作り方

ワンランク上のランディングページの作り方

ランディングページの改善はLPOと呼ばれ、さまざまな方法や考え方があります。

ここでは、その中でも特にワンランク上のランディングページを作る上で重要なポイントに絞って紹介していきます。

・表示速度にこだわる
・EFO(入力フォーム最適化)にこだわる
・ファーストビューが見られる最初の数秒にこだわる

ランディングページ改善の参考にしてください。

表示速度にこだわる

オンライン上では現実の何倍も時間にシビアでなければなりません。

Googleは以下のように、読み込み時間が長ければ長いほど離脱率が上昇することを報告しています。
読込時間1~3秒:離脱率32%上昇
読込時間1~5秒:離脱率90%上昇
読込時間1~6秒:離脱率106%上昇
読込時間1~10秒:離脱率123%上昇
thinkwithgoogle.com を参照)

表示速度のコンマ1秒にこだわって改善を行いましょう。

改善の方法としては、まずGoogleのPageSpeed Insightsというサービスを使って、ランディングページの表示速度を計測してみてください。

計測したWEBサイトの表示速度が0〜100のスコアで示されるので、1ポイントでも上げるように改善してみてください。

改善できる項目については、計測結果のページに表示されているので参考にすると良いでしょう。画像データが重いため、表示速度が低下している場合が多いです。

ちなみに、スコアはWEBページの体感起動速度の世界順位を表しています。もし計測したページのスコアが90点ならば、世界全体で100ページ中10位相当のスピードということです。

Googleによるスコアの基準は以下の通りです。

スコアが 90 以上であれば速い、50~90 であれば平均的と見なされます。50 未満は遅いと見なされます。

developers.google.com より出典

EFO(入力フォーム最適化)にこだわる

実はコンバージョン達成直前の入力フォームで離脱するというのは良くあることです。

この状態を放置してしまうと大きな機会損失になるので、最適化を行いましょう。

内容・数
入力フォームの内容や数は必要最低限に抑えられているでしょうか。
言うまでもありませんが、フォームの入力の手間が増えると離脱率も上昇します。
連絡先情報は最低限必要ですが、それ以外は本当に必要なのか改めて検討すると良いです。
もし、「これ以上フォームは減らせない」という方は、必須項目を任意項目に変更することも検討してみましょう。
入力しやすさ
フォームが小さすぎたり、半角数字が使えなかったりしてないでしょうか。
パソコン・スマートフォンの両方で、入力にストレスを感じないか改めて確認しましょう。
エラー時の対応
入力内容に不備があってエラーとなる場合に、そのエラー内容は分かりやすく表示されているでしょうか。
エラーの場合に入力し直しというフォームも稀に見かけるので、そのような仕様になっていないかも確認しておくと良いでしょう。
ランディングページにフォームを埋め込む
ページを遷移するほどユーザーの離脱率は上昇するため、ランディングページに入力フォームを埋め込むことも大切なEFOです。
「埋め込みたいけど、開発コストはかけたくない」という方は、Googleフォームを使うと良いでしょう。作成した入力フォームを、そのままHTMLとして埋め込むことができます。

ファーストビューが見られる最初の数秒にこだわる

ユーザーはランディングページを見て、数秒で優良なページか判断します。

ワンランク上のランディングページにするために、この数秒間にこだわりましょう。

最初の数秒にこだわる上での確認ポイント

キャッチコピーは適切か
キャッチコピーはただの説明文になっていないでしょうか。
ターゲットの視点を想定して、閲覧目的が満たされたり、訴求軸が伝わったりするか、改めて見直しましょう。
画像は最適か
画像はひと目で商品やサービスが伝わる画像になっているでしょうか。
胡散臭さを感じるものになっていないでしょうか。
また、画質には特に注意してください。画質が良すぎると表示速度が低下し、悪すぎると視認性が低下します。
ボタンは押したくなるか
ファーストビューにCTA関連のボタンを置いている場合は、そのボタンを押したくなることも大切なポイントです。
ボタンはデザインや色、数、配置を変更することで改善が図れます。
また、カーソルを当てた時の挙動(ボタンが押し込まれる、少し透明になる など)も同時に見直すことで、より押したくなるボタンにすることができます。
レスポンシブ対応は適切か
レスポンシブ対応が見落とされているランディングページが意外と存在します。
初歩的なことですが、レスポンシブ対応は適切か今一度確認しましょう。
ファーストビューでは要素が強調されるぶん、枠からはみ出ていたり、横幅がずれていたりするだけでかなり目立ちます。このような完成度を落とす要素をなくすことも大切です。

数秒と言う根拠についての補足

ちなみに、ファーストビューの大切さの根拠として「ランディングページは一般的に3秒で判断されると言われているから」と述べている記事が多いですが、これは厳密ではないように思われます。
『3秒』という情報については、おそらく海外の論文が根拠となっている情報です。
以下に示す通り、海外の研究では、WEBページに対しての印象が形成されるまで、3秒や4秒、5秒、7秒、0.05 秒というようにさまざまな秒数が示唆されています。

Studies indicate that individuals form an initial impression of an object within a short
period of time: 3 seconds (Lindgaard et al. 2006); 4 seconds (Kaiser 2001); 5 seconds (Perfetti
2005); and, 7 seconds (Ramsey 2004) in human-to-human interaction. In addition, recent studies
indicate that this time span may be very brief (i.e., as short as 50 milliseconds (Hotchkiss 2006))

Kim, Heejun, and Daniel R. Fesenmaier. “Persuasive design of destination web sites: An analysis of first impression.” Journal of Travel research 47.1 (2008): 3-13

中でも3秒という結果を示した論文が新しく被引用数も一番多いため、この情報を根拠にして『3秒』と言っているものと推察されます。他の論文も数百回は引用されている論文なので、ファーストビューの判断時間は数秒と思っておく方が好ましいでしょう。

ランディングページを作成できるおすすめサービス

さいごに、ランディングページを作ることができるおすすめサービスについて紹介します。

・ペライチ
・ジンドゥー
・STUDIO

すべて有名どころのサービスですが、それだけに機能が充実していて使いやすいです。

ペライチ

ペライチ

peraichi.com より出典

プラン名スタートプランライトプランレギュラープランビジネスプラン
料金無料¥ 1,628/月(税込)
(年払いは¥1,465/月)
¥3,278/月(税込)
(年払いは¥2,950/月)
¥4,378/月(税込)
(年払いは¥3,940/月)
内容・公開ページ数の上限1ページ
・常時SSL対応
・スマホ最適化
・写真素材の購入料金220円/枚
スタートプランに加えて

・公開ページ数の上限3ページ
・独自ドメイン
・SNS連携
・フォーム設置
・広告非表示
・写真素材の購入料金176円/枚
ライトプランに加えて

・公開ページ数の上限5ページ
・HTML/CSS/JS埋め込み
・アクセス解析
・決済
レギュラープランに加えて

・公開ページ数の上限5ページ
・メルマガ配信
・パスワード保護
・ファイルダウンロード
・予約機能
・デザインカスタマイズ
・プレミアムセミナー無料招待

ペライチは、テンプレート選択、テキスト入力など、3ステップの操作で簡単にランディングページを作成できるサービスです。

まずは、スタートプランを利用して、どのようなページが作成できるのか、自分にとって使いやすいツールなのか、試してみましょう。LPO含めて細かい対応をしていく場合は、ライトプランやレギュラープランにアップグレードすると良いと思います。

ジンドゥー

ジンドゥー

jimdo.com より出典

プラン名FREEPROBUSINESSSEO PLUSPLATINUM
料金無料¥965/月(税込)¥2,460/月(税込)¥4,110/月(税込)¥5,190/月(税込)
内容・すべてのクリエイターの基本機能FREEに加えて

・独自ドメイン 
・広告非表示
PROに加えて

・サーバー容量:無制限
・ドメイン接続
BUSINESSに加えて

・SEO オプション
・商品バリエーション
SEO PLUSに加えて

・クリエイターのすべての機能
・多彩な製品レイアウト
・商品バリエーション
ジンドゥークリエイターの料金

ジンドゥーは、前述のペライチと同じくらい簡単にホームページを作成できるサービスです。

ペライチで作ると多少の”ペライチ感”を感じるのですが、ジンドゥーではそのような印象が少ないページを作ることができます。テンプレートはもちろんカスタマイズも可能です。

AIが自動でホームページを作成してくれるサービスもあるため、より手間を省きたい方は検討してみても良いでしょう。

有料プランは年間契約になるので、こちらもまずは無料プランで試してみることがおすすめです。

STUDIO

STUDIO

studio.design より出典

プラン名FreeStarterCMSBusiness
料金無料¥980/月(税込)
(月払いは¥1,280/月)
¥1,980/月(税込)
(月払いは¥2,480/月)
¥4,980月(税込)
(月払いは¥5,680/月)
内容・デザインツールの全機能
・アニメーション
・STUDIOバナー付公開
・サブドメイン公開機能
・CMS (1,000アイテムまで)
・フォーム (100 件まで)
・デザインツールの全機能
・STUDIOバナーの非表示
・ページごとの公開範囲設定
・独自ドメインの接続
・Apps
・フォーム(計1,000 件まで)
・月間PV数 50,000PV
・Starterプランの全機能
・CMS(1,000アイテムまで)
・フォーム(計10,000 件まで)
・月間PV数 100,000PV
・CMSプランの全機能
・CMS(10,000アイテムまで)
・月間PV数
・1,000,000PV
・優先サポート
・ライター権限

STUDIOはコードやテンプレートに縛られることなく、自由自在にWEBサイトを作れるサービスです。

他のサービスに慣れていると最初は使いにくく感じるかもしれませんが、慣れるとより直感的にランディングページを作っていくことができます。

また、あらかじめサイト内に自由に活用できる写真やアイコン素材が準備されており、テンプレートのクオリティも高いので、スムーズにランディングページを制作できます。

まとめ

『作って成果につなげる』状態を目指して、ランディングページについて解説してきました。

ここまで紹介した内容を実践していけば、その状態に到達できると思います。

ぜひ、ランディングページ制作を通して自分のものにしていってください。

株式会社Abentryでは、上場企業から中小企業まで様々な業種のサイト制作で得たノウハウをもとにWEB制作を行なっています。

WEB制作でお困りの方は、以下のリンクよりぜひ問い合わせをお願いします。

この記事を書いた人

日下智貴

株式会社Abentry 執行役員

フロントエンドとWordPress開発をメインにWEB制作をするディレクター兼エンジニア。自社サービスのAndroidアプリも開発しています。株式会社Abentry創業メンバー。

フロントエンドとWordPress開発をメインにWEB制作をするディレクター兼エンジニア。自社サービスのAndroidアプリも開発しています。株式会社Abentry創業メンバー。

WEBマーケティングのことなら、
アベントリーラボ

まずはお気軽にお問い合わせください。

お問い合わせ