ランディングページ(LP)のコーディング方法を解説！手順と費用相場も紹介

監修者

三木 五月

神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています！ 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。詳しくは採用ページをご覧ください。

■経歴
1983年　5月7日生まれ
2002年　インド、カンボジア、ヨーロッパへ海外放浪
2005年　アメリカカリフォルニア州へ留学
2010年　株式会社エイ出版社入社
2011年　株式会社文藝春秋入社 Sports Graphic Number担当
2016年　株式会社ニュートラルワークス設立

...続きを読む

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

...続きを読む

ランディングページ（LP）の作成時に必ず発生するのがコーディング作業です。しかし、ランディングぺージを作成したくても、コーディング作業について理解できていないという方は少なくありません。

そこで今回は、ランディングページのコーディング方法や作業の流れを解説します。くわえて外部委託した際の費用相場、自社でLP制作を行う際のおすすめLP作成ツールもご紹介しますので、ぜひ参考にしてみてください。

ランディングページ（LP）のコーディングとは

ランディングページ（LP）のコーディングとは、LPを組み立てる作業です。デザイナーが作ったLPのイメージを元に、HTMLやCSSと言ったコンピューターが理解できる言語を使いLPを組み立てていく作業をコーディングといいます。

ランディングページ（LP）のコーディングとプログラミングの違い

よく混同されるランディングページ（LP）のコーディングとプログラミングの違いについて紹介します。コーディングは、仕様通りにLPを組み立てていく作業です。車などの製造工程で例えるとHTMLで車体の骨組みを作り、CSSで塗装をしていくイメージです。

一方プログラミングは、コンピューターに処理してもらうプログラムを作成することです。LP内にお問合せフォームを設置（PHP）やLPの背景画像に動きをつける（JavaScript）など、コンピューターに指示を出し処理してもらう機能を作成することをプログラミングといいます。車に例えると、自動ブレーキや対物センサーなどの機能をつけるイメージです。

ランディングページ（LP）のコーディングまでの流れ

それでは、ランディングページ（LP）のコーディングまでの流れを紹介します。工程は4つに分かれます。

【工程①】LPの戦略を練る

1つ目の工程では、LPの戦略を練ります。まずは、LPを作る目的を明確にしましょう。

• 商品の購入
• お問合せの獲得
• 自社のブランディング

上記のようにLPを作る目的を決定します。次にLPの入り口と出口の設計を行います。これから制作するLPについて「ユーザーがどこから入ってきてどこに誘導するか」を設定するということです。例えば、「検索エンジンからLPに訪問するユーザー」と「WEB広告からLPに訪問するユーザー」ではそれぞれニーズが異なるため、LPで伝えなくていけない情報が異なります。

LP戦略では、集客方法別に想定されるユーザーのニーズを加味した上で、どうやって目的を達成するか考える必要があります。

【工程②】LPの戦略を具体的な企画に落とす

次に、LPの戦略を具体的な企画に落としこみます。一般的にこの工程ではワイヤーフレーム（LPの設計図）を作成します。CVRアップに繋げるために、どう設計すれば目的を達成できるかを考えながらワイヤーフレームを作成することが重要です。この工程を疎かにしてしまうと、後から修正点が多くなり結果的にLPコーディングの工数が増えてしまうので注意が必要です。
ワイヤーフレームとは？作り方、おすすめツールも紹介 Webサイト制作やリニューアル時に必ず必要なのがワイヤーフレームです。一度も作成したことがない人には難しく感じますが、なぜ必要なのか、どんな内容が必要なのかがわかれば初心者でもチャレンジ可能です。ワイヤーフレームを基本的なことから紹介します。

【工程③】LPに記載する内容を考える

LPの設計ができたら、どのような訴求をしていくか考え、文章や画像を作成していきます。

LPの内容を考えることは直接コーディングに関係しませんが、内容によってデザインなどを調整する必要が出てきます。次の工程に影響してくるので、事前にLPをどのような内容にするか決めておくとスムーズに作業することができます。

【工程④】LPのデザインに着手

