LPのコーディングとは？画像とHTMLの違い、費用と工数の目安、外注する前に決めること

LPのコーディングとは、デザインしたLPを、ブラウザで表示できるWebページにする作業です。HTMLとCSSで組み、動きが必要な部分はJavaScriptを使います。

LPのコーディングでは、ページを組むだけでなく、次のような作業もあわせて行います。

• PCとスマホで表示を切り替える設定（レスポンシブなど）
• 申し込みのフォームや、ボタンのリンクの設定
• 広告やアクセス解析の計測タグの設置
• サーバーやWordPress、ネットショップのモールへの反映（アップロード）

LPのコーディングには、文字も含めてデザインをすべて画像にする「画像コーディング」と、文字の一部をHTMLのテキストで組む「HTMLコーディング」があります。見た目はほとんど同じで、違いは文字がテキストのデータになっているかどうかです。

LP制作.jpでは、どちらを選ぶかを集客の方法で決めることをおすすめしています。バナー広告や、SNS広告、直接のリンクから人を集めるLPは、費用を抑えられる画像コーディングで十分です。リスティング広告の品質スコアや、検索からの集客を考えるLPは、テキストを含むHTMLコーディングが向いています。集客の方法はLPの集客方法の記事でまとめています。

• レスポンシブ：1つのHTMLで、画面の幅に合わせてPCとスマホの表示を切り替えるコーディングの方法
• スマホ最適化：PCのデザインをもとに、スマホで読みやすいように並びや文字の大きさを調整するデザインの作業

LP制作.jpでは、1つのHTMLでPCとスマホの表示を切り替えるレスポンシブでの実装をすすめています。タブレットはPCのデザインを表示します。ただし、楽天市場やYahoo!ショッピングの商品ページなど、仕様の上でレスポンシブにできない場合もあります。

PCとスマホの両方に対応するかは、LPに来る人の端末で決めます。BtoBの商材はPCから見る人が中心でスマホへの対応を省くこともあり、美容の商品はスマホから見る人が中心なので、PCでもスマホのデザインを表示することがあります。スマホでの文字の大きさはLPの文字サイズの目安の記事でまとめています。

コーディングの手間（工数）は、LPの長さ、作る端末の数（PC・スマホ）、HTMLにする部分の多さ、動き（アニメーション）やフォームの有無で変わります。LP制作.jpでは、工数の目安をLPの長さで出しています。長いLPほど組む部分が増えるため、HTMLコーディングの料金も、LPの長さ（プラン）ごとに決めています。参考として、LP制作.jpの料金は次のとおりです（税抜）。

HTMLコーディングの料金は、LPの長さで次のように変わります（1つの端末あたり、税抜）。

別にディレクション費（各種費用の20%）がかかります。コーディングの修正は、画像・HTMLとも1回まで無料で、デザインの修正とは別に数えます。依頼から納品までは平均20〜25営業日が目安です。LPの制作費の全体はLP制作の相場の記事でまとめています。

自分でLPをコーディングする場合は、HTMLで文章や画像の並びを書き、CSSで色や大きさ、配置を決めます。一から書く代わりに、次のような方法もあります。

• HTMLのテンプレート：LP用に作られた無料や有料のテンプレートを、自社の内容に書き換える。使ってよい範囲（ライセンス）を必ず確かめる
• CSSのフレームワーク：Bootstrap などを使うと、レスポンシブの配置を短い時間で組める
• ノーコードのツール：HTMLを書かずに、画面の操作でLPを作る。ツールの料金と選び方はLPを自分で作る方法の記事でまとめている

どの方法でも、画像の容量を小さくして表示を速くすること、大事な文字はテキストで入れること、スマホで文字が小さくなりすぎないことに気をつけます。

LP制作.jpでは、WordPressにも反映できます（WordPressのログインの情報と、FTPの接続の設定を共有いただきます。独自のシステムなど、対応できない場合もあります）。楽天市場やYahoo!ショッピングなどのモールにも、モールの仕様に合わせて反映します。計測タグはLP分析のやり方の記事でまとめています。

• よく使われるブラウザで、表示が崩れていないか。LP制作.jpが表示を保証しているのは、Windows の Chrome・Firefox・Edge、Mac の Chrome・Safari、iPhone・iPad の Safari、Android の Chrome（いずれも最新版）
• スマホで、文字が読める大きさか。ボタンが押しやすいか
• ボタンやリンクが、正しいページにつながるか
• フォームから送った内容が、届くか
• 計測タグが動いているか
• 表示が遅くないか（画像の容量）

表示の速さは、LPの成果にも関わります。Google 広告のヘルプでは、スマホでの読み込みが1秒遅れると、コンバージョンが最大20%減るという、小売の例を紹介しています。

LP制作.jp（株式会社Ryuki Design）は、CVR（成約率）を一番に考えてLPを作る制作会社です。構成・ライティング・デザイン・画像コーディング・モールやサーバーへの反映まで、すべてのプランの料金に含まれます（ライト89,800円〜、税抜。別にディレクション費として各種費用の20%）。ディレクター・デザイナー・コーダーがチームで対応します。

HTMLコーディングやメールフォームの設置は、必要な場合だけオプションで追加します。LPのご相談はこちら：https://rdlp.jp/lp-inquiry

LPのコーディングには、文字も画像にする画像コーディングと、文字をテキストで組むHTMLコーディングがあります。バナー広告やSNS広告から人を集めるなら画像コーディング、リスティング広告の品質スコアや検索からの集客を考えるならHTMLコーディングが向いています。

外注する前に、端末、方法、フォーム、計測タグ、公開先、納品の形を決めておくと、見積もりと作業がぶれません。公開前には、ブラウザでの表示、リンク、フォーム、計測、表示の速さを確かめましょう。