ランディングページでは、資料請求やお問い合わせなど、ユーザーに特定の行動を起こさせることを目的とする。
ランディングページのコンバージョンは、リード獲得や売上に直結するため、作成にリソースを割いている以上、確実に成果を挙げていきたいものである。
一方で、
- 「知識や経験がなく、ランディングページの作り方や手順がわからない」
- 「成果が出るランディングページの基本やポイントを知りたい」
- 「外部委託か自社制作か、どちらが適しているのかわからない」
という悩みもあるだろう。
そこで本記事では、ランディングページの作り方を初心者でも分かる形で解説し、成果を出すための重要なポイントや、さまざまな作成手段のメリット・デメリットについて解説していく。
1.ランディングページの作り方9STEP
早速、ランディングページの作り方を9つのSTEPに分けて解説していく。
STEP1:ランディングページの目的を決める
まずは、ランディングページの目的、つまりランディングページででのユーザー行動のゴールを定めよう。
BtoBマーケティングにおけるランディングページでは、一般的に以下のような目的が設定される。
- 資料請求
- 問い合わせ
- ホワイトペーパーのダウンロード
- その他コンテンツのダウンロード(用語集・ノウハウ集など)
- メルマガの登録
- ウェビナーへの参加の申込み
- 無料トライアルの申込み
ランディングページの目的は、該当の事業・プロジェクトにおける目標に繋がるように考慮して決める必要がある。
例えば、新規顧客の獲得が目標ならば資料請求やお問い合わせ、ブランド認知の拡大が目標であればウェビナーへの参加の申込みやコンテンツのダウンロードなどとなる。
STEP2:目標(KGI・KPI)を定める
目的を定めたら、ランディングページで達成したい具体的な数値目標=KGI・KPIを定めよう。
- KGI(重要目標達成指標):ランディングページで達成したい最終的な目標。
- KPI(重要業績評価指標):KGIを達成するための中間目標。
具体的な目標を定めることは、ランディングページのパフォーマンスを定量的に計測・分析・改善し、効果を最大化するために必要である。
例えば、
- KGI:お問い合わせ20件
- KPI:フォーム送信率30%、CTAのクリック率1%、セッション数12,000
というような形で、KGIから1つずつ逆算して数値を設定していこう。
STEP3:ターゲット・訴求軸を設定する
次に、ランディングページのターゲットと訴求軸を設定しよう。
ターゲットを設定する
ターゲットは、年齢、性別、居住エリア、職業、家族構成、興味、検討段階など細かい軸で絞り込み、設定しよう。
ターゲットを具体的に設定にすることで、より具体的な訴求ができ、ユーザーに刺さりやすくコンバージョン率(CVR)が高いランディングページに繋げられる。
ただし、この時点でのターゲット像はあくまで仮説に過ぎない。
ランディングページの公開後の実際のパフォーマンスに合わせて改善・調整する柔軟な視点も持ち合わせておこう。
訴求軸を設定する
ランディングページの中でターゲットの心にどう訴えかけるかという「訴求軸」も設定しておこう。
他社では得られない自社の優位性をアピールできるとともに、ユーザーが判断や選択を下しやすくなるためだ。
訴求軸には以下のような型がある。
- 解決型:「作業時間を○%削減」「知識ゼロでも操作できる」など
- 限定型:「残り○社限定」「〇〇日間限定公開」など
- 価格型:「サービス利用料3ヶ月分無料」「定額追加料金一切なし」など
- 高級型:「ハイクラスの専門家がマンツーマンでサポート」「〇〇でしか実現できない操作性抜群のUI」など
- 権威型:「大手企業〇〇社の導入実績」「○〇(著名人・専門家)が薦める」など
状況によっては、2〜3の訴求を組み合わせることもあるだろう。
ランディングページで「最も訴求したいこと」は最後までブラさないようにし、チーム内・社内で共通認識を持っておこう。
STEP4:構成(ワイヤーフレーム)を作成する
ここから、ランディングページの構成(ワイヤーフレーム)を作成していく。
ランディングページにおいて「何をどこで伝えるか」という順序やレイアウトを設計していく作業である。
いわば商談やスピーチの前に、話の内容と順番を組み立てることと同様の作業だ。
構成を作成することで、ランディングページの全体像や必要なコンテンツを明確にしてチーム内で共有でき、スケジューリングや役割分担をスムーズに進められるようになる。
構成は、大きく分けて以下の3つで成り立っている。
- ファーストビュー(キャッチコピー、アイキャッチ画像、CTAなど)
- ボディ(興味・共感喚起、特徴・ベネフィット、実績・事例、導入プロセスなど)
- クロージング(よくある質問、CTAなど)
ランディングページの構成の作り方については、次章で詳しく解説する。
STEP5:コンテンツを作成・整理する
構成が作成できたら、ランディングページに掲載するコンテンツ(コピー、画像、動画など)コンテンツを作成・整理する。
コピーライティング、画像や動画の撮影と編集、ページ内で使用する実績やエビデンスの収集など、複数の部門で役割分担をすることも必要となるだろう。
また、既存のコンテンツをランディングページ用に編集・整理する作業も含まれる。
STEP6:デザインを作成する
次に、ランディングページのデザイン作成を進める。
これは、前項のコンテンツ作成と並行して行うこともあるだろう。
「デザインの作成」と一言でいっても、行う作業は多岐にわたる。
カラー・フォントの選定や画像・イラストの作成、CTAボタンのデザイン、色使いやフォントの作成、図形やCTAのデザインを行っていく。
デザインはランディングページの目的、ブランド・企業イメージなどに基づいて行われるが、基本的にはシンプルでわかりやすく、CTAなどの重要な要素はメリハリを付けて強調することを意識しよう。
STEP7:コーディングを行う
コーディングは、ここまで考案・作成したランディングページを、Webブラウザで見られるようにする作業だ。
デザインやコンテンツを、HTML、CSS、JavaScript、PHPなど、ブラウザで表示するための専用のコードに置き換える。
ランディングページをコードに置き換える方法には、以下の3つがある。
- WordPressなどのCMS(コンテンツ管理システム)
- フルスクラッチ(コーディング)
- ノーコードツール
CMSやフルスクラッチでは、コーディングやサイト制作のスキルが必要となるが、ノーコードツールでは、スキルがなくとも内製化できる。
ただし、それぞれのメリットやデメリットを押さえたうえで手段を選ぶ必要があるため、詳しくは後段で解説する。
STEP8:チェックして公開する
ランディングページのコンテンツやリンクの不備・不具合はないか、デザインやレイアウト崩れはないか、セキュリティ対策は十分かなど、細部までチェックしたうえで公開作業を行おう。
ランディングページの不具合や不備は、企業やブランドイメージの低下、信頼損失、機会損失につながるためである。
また。Web広告と合わせて運用する場合は、、Web広告の戦略や設定も同時に進めておこう。
STEP9:目標達成に向けて効果検証・改善を繰り返す
ランディングページの運用は、公開してからが本番である。
どれだけ手間と時間をかけて作成したとしても、コンバージョンが得られなければ意味がない。
当初設定した目標の達成に向けて、アナリティクスツールなどを活用し、KGIやKPIを中心にランディングページのパフォーマンスを分析しよう。
以下のようなポイントをチェックすると良い。
- KPIは目標数値に達しているか
- 直帰率は高くないか
- 滞在時間が短くないか、特定のエリアで離脱されていないか
- ターゲットと実際コンバージョンに至ったユーザー層は合っているか
ある程度のデータが集まれば、Web広告のターゲット、CTAの配置やデザイン、レイアウトなどをA/Bテストで検証し、ランディングページの最適化とパフォーマンスの改善を進めていこう。
2.ランディングページの構成(ワイヤーフレーム)の作り方
ランディングページの土台となる構成(ワイヤーフレーム)の作成は、制作手順の中でも非常に重要である。
なぜなら構成は、ユーザーが効率的に情報を取得し、ストレスなく読み進められるレイアウトやデザインを作成していくため土台となるためだ。
土台が強固でなければ、その上に乗せていくコンテンツの効果も薄れてしまうだろう。
そこで本章では、ファーストビュー・ボディ・クロージングのそれぞれにおける構成要素と、構成作成のポイントを詳しく解説する。
2.1.ファーストビュー
ファーストビューは、3つの中でも最も重要なエリアだといえる。
ランディングページを読み進めてもらえるかどうかは、ファーストビューによるものが大きく、ユーザーの約70%はファーストビューで離脱するともいわれている。
そんなファーストビューを構成する主な要素と、作成のポイントについて解説していく。
キャッチコピー
ユーザーがランディングページで初めに目に入るコピーだ。
短く簡潔でありながら、ターゲットの感情や悩みに働きかけ、ベネフィットや信頼性が明確なものでなければならない。
商品やキャンペーンの顔となる文言でもあるため、チームや社内で十分に検討を重ねて決定しよう。
アイキャッチ画像・動画
アイキャッチの画像や動画も、商品やサービスの魅力を訴求し、ユーザーの心を動かすメッセージ性のあるものでなければならない。
限られたファーストビューの範囲の中で、適当なフリー画像を使用することは極めてもったいなく、離脱を促してしまうだろう。
アイキャッチの画像や動画を選定または作成する際は、以下のポイントを意識しよう。
- 商品の魅力が伝わるもの
- ターゲットが望む未来を表すもの
- ターゲットの属性(年齢、性別、エリア、職業など)に合ったもの
CTA
CTA(Call to Action)とは日本語で「行動喚起」を表す。
つまり、ランディングページの目的とする、資料請求やお問い合わせなどへ誘導するためのボタンやコピー、フォームなどを含むエリアのことだ。
ファーストビューにCTAを含めることは、ランディングページの作成における基本である。
なぜなら、ユーザーはなんらかの興味や期待を持ってリンクをクリックし、ページにアクセスしているのであり、その熱量が高いうちに容易に行動できるようにすることで、CVRが高まるためだ。
ファーストビューのCTAは、スクロールせずとも見える位置に設置し、デザインを工夫してわかりやすいものにしよう。
CTAデザインのポイントは、次章のポイント②でも詳しく解説しているため、ぜひ確認してほしい。
2.2.ボディ
ボディは、ファーストビューから興味を持って読み進んでくれたユーザへ、さらにベネフィットや信頼性を提示し、行動へ誘導するためのエリアだ。
ボディ部分では、ユーザーの興味や安心、信頼を高めるため、以下のような要素を盛り込んでいく。
興味・共感喚起
さまざまな大手マーケティング企業の調査や、マーケティングのフレームワークにおいて、興味や共感はユーザーの購買行動を促進するといわれる。
ランディングページにアクセスしたユーザーに、興味や共感を持ってもらうためには、ターゲットの分析やニーズの深掘りがかかせない。
つまり、ターゲットにパーソナライズしたメッセージを届け、 ユーザに「自分ごと」と感じてもらうことで離脱を防ぎ、期待を抱かせられのだ。
一般的な例としては、「〇〇なお悩みはありませんか?」「〇〇を〇〇できることを知っていますか?」などが挙げられる。
商品の特徴・ベネフィット
商品やサービスの価値は、「ユーザーが何を得られるか」ということにある。
よって、商品やサービスの説明をつらつら並べるだけでは、ターゲットには何も響かない。
商品やサービスの特徴と、自分が得られる結果を結びつけるという手間がかかる作業を、ユーザーはわざわざ自分で行わないためだ。
だからこそ、こちらから、「商品やサービスを利用することでこんな良いことがある」「こんな悩みが解決できる」などの「ベネフィット」を、語る必要がある。
特に、具体的な数値が含まれていれば、よりユーザーはイメージしやすいだろう。
例えば、以下のようなものがある。
- 作業を〇〇時間短縮できる!
- 効率が〇〇%UPする!
具体的な数字があれば、ターゲットはよりイメージしやすいだろう。
信頼性・権威性・専門性を示すエビデンス
ユーザーを信頼させるためのエビデンスの提示は、ランディングページにおいて不可欠である。
なぜなら、ユーザーのほとんどが企業やサービスについて初めて認知し、半信半疑の状態でランディングページを閲覧しているためだ。
例えば、受賞歴、権威ある認証、大手企業や有名企業の導入事例、顧客の声などを、ロゴや写真付きで紹介すると良いだろう。
購入や導入のプロセス、料金の明記
商品やサービスを利用する場合の「今後の流れ」について明記しておくことも重要である。
なぜなら、ユーザーが自身の未来を具体的に想像できるようになり、行動へのハードルが下がるためだ。
また、商品やサービスを利用する際にユーザーが最も気になる点ともいえるのが「料金」だろう。
この部分の不安も拭うために、明確な料金表などを記載しておくと、ユーザーをさらに安心させることができる。
2.3クロージング
クロージングは、ランディングページの最後にある、ユーザーを行動に促すためのエリアだ。
ページを読み進めたユーザーの気になる点を解消したり、行動を起こす理由を与えたりすることで、ランディングページの成果にダイレクトに繋げていく。
クロージングにおける要素について、詳しくみていこう。
よくある質問
ファーストビュー、ボディと読み進めた中でユーザーが気になる内容を、まとめてここで解消する。
これにより、行動を阻害している要素を排除し、行動に促す役割を果たす。
また、ボディ部分に書くほどでもない細かい疑問や商品の特徴についても、クロージングでまとめて解消・解説することで、ボディの重要な訴求部分がコンテンツ過多になることも防げる。
CTA
クロージング部分の主役は、ほかでもなくCTAである。
ここまでの流れで、商品の魅力や信頼性を理解したユーザーの注目を自然と集めることができる最下部にCTAを設置することは、非常に効果的だ。
ただし、ボディ部分と同様の訴求を重ねたとしても、ユーザーはなかなか行動しない。
このクロージング部分で、限定性や独自性を訴求したり、具体例や実績を示して不安を取り除いたりなど、ユーザーの背中を押すためのコピーを沿えておきたい。
また、CTAのクリックがゴールではないことにも注意が必要だ。
ほとんどのCTAでは、リンクの遷移先でフォームを設けて、最終的なコンバージョンに至る。
よって、その遷移先のページにあるエントリーフォームの最適化にも取り組む必要がある。
3.成果が出るランディングページを作る方法【8つの重要ポイント】
ランディングページの作成における、基本的な流れや構成のポイントを解説してきた。
これらを理解して作成することに加え、マーケティング担当者としての最大の役割は「成果を出す」ことだろう。
そのために、本章で解説する以下8つのポイントを押さえ、実践しよう。
これらのポイントを押さえて作成することで、どこにでもあるランディングページではなく、質の高いターゲットが流入し、コンバージョン率(CVR)が高い、「成果が出る」ランディングページに近づいていく。
ポイント①:ターゲットを理解し、明確な価値を提案する
ランディングページでは、ターゲットを設定するだけでなく、分析し、理解しなければならない。
なぜなら、ターゲットの理解がなければ、ターゲットにとっての価値を明確化できないためだ。
ユーザーは、自分が表面上で抱えている悩みや希望(顕在ニーズ)の奥に、その先の希望や目標(潜在ニーズ)を持っている。
この潜在ニーズを満たせることが、ターゲットにとっての大きな価値となる。
例えば、「MAツール おすすめ」と検索している中小IT企業は、おすすめのMAツールを「知る」ことが最終目標ではなく、自社に合ったMAツールを「選び」、「導入」して、マーケティングの効率を上げたり、収益を向上させたりすることを目標としているだろう。
よって、ターゲットにとっての価値となるのは「効率が〇〇倍になる」や「コンバージョンが○倍になる」などということであって、「プッシュ通知やメール配信ができる」「リードのスコアリングができる」など、サービスの特徴を述べるだけでは不十分である。
「なぜこのKWで検索しているのか?」「なぜこの悩みを持っているのか?」という形地で、「なぜ?」を繰り返してターゲットのニーズを深掘りし、価値を明確化していこう。
ポイント②:明確で強力なCTAを設置する
CTAは、ランディングページのコンバージョンに直結する、最も重要な要素だ。
CTAの配置や配色、文言などを微調整するだけで、CVRが大きく変化することもある。
検証・改善を繰り返しながら、強力なCTAを作り込んでいこう。
CTAデザインの具体的なポイントは以下である。
具体的で明確な行動を主体とした文言にする
CTAにおいて、ユーザーは判断を下そうとしているため、複雑な言葉を使わずシンプルで明確な表現を使う必要がある。
文字数や情報量が多すぎると、検討材料が増え、ユーザーは行動をどんどん先延ばしてしまうためだ。
「クリックにより何ができるのか」「何をすれば良いのか」をひとことで明確に、かつ具体性を持たせて記載する必要がある。
例えば以下の通りだ。
- 今すぐ購入する
- 無料で資料をダウンロード
- 今すぐ見積もりを取得(無料)
好奇心や恐怖心など、感情を揺さぶるコピーを添える
ベネフィットや行動志向のコピーも重要だが、ユーザの感情に訴えかけるコピーも効果的である。
ランディングページの先にいるのは、みな感情を持つ人間であり、感情を刺激することによってもユーザーの心は動き、行動へと誘導できるためだ。
例えば、恐怖や怒り、帰属意識、好奇心などを揺さぶるものが挙げられる。
限定性・独占性・希少性を訴求する
限定性・独自性・希少性の訴求は、ユーザーに「今すぐ」行動を起こすように促す役割がある。
「あと24時間」「在庫はあと2点のみ」など、限定性や希少性を訴求するコピーは「今行動しなければこの機会を逃してしまう」という緊迫感を生み出してくれる。
また、「メルマガ購読者限定のノウハウ」など、独占性を訴求するコピーは、「特別でありたい」「逃したくない」というユーザーの欲求に働きかけるのである。
ターゲットのニーズとCTAの意図を一致させる
CTAのコピーを考える上で忘れてはならないのが、ランディングページにアクセスしたターゲットのニーズだ。
例えば、全国展開の会員制ジムへの会員登録を促すランディングページがあるとする。
ジムを探しているユーザーをターゲットとする場合、CTAボタンの文言が「会員になる」だけでは不十分だ。
本来のターゲットのニーズがジムを探すことであった以上、そのニーズを無視してはならない。
このケースでは、CTAの文言を「ジムを探して会員になる」と変更することで、ターゲットのニーズとCTAの意図が一致し、クリック率の向上が見込めるということだ。
目立つようにデザインする(補色・3D効果・空白を活用する)
CTAを目立たせるのが重要だということは周知の事実かもしれないが、その具体的な3つの方法を紹介する。
- 補色を活用する
- 3D効果を活用する
- 空白を活用する
色の体系化に用いられる「色相環」において、対極に位置する色同士を補色といい、補色を使用することでコントラストを明確にすることができる。
また、空白を使用することでCTAボタンに無→有のメリハリをつけたり、3D効果で実際にボタンを押すような操作ができるようにし、立体感をつけて目立たせることも可能だ。
ポイント③:ユーザビリティを意識してデザインする
ランディングページのデザインでは、ユーザビリティ(ユーザーにとっての使いやすさや見やすさ)を意識しよう。
ユーザビリティが低いページでは、ユーザーがストレスを感じて離脱したり、CTAが見つからないという事態が発生してしまうためだ。
具体的には、以下のポイントを押さえておこう。
- CTAを常に簡単に見つけられる位置に設置する
- CTA間の間隔を適度に空ける
- スクロールの方向指示や操作のガイドを提示する
- 視線動線を考慮してレイアウト・デザインする
- 追従やポップアップなどを活用する
ユーザビリティを改善するには、社内の別部署や他チームの人材に協力を仰ぎ、第三者のユーザー目線で実際に操作してもらうことも効果的だろう。
ポイント④:レスポンシブ対応にする
ユーザーは、スマートフォン、PC、タブレットなどあらゆる端末からインターネットにアクセスするため、各デバイスに最適化されるレスポンシブ対応で制作しよう。
自社でコーディングを行うなら、主にCSSやHTMLで対応する。
作業自体はそれほど難しくなく、「レスポンシブ対応 やり方」などと調べると簡単に見つかるだろう。
LP制作ツールを使用する場合は、自動でスマートフォンやタブレットに最適化されるものがほとんどである。
モバイル端末表示でユーザビリティを保てるよう編集・微調整すればOKだ。
ポイント⑤:セキュリティ対策を行う
ユーザーが安全にランディングページを閲覧・使用できるように、セキュリティ対策を強固にしておかなければならない。
セキュリティ対策に不備があると、ユーザー情報の流出やサイバー攻撃など、大きな事態に発展しかねない。
これにより、ユーザーの信頼損失や、ブランド・企業のイメージの低下など、マイナスの影響が全体に及ぼされるため、決してスキップしてはならない。
具体的には、以下のような手段がある。
- SSL/TLS証明書の導入
- 入力データの検証(サーバーサイド・クライアントサイドでの検証)
- セキュリティヘッダー(CSP・X-Frame-Options)の使用
- サイト操作の本人確認(CSRFトークンの使用、APIセキュリティ)
- 定期的なセキュリティ監査
ランディングページを自社で作成するのは、エンジニアと連携して進めよう。
また、作成ツールやCMSを利用する場合は、デフォルトでセキュリティ対策が実装されていたり、機能の拡張で対応できたりするケースが多い。
どのような対策が含まれるのか、ツールの導入前に十分確認しておこう。
ポイント⑥:ページの読み込み速度を速くする
ページの読み込み速度が速ければ速いほど、ユーザーの満足度や操作性を高め、スムーズに行動に誘導できるようになる。
Googleの調査では、モバイル端末において、読み込みに3秒以上かかるページからは、53%のユーザーが離脱するといわれている。
よって、読み込み速度は2秒以下を目標に改善したい。
具体的な対策として、以下が挙げられる。
- HTMLや画像の容量の圧縮(主に圧縮ツールの利用で対応)
- 遅延ロードの実装(主にJavaScriptの記述で対応)
- サーバーのスペックの見直し
対応策としてはそれほど難しくないが、自社での対応が難しい場合は専門人材の力を借りるようにしよう。
ポイント⑦:Web広告戦略も併せて実施する
マーケティングでは、ランディングページとWeb広告を併せて運用することが一般的だ。
つまり、リスティング広告やSNS広告の受け皿として、ランディングページへリンクさせる。
なぜなら、ランディングページは、単一ページで展開されることがほとんどであり、サイト構造的にも、コンテンツ量的にもSEOでの上位表示を狙いにくいためである。
また、特定の期間、特定の行動を引き起こすために、特定のターゲットに向けて作成される「ランディングページ」と、表示するターゲットを絞れる「Web広告」との相性は非常に良い。
両者を統一されたターゲットに対して最適化することで、広告配信の費用対効果が向上し、ランディングページのCVRも向上するという好循環が生まれるだろう。
具体的には、以下のような戦略を同時並行で進めよう。
- Web広告のターゲット設定(ランディングページのターゲットと統一)
- 広告表示KWの見直し・最適化
- Web広告のパフォーマンス数値を分析・改善(インプレッション、クリック率、クリック単価など)
ポイント⑧:データに基づいた最適化を行う
ランディングページの制作では、ターゲットの設定やユーザーへの価値提供など、仮説に基づいて進めることも多い。
ただし、公開後は実際のユーザーデータが得られるため、データを追跡・分析して、ランディングページとWeb広告を最適化していくことが重要だ。
アナリティクスツールや広告管理ツールを利用し、KGIやKPIを中心に、以下の数値を確認し、改善していこう。
ランディングページの数値
- ユーザー数
- セッション数
- 平均滞在時間
- 直帰率
- ページ内リンクのクリック数・率
- コンバージョン数・率
Web広告の数値
- インプレッション数
- クリック数・率
- 消化金額
- クリック単価
また、ヒートマップツールなどを利用してページ上のユーザーの具体的な行動データを確認し、重要となる要素や改善すべき要素を分析することも有効である。
4.ランディングページの3つの作成手段
さて、基本ルールやポイントを理解したところで、実際にランディングページを作っていくことになるが、結局どんなツールを使って、どのように制作すれば良いのか、悩む方も多いだろう。
結論、ランディングページの制作手段は、以下の3つである。
- WordPressなどのCMS(コンテンツ管理システム)で作成する
- フルスクラッチ(コーディング)で作成する
- ノーコードツールで作成する
それぞれの特徴とメリット、デメリットをまとめると以下のようになる。
作成手段 | WordPressなどの
CMS(コンテンツ管理システム) |
フルスクラッチ(コーディング) | ノーコードツール |
特徴 | 画像・テキスト・レイアウトを入力・保存・管理し、直感的に組み合わせることで自動的にWebページを作成できるツール
※WordPressが世界No.1シェア |
HTML、CSS、JavaScript、PHPなどの言語を1から記述して作成する | コーディングの知識が一切なくても、直感的な操作でWebページを作成できるツール
テンプレートの利用やドラッグ&ドロップでの操作が可能 |
メリット | ・直感的にページを管理・編集できる
・プラグインやテーマによって機能やデザインを拡張できる ・ユーザが多く大規模なコミュニティがあり、サポートやトラブル解決のリソースが豊富 |
・デザインや機能を1から完全にカスタマイズできる
・軽量で高速なパフォーマンス ・独自性を高め、競合と差別化しやすい |
・スキルがなくても直感的な操作で作成できる
・短時間で作成できる ・コストが低い |
デメリット | ・プラグインやカスタムによってパフォーマンスが低下しやすい
・定期的な更新とセキュリティ管理が必要 |
・高度なコーディングスキルが必要
・制作に時間と労力がかかる ・更新や修正にも再度コーディングが必要で手間がかかる |
・細かいカスタマイズが難しい
・コードやコンテンツの最適化不足により読み込み速度が遅くなりやすい ・特定のサービスに依存し、終了や変更の影響を受ける |
こんな企業におすすめ | ・利便性と柔軟性を確保して運用したい
・専門人材や外部委託へコストをかけられる |
・幅広いカスタマイズと独自のデザインが必要
・専門人材や外部委託へのコストに抵抗がない |
迅速な作成・改善と低コストが重要である |
それぞれについてみていこう。
4.1.WordPressなどのCMSで作成する
CMS(コンテンツ管理システム)とは、テキスト・画像・機能・テンプレートなどを保存・管理し、直感的な操作でカスタムしてWebページへ表示させるという一連の流れを実現できるツールだ。
代表的なものに、世界シェアNo.1のWordPressが挙げられる。
コンテンツのアップロードやページの作成自体は、スキルがなくても直感的な操作で行える。
ただし、初期設計、デザイン、プラグインのカスタマイズ、セキュリティ管理などに関しては重要度が高いうえに専門知識が求められる。
よって、専門人材の雇用や外部委託が必要となり、コストや手間はかかるだろう。
作成するランディングページが少ない場合や、誰でも作成できる利便性と自社向けにカスタムできる柔軟性・独自性をバランスよく確保したい場合は、CMSを導入すると良いだろう。
4.2.フルスクラッチ(コーディング)で作成する
フルスクラッチとは、1からHTML、CSS、JavaScript、PHPなどのコードを記述してページを作成することがある。
この場合は、なんといってもコーディングの専門スキルが不可欠だ。
自社のリソースがない場合は、専門人材の雇用や外部委託が必須であり、その分のコストや手間が発生する。
一方で、フルスクラッチは、オーダーメイドでの作成が可能となるのが大きなメリットだ。
ランディングページのデザイン・レイアウト・機能などを1からカスタマイズでき、独自性や競合性を高められる。
とはいえ、修正や微調整など、細かい編集にもコーディングの技術が必要なため、PDCAの回転が遅くなるおそれがある。
よって、作成するランディングページの数が少なく、準備や運用の期間、コストにある程度余裕があり、独自性の高いランディングページを作成したい場合は、フルスクラッチによる作成がおすすめである。
4.3.ノーコードツールで作成する
3つの中でも、最も低コストで、手軽にランディングページを作成できるのが、ノーコードツールである。
コーディングの知識が一切なくても、豊富なテンプレートとドラッグ&ドロップなどの直感的な操作で、スムーズにランディングページを作成できる。
一方で、特定のツール内でのカスタマイズに限られるため独自性を高めにくかったり、操作を繰り返すことで不要なコードも蓄積され、読み込み速度が低下しやすいことがデメリットとなるだろう。
よって、低コストと作成スピードを重視し、大量のランディングページを作成して高頻度で検証・改善を進めていきたい場合は、ノーコードツールの利用が適しているといえる。
例えば、株式会社ポストスケイプが運営する、『LPOクリエイティブ改善支援ツール「CVX」』では、ノーコードでの作成・編集だけではなく、ページパフォーマンスの分析やA/Bテストによる検証・改善もツール内で完結するという、豊富な機能を備えている。
気になる方は、公式サイトから確認してほしい。
5.まとめ
ここでは、ランディングページの作り方について解説してきた。
しっかりとコンバージョン数を叩き出し、リード獲得や売上へ固く繋げられるランディングページを作成するには、基本的なルールを理解し、ユーザー視点を徹底して、CTAデザインやユーザビリティを最適化していかなければならない。
ただし、ランディングページの制作において、仮説に頼らざるを得ない要素も多々あるだろう。
よって、高品質なランディングページの作成も重要だが、公開後に実際のページパフォーマンスに基づいた検証・改善が欠かせないことを肝に命じておこう。
また、ランディングページの作成手段については、自社のリソース状況、制作や運用の期間などを考慮し、外部への委託も視野に入れつつ、取り組んでみてはいかがだろうか。