LPコーディングにかかる時間はどのくらい？制作期間を短縮するコツも解説

LP（ランディングページ）制作・LPコーディングとは

まずは、この記事における「LP」や「コーディング」の定義について紹介します。マーケティングの実務において、ランディングページ（Landing Page｜LP）は2種類の意味で使われています。

• ユーザーが広告・検索結果を経由して最初に訪れるページ（広義）
• ユーザーへ行動を促すための縦長のページ（狭義）

広義のLPはユーザーが最初に着地（Land）するページを表し、「集客ページ」「入口ページ」などと呼ばれることもあります。Webサイトのトップページをはじめ、ブログ記事やFAQページなど、どのようなページであっても「最初にアクセスしたページ」がLPです。

これに対し、狭義のLPはユーザーにアクションさせることに特化した縦長レイアウトのページを指します。とくに、広告経由で着地させるページは購入や申し込みなどの行動を促すレイアウトになっていることが多く、マーケティングの実務上「LP」といえば「狭義のランディングページ」を表していることがほとんど。この記事で記載するLPも、この狭義のランディングページとします。

さて、LPをWeb上に公開するためには、次のような言語を使ってソースコードを記述する「コーディング（Coding）」作業が必要です。

言語	用途
HTML	LPの骨格形成テキスト、画像、リンクの表示など
CSS	LPのスタイル定義デザイン反映など
JavaScript	動的なインタラクティブ要素作成アニメーション機能や 入力内容に応じたコンテンツ変更など

たとえば、次のような要素が、コーディングで実装する代表例です。

• 文字や画像の表示
• リンク設定
• レスポンシブ対応
• ポップアップ表示
• 問い合わせフォームの入力チェック

LP制作においてコーディングは重要な工程で専門知識も必要となることから、期間短縮を図りつつ、クオリティを維持することが重要です。

LP制作の流れと期間

LP制作はコーディングも含め、次のような工程で進みます。

1. 要件定義
2. ワイヤーフレーム作成
3. 素材収集
4. デザイン作成
5. コーディング作業
6. テスト・修正
7. 公開

LPコーディングを効率的に進めるためには、前工程・後工程の流れも知っておいた方がいいでしょう。ここからはLP制作の流れとそれぞれの期間について紹介します。

1.要件定義（LP制作目的の明確化）

最初の工程は要件定義です。LPを制作するために必要となる、次のような情報を洗い出していきます。

• LP制作の目的
• ターゲット
• LP運用のKGI
• LPに含める情報
• LPを構築する環境
• 予算・スケジュール

まずはLPを制作する目的を明確にし、その目的を達成するためにはどのような仕様（機能）が必要なのか考えてみましょう。

新商品として「高齢犬に優しいドッグフード」をプロモーションするシーンを例に、要件定義の思考プロセスを見てみます。「新商品をプロモーションすること」ではLP制作の目的としては粗すぎるため、次のようなレベルまでLPを制作する目的を深掘りすることが重要です。

• 製品に関心を持ったユーザーをリード（見込み客）にする
• リード情報を収集するために資料請求フォームを設定する
• 資料請求フォームに情報を入力してもらう

「情報を入力してもらうこと」がLPのゴールと決まれば、この目的の詳細・目的を達成するために必要な要素を考えなくてはなりません。そのためには、次のような要件を列挙していきます。

要件定義項目	要件の例
LP制作の目的	資料請求の促進
ターゲット	高齢犬を飼っている人ペットの健康が気になりだしている人
LP運用のKGI	資料請求数（リードの情報収集数）
LPに含める情報	製品紹介・レビュー・価格・購入方法・FAQ・資料請求フォーム
LPを構築する環境	使用するドメイン・サーバLP構築方法（WordPressの使用可否など）
予算・スケジュール	50万円3か月後までに公開

LPに含める情報・構築環境などはWebマーケティングの知識がないと定義しづらいかもしれません。要件定義の粒度は依頼先によっても異なるため、不安な方は依頼先候補に問い合わせ確認してみてもいいでしょう。なお、コーディングアーミーは「オーダーシート」を用意しており、要件定義しやすい環境を整えています。

要件定義にかかる期間は1週間程度ですが、LP制作の目的が曖昧だと時間がかかることも少なくありません。効率よくLP制作を進めるためにも、目的は明確にしておきましょう。

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

次に、定義した要件を「ワイヤーフレーム（WF）」に落とし込んでいきます。ワイヤーフレームはLPの基本的な構造・構成や要素配置（レイアウト）を表している、プロトタイプの一種です。

ワイヤーフレームがデザインのもととなりますが、この段階では見栄えよりも機能性・ユーザビリティに焦点を当てた方がいいでしょう。

Tips：ユーザビリティとは ユーザーにとっての使いやすさのこと。情報の分かりやすさはもちろん、エラー操作を防ぐレイアウトや、「使いやすい」と感じる満足度もユーザビリティの要素に含まれます。

