LP（ランディングページ）の制作時に欠かせない作業のひとつにコーディングがあります。しかしコーディングの重要性や、具体的な作業については理解できていない方も多いかと思います。
今回の記事では、そのような方に向けて、こちらのことを解説しています。
- LPのコーディングの具体的な作業内容
- LPのコーディングが重要な4つの理由
- LPのコーディング費用相場や、作業にかかる時間・工数
- LPのコーディングに至るまでの流れ
- LPのコーディングは自社で行うことと、外部に依頼するのはどちらが良いのか
- LPのコーディングを外部に依頼する場合のポイント9選
LPのコーディングは軽視されがちですが、売れるLPを制作するためにはコーディングがとても重要です。この記事で、LPのコーディングについて理解を深めていきましょう。
目次
【前提】LP（ランディングページ）とは？
LP（ランディングページ）とは、WEB広告などをクリックしたときに、遷移するWebページを指します。ユーザーに自社の商品購入やサービス申込みをしてもらう、問い合わせや資料請求をしてもらうなどの、具体的なアクションを促すことがLP（ランディングページ）の目的になります。
それでは、LPの特徴を見てみましょう。
- 縦長の1ページで商品・サービスの紹介を完結させている
- ユーザーの興味を惹くために、目を惹くカラーデザインにしている
- 他ページへのリンクはなく、「申し込み」や「購入」に繋がるリンクのみ
次に、LPのメリット・デメリットを見てみましょう。
| メリット | デメリット |
|---|---|
| コンバージョン率の向上が期待できる | コストがかかる |
| 離脱率が低い傾向にある | SEOでの検索上位表示は狙いにくい |
| 理想的な順番で情報を伝えられる | サイトの回遊は見込めない |
| 成果の把握がしやすく、PDCAを回しやすい |
基本的にLPは、1ページに情報が集約されており、売ることに特化していることを覚えておきましょう。
では、HP（ホームページ）とLP（ランディングページ）の違いはなんでしょうか。
HP（ホームページ）は複数のページで構成され、ユーザーに様々な情報提供を目的としています。一方でLP（ランディングページ）は、基本的に1ページのみで作成され、ユーザーに具体的なアクションを促すことに特化したページです。
LPは、WEB集客で成果を上げるために必須のページになります。
LP（ランディングページ）のコーディングとは？
LP（ランディングページ）のコーディングには、大きく3つの作業があります。その3つの作業はこちらです。
- HTMLコーディング
- CSSコーディング
- JavaScriptコーディング
それでは、順番に解説します。
HTMLコーディング
HTMLとは、「Hyper Text Markup Language」の略称で、Webページを作成するために使用されるマークアップ言語です。Webページの骨組みを作っていくために、HTMLコーディングが必要となります。
HTMLを使うと、Webページで下記のようなことができます。
- 見出しの作成
- リンクの作成
- 段落の作成
- 表の作成
- 画像の挿入
HTMLコーディングは、Webページの骨組みを作っていく作業であることを覚えておきましょう。
CSSコーディング
CSSは「Cascading Style Sheets」の略称で、Webページのデザインを指定する言語です。HTMLがWebページの骨組みを作っていく作業であることに対して、CSSはその骨組みを装飾していくイメージです。
CSSの代表的な装飾例は、下記となります。
- 文字を太字にする
- 文字の色を変更する
- フォントスタイルを指定する
- 背景色を変更する
- ボタンのデザインを編集する
- 見出しの色を変更する
CSSでWebページのデザインを整えることにより、ユーザーが読みやすいページにすることができます。また、簡単なアニメーションであれば、CSSでもコーディングすることが可能です。
JavaScriptコーディング
JavaScriptとは、Webブラウザ上で動くプログラミング言語で、Webページにアニメーションなどの複雑な動きをつけることができます。CSSが静的な装飾をすることに対して、JavaScriptは動的な装飾が可能です。
JavaScriptを使うと、こちらのようなことをWebページで行うことができます。
- ポップアップウィンドウの表示
- スライダーの作成
- 検索機能の作成
- カウントダウンタイマーの作成
- 診断機能の作成
そのほかにもできることは多数あります。
JavaScriptを上手く使うことで、インパクトがあるWebページを作成でき、ユーザーの目を惹きつけるWebページにすることが可能です。
関連記事：LPを画像のみで制作するときに絶対知っておきたいポイント7選
LP（ランディングページ）でコーディングが重要な4つの理由
ユーザーから反応が得られるLP（ランディングページ）を作るためには、コーディングがとても重要です。その重要な理由は、こちらの4つになります。
- ユーザーの読みやすさに繋がり、ページの離脱率に影響する
- コーディングでページの表示速度が変わる
- レスポンシブ対応が必須なため
- LPに動きをつけることで、インパクトがあるLPにできる
それでは、順番に見ていきましょう。
理由1：ユーザーの読みやすさに繋がり、ページの離脱率に影響する
LP（ランディングページ）のコーディングが重要な理由は、ユーザーの読みやすさに繋がり、ページの離脱率に影響するからです。
LPのコーディングでは、HTML・CSS・JavaScriptなどを使って、Webページの骨組みやデザインを作成します。その中で、フォントの大きさや行間・余白・色合いなど、細かい部分までの作業が求められます。
このコーディングを正しく行わないと、ユーザーにとって読みにくいページになり、ページの途中で離脱される可能性が高いです。ページの離脱が多くなると、LPの効果が小さくなり、自社の商品購入やサービス申込み、問い合わせ誘導などに結びつきません。
理由2：コーディングでページの表示速度が変わる
LP（ランディングページ）の表示速度が遅いことは、ユーザーにストレスを与え、ページを見ることなく離脱される原因になります。
実際にGoogleが提供している調査データで、表示速度と離脱率の関係性が報告されています。
- 表示速度が1秒〜3秒の場合、離脱率が32%上昇
- 表示速度が1秒〜5秒の場合、離脱率が90%上昇
- 表示速度が1秒〜6秒の場合、離脱率が106%上昇
- 表示速度が1秒〜10秒の場合、離脱率が123%上昇
参考：New Industry Benchmarks for Mobile Page Speed – Think With Google
上記のデータから、ページの表示速度を早くすることは、離脱率を下げるために非常に重要であることが分かります。
このページの表示速度には、コーディングが大きく影響してきます。ページの表示速度を早めるために、画像サイズの縮小や画像ファイルの形式の変更・ソースコードの圧縮などを行うことが必要です。
理由3：レスポンシブ対応が必須なため
今や、コーディングにおいてはレスポンシブ対応が必須です。レスポンシブ対応とは、PCやスマートフォンなどのデバイスによって、デザインのレイアウトを変えることを指します。
レスポンシブ対応が必須な理由は、スマートフォンでインターネットを利用する人が大半だからです。実際に総務省の「令和2年通信利用動向調査の結果」では、スマートフォンでインターネットを利用する人は68.3%存在しているという調査結果が出ています。
上記データから、スマートフォンで見やすいページを作成することは大切だと分かります。
レスポンシブ対応をしていないと、PCで見たときは読みやすいページでも、スマートフォンで見たときは文字が小さすぎたり、画像サイズが合っていなかったりと、ユーザーが読みづらいページになります。
それを防ぐためには、CSSなどでデバイスによってページのレイアウトを変えるレスポンシブ対応が必須です。ただし、レスポンシブ対応には高度で細かいCSSのスキルが必要となるため、社内では対応が追いつかず、専門会社に外注する企業も多いようです。
理由4：LPに動きをつけることで、インパクトがあるLPにできる
LPは1ページ内で商品・サービスの情報を伝えますが、文章や画像だけでは全ての情報を伝えられません。そこでJavaScriptを用いてページに動きをつけると、自社の商品やサービスの印象をユーザーに強く残すことができます。
またJavaScriptでページに動きをつけることにより、競合ページとの差別化にもなるでしょう。また、ユーザーが飽きることを防ぎ、ページの離脱率を下げることにもつながります。
LP（ランディングページ）のコーディングにかかる費用相場
LP（ランディングページ）のコーディングの費用相場は、依頼先によって異なります。
- フリーランス
- 中小企業のLP制作会社
- 大企業のLP制作会社
それぞれの費用相場をチェックしていきましょう。
| 依頼先 | 費用相場 |
|---|---|
| フリーランス | LP全体の制作：10万円〜20万円 コーディングのみ：5万円 |
| 中小企業のLP制作会社 | LP全体の制作：40万円〜60万円 コーディングのみ：10万円〜20万円 |
| 大企業のLP制作会社 | LP全体の制作：70万円〜100万円 コーディングのみ：25万円〜40万円 |
依頼先の規模が大きくなるほど、費用相場も上がります。ただし、必ずしも費用が高いから質が良い、低いから質が悪いというわけではありません。
LPのコーディングを依頼する際は、費用だけでなくスキルや実績なども軸に外注先を選びましょう。
またLP制作の料金については、別記事の「ランディングページの相場はいくら？4フェーズに分けて解説！」や、「ランディングページ制作費の相場は？ ベストな選び方解説」で解説していますので、ぜひあわせてお読みください。
LP（ランディングページ）のコーディングにかかる時間は？
それでは次に、LP（ランディングページ）のコーディングにかかる作業時間を解説します。どのようなLPを制作するかによって、作業時間は大きく異なりますが、一般的な目安は3〜10日程度となります。
ページ数やコンテンツが多い・機能が多い・動きが多いLPの場合は、それに伴ってコーディングの作業時間が多くなることは覚えておきましょう。
また、LPの制作は、どの工程から依頼するかでも、大きく作業時間が変わってきます。
| 依頼内容 | 作業時間 |
|---|---|
| 要件定義・構成作成から依頼する場合 | 1ヶ月〜3ヶ月 |
| 文章などのコンテンツ作成から依頼する場合 | 3週間〜2ヶ月 |
| デザインから依頼する場合 | 1週間〜2週間 |
| コーディングから依頼する場合 | 3日〜10日 |
コーディングだけではなく、他工程にかかる作業時間も参考までに知っておくと、外部に依頼するときの目安となりますね。
LP（ランディングページ）のコーディングに至るまでの流れを解説
次に、LP（ランディングページ）のコーディングに至るまでの流れを解説します。まずは、LPの制作の全体的な流れを見てみましょう。
- Step1：LPを作る目的を決める
- Step2：狙うターゲット・訴求内容の検討
- Step3：LPの戦略を元に、ワイヤーフレーム（LPの設計図）の作成
- Step4：LPの文章などのコンテンツ作成
- Step5：LPに使用する画像やデザイン作成
- Step6：コーディング
- Step7：ページ公開
上記のStep1〜Step5まではWebページ作成の準備となり、Step6のコーディングで実際にWebページを作成していくことになります。コーディングで文章や画像をWebページに落とし込み、細かいデザイン調整をしていくことで、LPが完成することを覚えておきましょう。
LP制作の流れは、こちらの「LP作成の方法は6つの手順で完結！ツールの使用や外注化もできる！」の記事で、分かりやすく解説していますので、あわせてご確認ください。
LP（ランディングページ）のコーディングは自社で行う？外部に依頼する？
LP（ランディングページ）のコーディングを自社で行うのか、外部に依頼するのかは悩ましいポイントです。
社内にコーディングができる人材がいるのであれば、自社で行うことを検討して良いでしょう。自社でコーディングを行うことで、LP公開後の運用保守がしやすくなることはメリットです。
その一方で、自社のコーディング担当者のソースコードが分かりづらい場合、担当者の引き継ぎが困難となるリスクもあります。また効果的なLPを制作するために、コーディングは重要な部分ですので、担当者のコーディングスキルが低いとLPの効果は半減してしまいます。
一方で、外部のプロに任せればしっかりとした品質の効果的なLPが完成するでしょう。企業によっては、納品後の運用保守まで行ってくれるので、安心して依頼することができます。
外注費用はかかりますが、コーディングに特化した人材が社内にいない場合は外部に任せて自社のリソースを確保した方が良いです。
「プロにクオリティの高いLPを作ってもらいたい」「社内にコーディングが得意な人材がいない」「自社のリソースを確保したい」という方は、外部にコーディングを依頼することをオススメします。
また別記事の「LP制作（ランディングページ作成）は外注すべき？依頼前の確認事項や費用相場を紹介」では、外注すべきかどうかの判断基準をより詳しく解説していますので、悩んでいる方はぜひご覧ください。
LP（ランディングページ）のコーディングを外部に依頼するときのポイント9選
次に、LP（ランディングページ）のコーディングを外部に依頼するときのポイントをご紹介します。ポイントは以下の9つです。
- LP制作の実績が豊富か？
- マーケティング視点からLP作成が可能か？
- レスポンシブ対応が可能か？
- SEOの知見があるか？
- コーディング担当が日本人か？
- JavaScriptの対応が可能か？
- LP制作後のサポートが充実しているか？
- 料金設定が明確か？
- WEB広告運用も一緒に依頼できるか？
それでは、順番に解説します。
ポイント1：LP制作の実績が豊富か？
コーディングを依頼する際は、LP（ランディングページ）制作の実績が豊富にあるかを確認しましょう。
フリーランスと企業のどちらにコーディングを依頼する場合でも、実績が多数あることは大切です。なぜなら、依頼時には実績でしかフリーランスや企業のスキルを測ることができないからです。
また可能であれば、過去に作ったポートフォリオを見せてもらいましょう。実際に依頼を検討しているフリーランスや企業がコーディングしたページを見て、自社のイメージと合っているか確認しておくと安心です。
ただ秘密保持契約を結んでいる影響で公開できない場合も多いので、依頼先との打ち合わせ時にこそっと聞いてみるのが良いかと思います。
ポイント2：マーケティング視点からLPのコーディングが可能か？
売れるLPを作成するためには、外注先にもマーケティング視点が必要です。
ただコーディングをするだけではなく、自社が狙いたいターゲット層やブランドイメージを理解したコーディングをしてくれるかが大切なポイントになります。
マーケティングスキルのある外注先であれば、外注先からアイディアを提案してくれることもありますので、より効果のあるLPを期待できるでしょう。
ポイント3：レスポンシブ対応が可能か？
レスポンシブ対応が可能かは、コーディングの外注先を選ぶべきで重視すべきポイントです。
料金が安い代行業者に多くみられますが、PC用のコーディングしか対応していない場合があるので注意が必要となります。今や68.3%のユーザーがスマートフォンでWebページを見る時代なので、レスポンシブ対応がされていないページは致命的です。
LP（ランディングページ）のコーディングを外部に依頼するときは、レスポンシブ対応されているか確認しましょう。
また、レスポンシブ対応と近いモバイル最適化手法に、リキッドデザインがあります。リキッドデザインは、ブラウザサイズに合わせた縮小・拡大表示をする手法です。このリキッドデザインも現在ではよく使われる手法ですので、あわせて確認してみると良いでしょう。
ポイント4：SEOの知見があるか？
SEOとは「Search Engine Optimization」の略称で、特定のキーワードで検索された場合に、検索順位を上位に表示させる施策のことを指します。LP（ランディングページ）を作っただけでは、ページに訪れる人はおらず、SEOの施策をすることも必要となります。
そしてコーディングの品質は、SEO対策の観点からも非常に大切です。きちんとしたタグの記述はGoogleからの評価を上げ、SEOに効果的です。また無駄なソースコードが多い場合は、サイトの負荷が増え、ページの表示速度が遅くなる原因になります。
SEOの知見やスキルがあるのかは、必ず確認しておきたいところです。
関連記事：LP（ランディングページ）にSEO対策は必要？手順や注意点を具体的に説明
ポイント5：コーディング担当が日本人か？
LP（ランディングページ）のコーディング担当が日本人かどうかは、依頼前に必ずチェックしておきたいポイントです。
格安の料金設定をしているコーディングの代行会社の大半は、中国やベトナムなどの海外で作業されたオフショア作業になります。外国人がコーディングをした場合、日本語のコーディング事情を把握できておらず、不具合が発生しやすいため修正に煩わしさが出てきます。
コーディング担当が日本人かどうかは事前に確認しておきましょう。
ポイント6：JavaScriptの対応が可能か？
外部に依頼するときは、JavaScriptの対応が可能か確認しましょう。
JavaScriptはHTMLやCSSと比較して、プログラミングの難易度が上がります。そのため、JavaScriptに対応していない代行会社も多くあります。
凝ったデザインで、カッコイイLP（ランディングページ）を制作したいという方は、依頼する前にご確認ください。
ポイント7：LPコーディング後のサポートが充実しているか？
LPの納品後に「この部分の色を変更してほしい」や「この部分にボタンを追加してほしい」などの変更点が出てくることは多々あります。そのときに柔軟にアフターフォローをしてくれるかを確認しましょう。
確認しておきたいサポート内容はこちらです。
- 納品後の修正は何回まで可能か？
- 納品後、無料で修正してくれる期間はどのくらいか？
- 担当者との連絡手段は何か？
- 継続して修正を依頼する場合の月額料金はいくらか？
自社の目的や状況に合わせた、サポート内容を選ぶようにしましょう。
ポイント8：料金・納期設定が明確か？
料金・納期設定が外注先を選ぶと、安心してコーディングを依頼できます。
料金プランが分かりにくいと、確認作業で無駄なコミュニケーションコストを使うことになりますし、後々トラブルになる可能性が高いです。
打ち合わせ時に料金や納期の説明が明確にされるか、チェックしておきましょう。
ポイント9：WEB広告運用も一緒に依頼できるか？
意外と見落としがちなのが、「リスティング広告・SNS広告・動画広告などのWEB広告運用も一緒に依頼できるか」という観点です。
基本的には、Web広告運用も一緒に依頼できる外注先をおすすめします。WEB広告とLP（ランディングページ）で整合性が取りやすくなるからです。
例えば、広告文の内容がLPに記載されていない場合、ユーザーの欲しい情報がなくページを離脱される原因になります。ページの離脱率が高いと、自社の商品購入やサービス申し込みなどの期待する成果は得られないでしょう。
WEB広告とLPで整合性が取れなくなることは、業務担当先が異なる場合によくあります。例えば、WEB広告運用はA社に依頼し、LPはB社に依頼している状況だと、内容の辻褄が合いにくいです。
LPで成果を上げていきたいのであれば、WEB広告とLP（ランディングページ）は同じ外注先に依頼することをオススメします。
WEB広告運用を外部へ依頼することを検討されている方は、こちらの記事「リスティング広告の依頼で失敗しないポイント10選！代行業者のおすすめは⁉︎」が役に立つかと思います。
中小企業のLP制作なら、クロスバズにお任せください
これまでは、LP（ランディングページ）のコーディングについて解説してきました。ただ一方で、以下項目に当てはまる方は、コーディングだけでなくLP制作全体を外注した方が成果を上げやすいかもしれません。
- これからLPを制作して、集客をしたい
- すでにLPはあるが、運用が上手くいっていない
- マーケティング視点でLPを制作してくれる会社を探している
上記に当てはまる方は、ぜひクロスバズにお任せください。クロスバズは戦略に重点を置くマーケティング会社で、主に3つの強みがあります。
- 競合分析・ユーザー分析を得意としており、売れるセールスストーリーを設計できる
- 行動経済学を取り入れた、成果の出るLP制作が得意
- 集客のプロが広告運用から改善を徹底サポート
上記の強みから中小企業の方々から絶大な支持を得ており、実際にクライアント様の中には、依頼半年後に5倍の売上を達成させた企業様もいらっしゃいます。
戦略から制作、集客まで考えてLP制作をする会社の中では、割安な料金価格帯とさせていただいています。
また弊社では、クリエイター在籍数2,800名以上のイラストサイトも運営しているため、漫画LPから記事LPまで、幅広く制作可能です。
費用対効果の高いLPを制作したい中小企業の方は、ぜひクロスバズまでご相談ください。
まとめ
この記事では、LP（ランディングページ）のコーディングについて解説してきました。今回の内容をまとめておきます。
- LPのコーディングはHTML・CSS・JavaScriptで行われる
- LPのコーディング品質は、ユーザーの離脱率や成約率に大きく影響する
- LPのコーディングの費用相場は、1万円〜10万円
- LPのコーディングにかかる時間は、3日〜10日
- LP制作の実績が豊富で、マーケティング視点をもった外注先に依頼すること
- 外注先のサポート内容や料金・納期設定を確認しておくこと
- WEB広告もあわせて行なってくれる外注先がベスト
どんなに良い文章を考えたり画像をデザインしても、コーディングのレベルが低いと、LPの効果は半減してしまうので注意が必要です。
またコーディングだけではなく、LP制作を全体的に依頼したい方は、クロスバズにお任せください。LP制作・マーケティングのプロがお待ちしております。ご相談・お見積りは無料で行なっていますので、お気軽にご連絡ください。
カテゴリから記事をさがす
人気の記事 POPULAR
関連記事 RELATED
金融業界のLPで効果的な構成・ポイントを分かりやすく解説
BtoBのLP制作で押さえておきたい特徴・ポイントとは？制作費用や事例も紹介
EFO対策とは？実施すべき15の施策と期待できる効果
塗装業界のLP（ランディングページ）で集客を成功させる秘訣とは？
LP(ランディングページ)の直帰率とは？業界別平均や計算・測定方法まとめ
マッチングアプリのLPを制作するメリットや制作時に気をつけるべきことを事例付きで紹介
LPのコンバージョン率はどのくらいが目安？低い要因や改善のポイントを解説
ecforceを使ったLP作成方法まとめ！テンプレートやコーディングについても解説
ShopifyでLPは作れる？LPの作り方やおすすめアプリを詳しく解説