「ランディングページを作ることになったが、肝心の作り方がわからない！」この記事はそんな人に向けたランディングページの作り方ガイドです。

ランディングページとは、狭義にはユーザーのアクションを誘導することを目的とした一枚物の縦長レイアウトのページを指します。

この記事ではランディングページの作り方の手順からポイントまで解説することで、『成果につなげる』ことができる状態を目的としています。

ぜひご自身のランディングページ作りに活かしてください！

• 【初心者でもわかる】ランディングページ（LP）とは？制作のプロが徹底解説
• ランディングページ（LP）はファーストビューが命！成果につなげるポイントと参考例を解説！
• ランディングページ（LP）の費用相場を徹底解説！【費用対効果を最大化するポイント解説付き】

ランディングページを作る目的

ランディングページを作る目的は、短期間でコンバージョンを達成することです。

コンバージョンとは、訪問者がWEBサイト側の目標とするアクションを起こしてくれた状態のことです。
ランディングページの場合は、問い合わせや資料請求、購入などの行動を起こしてくれることを指します。

ランディングページは、WEB広告やSNS広告からの流入先として、流入してきたユーザーをコンバージョンに結びつけるのが基本です。

広告を掲載するとすぐにランディングページへの流入が始まり、コンバージョンの機会が生まれます。

このように短期間でコンバージョンを達成することができます。

ランディングページの作り方：手順

ここからは、実際にランディングページを作るための手順を紹介します。

ランディングページは以下の4段階で作っていきます。

・ランディングページを企画する
・ランディングページを設計する
・ランディングページを作る
・リリース・改善する

それぞれの詳細を説明していきます。

ランディングページを企画する

まずはランディングページの企画を行います。

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

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

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

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

調査・分析を行う

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

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

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

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

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

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

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

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

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

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

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

ランディングページを設計する

次にランディングページの設計を作ります。

構成を決める

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

ほとんどのランディングページの構成は、以下のいずれかに該当します。

• 特徴 起点
• 実績・事実 起点
• 親近感・安心感 起点

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

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

ワイヤーフレームを作成する

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

ここでは、パーツごとに重要なポイントを説明していきます。

ファーストビュー

構成の中の『結』が入るランディングページの顔となる部分で、最も重要であると言っても過言ではないでしょう。

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

キャッチコピー

訴求軸を一言で伝えるキャッチコピーを入れます。
よくありがちな間違いは、ただの説明文にしてしまっていることです。
先のステップで決定したターゲットの視点に立ち返り、閲覧目的が満たされたり、訴求軸が伝わったりするか、キャッチコピーを見直しましょう。

画像

情報伝達力を表す例えとして、画像は文字の7倍の情報を伝えられると言われています。
従って、画像はランディングページの第一印象を決める要素となります。
ひと目で訴求軸が伝わる商品やサービスの画像を入れると良いでしょう。

CTA

CTAとは行動喚起を意味し、ユーザーに何かしらの行動を起こしてもらうための要素を指すマーケティング用語です。
『問い合わせ』『予約』『購入』などのCTAをファーストビューに配置することで、コンバージョン率の向上が期待できます。

権威性

これは必須ではありませんが、『お客様満足度』『実績』『受賞履歴』 のような権威性を示すと、商品やサービスの良さが伝わりやすくなります。
ただし、誇張しすぎると胡散臭さが出るので、印象を考えながら調整すると良いでしょう。

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

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

ボディ

構成の中の『起・承・転』が入るランディングページの胴体部分で、最も面積が広いです。

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

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

共感パート

ストーリーなどで感情に働きかけ、共感してもらうパートです。
ユーザーに語りかけるような内容になっていることが多いです。

提案パート

具体的な内容を提案していくパートです。
商品やサービスの特徴とメリット、料金プランなどがこれに当たります。

後押しパート

ユーザーに信頼や安心を与え、コンバージョンしてもらうための後押しをするパートです。
お客様の声や実績、他社比較、よくある質問などがこれに当たります。

クロージング

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

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

入力フォーム