ワイヤーフレームの工程で決めるべき要素には、次のような例が挙げられます。

構成	要素例
メインビジュアル （ファーストビュー）	キャッチコピー キービジュアル ファーストビューのCTA
ボディ	ユーザーへの課題喚起 解決策の提示（ベネフィット） 口コミ・事例紹介
クロージング	FAQ（よくある質問） CTA

ワイヤーフレームの制作期間の目安は数日程度ですが、要件定義が甘いと手戻りが発生し、想定より時間がかかることも。要件定義をしっかりとしたうえで、ワイヤーフレームの制作に取りかかることが重要です。

3.素材収集

ワイヤーフレームが固まったら、素材（コンテンツ）を収集します。ここでいう素材とは、デザインに必要な次のような情報のことです。

• テキスト（文章）・キャッチコピー
• 写真・画像・イラスト
• パンフレット・カタログなど

テキストや画像は、そのままデザインに使用されることも。また、パンフレットやカタログなどは、デザイナーがデザインの参考にする際の資料として活用されます。

素材収集にかかる期間としては、1週間〜数週間は見込んでおくとよいでしょう。ただし、撮影・取材などが必要なケースでは、さらに時間がかかることもあります。

4.デザイン作成

素材が集まったら、ワイヤーフレームに沿ってデザインを作成します。必要期間は1週間〜2週間程度ですが、ワイヤーフレームの段階である程度作りこまれていると、デザイン作成にかかる期間を短くすることができます。

LP制作においてはユーザーに行動を促すデザインにするだけでなく、Web上で実現可能（コーディング可能）なデザインにすることが重要なポイントに。そのため、プロのWebデザイナーに依頼することをおすすめします。

5.コーディング作業

デザインが作成できたら、いよいよコーディングです。レスポンシブ対応やSEO対策もコーディング工程で実施することになります。

複雑なデザインや動きがなく、画像やテキストなどの素材にも問題がない場合は、3日〜10日でコーディングが完了するでしょう。

6.テスト・修正

コーディングが完了したら、テスト環境でLPを確認します。主な確認内容は次のような項目です。

• ブラウザの互換性
• レイアウト崩れ
• レスポンシブデザインの動作
• リンク検証
• 誤字脱字

軽微な修正であれば即日で対応してもらえることがほとんどですが、要件定義やワイヤーフレーム段階の詰めが甘く、大幅な修正が加わるケースなどでは、修正まで1〜2週間程度がかかることもあります。

修正が多ければ多いほど、コーディングにかかる費用も高額になることは覚えておきましょう。

7.公開

テスト環境でLPを確認し、問題がなければ本番環境で公開します。テスト環境では問題がなかった動作でも、本番環境でリリースすると不具合が生じていることも。

念のため、再確認しておくことをおすすめします。

【依頼先別】LPコーディングの期間

コーディングにかかる期間は、依頼先によって異なります。制作会社やフリーランス、コーディング代行サービスに依頼した場合のそれぞれの期間の目安についてご紹介します。

制作会社｜数日～1週間

制作会社には要件定義を含めたLP制作全体を依頼するケースの方が多く、コーディングのみを依頼する場面は少ないでしょう。制作会社にコーディングのみを依頼すると、数日〜1週間程度かかることがほとんどです。

要件定義やデザインも含めて依頼した場合は、LP制作にかかるトータルの期間として、1か月〜2か月程度を見込んでおきましょう。

フリーランス｜数日

フリーランスであればスケジュール次第で柔軟に対応してくれることも多く、状況によっては数日でコーディングが完了することもあるでしょう。

ただし、フリーランスに依頼した場合は個人とのやり取りとなるため、スケジュール管理がしっかりと行えないことも少なくありません。そのため、納期が延びるリスクがあることは覚えておきましょう。

コーディング代行サービス｜数日

制作会社とフリーランスの中間に位置する「コーディング代行サービス」も存在します。サービス事業者が技術を見極めてフリーランスをアサインしてくれるサービスで、直接フリーランスへ依頼するよりも品質管理やスケジュール管理がしやすいことが特徴です。

コーダーへの指示書や入稿データの仕様が決まっているため、要件に沿った素材を提供すれば比較的スムーズにコーディングしてもらえます。

【費用別】LP制作の期間

LP制作にかける費用によっても、制作期間は変動します。費用別の期間目安を紹介しますので、予算設定の参考にしてみてください。

数万円｜制約も多く時間がかかることも

コーディング量にもよりますが、小規模なLPであればワイヤーフレーム・デザイン作成を含め、数万円から依頼できることもあります。

安く発注するため制約も多く、後回しにされて時間がかかるケースもあるため、低価格のみを理由とした依頼は避けた方がいいでしょう。

コーディングのみを依頼するのであれば、5万円以上が相場です。

