ランディングページのコーディングとは？役割やポイントを解説！
広告や検索結果からの流入ユーザーを取り込むことは、企業にとって重要な使命です。その際、鍵を握るのが、ユーザーが最初に閲覧するランディングページです。ランディングページの良し悪しによって、CVが変わってくるといっても過言ではありません。そんなランディングページですが、コーディングをするのに重要なポイントがいくつかあります。この記事では、設計の手順やコーディングのポイントをご紹介します。
ランディングページとは
ランディングページは、広告や検索結果を経由したユーザーが、サイトに初めにアクセスするページのことです。ユーザーが自社サイトに着地するイメージからそう呼ばれています。 しかし、ランディングページは広義の意味だけでなく、狭義の意味も存在します。特にWebマーケティング・デジタルマーケティングにおいて一般的に使われるのは、狭義の意味合いにおけるランディングページの方です。
狭義の意味合いでは、ユーザーの誘導やアクションの誘発に特化した、縦長レイアウトのページのことを指します。SNSやリスティング広告、検索結果から流入したユーザーを、ダイレクトにお問い合わせや注文に結びつけることに特化したページ構成がなされています。営業のセールストークを詰め込んだような内容になっており、通常のホームページのイメージよりも、チラシやセールスレターに近いレイアウトとも言えるでしょう。商品を訴求するために順序立ててアプローチされているため、情報量が多くなり、結果的に縦長のページになります。CVに直結する施策として、幅広いユーザーに効果的な方法です。
コーディングとは
コーディングは、プログラミング言語を使ってソースコードを記述することです。一般的なWebサイト・Webページと同じく、ランディングページもいくつかの言語でコーディングして制作します。
ランディングページでのコーディングは、主にHTML・CSS・Javascriptなどの言語を使います。HTML・CSSはマークアップ言語とも呼ばれていて、Webページの構造を示す用途で用いられます。例えば、HTMLで文字の見出しを形作ったり、ページ内のブロックを示したりすることが該当します。CSSはHTMLで指定した各要素に装飾をし、ページの体裁を整えるために用いられます。
HTMLとCSSを上手くコーディングし、見やすいWebページ制作を心がけましょう。 ちなみに、Javascriptは動きがあるものを作るときに用いられます。スライダーやスクロールに合わせて動くアニメーションなどが代表的な例です。動きがあるページはユーザーの目を引くので、ランディングページ制作にも向いているでしょう。
ランディングページの制作工程
では、ランディングページの制作工程を確認していきましょう。
戦略設計
ランディングページの制作は戦略設計からスタートします。まずは、ターゲットを洗い出してペルソナ設定をし、ユーザーがどのようなキーワードで検索してランディングページに流入するのか、経路を意識して戦略を練ります。 自然検索や広告など流入経路によって、ランディングページ上で訴求するポイントも異なる場合があるので、制作の際はそれぞれの手法の特徴を踏まえた上で設計する必要があります。
情報開発
一般的に、情報開発はワイヤーフレームを設計する工程です。前のステップで策定した戦略もに基づいて、ページのどの部分に何を配置していくかを決めていきます。例えば、メインキャッチを掲載する箇所やボタンの設置箇所など、具体的な設計図を作ります。ワイヤーフレームを活用することで、その後の工程も手戻りなく進みますし、デザイナーも作業に入りやすいといったメリットがあります。
デザイン開発
デザイン開発は考える工程と作業する工程に二分されます。売上につながるランディングページデザインを形作るために、ワイヤーフレームの意図を理解することが大切です。伝えたい情報を精査し、どうデザインに落し込んで魅力的なビジュアルに昇華するかがポイントです。単に感覚的なデザインをするだけでなく、意図に根差した納得感のあるデザインを意識しましょう。
コーディング
デザイン開発が終わったら次はコーディングです。デザインが良かったとしてもコーディングが上手くできないと、今までの工程が水の泡になってしまいます。正しいHTML構造に基づいたコーディングを心がけ、SEOにも強いランディングページを生み出しましょう。
例えば、画像を多く用いるとページの読み込み負荷が高まり、表示速度の低下が発生します。ページの表示速度はユーザーの離脱だけでなく、ページの評価基準にも組み込まれているため、自然検索経由での流入を見込んでいる場合には特に注意が必要です。また、昨今ではスマートフォン・PC・タブレット端末に対応できるよう、レスポンシブWebデザインが求められています。表示に不具合がないかどうか、各端末ごとに確認していく必要もあるでしょう。
ちなみに、ランディングページは一度制作して終わりではなく、改善のフローが設けられるケースがほとんどです。そのため、初期段階から今後の改善運用を見据えたコーディングを行うことを推奨します。手を入れ辛い設計をしてしまうと、後に支障が出る可能性があります。
改善＆運用
継続的なコンバージョン獲得のためには、ランディングページを制作・運用した後に定期的な改善・最適化を繰り返すことが重要です。
コンバージョン獲得に結びついた要因と、離脱箇所を特定することが大切です。Googleアナリティクスや各種ヒートマップツールなど、分析と改善をするためのツールは多く存在します。最適化をスピーディに行い、より効果の高いランディングページを実現しましょう。
ランディングページにおけるコーディングの役割とポイント
ランディングページにおいて、正確なコーディングは大切な役割を担います。ここからはそのポイントについてご紹介します。
デザインを再現すること
デザインカンプ通りにコーディングを行うのは案外難しいものです。ランディングページは自由度が高く、変則的なデザインである場合も少なくありません。そうしたデザインの場合、余白の調整作業一つをとっても大変な作業になります。フォントの大きさや行間、余白、色味、などデザイナーと確認を取りながら進めましょう。
運用・改善がしやすいこと
運用・改善を行うにあたって、改修作業時に編集しやすいコーディングになっているか否かは大切なポイントです。どのコーダーが作業に着手しても、「どこに何が記述されていて」「どのような設定になっているのか」を理解できるようなコーディングを意識しましょう。 いざ改善しようとしたときに、素早く編集でき、クオリティアップできるかどうかも、コーディングの良し悪しを決めるポイントです。
表示速度をコントロールすること
もし完璧なランディングページができ上がったとしても、ページを開くにの20秒もかかってしまっては元も子もありません。ユーザーがストレスなく読み進め、CVできるように表示速度を上げる工夫をしてみましょう。
表示速度を速めるためには、画像サイズを小さくしたり、画像のファイル形式を変更したりするのが効果的です。また、CSS・Javascriptなど、作成したソースコードを圧縮するのもいいでしょう。
環境に依存せずに表示させること
GoogleChromeやSafari、InternetExplorerなど、それぞれブラウザ毎に表示基準が異なります。さらに、ユーザーが使用するデバイスによって表示幅もまちまちです。先ほどご紹介したレスポンシブへの対応を含め、より多くのブラウザで差異なく表示できるよう実装しましょう。
まとめ
今回はランディングページのコーディングをテーマにご紹介しました。コーディングはランディングページの良し悪しを決める、制作の最終段階の位置する工程です。デザインの実現やSEOの観点、ユーザーへの配慮など色々な要素と密接に絡む部分なので、それぞれの担当者と密に連携しながら進めていきましょう。
▼関連記事
・成果の上がるLPのワイヤーフレームとは？成約率爆上げのワイヤーフレームの作り方
・LP制作の【相場】を徹底解剖！ラインディングページの値段は幾らが妥当か？
・ユーザーに支持されるランディングページ制作のポイント
MORE
