web系に関わる情報を 専門家が毎日発信!

ランディングページ(LP)の作り方を解説【無料テンプレも公開】

 

ランディングページ(LP)の作り方をwebデザイン歴5年の僕が解説します。ランディングページ(LP)は、就職でも転職でも副業でも需要が高いので、稼げますし役立つスキルです。成約しやすい要素を加味した無料でテンプレも公開します。

 

この情報の信頼性ですが、僕はwebデザインをまる5年間経験しており、企業コンサルも今ではやっていて毎月10万円くらい副業で稼げています。また、別運営のブログでも単月10万円くらいを初心者・未経験から1年で稼げるまで成長させれたのである程度web分野における実績があるので信ぴょう性は高いと思います。実績はこちらです。

 

参考:ブログ収入初心者でも1年で10万円達成可能【データ公開】

 

ランディングページ(LP)とは

 

まずランディングページとは何かを理解しましょう。通称LPで、Landing Pageですね。何かと言うと、ユーザが最初に流入する(ランディングする)ページのことですね。そしてランディングページはweb企業において非常に重要でして、今後も需要が高まり続けるということをま覚えておきたいですね。

 

参考:webデザインの将来性は結論伸びる話とその理由【データあり】

 

需要の高いwebデザインのスキル

 

ランディングページ(LP)を作れるスキルはwebデザインの分野で、非常に需要が高いスキルです。しかも、就職でも転職でも副業でもフリーランスでもどれでも需要があるスキルですね。なぜかというと、シンプルにwebサイトの売り上げに直結するからなんですね。

 

例えば化粧品とか健康食品とかでGoogle検索すると、ページ上部にリスティング広告が表示されると思います。それをクリックすると、いわゆるその商品のランディングページ(LP)にたどり着きます。企業はこういった有料広告に100円から場合によっては1000円を超えるクリック単価をGoogleに支払っています。なぜかというと購入意欲の高い見込み客だからですよね。

 

なのでランディングページは広告費を使って集客した消費者あるいはユーザーに是非とも購入あるいは成約してもらいたいはずです。その役割がランディングページ(LP)なんですね。CVRという購入率に直結するので、もろにwebサイトの売り上げに直結するのでランディングページ(LP)を作れるのはとても重要ですし、需要が高いスキルなんです。

 

今後も需要は高まる

 

そして補足するとランディングページ(LP)を作れるスキルは、今後もっと需要が上がっていきます。というのも、ランディングページ(LP)が主に使われるのは、リスティング広告だったり、アフィリエイトにおける場合が多いです。

 

そしてその2つの市場は今後も伸びるというデータがあります。そのため、これからも品質の高いランディングページ(LP)を作れるwebデザイナーやwebディレクター、フロントエンドエンジニアはより稼げるようになると思います。

 

 

引用:https://www.yano.co.jp/press-release/show/press_id/2055

 

ランディングページ(LP)の作り方のコツは4つだけ

 

ということでランディングページ(LP)を作れるスキルが今後より求められることは理解できたかと思います。では、品質の高いランディングページ(LP)の作り方を解説していきます。結構簡単なので初心者でも覚えておいて損はありません。個別具体的な作り方の手順は後述するので、まずはランディングページ(LP)の作り方のコツを覚えましょう。4つだけです。

 

ターゲット設定

 

1つはターゲット設定ですね。ランディングページ(LP)の多くは商材が決まっているわけなので、その商品なり商材がもともと狙っているターゲットが基本的にターゲットになるでしょう。シニア向けの健康食品であれば健康的になりたいユーザがターゲットになります。

 

訴求情報

 

2つ目のランディングページ(LP)の作り方のコツは、訴求情報ですね。要は、その商品の強みですね。安さなのか、品質の高さなのか、何が強みで他の商品との差別化、ユニークさになっているかを考えます。

 

ファーストビュー

 

