「社内でランディングページ担当に指名されたけど、どうやって作ればいいのかわからない」とお悩みではないでしょうか？
ランディングページとは、かんたんに言ってしまえばコンバージョン獲得を目的とした、縦長のWebページのことです。一枚のページの中には、キャッチコピー・商品画像・お問い合わせボタンなど、様々な要素が詰め込まれています。
ランディングページに必要な複数の要素を適切な形で並べるにはどうすればよいのか？ そもそもライティングやデザインはどのようにすればよいのか？
ライティングページの作り方にまつわる様々な疑問に、本記事で徹底的にお答えします。ぜひ最後まで読んでいってください。
目次
ランディングページとは
ランディングページとはWebページの一種です。「Landing Page」の頭文字をとって「LP（エルピー）」と呼ばれることもよくあります。
ランディングページと一口にいっても、実は大まかにふたつの意味があるのは知っていましたか？
- 広い意味でのランディングページ
ユーザが最初に着地（訪問）したページのこと - 狭い意味でのランディングページ
そのページ内でユーザーをコンバージョンさせることに特化した、縦長のページのこと
具体例でいうと、Googleアナリティクスのダッシュボードに出てくるランディングページはこちらを指します。
また、Webマーケティング業界でも、最初の着地を意味する際は「ランディングはxxのページから」といった使い方を良くしますよね。
しかしながら、ビジネスのやり取りでよく使われるのは狭い意味でのランディングページです。本記事で作り方を紹介するのも狭義のランディングページとなります。
たとえば「新商品のLPを準備しよう」「セミナー集客用のLPはどうしよう？」といった会話で使われているのは、たいてい狭い意味のランディングページです。
ランディングページの種類
狭義のランディングページの中にも、さらに色々な種類があります。
最も一般的なのは、写真やイラストをたくさん用いたビジュアル訴求型のランディングページでしょう。
ビジュアル訴求型以外にも、マンガ形式になっているランディングページや、本記事のような、一見ランディングページには見えないような記事型ランディングページもあります。
- ビジュアル訴求型LP
写真やイラストをふんだんに使った、ビジュアル豊富なランディングページ。イメージ的には電車の中吊り広告をそのままWebページにしたような感じ。ランディングページの中で最も使われている形式。 - マンガLP
マンガ形式になっているランディングページ。ユーザーの共感を誘いやすく、比較的読んでもらいやすい。 - 記事LP
一見ブログ記事のように見えるランディングページ。デザインが少ない分読ませる工夫が必要だが、ビジュアル訴求型と比べて売り込み感を抑えて訴求できるため、うまくハマれば大量CVが見込める。 - アンケート・診断LP
一見するとアンケートをとっているだけだったり、適職診断しているだけに見えるランディングページ。ランディングページ本来の目的を覆いつつユーザーのアクションを促せる。 - サイトLP
Webサイトのように、他ページへの回遊も可能となっているタイプのランディングページ。販売するサービス・商品が少ない企業のWebサイトのトップページに使われていることがある形式。
もちろん、ランディングページの形式はこれらがすべてではありません。
たとえば、ファーストビュー（ページにアクセスしたとき最初に表示される領域のこと）の部分はビジュアル豊富にしてボディ部分（ページの中間部分のこと）はマンガ形式にしてみるなど、複数の形式を組み合わせたランディングページもあります。
実際どんな種類のランディングページにするかは、ページの目的に合わせて検討していくとよいでしょう。
商品購入なのか、会員登録なのか……ユーザーにとってもらいたい行動によってはもちろん、あなたの企業がどんなブランドイメージなのかによっても変わってくるかもしれません。
「マンガLPは数字取れるらしい」と安易に決めるようなことはせず、目的に合わせて最適なランディングページを作ることが、数字を上げるためには必要不可欠です。
ランディングページの作り方
それでは、ランディングページの作り方について解説します。結論からいえばランディングページの作り方には以下の３つがあります。
- Web制作会社やクラウドソーシングサイトなどに外注する
- ツールを使って作る
- 自分で作る
それぞれについて詳しく見ていきましょう。
Web制作会社やクラウドソーシングサイトなどに外注する
ランディングページを作成するのによく使われる手段は、やはり外注でしょう。
外注先は、すでに取引のあるWeb制作会社や広告代理店、そしてクラウドソーシングなどが一般的です。
肝心なのは「どこからどこまで頼むか？」ということ。外注先に依頼する範囲によって、制作費用やあなたの仕事内容が大幅に変わってきます。
例えば企画や原稿作成は社内で完結させ、デザイン・コーディングだけは外注という具合でしたら、外注の費用はかなり抑えられます。ただし、社内で企画を組み立てたり原稿作成リソースが必要だったりするのは言うまでもないでしょう。
それに対して企画からコーディングまですべて外注してしまえば、費用は高く付くものの、外注先との連携が主になるので社内リソースを多く割かずに済みます。
ランディングページを外注する際は、予算や社内のリソースと相談して「どこからどこまで頼むか」をはっきりさせておくようにしましょう。
ランディングページを作るときの流れについて後ほど具体的に解説するので、そちらを参考にしつつ外注先に頼む範囲を検討してみてください。
なお、おすすめのクラウドソーシングサービスについては、記事の後ろの方で解説します。
ツールを使って作る
ランディングページはツールを使って作ることもできます。
ツールを使えば積み木を組み立てるようにページを作れるため、デザイン・コーディングのスキルが一切ない人でもかんたんにランディングページを用意できます。
ただし人に依頼するのと違って、ツールの場合はデザインの融通が利きにくく、訴求力に欠けるランディングページとなる可能性がある点は十分考慮しなければいけません。
とはいえ、とりあえずランディングページさえあれば大量のCVが見込める、といったような特殊な条件下では、ツールで作成したランディングページも十分な効果が見込めます。
ランディングページはデザインのインパクトや差別化が重要なファクターなため、選択肢に加わることは少ないでしょう。
しかし、デザインの融通が利かないというデメリットさえ除けば、ツールでのランディングページ作成はコストパフォーマンスの良いの選択肢です。検討の価値は十分にありますので、何がどこまで出来るのかなど、一度は試してみると良いでしょう。
なお、おすすめのツールについては、記事の後ろの方で解説します。
自分で作る
デザインはしっかりさせたい。けれども外注するお金はない。そんなときはやはり自分で作る他ありません。
ただし正直なところ、デザインやプログラミングの学習経験が一切ないのであれば、ランディングページを自分で作るのはかなり難度の高い挑戦となります。
ランディングページを作るのに必要なスキルは以下のとおりです。
- コピーライティングのスキル
- Webデザインのスキル
- HTML/CSS/JavaScriptなどのプログラミング言語のスキル
- PhotoshopやIllustratorなどのデザインツールのスキル
コピーライティングとデザインに関してはインターネットや本に大量のサンプルが落ちているため、センスがなくとも一定のデザインルールやパターンを習得すれば、ある程度の完成度を出すことは可能でしょう。
重要なのはプログラミング言語です。プログラミング言語の中でも、HTMLとCSSさえ覚えれば必要最低限のページは作れます。ただし、それだけだとツールで作るページとクオリティはさほど変わりません。
リッチなデザインやアニメーションを入れたいとなれば、JavaScriptやデザインツールは必須スキルとなってきます。
イチからランディングページ制作に関わるスキルを習得できる学習コストを厭わないなら話は別ですが、現実はそうもいきません。学習に無理を感じたら、ツールで妥協するか、周りに頼める人はいないか、改めて考え直してみてください。
ランディングページ作成の流れ
ここからは、ランディングページがどういった流れで出来上がっていくのかを細かく見ていきましょう。
ランディングページができるまでの大まかな流れは下記の通りとなります。
- 企画を立てる
- ワイヤーフレームを作成する
- デザイン・コーディングする
- 動作確認する
ここに意味が分からない単語があっても問題ありません。それぞれの手順でしっかり解説していくので安心してください。
① 企画を立てる
ランディングページを作ろうとなったとき、いきなり原稿やキャッチコピーの内容から手をつけ始める人がいますが、それらより前にやるべきことがあります。
原稿を書き始める前に、まずはランディングページの企画を固めていきましょう。
企画で固めるべき内容は組織や人によって異なりますが、下記の内容は原稿作成よりも先に決定しておくケースが多いようです。
- コンバージョンの定義
何をするにもゴールが明確でなければ話になりません。まずはコンバージョンの定義から始めていきましょう。たとえば商品の購入なのか、メルマガ登録なのか、セミナー申込みなのか……といった具合です。ごく基本的なことですが、もっとも重要なことでもあるので、気をつけておきましょう。 - ペルソナ設定
ペルソナとは、ランディングページを通じて宣伝したいサービスや商品の利用者イメージのことです。たとえば男性か女性か、若者かご高齢の方か、といった具合でペルソナを設定することで、ランディングページの訴求方針を固めていきます。 - フックの決定
フックとはランディングページ内の目玉となる情報のことです。たとえば「どんなお買い物も20%還元」「〇〇成分２倍」といった具合になります。ランディングページは基本的に、フックが訪問者全員の目に届くように構成してあげる必要があるため、企画時に決定しておくことが多いです。なお、フックとキャッチコピーは似ているようですが、意味合いが異なります。キャッチコピーは読者の心を掴む文言そのものですが、フックの場合は文言ではなくあくまで情報です。実際にフックがランディングページへ盛り込まれるとき、文言は味付けされますし、キャッチコピーに含まれないこともあるでしょう。 - KGI/KPIの設定
KGI/KPIとは、マーケティング活動で達成するべき目標数値のことです。KGI/KPIについてはここでは詳しくは語りませんが、マーケティングにおける必須知識なので、知らなかった場合は調べておいてください。LPのKGIは、コンバージョン数か、コンバージョン率であることがほとんどでしょう。KGIが設定できたら、KGIを因数分解しつつKPIを設定していってください。LPのKPIは、各ボタンの押下率、滞在時間、スクロール率などが挙げられます。
それこそキャッチコピーやデザインのテイストはどうするか、どういった権威付けができるか、競合のページとどう差別化を図るか、決めるべきことは多々あります。
企画部分は本当に大変です。しかし逆に言えば、ここをおろそかにしなければあとはスムーズに進みますし、問題が起きたときは早く気付けるようにもなります。
② ワイヤーフレームを作成する
LPの企画が固まり、ランディングページに盛り込める材料を揃えきれたなら、いよいよワイヤーフレームの作成に入ります。
ワイヤーフレームとはWebページの原稿のようなものです。ワイヤーフレームをデザイナーに渡してあげることで本格的なデザインに仕上げてくれます。
ワイヤーフレームの作り方は人それぞれですが、以下のようなケースが多いようです。
- 他社のランディングページをトリミングした画像を何枚も用意し、自分のイメージに合わせて並べていく
- 文章から作成し、あとからかんたんなデザインに起こす。デザインに起こすときはWordやPowerPointを使用する
- 紙に手書きしたり、付箋に書いてホワイトボードに並べたりする
この辺は担当者の性格や外注先の要求などが関わってくるかと思いますが、基本的には必要な情報だけが盛り込まれたシンプルなワイヤーフレーム作成を心がけると良いでしょう。
大雑把すぎるのはもちろんよくありませんが、細かすぎるとかえって見づらく、全体を俯瞰しづらいワイヤーフレームとなってしまいます。
なお、この段階でコピーライティングも必要となってくるので、原稿を外注することも少なくありません。
ランディングページの基本的な構成
ワイヤーフレームは内製で作るケースが多くなるかと思うので、ここでよくあるランディングページの構成例を示します。
LPアクセスからCVまでの流れは、大まかにこのような流れとなっています。
- インパクトを与えたり「自分に関係あることだ」とユーザーに思わせたりなど、なんらかの方法でユーザーの興味を喚起し、ページをスクロールさせる
- ベネフィットや実績の提示などを通じてユーザーの興味を膨らませたり、信頼を勝ち取る
- ユーザーにアクションを促す
これらを踏まえた上で、ブラストメールのランディングページをベースに各要素を解説します。
ヘッダー
- ファーストビュー：キャッチコピーやフックを伝えてユーザーの興味を喚起する
ボディ
- 共感部：「～といった悩みはありませんか？」といった具合でユーザーの共感を誘う
- ベネフィットの提示：商品・サービスの利用を通じて得られる変化を具体的に伝える
- 商品・サービスのメリット：商品・サービスの特徴や機能などについてかんたんに伝える
- レビュー・実績の紹介：商品・サービスの導入事例やユーザーボイスを掲載する
フッター
- 商品・サービスの入手方法：商品・サービスの入手方法や価格を提示
- CTA：具体的にどのような行動をとってほしいかを伝える
- FAQ：実際にあった問い合わせに対する回答や、ユーザーが考えるだろう疑問に対する回答を掲載
ここに示したのはあくまでも一例なので、実際には順番が前後したり、内容が加減されたりします。ワイヤーフレーム作りのために揃えた材料が活きる構成を練りましょう。
③ デザイン・コーディングする
ワイヤーフレームが出来上がったなら、ついにデザインへと進みます。
もしこの手順を自分で行う場合は、最初にランディングページに使用する素材やデザインカンプ（ランディングページの完成見本のこと）を作成し、その後にコーディングという流れになります。
デザイン・コーディングを外注した場合も、まずはデザインカンプのレビューを行い、あなた（もしくはマネージャー）の承認が得られてからコーディング着手という流れになるでしょう。
デザインとコーディングはそれぞれ別の外注に頼むこともありますが、大抵のデザイナーは基本的なコーディングも可能です。特別な事情がない限り、デザイナーにそのままコーディングまで依頼したほうが効率は良いでしょう。
なお、ランディングページ作成ツールを使うなら本手順は不要です。
④ 動作確認する
コーディングされたページが上がってきたなら、すぐにリリースせず、しっかり最終確認を行いましょう。
具体的には誤字脱字がないか、デザインが崩れていないか、ボタンやタグは意図通り動作するか、ページの表示速度は十分早いか、情報が最新の状態になっているか、などです。
とても地味な作業ではありますが、ランディングページはボタンが一個正常に動かないだけで大きな機会損失を生んでしまいます。ToDoリストを作るなどして綿密に行ってください。
ここまで終えたなら、ランディングページはようやく完成です。
ランディングページ作成時のポイント４つ
単にランディングページを作るだけなら大した仕事ではありません。「なんとなくそれっぽい」ものであれば、他社のページを参考にすることで誰でもかんたんに作れます。
しかし、激烈な数字を上げる唯一無二のランディングページとなると、作るのはかんたんではありません。
数字を上げるランディングページ作りにおいて気にすべきポイントはいくつもありますが、今回は筆者が特に重要と考える以下４つのポイントに絞ってお伝えします。
- メリットよりもベネフィットを伝える
- ファーストビューのクオリティを最優先する
- 「３つの壁」を意識する
- 作成につまづいたら他社のLPを参考にする
ポイント① メリットよりもベネフィットを伝える
商品・サービスの特徴や機能を「メリット」、商品・サービスを利用することでユーザーが得られる変化を「ベネフィット」と呼びます。
コピーライティング初心者にありがちなのは、メリットの紹介に終始してしまうことです。
人間はイメージの世界で生きています。商品・サービスを手にとってもらうためには、それを手にしたときどんな変化が得られるかというイメージを、ユーザーに鮮明に刷り込んでいく必要があるのです。
ユーザーが欲している変化を見極めるときのコツは、メリットに対して「だからなに？」と問いかけることです。
たとえば某スマホにおいて「前のモデルよりもカメラの性能が向上した」というメリットがあるなら、それに「だからなに？」と問いかけて、「素人でもプロ並みに美しい写真が撮れる」という風に、もっと直感的にイメージしやすいベネフィットに変換してあげるのです。
ランディングページというよりはコピーライティングの話になりましたが、売れるランディングページのキモはコピーライティングといっても過言ではないなため、ぜひ参考にしてみてください。
ポイント② ファーストビューのクオリティを最優先する
ランディングページは基本的に縦長なため、ライティングしているとボディの部分にどうしてもエネルギーを持っていかれがちですが、残念ながらこれは完全に間違いです。
ランディングページのライティングを行うときは、ファーストビューにもっとも力を入れてください。イメージ的には、ライティングに割くエネルギー全体の半分程度を使う勢いです。
また、デザインを確認するときも同様です。ボディまで細かくチェックする時間がなくても、ファーストビューだけはしっかり見ておくようにしてください。
なぜそれほどファーストビューが大事なのか？ 理由は簡単で、ランディングページにアクセスするユーザーはほぼ全員ファーストビューを見るためです。
それに対して、ボディ部分はほとんど読まれません。みんな、ファーストビューを見た時点で離脱するのです。ランディングページの最初から最後まで律儀に読むユーザーとなると、全体の数%ほどしか存在しないのが現実でしょう。
要するに、アクセスしたユーザーのほぼ全員が見るファーストビューと、ほとんど読まれないボディを比べたとき、クオリティの優先順位はファーストビューの方が高くなってくるということです。
また、改善をかけた際にもっともレバレッジが効く領域もファーストビューとなります。ランディングページをABテストにかけるとき、最初に検証するのがファーストビューになることは多々あります。
ポイント③ 「３つの壁」を意識する
ユーザーがコンバージョンに至るためには、「読まない、信じない、行動しない」という３つの壁を越えなければいけないとされています。
- 読まない
人間は、興味が感じられない事や自分に関係がないと思う事にエネルギーを割きません。まずはこちらにエネルギーを割いてもらうためにも、ファーストビューでユーザーにインパクトを与えたり、「自分に関係がある！」と感じてもらえるようなキャッチコピーを盛り込んであげる必要があります。 - 信じない
人間というのは疑り深い生き物なので、「これは良い商品です」とただ説明するだけでは不十分です。商品の良さを信じてもらうためには、商品がどれだけ売れたかを示す実績や、商品の効果を裏付けるエビデンスを示す必要があります。 - 行動しない
ページを読み進めてもらえて、中身を信じてもらえたとしても、コンバージョンしてもらうには「最後のひと押し」が必要です。営業でいうクロージングですね。「サービスAで売上をアップさせましょう！ 資料請求はこちらのボタンから」といったように、どんな行動をとってほしいかを具体的に示してください。
ページの構成を練るときは、３つの壁を念頭に置いておくとスムーズに進みます。ランディングページ作成以外でも役立つ知識なので、ぜひここで覚えていってください。
ポイント④ 作成につまづいたら他社のLPを参考にする
もしあなたがワイヤーフレーム作成でつまずき、うんうんと考え込むような状況に陥ってしまったなら、思い切って他社のLPを真似てしまいましょう。
もちろん丸パクリはよくありませんから、真似ると言っても、キャッチコピーやデザインのトンマナのようなユーザーの印象に残りやすいものは控えておいてください。
構成の仕方、情報の並べ方、細かい言い回し程度であれば、参考にしてもまったく問題はありません。先ほど書いたことと矛盾するようではありますが、答えがないまま悩んで時間を浪費するくらいなら、他社のページに答えを見出して突き進んでしまうのも立派な選択です。
ランディングページ作成におすすめなサイトやツール
ここからは、ランディングページ作成に役立つサービスやサイト、そしてツールを紹介していきます。
クラウドソーシングサービス
クラウドソーシングとは、マッチングサイトを通じた仕事の受発注のことです。有名なクラウドソーシングサービスとしては以下の３つが挙げられます。
- クラウドワークス
国内最大規模のクラウドソーシングサービスです。登録者は200万人以上になります。 - ランサーズ
日本初のクラウドソーシングサービスです。規模の大きさはクラウドワークスに並び、サポートの充実度が強みとなっています。 - ココナラ
「得意を売り買い」できるスキルマーケットです。多種多様な依頼が可能で、200万件以上の取引実績があります。
クラウドソーシングで依頼するときの費用感についてですが、ライティングであれば一文字１円から３円、デザイン・コーディングであれば３万円～10万円ほどです。
筆者の経験的には、クラウドソーシングは個人への依頼となるため、広告代理店やデザイン会社に依頼するよりも比較的安く済むケースが多い印象です。
その分、思っていたよりクオリティが低かった、できると思っていたことができなかった、という問題もよく起こります。経験の有無にかかわらず、ポートフォリオは事前にしっかりもらってからお仕事を依頼するようにしましょう。
他社ランディングページの参考サイト
ランディングページのトンマナや訴求の方向性を決めたり、ワイヤーフレームを作成するときに役立つ参考サイトを３つ紹介します。いずれのサイトも無料で利用できます。
- LPアーカイブ
２万枚以上のLPが登録されている参考サイトです。カテゴリは商材のジャンルとデザインの雰囲気から絞り込めます。 - ランディングページ（LP）集めました
サイトへの直リンクとなっているため動作が軽く、ランディングページ同士を比較しやすくなっている参考サイトです。 - SANKOU!
オシャレなデザインのランディングページが多めな参考サイトです。
ランディングページ作成ツール
ランディングページを作れるツールを４つ紹介していきます。
- ぺライチ
今回紹介する中では最もランディングページ作成に特化しているツールで、たくさんのデザインテンプレートが揃っています。ページ内に決済機能を導入でき、ツールでありながら本格的なランディングページを作れます。 - Jimdo
AIによる自動ページ作成機能があり、誰でもかんたんにきれいなデザインのランディングページが作れます。ユーザー数が多く、困ったときに情報が見つかりやすいのもメリットです。 - studio
今回紹介する中では、最もオリジナリティを出せるランディングページ作成ツールです。その分、使い方を覚えるまでは少々時間がかかりますが、一度覚えてしまったならデザイナーいらずでキレイなランディングページが作れてしまいます。 - Bootstrap
Bootstrapとは、ランディングページ作成に必要なコーディングを半分省略できてしまうWeb開発アプリケーションです。ある程度コーディングの知識が必要となりますが、非常に効率よくランディングページを作ることができます。
いずれのサイトも、できる範囲が限られるますが、無料プランが用意されています。まずはすべて触ってみて、やりたいことに最もマッチするツールを選んでみるのがよいでしょう。
ランディングページの解析ツール
Webサイトの運用と同様ランディングページも、リリース後のPDCAが重要です。そこで、ランディングページの分析に役立つツールを２つ紹介します。
- Googleアナリティクス
Webサイト運用によく使われるGoogleアナリティクスですが、ランディングページの分析にも有用です。無料版でも高度な分析ができるのが大きな特徴となります。 - Ptengine
全世界で15万人が使っているヒートマップツールです。ヒートマップ分析だけでなく、Googleアナリティクスのようにコンバージョン分析や数値レポートも利用可能。
なお、ランディングページの効果を分析し、ページを改善していくことを「LPO（Landing Page Optimization）」と呼びます。
ランディングページの作り方まとめ
今回はランディングページの作り方について紹介してきました。
筆者の経験的にいうと、もっともコスパが良く、なおかつ数字を上げるランディングページを作りやすいのは、クラウドソーシングを活用する作り方です。
ライターもデザイナーもクラウドソーシングのみで完結させてしまえば、こちらは企画部分に注力できますし、企画がしっかり練られていれば外注のスピード感も増します。
もし、ライティングやワイヤーフレームを内製するとなるとすこし大変かもしれませんが、最初さえ乗り越えてしまえば、次の機会にはすらすらと作れるようになります。参考サイトをフル活用しつつ、頑張ってみてください。
また、今回はしっかり紹介しませんでしたが、ランディングページはリリースしたあとが非常に大事です。むしろそこからが本番といえます。
ランディングページをはじめて担当して、作り上げたランディングページがすんなり目標数値を達成するということは、めったにありません。KGI/KPI達成に向けて、しっかりPDCAを回していきましょう。
キーワード検索
