ランディングページのコーディングについて詳しく解説！作成の工程や費用は？

ランディングページについて悩みを持ってはいないでしょうか？この記事では、ランディングページのコーディングについて解説していきます。また、作成の工程や費用についても触れています。ランディングページ作成を始めようとしている担当者の方は、ぜひ参考にしてください。

ランディングページとは、商品やサービスに特化した紹介ページのことです。

役割については以下の3つにまとめることができます。

ランディングページとは、商品やサービスに特化した紹介ページのことです。紹介だけでなく、販売や問い合わせまでのコンバージョンをすることを目的としています。

Webサイトには様々な種類がありますが、ランディングページはなかでも最もページ数が少ないです。

その理由は、ランディングページでは企業がユーザーに訴求したい商品やサービスの訴求に特化しているからです。

ランディングページから他のページに遷移しにくいような作り方をする場合が多いです。コンバージョン率を上げるにはその方が良いためです。

では、ユーザーはどのようにランディングページへたどり着くのでしょうか？

ランディングページは、多くの場合各広告媒体からの遷移先として利用されます。もちろん検索エンジンからの自然流入もありますが、広告を経由して訪問されることが多いです。その理由は、自然流入は短期的な結果を出すことが難しいからです。

検索エンジンから大量のアクセスを集めるためには、SEO対策を行わなければなりません。しかしSEOで上位表示を目指して結果を出すにはサイト構造を工夫し、検索キーワードを盛り込むなど様々な工夫が必要です。

一方広告を利用すれば、自然流入よりも簡単に上位表示が可能になります。コストはかかりますが、短期的に結果を出すことができるので、アクセスを集めてユーザーに訴求することが可能なのです。

ランディングページの最大の目的は、購入や問い合わせにつなげることです。ランディングページでは、商品やサービスの魅力についてダイレクトに訴求できます。

そこでページに購入や問い合わせのためのボタンを設置しておきましょう。広告を経由したユーザーが商品やサービスに魅力を感じたら、そのまま購入まで誘導できます。

ランディングページは1人の営業マンと考えておきましょう。営業のトークストーリーや言い回し、資料の見せ方などを磨くほど、営業成果が上がるのと同じで、ランディングページもテストを繰り返しながら、テキストや画像、構成などのブラッシュアップをかけていきます。

ランディングページは、ヒートマップと呼ばれるツールを用いて、ブラッシュアップすることができます。

ユーザーがページのどの部分を注視し、訪問者がどこで離脱するか等のデータを閲覧できます。ヒートマップを見ると意外にも顧客が興味を持つ観点が違うなども見つかることもあります。

このように、データに基づきランディングページをブラッシュアップし、コンバージョン率をアップさせていきます。

ランディングページを作成する場合は、以下の手順で行います。

ここからはそれぞれの手順について解説していきましょう。

ランディングページを制作する際は、ファイル作成の前にターゲットの調査・分析を行いましょう。その際、ターゲットがどのような悩みを持っているのかを知ることが大切です。ターゲットの課題を知ることで、訴求したい商品やサービスがどのようにターゲットの悩みを解決してくれるのかがわかります。

ランディングの方向性が決まったら、構成案を作成しましょう。構成案とはランディングページをどのように設計するかを記したドキュメントのことです。構成案を用意しておくことで、ランディングページ作成に携わるメンバー全員で必要な要素を共有することが可能です。

ランディングページの構成について詳しく知りたい人は、こちらの記事も併せてご覧ください。

構成案が作成できたら、ドキュメントに従ってテキストを作っていきます。ライティングとは、ランディングページのテキストやキャッチコピーなどのテキストを作成していくことです。その際、自社の用品・サービスが他社のものとどのように異なっているかを明らかにしていくことが大切です。

特にランディングページのトップに掲載するキャッチコピーは大事です。ファーストビューと呼ばれますが、ファーストビューでターゲットにとってのベネフィットをわかりやすく簡潔に表現しましょう。 ファーストビューの離脱率をいかに下げるかを戦略的に考えて改善していくことで、コンバージョン率を高めることができます。

テキストが用意できたら、ランディングページのデザインを作成しましょう。デザインは商品・サービスを魅力的に見せることが大切です。また、ユーザーを申し込み・問い合わせフォームまで誘導できるよう、導線を確保することも重要です。

ランディングページのデザインにおいては、「シズル（sizzle）」という考え方を意識して作りましょう。シズルとは、肉や魚などを焼くときの「ジュージュー」とおいしそうな音を立てる意味の英語です。

ジュージューと焼ける音が聞こえてきそうな美味しそうお肉の画像を見ると、食欲を駆り立てられませんか？

これは顧客の感覚を刺激し、購買意欲をダイレクトに喚起する手法を意味しています。視覚で購買意欲を喚起できるデザインを考えてみましょう。

デザインはそれだけでなく、ユーザーを申し込み・問い合わせフォームまで誘導できるような、ボタンバナーデザインや、導線を確保することも重要です。

ライティングとデザインが完了したら、コーディングを行いましょう。デザインに忠実に作成していくことは重要ですが、コーディングを行なって気がつくこともあります。その場合は臨機応変に対応し、ユーザーが利用しやすいことを優先して作成していきましょう。

HTML・CSSのファイルが完成したら、公開作業に入ります。ただし、いきなり公開してはいけません。サイト運営では、あらかじめテスト環境でチェックすることが大切です。テスト環境で問題ないことを確認してから、公開に移ります。