10万円程度｜発注側の準備による

企画構成やワイヤーフレームを発注側が用意するケースでは、デザイン〜コーディングまでを10万円程度で対応してくれるフリーランスもいます。

しかし、制作時間の長短は発注側のディレクションスキル・素材収集に左右されるケースがほとんど。要件定義やフレームワークが曖昧だと、期間が伸びやすいため注意してください。

数十万円｜コーディング期間は短い

制作会社に数十万円でLP制作を依頼するような場合は、企画構成〜デザイン〜コーディングまですべて任せられるでしょう。

企画・構成のすり合わせには時間がかかりますが、コーディング自体はスムーズに進むことが多いです。

LP制作・LPコーディングにかかる期間を短縮する5つのコツ

LP制作・LPコーディングに必要な工程や作業が分かったところで、コーディングにかかる期間を短縮するための5つのコツをご紹介します。

1. 制作目的・要件定義を明確にする
2. テキスト・画像など素材コンテンツを用意しておく
3. 確認事項へのレスポンス対応を早める
4. デザインに凝りすぎない
5. 実力あるコーダーに依頼する

コーディングのクオリティを担保しつつ制作期間を短くしたい方は、ぜひこの5つのコツを意識してみてください。

1.LPの制作目的・要件定義を明確にする

まずは、LPを制作する目的・要件定義を明確にしましょう。目的が曖昧だと要件を定義しきれず、素材収集に時間がかかってしまう要因に。さらには、デザインやコーディングの工程で修正が発生しやすくなってしまいます。

目的設定や要件定義のために時間を使うことは無駄に感じるかもしれませんが、トータルの制作期間を短縮するためには、もっとも重要な工程だといえるでしょう。

2.テキスト・画像など素材コンテンツを用意しておく

テキスト・画像など素材コンテンツは、デザインやコーディングを始める前にすべて揃えておきましょう。

デザインやコーディングの工程に時間がかかっていると感じていても、デザイナーやコーダーは、素材提供を待っているだけといった状況も少なくありません。

撮影や取材はスムーズに進まないこともあるため、ワイヤーフレームを作成する工程で必要な素材が判明したら、なるべく早めに素材集めを始めておきましょう。

3.確認事項へのレスポンス対応を早める

コーダーからの各種確認事項へのレスポンスを早めることも、LPコーディングにかかる期間を短縮するためには重要です。

ワイヤーフレーム以外に、実務上はコーディング要件をまとめた「指示書」も存在します。コーディング指示書がなければコーダーからデザイナーへの確認事項が増え、作業効率が低下するため、コーディングにかかる時間が増えてしまいます。

関連記事：コーディング代行・外注の依頼時には指示書が必須！書き方も徹底解説

また、どれだけ詳細なワイヤーフレームやコーディング指示書を用意したとしても、コーダーから質問がくることは想定しておきましょう。このような確認事項へのレスポンスを早めることも、コーディング期間を短縮するためには重要です。

ビジネスチャットツールやGoogleスプレッドシートなどを活用すると、レスポンスを早めつつコミュニケーション履歴も残せるためおすすめです。

4.デザインに凝りすぎない

せっかくLPを制作するのであれば、オリジナリティ溢れるデザインにしたいと考えるかもしれません。しかし、コーディングにかかる期間を短くするためには、デザインに凝りすぎないことも重要です。

凝りすぎたデザインを再現するためには、複雑な技術が必要に。そのため、コーディングにかかる期間が延びてしまうことは覚えておきましょう。

5.実力あるコーダーに依頼する

基本的なことですが、コーダーに実力があればそれだけ制作期間も短くなりやすいです。コーディングの実績が豊富なコーダーであれば、発注側・デザイナー側の意図も察してくれるため、意思疎通も図りやすいでしょう。

制作期間を短くしつつ品質の高いLPを制作したいのであれば、実力あるコーダーに依頼することが重要です。

LPコーディングの外注ならコーディングアーミーがおすすめ

出典：コーディングアーミー

ここまでご紹介したコツをふまえると、LPコーディングを外注する際は「コーディングアーミー」への依頼がおすすめです。

コーディングアーミーではコーダーのスキルを徹底的にチェックしており、実力に応じてランク付けされています。必要な技術にあわせて最適なコーダーをアサインするため、クオリティを担保しつつも、制作期間を短縮しやすいことが特徴です。

担当コーダーが記述したソースコードは最上位ランクのコーダーがチェックするなど、品質管理も徹底しています。

コーディングの依頼先は制作会社からフリーランスまで多岐にわたりますが、制作期間の短縮とコーディング品質維持の双方を両立したいなら、ぜひコーディングアーミーにご相談ください。コーダーの内製化にお悩みの企業はもちろん、広告代理店やWeb制作会社など、LP制作が頻発する企業にもおすすめです。