LPコーディング案件の流れと必要スキル【Web初学者用】

LPコーディング案件の流れと必要スキル【Web初学者必見】

こんにちはTERUです。
フリーランスでWEB制作(コーディング と ディレクション業務)をしています。

読者の悩み

  • LPコーディング案件の流れを知りたい
  • HTMLとCSSはある程度できるようになったけど、コーディング案件を対応するには他に何が必要なの?

本記事では、こういった疑問に答えます。

LPコーディング案件は作業の流れがある程度決まっています。
作業の流れと必要なスキルを把握することで、Web制作初学者の方も安心して挑戦できると思います。

そもそもコーディングって何?どんな働き方や学習方法があるの?という事が気になる方は「コーディングとは?働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。

そもそもLPサイトとは?

一般的にLP(ランディングページ)は自社の商品やサービスを宣伝する縦長の1ページサイトです。
「お問い合わせ」や「商品購入」など、各LP毎に目的に応じて情報をユーザー分かりやすく提供する必要があります。

そこで今回は自分の経験から、LPコーディング案件の流れと必要スキルをまとめました。

コーディングのスキルがまだ身についてない方はこちらの記事からがオススメです。

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
  • WordPressを使ったWeb制作を数多く経験(2年で約60件)
  • Web制作会社にてディレクターの経験もあり
目次

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

LPコーディング案件の流れ
制作会社さんやクラウドソーシングからLPコーディング案件を受託する場合、作業の流れは大きく3ステップです。

  1. デザインデータをもらう
  2. コーディング
  3. 納品
STEP
デザインデータをもらう

まずはデザイナーが作成したデザインデータをもらいます。
デザインデータについては、PSDやXDファイルの場合がほとんどです。

STEP
コーディング

次にデザインデータをもとにコーディングを行います。
コーディングのスキルとしては、HTML、CSS、jQueryができれば、ほぼ問題なく対応できます。

案件によっては環境が用意されている場合もありますが、自分で環境を準備して構築する場合が多いです。

STEP
納品

コーディングしたファイルデータをまとめて提出します。
そこから、制作会社さんやクライアントのチェックがあるので、数回の修正は発生します。

よくある質問1:デザインから対応する場合は?

LP案件のデザインをする場合は、以下の記事が参考になります。
現役のフリーランスデザイナーのようこさんが、LPデザインの作成方法について、具体的な手順まとめてくれています。

>>【初心者OK】1週間で完成!LPの具体的なデザイン手順と方法

よくある質問2:そもそもLP案件を受注するには?

LP案件の受注するためには、営業活動をする必要があります。

営業活動では、自分の持っているスキルを相手に上手く伝えることが重要になります。
具体的な営業方法については下記の記事を参考にしてください。

よくある質問3:LP案件の相場はいくらなの?

LP案件の見積もりを出すために相場を知ることは重要です。

LP制作の経験が少ない場合、なかなか自分の見積もりに自信を持つことは難しいので、まずはLP制作(ランディングページ)とコーディング費用の相場を理解しましょう。

下記の記事にまとめてますので参考にしてください。

LPコーディング案件でコーディング以外に必要なスキル3選

コーディング以外に必要なスキル3選
作業の流れをみてもらうと分かりますが、LP案件を対応するためには、コーディング以外にも必要なスキルがあります。

具体的には以下のようなスキルになります。

  • デザインデータの読み取りと書き出し
  • FTPでのファイルアップロード
  • サーバーとドメイン設定

1つずつ説明しますね。

デザインデータの読み取りと書き出し

LPのコーディング案件はデザインデータをもとに作業を行うことが多いです。
よくあるデザインデータのパターンは下記の3つです。

  • Photoshopデータ(psdファイル)
  • Adobe XDデータ(xdファイル)
  • Figmaデータ(figファイル)

それぞれのデザインデータからの具体的なコーディング方法については以下の記事にまとめてますので参考にしてください。

Photoshopからのコーディング

Adobe XDからのコーディング

Figmaからのコーディング

FTPでのファイルアップロード

LPのコーディング案件については、zipファイルに圧縮してクライアントや制作会社さんに納品するパターンが多いですが、FTPを使って環境に直接アップロードするパターンもあります。

FTPソフトの操作は、最低限覚えておきましょう。
僕はWindows/Mac共に無料で利用できる「FileZilla」というソフトを利用しています。

詳しい使い方やインストール方法は下記サイトにまとめています。

サーバーとドメイン設定

Web制作会社さんからの案件では必要ないでが、直案件の場合、コーディングしてサイトを公開するまでが作業範囲になる場合が多いです。
クライアントさんにサーバとドメインの役割を説明し、取得してもらう必要があります。
僕がよく利用しているサーバとドメイン取得サービスは下記になります。

サーバ・ドメインの取得方法からサイト公開までの流れについては、下記の記事に詳しくまとめていますので参考にしてください。

LP案件は比較的案件数も多く、制作の難易度も高くないので、初学者にも取り掛かりやすい案件だと思います。
※コーディングのスキルはHTML、CSS、jQueryでほぼ対応可能
コーディング以外で必要なスキルについても本記事の内容でほぼカバーできると思います。

今回は、LPコーディング案件の流れとよくある質問について説明しました。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
目次
目次
閉じる