LPコーディングにかかる工数と相場がわかるLP制作の流れを6ステップで解説

「LP制作を外注したいけど、コーディングにかかる工数はどのくらいだろう」
「制作会社でおこなわれているLPコーディングの流れを知りたい」

と思うことはありませんか？

外注先には、Web制作会社やクラウドソーシングサービスなどがありますが、工数や相場などはどのくらいかかるのか基準がわからないですよね。

では、発注者側が最低限知っておくべきLP制作にかかる工数やコーディングの流れには、どのようなものがあるでしょうか。

そこで今回は、

について詳しく解説します。

この記事を読めば、LP制作の全体像が把握でき、コーディングに必要な工数を把握したうえで外注先に依頼ができます。

ぜひ、最後まで読んでみてくださいね。

LPコーディングにかかる工数と相場

ランディングページ（LP）とは、ユーザーが最初に訪れるページを意味し、1ページで資料請求や商品の購入を促すことに特化したページです。

コンバージョン（閲覧数や売上といった成果）を得る役割があり、ターゲットユーザーに刺さる文章や、クリックボタンの配置など細かい構成が必要になります。

ここでは、LPコーディングにかかる工数と相場を制作会社とフリーランスで解説します。

以降で、それぞれみていきましょう。

1.制作会社に依頼する場合

LP制作を企画・設計から外注するときにかかるトータルな工数と相場ですが、どのくらい質の高いコンテンツを作るかによって、携わる人の数も変わるので、金額が異なってきます。

本格的なマーケティング（売れる仕組みをつくる）をおこなうのと、そうでないのとでサイトの仕様が変わってくるからです。

一般的なLP制作を中小企業でおこなう場合の目安は、

本格的なLP制作を中小企業、もしくは大手企業がおこなう場合の目安は、

このように、工数や相場はコンテンツの質によって変わってきます。

2.フリーランスなどの個人に依頼する場合

フリーランスに依頼する場合は、制作会社より人件費を抑えることができるので、中心価格帯は制作会社より低くなります。

一般的なLP制作をおこなう目安は、

のとおりです。

相場は作業範囲によって大幅に上下することもあり、制作前後にどのくらい携わるかで変わってきます。

LPコーディング｜各工程に合わせた工数と相場3選

ランディングページ（LP）コーディングは、商品の購入やサービスの申し込みなどの売上や集客に繋がるページなので、サイトの目標をしっかりと設計して進めます。

通常のWebサイト制作のように、すぐにコーディングを始めるのではなく、構成を定める段階と制作する段階に分かれており、外注する際も各工程に合わせて相場が変わってきます。

以降で、工数と相場の目安を把握していきましょう。

1.企画から依頼する場合

制作会社の場合	１か月～２か月 30万～60万円
フリーランスの場合	2週間～1.5か月 20万～30万円（10万円以下や60万円以上もあり得る）

2.デザインから依頼する場合

制作会社の場合	１週間～2週間 30万～50万円
フリーランスの場合	工数は応相談 10万～30万円程度

3.コーディングから依頼する場合

制作会社の場合	3日～1週間 10万～15万円（2万円～提供している会社もある）
フリーランスの場合	3日程度 2万円～5万円

LPコーディングにおいても、費用追加になりやすい要素はあります。

例えば、フォームの実装や、ページ数が多い、動きのあるアニメーションを取り入れるなどを追加すると、その分費用も5,000〜2万円程追加されます。

LP（ランディングページ）とは？デザイン作成のコツや参考サイト5選も紹介

LP制作の6つの流れ

ランディングページ（LP）は、マーケティング（売れる仕組みをつくる）の一つで、ユーザーの注意をそらすことなく、商品購入ボタンまで誘います。

お客様の購買意欲をそそるチラシ的な役割をしているからです。

以降で、それぞれ解説していきます。

1.サイト目的の明確化（企画）

Webサイトに訪れた全ての人が商品を購入してくれるわけではありません。

なので、下記のとおり取り決めをおこない筋の通ったLPを作成します。

ランディングページ（LP）では短期的に数字（閲覧数や売上といった成果）を出すために、どのようなターゲットに向けて発信するのかを決めます。

