Web制作で速く稼ぐための勉強法

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

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

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

LP制作の流れと手順!デザインから作る方法【初心者OK】

 

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

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

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

ある商品・サービスを売るために特化したWebサイト

ページ数は1枚のことが多いです。

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データです。

なので、最初はPhotoshopの月額980円プランだけを契約しておけばOKです。

IllustratorやAdobe XDなどからのコーディングの練習は、後回しでOK。

というか不要な人が多いです。

 

2.Photoshopデータを書き出し

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

Photoshopの書き出しは最低限以下の記事で書かれている方法を覚えればOKです。

具体的には以下ができればOK。

  • 文字データの取得
  • 要素の長さなどの取得
  • 画像の書き出し

Photoshopからコーディングする方法【10分】

 

3.LPコーディングする

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

実はPhotoshopを最低限使えないと、LPコーディング案件はできないことが多いんです。

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

CSSのクラス命名規則

CSSのクラス名は適当につけがちですが、

  • どのセクションのものか
  • 何を装飾しているのか

など、CSSファイルだけを見てすぐわかるようにつけたほうが効率的です。

そうしないと、後で制作会社の人に注意されることもあります。

Cssのクラス名規則・コーディングルール最低限覚えるべきこと

 

CSSをSassで書けるようになる

Web制作会社や、スタートアップなどから受注する場合は、CSSをSassでかけることは必須と言っても良いレベル。

ただし、実務に使うレベルでは覚えることは少なくて、すぐマスターできるほど簡単です。

なのでわざわざ本を買ったり、ProgateでSass編を全てマスターしなくてもOK。

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

 

4.LPを納品する

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

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

納品パターンは以下の動画を参考にしてください。

 

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

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

LP案件の練習をする

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

LP模写コーディング初心者におすすめの方法と無駄な練習

 

LP案件を受注する

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

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

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

直案件の流れ

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

制作会社案件の流れ

Web制作制作会社案件の仕事の流れ

 

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

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

LP制作の流れと手順!デザインから作る方法【初心者OK】

 

LPコーディング案件の流れまとめ

LPコーディングはHTML/CSS初心者の案件受注としておすすめです。

photoshopからの書き出しが多いので、きちんとマスターしましょう。