ランディングページの作り方のコツの3つ目は、ファーストビューです。ファーストビューとは、ユーザがランディングページ(LP)に流入して最初に目に入る画面サイズでの情報のことですね。多くのユーザはスクロールは面倒なので、ファーストビューでなんか違うなと思えば離脱します。例えば、青汁で検索してリスティング広告されているリンクをクリックして流入したランディングページ(LP)のファーストビューは下記のようになっています。ちなみに、まあまあですがこのランディングページ(LP)は改善余地が大きいです。

 

 

アクションボタン

 

ランディングページ(LP)の作り方の最後のコツは、アクションボタンです。アクションボタンとは、成約あるいはコンバージョン(CV)多くは購入ですが、その購入を促すというか購入するためのボタンです。多くは、購入はこちらからとかって文言で表示されています。先ほどの青汁のランディングページでは、ページ上部の赤い背景色がアクションボタンになっています。

他にもwebデザイン全般の独学方法なども解説しており、参考になるかと思います。

 

参考:webデザイン初心者向け独学方法【UXデザイン歴5年の僕が解説】
参考:webデザイン初心者におすすめな本7冊【分野網羅、行動が大事】

 

ランディングページ(LP)の作り方を順番に解説

 

ではランディングページ(LP)の作り方を順番に解説します。先ほどの観点に沿って解説していきます。ブロガーとかにも参考になると思うので、覚えておいて損はないですね。先ほどの青汁を例に作り方を解説していきたいと思います。

商品の強みを洗い出す

 

1つ目のランディングページ(LP)の作り方ですが、商品の強みを洗い出しましょう。このStepでは、事実ベースで商品の優位性や強みを洗い出すだけでいいです。なので、漏れがない限りは人によって差は出ないStepです。例えば、漏れが起きないように商品の強みを洗い出すためには、フレームワークを活用するといいですね。マーケティング系だと4Pが有名です。僕の場合は事実ベースで、表にすると下記のようになりました。

 

4Pフレームワーク内容強み
Product青汁こだわりの製造方法で高品質
Place販売チャネルや物流定期コースなら送料無料
Price料金1ヶ月分9980円
PromotionPRモデルのCM

 

ちなみに商品自体に課題があるとちょっと流石に品質の高いランディングページ(LP)でも売りづらいです。僕がこの青汁の経営者なら、下記のような感じでランディングページ(LP)を作れるように事実を整理しますかね。

 

4Pフレームワーク内容強み
Product青汁若い人でも美味しく飲める品質の高い青汁
Place物流など同じで良さそう
Price料金他社青汁との料金比較を追記
Promotion宣伝ターゲットにあったモデルの起用と口コミを載せる

 

現実的には、コストの問題もあるのでどこまで理想像のランディングページ(LP)を作れるかはあるのですが、いったん理想像としてこのようなランディングページ(LP)を作れるようにしました。

 

ターゲットニーズや課題を洗い出す

 

ランディングページ(LP)の作り方の2つ目のStepでは、ターゲットニーズや課題を洗い出します。もしこのニーズや課題が強みとフィットすればかなり強い訴求が可能ですし、フィットしなくても嘘のない範囲で補足して訴求してもいいでしょう。ターゲット設定では、いわゆるペルソナのように具体的に設定できると良いですね。ここでもフレームワークで設定します。有名なのがないので、僕がいつも使っているフレームワークです。

 

ペルソナ設定フレームワーク内容こんな設定でいきます
デモグラセグメント性別や年代、居住地東京在住若い男性、バリバリ系
利用シーンどんなシーン・目的で飲むのか忙しいのでサクッと健康食品を飲む
普段困っていること困っていること忙しい、自炊できてない、太りつつある、不摂生
生活の上での理想像こうなりたい理想像健康的ではつらつと生きたい

 

