「『ランディングページを作っておいて』と上司に依頼されたけど、どういう手順を踏めば良いの？」
「自作できるの？」
「WordPressでランディングページを作れる？」
Web担当者になったばかりの方で、上記のような疑問を抱えている方はいらっしゃるのではないでしょうか？ランディングページはHTMLテンプレートやホームページ制作ツールを使って簡単に自作できます。専門知識を持っている場合には、HTMLやWordPressを使ってより本格的なものを作ることも可能です。本記事では、
- ランディングページを制作する前の準備
- 具体的な制作の流れ
- ランディングページの自作方法（HTML・WordPress・ホームページ制作ツール）
などを紹介します。この記事を読んで、コンバート効果の高い、魅力的なランディングページを作っていきましょう。
目次
ランディングページの作り方【準備編】
ランディングページを作るには「自作」「制作会社に依頼する」といった2通りの方法がありますが、ここでは、どちらを選んだ場合も準備しておくべき事項について解説していきます。
特に①②が明確になっていない状態で制作会社に依頼した場合、制作会社からの提案のクオリティが下がったり、制作期間が延びてしまう可能性もあるので、しっかり確認しましょう。
事前準備①：目的を明確化
ランディングページは、コンバージョン獲得を目的に制作しますが「コンバージョン獲得＝商品の購入」とは限りません。
問い合わせ獲得 ・メルマガ登録 ・資料請求 ・会員の獲得など、様々なコンバージョン獲得に活用できます。
まずは自社がどのようなコンバージョンの獲得を目指しているのかを明確にしましょう。
事前準備②：ターゲット・訴求情報を決定
ターゲットの想定
お悩み客やそのうち客を取り込むために、ターゲットを設定します。例えば「20代後半の女性で職業はOL、東京近郊で1人暮らしをしている」など、広すぎず狭すぎないターゲットを設定するのがおすすめです。
商品開発の際にすでにターゲットやペルソナが設定されていると思うので、広告用に再度調整しましょう。
訴求情報の決定
次にやるべきことは、ターゲットの心を掴むような訴求情報を選定することです。
例えば、ターゲット層が「高い安いに関わらず、質を求めている。本物志向」と推測したとします。その場合、質を保証するデータや使用者の声を多く載せれば、コンバージョン獲得に繋がる可能性が高まるでしょう。
事前準備③：ランディングページの構成要素を把握
ランディングページは以下の3つの構成要素からできていることを把握しましょう。それぞれの要素にあてはまる情報をあらかじめ集めておくことで、スムーズに制作できます。
ファーストビューの構成
- ビジュアル
- キャッチコピー
ボディの構成
- お悩み、共感ポイント
- 商品で得られる効果
- データなどの権威付け
- 開発秘話
- 使用者の声
クロージングの構成
- 商品の特徴
- 限定性、特典
- 保障
- 商品の詳細説明
- 申し込みのフロー
- 申し込みボタン（フォーム）
- よくある質問
ランディングページの作り方【作業編】
ここからは、一般的なランディングページの制作の流れを紹介します。
Step1：ワイヤーフレームを制作して構成を考案
ワイヤーフレームは、ランディングページに限らずWebサイト制作の際によく制作されるもので、上の図のような、デザインをする前にある程度のレイアウトを決める設計図のことです。デザインやコーディング後の修正を減らすことができます。
制作会社に依頼した場合、デザイン・コーディング作業後の修正は別料金で受け付けていたり、修正回数に制限を設けている場合も。この段階で認識のずれを無くすことで、無駄なお金をかけずに済みます。
自作の場合でも、1度デザインやコーディングをした後に修正するのは、骨が折れる作業です。
無駄な時間やお金をかけないためにも、ワイヤーフレームの時点でしっかりとすり合わせをしておきましょう。
※ただし、テンプレートデザインの制作会社に依頼した場合、この工程は省略されることが多いです。
Step2：構成通りにコンテンツの中身を作成
ワイヤーフレーム通りに、コンテンツの中身を考えましょう。
ファーストビュー
人は3秒で情報が必要かどうかを判断するため、ファーストビューでの直帰率は70％といわれています。ここでどれだけ魅力的に商品をアピールできるかによってコンバージョン率が大きく変わるので、ファーストビューのレイアウトはとても重要です。
ファーストビューにキャッチコピーとメイン画像を設定するのはマストですが、権威付けアイコン（※）やCTAエリアを設置することで効果を高めることもできます。
※「顧客満足度no.1」や「◯◯賞受賞」などの権威性を高めるアイコン
ボディ
データや数字などを用いて信憑性を高めながら、商品の詳細な説明を行います。
信憑性を高めるためには権威付けが重要になってきますが「〇〇病院の医師も推奨しています」といった、外部からの情報が掲載できない場合も。その場合は「従来の商品と比べて〇％アップ！」など自社製品と比べて改良されているポイントを掲載するなどして、権威性をアピールすると良いでしょう。
クロージング
ボディまでの情報で終わってしまうと、興味を持っただけで終わる可能性が高いので、クロージングで背中を押してあげることが必要です。希少性や限定感が感じられるクロージングで購入へと結びつけましょう。
入力フォームは「名前・住所・連絡先」など、必要最低限の記載事項のみ用意することをおすすめします。
「面倒くさい…」と思わせないことが、コンバージョン率を向上させるために必要なことです。記入例も用意してあると、なお良いでしょう。
Step3：デザイン
コンテンツの内容を考えたら、デザイン作業に移ります。PhotoshopやIllustratorなどのツールを使うことが多いです。デザインする際に重要なのは、ターゲット層が興味を持ちそうなデザインにすること。
例
ターゲット：10代後半の女性
デザイン：パステルカラーやキャラクターを利用
→かわいらしいデザインに親近感がわき、興味を持ってくれる可能性が高まる
この時、購買い意欲を高めるために赤色などを使用し過ぎて、怪しいサイトにならないようにすることも心がけましょう。
各項目ごとのデザイン
ファーストビューファーストビューの画像は、ターゲット層が一目でわかるようなものを選びましょう。
例えば、30代の不摂生を繰り返してメタボ体系になってしまった人に向けて「ぽっこりお腹とおさらばできる」がキャッチコピーのサプリメントのランディングページだった場合を考えます。
ぽっこりお腹の30代らしき男性が、困り顔でお腹をさすっているような写真をbeforeとして選び、afterで細身で笑顔の男性を載せれば、キャッチコピーがより効果的に伝わりますね。
お問い合わせボタンお問い合わせボタンの形によっても、コンバージョン率が左右されます。おすすめは、角が丸いデザイン。人間は鋭角のものより、円形のものを先に認知するといわれているためです。
Step4：コーディング
デザインが完了したら、コーディング作業に移ります。
格安の制作会社に頼んだ場合、Photoshopなどでデザインしたものをそのまま貼り付けて公開する場合も。画像内のテキストは音声変換できないので、目の不自由な方は「画像が1枚ある」という情報しか入手できません。
さらに、検索エンジンにも写真1枚だけのページだと判断され、質の低いページだと思われてしまいます。「そもそもSEOに不利だから、質の低いページだと思われても関係ないのではないか？」と思う方もいるかもしれませんが、リスティング広告の表示順位に大きく影響するのです。
リスティング広告は、品質スコアと上限クリック単価によって表示順位が決まりますが、コーディングが行われていないページは、品質スコアの評価に悪影響を及ぼします。
制作会社に依頼する際には「しっかりとコーディングしてくれるかどうか？」を確認しておくのはもちろん、自作する場合も同様に、コーディング作業は忘れずに行ってください。
この段階でサーバーやドメインを用意しておくことも覚えておきましょう。
Step5：公開、運用開始
ここまで終えて、やっと公開できます。
ランディングページに限らず、すべてのWebページは、公開したら終わりではなく、運用をして目的を達成することがゴールです。目的を達成するまで、アナリティクスなどの分析ツールを使って改善点を見つけ、修正していく必要があります。
ランディングページの作り方【HTMLなどのコーディング編】
HTMLなどのプログラミング言語を使って、ランディングページを自作する場合の制作方法を紹介します。
作り方①：HTML、CSS、JavaScriptを使って自作
※この項目は、Webページを制作したことがある方は読み飛ばして頂いて大丈夫です。
HTMLコードを使って土台を作成し、CSSコードで形を整え、JavaScriptで動きをつけることでランディングページを制作することができます。
各プログラミング言語のおさらい
- HTMLとは
「タグ」と呼ばれる文字列を文章の前後に設置することで、段落を分けたり見出しを付けたりすることができます。 - CSSとは
HTMLタグの中に設置されるコードの一種で、HTMLの要素に装飾を付け、見た目を整えるという役割を担っています。 - JavaScriptとは
画像をスライドショーにして動きをつけることができる役割を担っています。
これらを駆使することで、魅力的なランディングページを制作することが可能です。
作り方②：HTMLテンプレートを利用
プログラミング言語を知っていたとしても、ランディングページの制作経験がなくて不安に感じている方もいらっしゃると思います。その場合には「テンプレどん」などのHTMLテンプレートを使いましょう。
テンプレートを使うことによって、スムーズにランディングページを制作できたり、カスタマイズをすればオリジナリティのあるデザインになります。デザインを1から考えることが苦手だったり、取り急ぎ制作したいという場合に、とても役に立ちますよ。
HTMLテンプレートとは？
Webページ制作に必要なHTML・CSS・JavaScript・画像などのファイルが、事前にセットで準備されている便利なものです。
【テンプレート集】HTML・WordPressを使ってランディングページを作る際に役立つ！11個の日本語テンプレを紹介します
ランディングページの作り方【WordPress編】
ここからは、WordPressを使って自作する場合の作り方の流れを解説します。
Step1：テーマを見つけてインストール
WordPressは世界シェアNo.1なだけあって、テーマ（テンプレートのデザイン）数が他のCMSに比べ、突出して多いです。テーマには、有料と無料が存在。
有料のテーマは料金がかかる代わりに、無料のテーマと比べてインストールが楽だったり、完成度が高いというメリットがあります。CMSの知識があまりない場合には、有料のものを選んだ方が良いかもしれません。
「知識や経験が豊富だ」という場合は、テーマを自作してオリジナリティを出すこともできます。
Step2：制作、プラグインをインストール
テーマの時点でLP用のものを選んでおくとスムーズに制作できます。
2列レイアウトなどの型が決まっているものを選ぶと、LP用に作り替えなければいけません。カスタマイズするには、時間と知識が必要になるので注意してください。
制作した上で、追加したい機能があればプラグインをインストールしましょう。
ただし、不用意にインストールするのはサーバーへの負担になったり、管理の手間がかかるため避けた方が良いです。必要なものに厳選することをおすすめします。
Step3：公開
テキストや画像の挿入が終わったら、公開しましょう。PCとスマホでレイアウトが崩れていないかなど、細かいチェックをして運用開始です。
初心者がランディングページを作る方法
HTMLやCSSなどのコードの知識・WordPressに必要なPHPなどの知識を持っていない場合に、ランディングページを制作する方法を紹介します。
方法①：ランディングページ制作ツールの使用して自作
Webに関する専門知識がないけれど、自作したい場合は以下のような「ランディングページ制作ツール」を利用しましょう。
出典：ペライチ
テンプレートデザインを選び、内容を入力し、公開ボタンを押すだけで簡単にランディングページの制作ができます。
ペライチのテンプレートは、用途に合わせて絞り込むことが可能。同じLPでも「化粧品のランディングページ」なのか「ヨガ教室のランディングページ」なのかといったように商材が異なると最適なデザインも変わってくるので、テンプレートの数が豊富なのは大きなメリットです。
有料プランを選択すれば決済機能付きのページも作れるなど、自作でもクオリティの高いランディングページを制作することができます。
方法②：制作会社に依頼
ランディングページを初めて制作する場合・マーケティングに関する知識がない場合は、制作会社に依頼することをおすすめします。
思い返していただきたいのですが、ランディングページは特定の商品のコンバージョン獲得のために制作するものです。ただ商品を紹介するパンフレットのようなWebページを作ることが目的ではありません。
「商品を売る」という目的の達成は、マーケティングの知識がなければ難しいのです。自社にマーケティングの知識とWeb制作の知識を併せ持つ人材がいない限り、制作会社に依頼した方が良いでしょう。
ランディングページの料金相場
ランディングページを制作会社に依頼した場合の相場は、以下の通りです。
| 料金相場 | 特徴 | 依頼人の作業範囲 |
| 30万円以下 | 格安でLPを作りたい場合に 向いている |
・ターゲット、訴求情報の決定 |
| 30～60万円 | 原稿準備は依頼人側だが、 こだわりのあるLPが作れる |
・原稿作成 |
| 60万円以上 | 戦略設計から原稿準備まで 制作会社に任せることができ、 効果のあるこだわったLPを 制作できる |
なし |
効果的なランディングページを制作しようと思うと、相場は50～100万円になります。
格安のランディングページ制作会社は、LP制作の中で最も重要な「マーケティング戦略」がサービスに含まれていないことが多く、形だけのランディングページになりやすいです。
そのため「コンバージョン獲得に繋がるLP」を制作するためには、50万円以上の予算がかかる場合が多いと考えたほうがいいでしょう。
ランディングページのゴールは、コンバージョンを獲得すること
ランディングページの作り方の流れや、HTMLやWordPressを使った制作方法などを解説しました。
制作ツールを使うなどして、ランディングページを自作することはできます。しかし、効果を出すためにはマーケティング知識がないと難しい、ということも事実。
コンバージョン獲得を達成するには、マーケティング戦略が組み込まれているか否かが、大きく関わってくるからです。特にLP制作が初めての場合は制作会社に依頼し、プロ目線で制作してもらうことをおすすめしています。
この記事を参考にして、コンバージョン率の高い効果的なランディングページを制作しましょう！
Share