その具体的な顧客像（ペルソナ）に「購入」や「お問い合わせ」のアクションを取らせる仕掛けやビジュアルを設定するのです。（「コンバージョン（CV）といいます。）

例えば、サイトに訪れた訪問数に対してCVに至ったのは何件か、などのように具体的なサイトのセールス力を数字で出していきます。

2.ワイヤーフレームの作成

ワイヤーフレームとは、Webサイトの構成を可視化したもので、設計図のような役割を果たします。

ターゲットユーザーの共感を呼ぶデザインを目指して、どこに写真を置いて、どこにテキストを置くのかを「ワイヤーフレーム」に落とし込みます。

ワイヤーフレームを見ると必要な素材数がわかるので、チーム間の共有が可能です。

3.LPの素材を集める（デザイン、文章）

ワイヤーフレームができたら、サイトの素材を集めていきます。

上記のような素材コンテンツに着目し、撮影やテキスト作成などの作業を進めていきます。

テキストなどの文章は、制作会社によっては「そちらでご用意ください」といわれるケースもあります。

完成までの工程で何度も見直しされるため、文章力がなくても気負わずに書き始めるのが良いです。

4.デザイン作成

ワイヤーフレームと素材を元にデザインを作成します。

デザインの方向性は、企画で設定したペルソナに合ったものに統一していきます。

ペルソナによって変わるデザイン要素として、

などがあります。

参考：Web制作・運用バイブル　2022｜マイナビムック

とくに、LPを訪問したユーザーが最初にみるファーストビューは離脱率が70％もあるため、人々の関心を集める魅力的なデザインに仕上げましょう。

5.コーディング作業

デザインの工程まで完了して初めて、コーディング作業に入ります。

作成したデザインは、そのままだと動かないため、プログラム言語を用いてコードを記述して指示を出していきます。

例えば、リンクを入れたり、アニメーションをつけたり、複数の写真が切り替わるスライドショーを入れたりなどです。

離脱率を上げないためにも、画像を入れすぎてページ表示速度が遅くならないようにするのが大切です。

6.テスト～修正～LP公開

コーディングが完了したら、想定される動作が全て動くのかテストします。

制作会社と問題なく動作できると確認ができたらLP公開します。

不具合が出た場合は修正するので、始めからわかりやすくコードを書いておけば、修正過程でバグ改修がスムーズに対応可能です。

LPコーディングの作業手順を5ステップで解説

LPコーディングは、これまでの設計通りにLPを組み立てていく作業をします。

ここからは、LPコーディングの5つの作業手順について解説します。

以降でそれぞれ深堀していきます。

1.デザインデータの確認

LPに必要な素材（デザインデータ）を提出します。

ファイル形式は指定されることが多いので、制作会社に合ったものを準備しましょう。

2.HTMLコーディング

雑誌のように見えるWebサイトも、内部的にはすべてコードと画像でできています。

それらのWebページが読み込まれたときに、表示に特化したプログラム言語をHTML（Hyper Text Markup Language）といいます。

HTMLを記述することをHTMLコーディングといい、主に「何を表示するか」が書かれています。

3.CSSコーディング

CSS（Cascading Style Sheet）といい、文字やボックスなどの色やサイズといった「どのように表示するか」という情報が書かれています。

HTMLとCSSはセットで作成するのが基本なので、基本的な構造として覚えておくと制作会社との打ち合わせがスムーズに進みます。

4.JavaScriptを実装する

JavaScriptは、Webページ上に動きを与えるための代表的なプログラムです。

Web制作会社によってはJavaScriptの実装を得意とし、他と差別化している所もあります。

JavaScriptでは、Webアニメーションの実装ができるので、上質感や臨場感を演出できます。

5.確認・修正・再確認と納品

HTMLとCSSのコーディングから、JavaScriptの実装までが完了したら、想定したLPの動作はするか全パターンをテストします。

修正と再確認まで取れたら納品となります。

ランディングページ（LP）コーディングに強い3社を紹介

ランディングページ（LP）コーディングが得意な制作会社はさまざまあり、ホームページから制作実績をみることができます。

ここでは3社を例に解説します。

それぞれみていきましょう。

1.株式会社ポストスケイプ

株式会社ポストスケイプはランディングページに特化したWeb制作をおこなう会社です。