ランディングページ内で全てを完結させる場合は入力フォームを設置します。具体的には後述しますが、EFO（入力フォーム最適化）によって、ユーザーが入力しやすい内容にすることが大切です。

CTA

自社サイトに入力フォームを持っている場合は、そこに流入してもらうためのCTAを設置することが多いです。

ランディングページを作る

自社で作る場合

自社で作る場合、社内にノウハウがどれだけあるかによって対応できる範囲が変わります。

自社にノウハウがあまりない場合、後述するペライチやジンドゥー、STUDIOなどのサービスを使って作成することをおすすめします。

これらの作成サービスでは、HTML・CSSなどのコードが必要ないことはもちろん、テンプレートを使って本格的なデザインを気軽に使えるので、誰でも簡単にランディングページを作ることができます。

自社にノウハウがある程度ある場合、ベンチマークとするランディングページを見つけ、それをもとにHTML・CSSでコーディングを行うと良いでしょう。

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

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

外注で作る場合

外注で作る場合は、より精度の高い調査をもとにユーザーに刺さるランディングページを作ることができます。

デザインやレイアウトもオリジナルで作成するので、作成サービスを使用するよりも質の高いランディングページを作ることができます。

ランディングページ制作は、ぜひ株式会社Abentryにご相談ください！

株式会社Abentryは豊富な実績に裏付けられた経験から、それぞれのお客様の状況に合ったランディングページを制作していきます。

また、SEO対策を得意としているため、他サイトのSEO対策を含めた総合的なご提案も可能です。

リリース・改善する

ランディングページの作成が完了したら、リリースと改善を行なっていきます。

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

改善については、以下で解説するポイントを参考にしながら、より高い成果が出るランディングページに仕上げていきましょう。

ランディングページの作り方：ポイント

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

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

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

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

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

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

ワンランク上のランディングページにするために、以下の内容に注意しながらこの数秒間にこだわりましょう。

キャッチコピーは適切か

キャッチコピーはただの説明文になっていないでしょうか。
ターゲットの視点を想定して、閲覧目的が満たされたり、訴求軸が伝わったりするか、改めて見直しましょう。

画像は最適か

画像はひと目で商品やサービスが伝わる画像になっているでしょうか。
胡散臭さを感じるものになっていないでしょうか。
また、画質には特に注意してください。画質が良すぎると表示速度が低下し、悪すぎると視認性が低下します。

ボタンは押したくなるか

ファーストビューにCTA関連のボタンを置いている場合は、そのボタンを押したくなることも大切なポイントです。
ボタンはデザインや色、数、配置を変更することで改善が図れます。
また、カーソルを当てた時の挙動（ボタンが押し込まれる、少し透明になる など）も同時に見直すことで、より押したくなるボタンにすることができます。

レスポンシブ対応は適切か

レスポンシブ対応が見落とされているランディングページが意外と存在します。
初歩的なことですが、レスポンシブ対応は適切か今一度確認しましょう。
ファーストビューでは要素が強調されるぶん、枠からはみ出ていたり、横幅がずれていたりするだけでかなり目立ちます。このような完成度を落とす要素をなくすことも大切です。

ランディングページのファーストビューについて詳しく知りたい方は『ランディングページ（LP）はファーストビューが命！成果につなげるポイントと参考例を解説！』を参考にしてください。

ランディングページ（LP）はファーストビューが命！成果につなげるポイントと参考例を解説！

「ランディングページが思うような成果につながらない」ということはありませんか？それは、ファーストビューが原因かもしれません。この記事では、ランディングペー…

2023年02月11日

コンテンツにこだわる

人間の思考様式から考えて、脳に負担の少ないコンテンツにすることは非常に重要です。

2002年にノーベル経済学賞を受賞したダニエル・カーネマン氏は、著書『ファスト&スロー』の中で人間には2つの思考回路があると述べています。

・「システム１」は自動的に高速で働き、努力はまったく不要か、必要であってもわずかである。また、自分のほうからコントロールしている感覚は一切ない。

