プログラミング

LP(ランディングページ)の作り方を覚える具体的な方法【超初心者向け】

  • プログラミングで副業をしたい
  • LP(ランディングページ)の作り方を知りたい
  • LP(ランディングページ)って稼げるらしいけど作り方を知りたい
  • LP(ランディングページ)を作ることになったけどどうしたら良い?

今回の想定読者はこんな感じです。

フロントエンドのスキル(HTML5、CSS3、JavaScript)が身につけば、LP(ランディングページ)を作ることができます。

LP(ランディングページ)が作れるようになれば副業・フリーランスで月20万ほど稼ぐことだって可能です。

しかし初心者だとどうやって作れば良いのか?どうやって学べば良いのか分からないですよね。

今回は僕が実践したLP(ランディングページ)の作り方を覚えた具体的な方法をご紹介したいと思います。

この記事を書いている僕は、2010年に新卒でプログラマとして就職。転職を1回経験し現在も現役プログラマとして日々コードを書いています。

C言語、C++、Java、HTML5/CSS3、JavaScript、PHPなど様々な言語を経験しています。

なお、本記事はフロントエンドのスキル(HTML5、CSS3、JavaScript)が最低限身についている人向けに書いています。

  • フロントエンドのスキルってなんだ?
  • フロントエンドのスキルを身に付けたい

という人は、TechAcademyのフロントエンドコースが個人的におすすめです。

詳細は以下の記事で解説していますので参考にしてください▼

現役エンジニアが選ぶTechAcademyのおすすめコースはフロントエンド TechAcademy(テックアカデミー)のおすすめコースが知りたい TechAcademy(テックアカデミー)のフロ...

そもそもランディングページとは

作り方を学ぶ前にそもそもランディングページとは何かをおさらいしておきましょう。

ランディングページとは、訪問したユーザーが何らかのアクションに誘導するために特化したページのことを指します。

最もわかりやすいアクションの例は、商品の購入ですね。

商品の特徴や、魅力。訪れた訪問者の悩みを理解し、インパクトのあるデザインで商品の購入(=アクション)に導くのがランディングページです。

主に縦長で構成され、最後まで読み終われば商品を購入したくなるのが、良いランディングペー氏と言えます。

ランディングページの作り方を学ぶにはパクること

ランディングページの作り方を学ぶのに最もてっとり早いのは、ネット上に転がっているランディングページをパクることです。

「え?パクっていいの?」

と思う人がいると思いますが、良いんです。

厳密に言えば、ネット上に公開しなければOKです。

というわけで、まずは以下のボタンからランディングページをご覧ください。

LPのサンプルを見る

非常に多くのランディングページが確認できたかと思います。

あとはこの中から実際に真似して作っていくのですが、ただ闇雲に作るだけではもったいないので、以下のことを意識してみてくだい。

  1. カテゴリ分けする
  2. 目的を考察する
  3. ペルソナを考察する

この3つです。

詳しく説明していきます。

カテゴリ分けする

上記のサンプルサイトを見るとすでにカテゴリ分けされているので、厳密には手作業でやる必要ないですね。

伝えたいことは、カテゴリを意識して欲しいです。

カテゴリを意識すると、

  • ゲームならボタンがゲーム風
  • 化粧品ならエレガント風
  • 転職サイトなら書類風

といった具合にそれぞれの型があることに気づくかと思います。

これらの型は、いわばそのカテゴリで求められているデザインです。

今のうちに求められているデザインを潜在意識の中に刷り込んでおくと良いと思います。

目的を考察する

そのランディングページがどのような目的を持って作られているか考察します。

本来ランディングページを作る際、一番最初にやるべきことが、ランディングページの目的策定です。

具体例を挙げると、

  • 商品を購入してもらいたい。
  • 資料請求して欲しい。
  • メルマガ登録して欲しい。
  • 会員登録して欲しい。

などです。

この目的を達成するために必要な情報をランディングページの中にライティングしていきます。

すでに完成しているランディングページから目的を逆引きすることによって、目的を達成するための情報をノウハウとしてためていきましょう。

ペルソナを考察する

ペルソナとは想定読者、いわば訪問者のモデルです。

ランディングページを作り出す前にペルソナを設定すること、

  • 訪問者が何に悩んでいるのか
  • 訪問者が何を求めているのか

が鮮明になります。

例を挙げると、

  • 年齢:20代後半
  • 性別:男性
  • 居住地:地方
  • 年収:200万〜300万
  • 職業:飲食店店長
  • 世帯:一人暮らし
  • 現年収に不満を抱えている。地方住みなので、プログラミングを勉強し、在宅で副業をしたい。

こんな感じです。

目的の考察と同じように、すでに完成しているランディングページからペルソナを逆引きしてみてください。

とは言えペルソナの作成は慣れないとちょっと難しかったりします。

そんな人は自分が本気で良いなと思った商品のランディングページを探し、なぜ良いと思ったのかを分析してみるのも手です。

まずはコードを読めるようになろう

カテゴリ分けをして、目的とペルソナを分析し終わったとしても、初心者の人がいきなり作り出すのは難易度が高いと思います。

なのでまずは真似しようと思ったランディングページのHTML、CSS、JavaScriptがどうなっているのか実際に見てみると良いです。

GoogleChromeのデベロッパーツールを使えば、簡単にコードを確認することができます。

先に答えを除いて理解していく戦略です。

じっくり除いてコードが理解できるようになれば、同じようなランディングページがすでに作れるようになっているはずです。

デベロッパーツールの使い方は以下の記事で紹介していますので、こちらを参考にしてください▼

【超初心者向け】CSSコーディングの効率が爆上がりする方法【デベロッパーツールを使おう】今回はCSSコーディングの効率が爆上がりする方法をご紹介します。 この記事は、 こんな人におすすめです。 ...

実際に作ってみる

ここまできたらあとは作ってみるだけです!

さらに慣れてきたら、ランディングページAとランディングページBの良いところをフュージョンさせ、オリジナルのランディングページを作ってみても良いと思います。

そうやって自分の引き出しを増やしていけば、どんどんスキルが広がっていきます。

最終的には完全にオリジナルなランディングページを作成し、ポートフォリオとしてアピールしましょう。

ポートフォリオの数やパターンが多ければ多いほど、実績につながり結果、「ランサーズ」や「」などで案件を受注しやすくなりますよ!

ちなみに実際に作ってみる練習の環境ですが、

  • WindowsならXAMMP
  • MacならMAMP

がオススメです。サーバーを借りることなく、無料で製作中のランディングページを確認することができます。

さらに誤ってネット上に公開してしまうような心配もありません。

>>XAMMPのインストール方法はこちら

>>MAMPのインストール方法はこちら

ランディングページのコーディングだけなら、最終的に2〜3時間程度あればできるように誰でもなります。

それにはまず数をこなすことです。積極的に挑戦してみてください。

今回は以上です。

現役エンジニアが選ぶTechAcademyのおすすめコースはフロントエンド TechAcademy(テックアカデミー)のおすすめコースが知りたい TechAcademy(テックアカデミー)のフロ...