コンバージョン率を向上させるという切り口からWebマーケティングを多様な視点でサポートしています。

参考：株式会社ポストスケイプ

2.アライブ株式会社

アライブ株式会社はこれまで、住宅や不動産、医療、チケット販売などのさまざまな業界のランディングページの制作を手掛けています。

10年以上の実績があり、他社にはない知見でサービスを提供しています。

参考：ランディングページ制作｜名古屋のWebマーケティングならアライブ株式会社

3.株式会社nanocolor（ナノカラー ）

株式会社nanocolor（ナノカラー ）は、利益を生み出す販売戦略をデザインするという視点でコンテンツ作りをしています。

ターゲットの分析と流入経路などから、LPでの最適な訴求軸を選定し制作します。

参考：獲得特化型ランディングページ制作

LP制作会社の選び方3選

LP制作に強い制作会社は、ホームページでLPの制作実績があるとアピールしていることが多いです。

加えて、ほかにも選ぶポイントがあるので、下記の視点も取り入れていきましょう。

以降でそれぞれ解説していきます。

1.LPの制作実績と得意分野を確認する

LP制作実績に同業者がいたり、やりたい機能を実装していたりすると、希望通りにコーディングできる証拠です。

また、LP制作の中でもコーディングやデザインが得意など、異なる場合もあるので、どの工程から依頼するかによって、きちんと相談できるスタッフがいるか確認しましょう。

2.レスポンシブWebデザインに対応して要望を再現できるか

最近では、スマホユーザーが多いので、PCやスマホ、タブレットなどに最適化して表示してくれるレスポンシブWebデザインに対応していると良いです。

レスポンシブデザインの対応が完了したら、必ずPCやスマホで再現できているかを確認しましょう。

レスポンシブデザインはタブレット対応ではないため、適応すると追加料金が発生します。

3.導入後のサポートはあるか

公開したWebサイトは、その後継続したメンテナンスを必要とします。

制作会社によっては、ある程度の保守の範囲は対応してくれる所もあるため、あらかじめどこまでが保守の範囲で対応可能か聞いておくのがよいです。

導入後の主な保守管理には、

などがあります。

なかには、制作メインで保守管理は受け付けない所もあるため、導入後に相談できる制作会社を選びましょう。

LPコーディングを外注する際に気を付けるポイント3選

外注する前の確認事項にはどのようなものがあるでしょうか。

ここでは、気を付けるポイントを3つ解説します。

それぞれみていきましょう。

1.マーケティングの知識に強いLP制作会社か確認する

Webサイトの利用目的に業務効率化とマーケティングがありますが、LP制作はWeb広告からの集客を目的としているので、マーケティングに分類されます。

なので、マーケティングに強いLP制作会社か確認しましょう。

制作実績を確認するのと同時に、コンバージョン（CV）アップのための知識があるのかという視点で相談を進めていくと依頼できる制作会社の見極めがつきます。

2.商品に詳しくない場合は自社でライディングをするなど相互支援できるか

ランディングページ（LP）は期間限定で商品を購入させたいときなどに、集客する場所として設けられます。

制作会社によっては商品の知識が全くない場合もあるので、文章作成は自社でおこなった方が魅力を伝えやすい場合もあるのです。

制作会社と良い関係を築くことは大切なので、相互支援できる観点でパートナーを決めましょう。

3.デメリットなど失敗事例も教えてくれるか

メリット以外にデメリットを教えていただける方が親切です。

効果が出ないLPは意味がないため、売上に繋がるアドバイスや提案ができると、同じノウハウを持ってた場合に差が出ます。

まとめ：LPコーディングの工数と料金を知って、効率的に制作会社を利用しよう

今回は、ランディングページ（LP）コーディングの工数と相場について解説してきました。

まとめると以下となります。

ランディングページ（LP）コーディングも通常のWeb制作と同様に、企画・設計のフェーズが大切です。

ターゲットやターゲットに合うデザインの考案などは、単なる思いつきで進めているのではなく、戦略を練って競合と差別化しながら決めています。

なので、制作会社はマーケティングの視点で提案のできる実績のある会社を選びましょう。

LPコーディングの工数と相場を把握できたら、実際にサービスを利用してみましょう。