・「システム２」は、複雑な計算など頭を使わなければできない困難な知的活動にしかるべき注意を割り当てる。システム２の働きは、代理、選択、集中などの主観的経験と関連づけられることが多い。

ダニエル カーネマン,村井 章子. ファスト＆スロー　（上） (Japanese Edition) (Kindle の位置No.569-574). 早川書房. Kindle 版. 

直感的判断を司る「システム１」でストレスなく理解できる、読む努力を必要としない簡単な文章とわかりやすい画像でコンテンツを作っていきましょう。

画像は写真だけでなくイラストなども用いて、文章を読まなくても概要を理解できるようにするのが好ましいです。

ただでさえ離脱率が高いランディングページで、読み手側に理解するストレスを与えてしまうと、さらに離脱率が上がってしまうので注意が必要です。

EFO（入力フォーム最適化）にこだわる

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

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

内容・数

入力フォームの内容や数は必要最低限に抑えられているでしょうか。
言うまでもありませんが、フォームの入力の手間が増えると離脱率も上昇します。
連絡先情報は最低限必要ですが、それ以外は本当に必要なのか改めて検討すると良いです。
もし、「これ以上フォームは減らせない」という方は、必須項目を任意項目に変更することも検討してみましょう。

入力しやすさ

フォームが小さすぎたり、半角数字が使えなかったりしてないでしょうか。
パソコン・スマートフォンの両方で、入力にストレスを感じないか改めて確認しましょう。

エラー時の対応

入力内容に不備があってエラーとなる場合に、そのエラー内容は分かりやすく表示されているでしょうか。
エラーの場合に入力し直しというフォームも稀に見かけるので、そのような仕様になっていないかも確認しておくと良いでしょう。

ランディングページにフォームを埋め込む

ページを遷移するほどユーザーの離脱率は上昇するため、ランディングページに入力フォームを埋め込むことも大切なEFOです。
「埋め込みたいけど、開発コストはかけたくない」という方は、Googleフォームを使うと良いでしょう。作成した入力フォームを、そのままHTMLとして埋め込むことができます。

表示速度にこだわる

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

Googleは以下のように、読み込み時間が長ければ長いほど離脱率が上昇することを報告しています。

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

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

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

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

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

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

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

developers.google.com より出典

ランディングページの作り方：補足

設計段階でどこまで作っておくべきか？

ランディングページは、設計段階でコンテンツまで作り込んでおきましょう。

ランディングページのデザインは、コンテンツを強調することが多いので、設計段階でコンテンツが決まっていないと、適切な大きさや配色の判断ができません。

以下に弊社が作成したランディングページ向けのワイヤーフレームを掲載しているので、設計の参考にしてください。

ランディングページは何秒で判断されるのか？

ちなみに、ファーストビューの大切さの根拠として「ランディングページは一般的に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 より出典

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

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

ジンドゥー

jimdo.com より出典

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

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

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

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

STUDIO

studio.design より出典

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

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

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

まとめ

この記事ではランディングページの作り方ついて解説してきました。

ランディングページの作り方の、手順とポイントは以下の通りです。

【作り方の手順】
・ランディングページを企画する
・ランディングページを設計する
・ランディングページを作る
・リリース・改善する

【作り方のポイント】
・ファーストビューが見られる最初の数秒にこだわる
・コンテンツにこだわる
・EFO（入力フォーム最適化）にこだわる
・表示速度にこだわる

ランディングページでは『作るだけ』と『成果につなげる』とはまったく別物です。ここまで紹介してきた情報をもとに、ぜひ成果につながるランディングページを作っていってください。

ランディングページについて詳しく知りたい方は『【初心者でもわかる】ランディングページ（LP）とは？制作のプロが徹底解説』を参考にしてください。

【初心者でもわかる】ランディングページ（LP）とは？制作のプロが徹底解説

IT業界にいたり、広告の勉強をしていたりすると、ランディングページという言葉について耳にしたことはないでしょうか？ランディングページは、コンバージョンを達…

2023年01月30日