4つ目の工程では、LPのデザインに着手します。イメージカラーの選定や写真素材の加工を行います。中でも一番重要となるのがLPのファーストビューデザインです。LPの場合、ファーストビューでの離脱率が70%以上と言われています。そのため、ユーザーに必ず見られるファーストビューデザインは、入念にデザインする必要があります。
LPのファーストビューは超重要！売上アップのポイントと参考事例

【工程④】LPのコーディング

最後の工程は、LPのコーディングです。でき上がったデザインに命を吹き込む工程となります。LPは全ての情報を1ページに集約するため、画像コンテンツが多くなります。

しかし、画像の多用には気をつけなければなりません。画像が多くなりすぎてLPのページ表示速度が遅くなれば、ユーザーの離脱率が増加します。LPコーディングを行う際は、ページ表示速度にも気を配りながらコーディングしていくことが重要です。
LPOとは？LPO(ランディングページ最適化)対策とポイントを解説 ランディングページ（LP）を改善せず、放置していませんか？せっかく作ったLPはLPO対策を実施すれば成果を伸ばしていくことができます。この記事ではLPO（ランディングページ最適化）の方法、ポイントを解説します。

ランディングページ（LP）作成に必要なコーディング作業は？

ランディングページ（LP）作成に必要なコーディング作業を紹介します。LPコーディングでは、「HTML」「CSS」「JavaScript」の3つの言語を使って作業をしていきます。それぞれの役割について見ていきましょう。

HTMLを書く

HTMLは、Hyper Text Markup Languageの略で、LP制作の基本となるマークアップ言語です。マークアップ言語とは、LP上の文字・画像といった土台を構築する言語です。HTMLは「ここはヘッダー」「ここは見出し」と言ったようにLPの「どこに何を配置するか」をコンピューターに伝える役割があります。

CSSファイルを作成する

CSSは、Cascading Style Sheetsの略で、LPのレイアウトを形成するために必要です。文字の色や背景などを変更することが可能で、CSSを加えることによってLPが見やすい見た目に変化します。また、HTMLとCSSは、常にセットで作成する必要があります。HTMLでマークアップしながら、CSSでレイアウトを整えていくのが、LPコーディングの基本です。

JavaScriptを記述する

JavaScriptは、LP上に動きをつける役割があります。HTMLとCSSのみでもLP制作は可能ですが、どこか物足りないLPとなってしまいます。

例えば、JavaScriptを使用すると、LP内の画像コンテンツをスライドショーにするなどプログラムを構築することが可能となります。現在のLPコーディングでは、HTMLとCSSだけではなく、JavaScriptを利用するのがスタンダードとなっています。

ランディングページ（LP）のコーディングにかかる費用相場は？

ランディングページ（LP）のコーディングにかかる費用相場を紹介します。LP制作の相場は数万〜数十万円が相場となっています。また、「どんなLPを制作するか」「作業範囲」「依頼先」によって費用相場は大きく変わってきます。下記表にまとめましたので参考にして下さい。

自社でLP戦略設計～デザインまでを行えば費用を抑えることが可能

LP制作会社に依頼する際は、自社で「LP戦略設計〜デザイン」を事前に行っておくことで、費用を削減することが可能です。LP制作会社は工数が多くなる程、高額となるためです。また、LPに使用する画像素材も自社で用意しておくことで更に費用を抑えることが可能となります。

コーディングの知識がない人にはLP作成ツールがおすすめ

コーディングの知識がない人はLP作成ツールを利用しましょう。LP作成ツールとは、コーディングの知識がなくても、簡単にLPが制作できるツールです。テンプレートからデザインを選んだり、ドラック＆ドロップでコンテンツの編集ができるツールとなっています。

LP作成ツール導入のメリット

LP作成ツールを導入するメリットを3つ紹介します。

ランディングページ（LP）作成が簡単

1つ目のメリットは、ランディングページ（LP）作成が簡単になる点です。LP作成ツールがあれば何の知識がなくても下記4ステップでLP制作が可能です。