こんな感じかと思います。ランディングページ(LP)の事例で使っている青汁のランディングページ(LP)は、どんなペルソナ設定なのかちょっとわからないですよね。品質の高いランディングページ(LP)の特徴として、どんなペルソナ設定なのかがわかりやすいという特徴がありますね。

 

訴求情報をランディングページ(LP)の構成に落とす(無料テンプレあり)

 

ランディングページ(LP)の作り方として3つ目は、訴求情報をランディングページ(LP)に落とし込むという、ようやく実際に構成を考えるStepになります。逆にいうと、上段の設計ができていないと品質の高いランディングページ(LP)は作れません。

 

ここで、僕が考えた先ほどの青汁のランディングページ(LP)の構成を無料でテンプレ公開します。Googleスライドで作成してみました。あくまで構成なので中身はスケルトンです。

 

 

参考:sample_template

 

他にもこんな無料サンプルを公開している記事も発信しています。

 

参考:ワイヤーフレームの作り方をwebデザイン歴5年が解説【サンプル無料】

 

ファーストビューは命

 

ちなみにというかランディングページ(LP)の作り方の重要なコツとして、ファーストビューにどんな情報を載せるかはめちゃくちゃ大事です。ファーストビューは、ランディングページ(LP)の命です。これは経験からわかっているんですが、ファーストビューでユーザが理解できない、あるいは情報を読み取るのに疲れた場合は容易に離脱します。そのため、どれだけファーストビューでユーザの興味を引けるかどうかは生命線になります。

 

そのため、ランディングページ(LP)の無料テンプレでは、4Pフレームワークでの訴求内容と共に、アクションボタンをファーストビューに入れています。ランディングページ(LP)で、一番漏らしてはいけないのは、もう購入したいユーザが購入しないことです。なので、アクションボタンは必ずファーストビューに入れたいところです。また訴求内容も絶対にファーストビューに入れましょう。

 

アクションボタンは追従させて常に画面表示

 

最後のランディングページ(LP)の作り方は、アクションボタンは追従させて常に画面内に表示させましょう、です。なぜかというと、スクロールしてある程度納得してユーザが商品を購入しようと思ってアクションボタンをクリックする気持ちになったのに、そのアクションボタンが画面内にないとクリックできませんよね。これ単純ですが、結構即効性が高いです。おそらくABテストをしているwebサイトでは、ほぼこの作り方になっているはずです。

 

僕が調べた中でも、食べログとかそうなっています。店舗詳細ページでは、予約するボタンが常にカレンダーと共に追従され表示されています。

 

 

ちなみに、TOPページのアクションに相当するキーワード検索も追従されて常に検索できるようになっています。

 

 

 

おそらく食べログはABテストを結構やっていることでしょう。

 

ランディングページ(LP)の作り方を覚えたら、クラウドソーシングなどで稼ぐのが大事

 

ということでランディングページ(LP)の作り方をざっくり解説しました。ランディングページを作るスキルがあれば、結構稼ぎ始めるのは簡単です。クラウドソーシング系のサイトであれば、ビジュアルデザインのみの納品の案件もあれば、HTML・CSS実装もしている物を納品希望の案件もあります。

 

webデザイナーやフロントエンドエンジニアとして稼いでいきたい場合は、ランディングページの案件でまずは稼ぐ経験を積むのは結構いい進め方というか始め方かなと思います。小さく初めて、コツコツと稼ぎながらスキルアップするのは勝ちサイクルに入るのでとてもおすすめですね。僕も、最初のwebライティングの時はクラウドワークスでも時給1000円から初めていき、経験を重ねていきました。

 

まとめ

 

ということで、ランディングページの作り方を解説しました。コツも含めて解説できたので、今回の作り方である程度ランディングページで稼ぎ始める基礎はできたかと思います。あとは、ビジュアルデザインを具体的に作り、出来ればHTML・CSSの実装をするところですね。

 

人気:webデザインスクールのおすすめと選び方【デザイン歴5年の僕が解説】

最新情報をチェックしよう!