LPコーディングはなぜ行う？工数と費用について

LP（ランディングページ）のコーディングは、ユーザーの読みやすさとページの離脱率に大きく影響するものです。LPのコーディングとは、HTML・CSS・JavaScriptなどを用いてWebページのデザインやフォントの大きさ、行間・余白・色合いなど、幅広い作業が求められます。

このLPコーディングの完成度によっては、読みにくいページになってしまうケースもあり、ユーザーの離脱率に大きく影響する可能性が高いです。その結果、ユーザーが商品・サービスに対するアクションにつながらず、自社の購入・利用するチャンスを失います。

LPの表示速度も重要なポイントです。ユーザーLPに訪れたときにページの切り替わりが遅い場合、ストレスを与えてしまうことがあります。そのため、自社の購入・利用を検討していたものの、ユーザーが離脱する可能性もあるのです。

Googleの調査データによると、表示速度が1秒〜3秒のケースでは離脱率が32%上昇するといったケースも報告されています。また、表示速度が1秒〜6秒では離脱率が106%上昇するとの方向もあるのです。

参考： Think With Google「New Industry Benchmarks for Mobile Page Speed 」https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

LPの表示速度を早めるには、画像のサイズやファイルの形式を変更する、ソースコードの圧縮などの対応が必要です。

システム導入によって劇的に表示速度を改善できるものもあります。
https://rdlp.jp/hypersonic

LPコーディングにおいてレスポンシブ対応は非常に重要です。レスポンシブ対応とは、
パソコンやタブレット、スマートフォンなど、使用している端末によって、デザインのレイアウトを変えることです。

最近では、スマートフォンの利用者が増えています。インターネットを見る際はスマートフォンに対応したWebページにするのが必須となっています。そのため、レスポンシブ対応しなければ、パソコンで正しく表示されていてもスマートフォンでは、文字が小さく見えたり、画像サイズが合っていないことがあります。

対応策としては、CSSなどでレイアウトを変更するレスポンシブ対応が必要です。とはいえ、CSSの細かい変更には専門的な知識が必要になるため、外部に委託するケースも少なくありません。

文章や画像のみでは、インパクトのあるLPを作ることは困難です。CSSやJavaScriptを用いて動きをつけるなどの工夫をすると、自社の商品やサービスなどのインパクトを残すことができ、競合ページとの差別化にもつながるでしょう。

クオリティや関わる人数によっても工数や相場が異なります。マーケティングを本格的に導入する場合としない場合によっても金額が大きく変わります。一般的なLP制作においては、1〜2か月の期間で30万〜60万円、1.5～3か月で60万円以上ほどです。

フリーランスなど、個人に依頼する場合には制作会社に依頼するケースより、人件費を抑えられるため、価格が低くなります。一般的には、2週間〜1.5か月で20〜30万円程度です。ただし、作業範囲によって大幅に変わる場合もあります。また、基本的には一人で作業を行う為デザインはできるけどコーディングは苦手などのデメリットもございます。

いきなりコーディングを開始するのではなく、デザインカンプにある要素をまとめることから始めます。このときに完璧に作成する必要はなく、大まかに要素を配置程度でもかまいません。

デザインカンプを見ながら、セクションごとの横幅や見出しなど、共通するデザイン要素を見つけます。共通するデザイン要素には、目印をつけておくとよいでしょう。

各要素にclassの名前をつけ、紙に記載していきます。共通するデザイン要素には同じclassの名前をつけましょう。

LPで使用する画像を準備し、コーディングを開始する前にデザインカンプから書き出します。書き出しする際は、画像容量の圧縮を済ませておきましょう。

要素とclass名を記述した紙を準備し、HTMLのコーディングを行います。HTMLを全て記述してからCSSに移るのが一般的です。

CSSのコーディングは、レスポンシブも含めて記述します。
なお、SassやScssでコーディングすると、より効率的に進められます。

問い合わせ機能が必要なLPには、問い合わせ機能を設置します。
設置に時間がかかりそうな場合には、早めに着手する方が得策です。

動きのある要素を加えるLPには、JavaScript（ jQuery ）のコーディングが必要になります。CSSの編集などがあれば、あわせて行いましょう。

titleタグやmeta descriptionタグなどのheadタグ内を記述することも含め、記述漏れがないようにしておきましょう。

デザインカンプとコーディングを見比べ、 最終確認を行います。1px単位で細かく合わせる必要はありませんが、違和感のないよう調整します。また、表示の崩れがないよう、ブラウザやデバイスなどで確認することも大切です。すべての確認が終われば納品となります。

どのような作業が発生しているのかを知っておくことで、制作会社の提示した価格が適正であるのかなどを判断できるでしょう。ランディングページの制作工程は、事前調査・商品理解、ワイヤーフレーム・構成案・ライティング、デザイン、コーディングの4つに分けられます。この流れによって、どのくらいの工数をかけるかどうかで制作費用が変わります。つまり、1つ1つの作業が増えていくごとに費用も上がっていくということです。

LP制作は、制作会社によって費用に幅があります。たとえば、スピードと安さが特徴な場合とクオリティや成果を重視する場合などです。制作会社によっては、それぞれの特徴と費用の幅があることを理解しておきましょう。

コストを抑えたいのであれば工数を削り、時間と工数を増やしたいのであれば品質重視といった、いわゆる工数の総和で決定するのが望ましいです。