学ぶプログラミング言語を間違えると悲惨な話

LPコーディングの作り方と流れ【案件初心者向け】

web制作初心者が具体的にどのようにLPコーディングをしていくかを解説します。Web制作初心者が最短で稼ぐのに適した案件は「LP(ランディングページ)制作」です。LP制作はデザインから行うかコーディングのみ行うかで少し方法が変わるのですが、今回は後者のみ説明します。

 

なぜLPコーディング案件が最速で稼げるのか

LPコーディング案件とは?

一言で言うと自社の商品・サービスのチラシです。リスティング広告(Google検索した時上部に出てくるもの)やバナー広告のリンクがLPになっている可能性が高いです。

これをクリックしたユーザーが見ることになるので、ターゲットに最適化しやすいです。

ターゲットにアプローチするためにSEO対策をしてウェブ集客するよりも、手間をかけずにアプローチできます。また、企業のHPとは違い、一枚のページに情報を集約しユーザーのページ離脱を少なくできます。

よくわからなければ、ググればLP(ランディングページ)が何かわかります。

 

LPコーディング案件が最速で稼げる理由

  • 案件が多い
  • 簡単に作れる(フロント部分のみでOK)
  • 必要なプログラミング言語はHTML, CSS,jQueryだけ

1.LPコーディング案件は案件が多い

クラウドワークスなどクラウドソーシングサイトで見るとわかるように、LP(ランディングページ)は案件数が多いです。

単価はクラウドソーシングサイトで受注すると最安値でトップ1ページ1万円くらいですが、直営業で受注すると、5万円以上で受注できることが多いです。

2.LPコーディング案件は簡単に作れる(フロント部分のみでOK)

他のサイト制作だとバックエンドのプログラミング言語も学ぶ必要がありますが、フロントよりバックエンドの方が一般的に難しいと言われています。

3.LPコーディング案件は必要なプログラミング言語はHTML, CSS,jQueryだけ

他のサイト制作だとバックエンドのプログラミング言語も学ぶ必要が出てくるため、その分時間がかかります。

LP制作は案件が多くて簡単ですが、その分難易度は低いです。

 

 

LPコーディングの作り方と流れ

デザインはすでに出来上がっているものをコーディングするLP(ランディングページ)の作り方を解説します。

  1. クライアントから完成画像やphotoshopデータをもらう
  2. LPで使うphotoshopデータを書き出し
  3. LPコーディングする

1.クライアントから完成画像やphotoshopデータをもらう

まずクライアントからLPの完成画像やphotoshopデータをもらいます。

 

2.LPで使うphotoshopデータを書き出し

LPで使うphotoshop画像を書き出し

コーディングだけで実装できないものはphotoshopデータの画像を書き出して使うので、書き出しを行います。

LPで使うphotoshop文字データを書き出し


書き出しとは、photoshopデータから一部の画像を抜き出してjpgやpngで保存する方法です。

書き出しをした方が手間が省けるので楽ですが、なるべく書き出しをしないでコーディングで実装をしましょう。その方が「画像数が少なくなるので」サイト速度が上がります。

あと書き出しをしすぎると、クライアントに差し戻しされる可能性が高くなります。書き出しすべきか否か(画像で実装すべきか否か)を判断できなければ、クライアントに聞きましょう

 

3.LPコーディング制作する

コーディングで実装できるものはコーディングします。

コーディングするときのポイントは「Chromeの検証機能を必ず使うこと」です。これで、コーディングしたものが反映されているのかを確認できます。


具体的な検証方法が知りたければ、こちらから。自分の場合、納品はほとんどの場合が、zip形式でした。

 

LPコーディングの作り方がわかったら次にするべきことは

模写コーディングをして実際にLP制作してみましょう

LPの模写コーディングの方法は無駄な作業をしがち!効率的に行う方法【初心者向け】

 

LPのデザインからコーディングまで行う方法はこちらの記事をどうぞ

LP制作方法と流れ.デザインから作る場合のコツ【Web制作初心者向け】