ランディングページのコーディングには、以下のような特徴があります。

ここからはそれぞれの特徴について説明していきましょう。

多くの場合、ランディングページのデザインだけ決めてコーディングだけを外注します。もちろんデザインとコーディングをセットで外注することは可能です。しかし、合わせて外注するとなると40万円前後かかってしまうことがあります。そこでなるべくコストを抑えるために、デザインだけ社内で制作してコーディングは外注するのです。

コーディングだけ外注すると、実際の費用は数万円程度です。ここからはコーディングにかかる費用について、さらに詳しく見ていきましょう。

コーディングにかかる費用の相場は、1万円から10万円くらいです。例えば、個人でコーディングを行なっているフリーランサーに依頼した場合は、5万円前後で収まる場合があります。また、コーディングを依頼できる中小企業の制作会社に依頼した場合は、10万円前後かかることもあります。このように、制作費はどこに依頼するかによって変わってきます。

コーディング費用をなるべく安く抑えたいのであれば、テンプレートを用いるといいでしょう。テンプレートであれば、5000円程度で依頼できる会社もあります。テンプレートとは、あらかじめコーディングで組み込んでいる要素を組み合わせて作ることです。オリジナリティには乏しいものの、ランディングページとして利用するには問題ありません。

このように、ランディングページ制作にかかる費用やページのデザインや会社によって様々です。外注する場合は、デザインや予算など優先順位を決めて選ぶといいでしょう。

ランディングページの費用について詳しく知りたい人は、併せてこちらもご覧ください。

コーディングのやり方は、具体的に以下の手順で進めていきます。

ここからはそれぞれの工程について詳細を説明しましょう。

最初にファイルやフォルダを作成していきます。ファイルとはHTMLやCSSを書き込むもので、フォルダとは書き込んだファイルを格納する場所のことです。フォルダの構成について特に決まりはありませんが、理解しやすいURLなど、後から管理しやすい構成にするといいでしょう。

次にレイアウトやデザインに従って、HTMLで構造化していきます。HTMLではランディングページの構成やテキストを表示していきます。そのため、あらかじめランディングページにどんな情報を載せるのかを決めておきましょう。

HTMLファイルが作成できたら、CSSで調整していきます。CSSはサイトの見た目を調整するためのファイルです。HTMLのままでは魅力的なデザインにならないので、作成しておいたデザインを元に調整していきましょう。

ランディングページはHTML/CSSだけでも作れます。しかし、Javascriptを使うとランディングページに動きを施すことができ、やり方次第ではコンバージョン率が向上します。スライドショーなどもJavaScriptにより実装をしています。

JavaScriptを用いて、ファーストビューに動きをつけるだけで、離脱率が下がることもあります。このようにJavaScriptも扱えるようになると、コンバージョン率を上げるための施策のバリュエーションが増えることになります。

HTML・CSSファイルの作成が完了したら、ファイルと画像を格納していきます。格納とは、サーバーにアップロードすることです。画像がないと商品やサービスの訴求ができないので、必ず用意しておきましょう。

コーディングにはFTPサーバーの扱いのノウハウも必要とされます。

PC用のデザインだけでなく、スマホ用のデザインも必要です。昨今ではスマートフォンでサイトを閲覧する人が増えていきました。多くのユーザーに流入してもらうためにも、スマホ用のデザインも用意しておきましょう。その際、PCとスマホで表示を出し分けられるように、レスポンシブにしておくことがポイントです。

では、実際にコーディングを行おうとすると、難易度は高いのでしょうか。コーディングについては、以下のような特徴があります。

以下ではそれぞれのポイントについて解説しましょう。　

コーディングを学ぶ場合、専門用語が多く苦手意識を持ちやすいという側面があります。カタカナや英語の言葉が多いので、用語を覚えるのが大変です。それぞれにどんな意味があり、どんな場面で使うのかを理解しなければなりません。

また、コーディングを独学で学習する方法に、既存のページを模写するという「模写コーディング」という手法があります。しかし自分で解決しなければならないため、難易度は高いです。そこで思っているデザインの反映ができず難しく感じるため、挫折してしまうこともあります。

そして独学で始めても、途中で理解できなくなってしまうこともあります。独学の場合、どのように理解できていないのか、どうしたら理解できるのかを自分で解決しなければなりません。このように、専門用語の覚えにくさやデザイン反映の難しさから、挫折してしまうこともあります。

ランディングページのコーディングをするときに、デザインデータを扱うこともあります。場合によってはデザインデータを微調整をしないとならない時もあります。主なデザインデータは下記の4つになります。

デザインデータによってコーディング方法が若干異なりますので、それぞれのやり方を覚えておきましょう。

専門知識も必要なランディングページ制作を外に依頼したいと考えている人は、こちらの記事も併せてご覧ください。

この記事では、ランディングページのコーディングについて解説していきました。ランディングページについては、以下のようなポイントを抑えておきましょう。

ランディングページにかかる費用は、制作会社によって様々です。そのため、デザインや予算など優先順位を決めて選びましょう。またランディングページで成果を出すには、ターゲットの調査・分析が大切です。そして、スマホ用のデザインも用意することで、より多くのユーザーに見てもらえます。もしこうした工夫を凝らしても成果が出ないようであれば、ぜひTHINkBALへご相談ください。