こんにちはTERUです。
フリーランスでWEB制作（コーディング と ディレクション業務）をしています。
読者の悩み
- LPコーディング案件の流れを知りたい
- コーディングはある程度できるようになったけど、案件対応するには他に何が必要なの？
本記事では、こういった疑問に答えます。
LPコーディング案件は作業の流れがある程度決まっています。
作業の流れと必要なスキルを把握することで、WEB制作初学者の方も安心して挑戦できると思います。
そもそもWEB制作について学習方法や営業方法が気になる方は「WEB制作フリーランスになるロードマップ」の記事をご覧ください。
そもそもLPサイトとは？
一般的にLP（ランディングページ）は自社の商品やサービスを宣伝する縦長の１ページサイトです。
「お問い合わせ」や「商品購入」など、各LP毎に目的に応じて情報をユーザー分かりやすく提供する必要があります。
そこで今回は自分の経験から、LPコーディング案件の流れと必要スキルをまとめました。
コーディングのスキルがまだ身についていない方は、こちらの記事から始めることをおすすめします。
本記事の信頼性
- フリーランスとして4年以上Web制作を仕事にしている
- Web制作会社にてディレクターの経験もあり
LPコーディング案件の流れ
制作会社さんやクラウドソーシングからLPコーディング案件を受託する場合、作業の流れは大きく３ステップです。
- デザインデータをもらう
- コーディング
- 納品
まずはデザイナーが作成したデザインデータをもらいます。
デザインデータについては、PSDやXDファイルの場合がほとんどです。
次にデザインデータをもとにコーディングを行います。
コーディングのスキルとしては、HTML、CSS、jQueryができれば、ほぼ問題なく対応できます。
案件によっては環境が用意されている場合もありますが、自分で環境を準備して構築する場合が多いです。
コーディングしたファイルデータをまとめて提出します。
そこから、制作会社さんやクライアントのチェックがあるので、数回の修正は発生します。
TERULPコーディングのやり方は、基本どの案件でも変わりません。
LPコーディング案件のよくある質問
デザインから対応する場合は？
LP案件のデザインをする場合は、以下の記事が参考になります。
現役のフリーランスデザイナーのようこさんが、LPの具体的なデザイン方法について、まとめてくれています。
そもそもLP案件を受注するには？
LP案件の受注するためには、営業活動をする必要があります。
営業活動では、自分の持っているスキルを相手に上手く伝えることが重要になります。
具体的な営業方法については下記の記事を参考にしてください。
LP案件の相場はいくらなの？
LP案件の見積もりを出すために相場を知ることは重要です。
LP制作の経験が少ない場合、なかなか自分の見積もりに自信を持つことは難しいので、まずはLP制作（ランディングページ）とコーディング費用の相場を理解しましょう。
下記の記事にまとめてますので参考にしてください。
LP案件の作業期間はどのくらいなの？
LP案件（ランディングページ）のコーディング期間は、3日間〜２週間が多いです。
TERU案件によって作業期間もかなり差があります。
なぜならコーディングするのは１ページですが、下記のような要素によってコーディング期間も大きく変るからです。
- ページボリューム
- アニメーション処理の量
- お問い合わせフォームの有無
- 投稿機能（CMS）の有無
簡易ページで短い場合だと、１〜３日間でコーディングする案件もあります。
TERUクラウドワークスだと作業期間が短い案件が多い印象です
LPコーディング案件でコーディング以外に必要なスキル3選
作業の流れをみてもらうと分かりますが、LP案件を対応するためには、コーディング以外にも必要なスキルがあります。
具体的には以下のようなスキルになります。
- デザインデータの読み取りと書き出し
- FTPでのファイルアップロード
- サーバーとドメイン設定
１つずつ説明しますね。
デザインデータの読み取りと書き出し
LP案件に限らず、コーディング作業はデザインデータをもとに行うことが多いです。
デザインデータからコーディング情報を取得するスキルは必ず身につけておく必要があります。
よくあるデザインデータのパターンは下記の3パターンです。
- PSDデータ（Photoshop）からのコーディング
- XDデータ（Adobe XD）からのコーディング
- FIGデータ（Figma）からのコーディング
複数のAdobeソフトを利用する場合、Adobe CCを契約することで費用を節約できます。
さらに、Adobe CCを通常価格よりもお得に購入したい場合は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。
既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。
それぞれのデザインデータからの具体的なコーディング方法については以下の記事にまとめてますので参考にしてください。
FTPでのファイルアップロード
LPのコーディング案件については、zipファイルに圧縮してクライアントや制作会社さんに納品するパターンが多いですが、FTPを使って環境に直接アップロードするパターンもあります。
FTPソフトの操作は、最低限覚えておきましょう。
僕はWindows/Mac共に無料で利用できる「FileZilla」というソフトを利用しています。
詳しい使い方やインストール方法は下記サイトにまとめています。
サーバーとドメイン設定
Web制作会社さんからの案件では必要ないでが、直案件の場合、コーディングしてサイトを公開するまでが作業範囲になる場合が多いです。
クライアントさんにサーバとドメインの役割を説明し、取得してもらう必要があります。
僕がよく利用しているサーバとドメイン取得サービスは下記になります。
サーバ・ドメインの取得方法からサイト公開までの流れについては、下記の記事に詳しくまとめていますので参考にしてください。
LP案件は比較的案件数も多く、制作の難易度も高くないので、初学者にも取り掛かりやすい案件だと思います。
※コーディングのスキルはHTML、CSS、jQueryでほぼ対応可能
コーディング以外で必要なスキルについても本記事の内容でほぼカバーできると思います。
今回は、LPコーディング案件の流れとよくある質問について説明しました。