• LP作成ツールに登録する
• 好きなデザインテンプレートを選ぶ
• 画像やテキストを挿入
• LPを公開する

クラウド系のLP作成ツールであれば、自身でドメイン取得やサーバーを用意する必要もないため、簡単にLPが作成できます。

ランディングページ（LP）を低予算で作成できる

2つ目のメリットは、ランディングページ（LP）を低予算で作成できる点です。先ほど紹介した様にLP制作会社に依頼した場合は、数万円〜数十万円の費用が掛かります。LP作成ツールの中には、無料で利用できるものもあるため、低予算でLPを制作することが可能です。

ランディングページ（LP）の簡単な運用テストも可能

3つ目のメリットは、ランディングページ（LP）の簡単な運用テストが可能な点です。LPは、制作後の運用方法で目標達成できるかが決まります。自社でLPを運用する自信がない場合は、LP制作ツール内の分析ツールを利用すれば簡単に運用テストを行うことが可能です。

おすすめのLP作成ツール5選

LPのコーディング知識がなくても簡単にLPの作成ができるツール5選を紹介します。

ペライチ

ペライチは、日本発のLP作成ツールです。20万人以上の実績があるサービスとなっており誰でも簡単にLPを制作することが可能です。

ペライチの特徴

• お試しのスタートプランあり
• 3ステップでLPを作成できる
• レスポンシブデザイン標準対応

ペライチの料金

Jimdo（ジンドゥー）

Jimdo（ジンドゥー）はドイツ発のLP作成ツールです。海外の制作ツールになりますが、日本国内のサポートは、株式会社KDDIウェブコミュニケーションズが行っています。Jimdo（ジンドゥー）では、LP制作の知識がなくてもたった3分で目的に合ったLP制作が可能となっています。

Jimdo（ジンドゥー）の特徴

• 複数の質問に答えるだけでAIがLPを自動作成
• アクセス分析ツールも搭載
• スマホでホームページの更新と編集が可能

Jimdo（ジンドゥー）の料金

Wix

Wixは、世界190カ国以上、利用者数1億6,000万人以上が利用しているLP作成ツールです。

CMS(webサイトを構築するシステム)の世界シェア率が4位となっており、多くのユーザーに利用されているLP作成ツールです。

Wixの特徴

• 世界で多く使われているLP制作ツール
• デザインのテンプレートが約600以上
• 機能が豊富

Wixの料金

STUDIO

STUDIOは、STUDIO株式会社が運営するLP作成ツールです。デザイン制作に特化したツールとなっており、コーディング知識がないと難しい細かいデザイン調整ができるのが特徴です。デザインにこだわったLP制作をしたい方に向いているツールとなっています。

STUDIOの特徴

• LPデザインの細かい調整が可能（透明度・塗りつぶしなど）
• STUDIO上で作成したLPデザインを、ボタン一つで公開
• 公開後のLPデータ分析が可能

STUDIOの料金

フォームメーラー

フォームメーラーは、高機能なフォームやLP制作が簡単にできるツールです。ドラップ&ドロップの直感的な操作で制作が可能なので、LPコーディングの知識がなくてもプロ並みのLP制作が可能です。

フォームメーラーの特徴

• LPは20分、フォームなら5分で制作が可能
• 「申し込み」「問合せ」など多様なフォームも作成可能
• フォームの回答の分析も可能

フォームメーラーの料金

コーディングの理解を深めて理想のLPを制作しましょう

ランディングページ（LP）のコーディングについて紹介しました。

今回のまとめは下記の通りです。

• LP制作流れは「戦略設計」→「ワイヤーフレーム作成」→「デザイン」→「コーディング」
• 自社でLPコーディングが難しい場合は、制作会社に依頼かLP作成ツールを利用する
• LP作成ツールであればコスト抑えて運用テストが可能

ほとんどの企業様はWebサイトを構築する時間と専門知識がありません。ニュートラルワークスは、トレンドを抑えたデザインで徹底的に「成果」にこだわったサイトを構築いたします。LP制作にお困りの方は、ぜひお気軽にご相談ください。