WordPress企業サイトを30分で作る

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

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

LPコーディング案件とは

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

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

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

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

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

 

他のプログラミングよりは難易度低い

  • 案件が多め
  • バックエンドなどのプログラミングより難易度低め
  • 必要な言語はHTML, CSS,jQueryだけのことが多い

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

さらに難易度はバックエンドやフロントエンドのプログラミングと比較して難易度低めなので(性質が違うので比較できないというのは置いといて)、数ヶ月の勉強でも案件をとる人もいます。

ただし最近はコーディングせずにLPを作る方法がさらに増えてきたので、その点安泰とは言えません。

 

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をSassで書けるようになる

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

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

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

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

 

4.LPを納品する

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

 

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

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

LP案件の練習をする

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

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

 

LP案件を受注する

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

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

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

直案件の流れ

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

制作会社案件の流れ

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

 

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

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

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

 

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

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

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