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

LPコーディング案件の流れと作り方を初心者向けに解説します。

デザインも行う方法を知りたい人は、以下の記事をどうぞ。

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

 

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

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

LP(ランディングページ)とは自社の商品・サービスのチラシです。

ある商品・サービスを売るために特化したwebサイトなので、ページ数は1枚もしくは数枚程度です。

一枚のページに情報を集約しているので、ユーザーのページ離脱を少なくできます。

 

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

  • 案件が多い
  • 簡単
  • 必要な言語はHTML, CSS,jQueryだけ

LP(ランディングページ)は案件数が多く、今後も増えると言われています。

さらに簡単なので、数ヶ月の勉強で案件をとる人が続出しています。

私も2-3か月の勉強をした後に、1週間で一気に8案件を受注しました。

LP以外のサイト制作だとPHPなどのプログラミング言語も学ぶ必要がありますが、LP制作はHTML、CSS、jQueryの3つのみをマスターすればOK。

 

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

デザインが既にある場合の、LPコーディングの作り方を解説します。

  1. photoshopデータをもらう
  2. LPで使うphotoshopデータを書き出し
  3. LPコーディングする

1.photoshopデータをもらう

まずクライアントからLPデザインのphotoshopデータをもらいます。

これを元に長さを計ったり、画像を書き出してLPを作ります

IllustratorやAdobe XDのデータでもらうことはかなり稀で、ほとんどがphotoshopです。

 

2.photoshopデータを書き出し

次にもらったphotoshopデータを書き出します。

photoshopの書き出しは最低限以下を覚えればOKです。

画像を書き出す

まずはLPで使う画像をphotoshopから抜き出してjpgやpngで保存します。

コーディングだけで実装できないデザインは画像を使います。

画像を書き出す方法

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

書き出しすべきか否か(画像で実装すべきか否か)を判断できなければ、クライアントに聞きましょう

 

文字情報を取得

次に文字情報を所得します。

文字情報を取得する

 

文字間の間隔を書き出す

 

行間を書き出す

 

3.LPコーディングする

ここまでやって、やっとLPコーディングが始まります。

コーディング案件を制作会社から受注している場合は以下のポイントを気をつけましょう。

cssのクラス命名規則

cssのクラス名規則・コーディングルールは最低限のみ覚えよ!

cssをsassで書けるようになる

sassコーディングの勉強/参考書は不要。最低限覚えることは3つだけ

 

4.LPを納品する

LPが完成したらクライアントに納品をします。

制作会社からの案件の場合は、zipファイルをクライアントに送るだけの納品がほとんどです。

稀にクライアントのサーバー上にFTPでアップすることがありますが、cyberduckを使うのが簡単でオススメです。

具体的な方法は以下がわかりやすいです

Cyberduckでエックスサーバーにftp接続をする方法

 

LPコーディング案件をさらに極める

LPコーディング案件の流れと作り方がわかったら、以下の記事を読んでさらに完璧にしましょう。

LP案件の練習をする

模写コーディングでLP案件の練習をする方法を知りましょう。

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

 

LP案件を受注する

LPを受注するなら、2つのの受注形式があります。

それぞれの仕事の流れを知っておきましょう。

  • 直案件:クライアントから直接受注する
  • 制作会社案件:仲介している制作会社から間接的に受注する

直案件の流れ

web制作の仕事の流れとコーディング手順【直案件編】

制作会社案件の流れ

web制作の仕事の流れとコーディング手順【web制作会社案件編】

 

LP案件をデザインから行う

LP案件はデザインから行うと単価が高くなります。

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