LPを作ってみよう〜基礎知識編〜

投稿日:

最終更新日:

カテゴリー:

今回から何回かに分けてランディングページ(LP)を作る過程をご紹介していこうと思います。

この方法は、どこかの誰かに習った訳ではなく独自に現時点でベストだと考え得る方法ということで紹介させていただきます。ですので、こちらの記事をご覧になった方の中には、もっとより良い方法をご存知の方もたくさんお見えになると思いますので、ご教授いただければと思います。

では、早速始めていきましょう。

そもそもランディングページ(LP)とは?

そもそもランディングページのことをご存知ない方も見えるかもしれませんのでご説明します。

一般的にランディングページとは、リスティング広告などのインターネット広告から来訪してきたユーザーさんに、商品の購入や資料請求などといったアクションを起こしてもらうことを目的とするページのことを言います。

ですので、基本的には何かしらの広告とセットと考えてください。ランディングページだけ作って置いておいても、もともとアクセスがあるウェブサイトであれば別ですが、一般的には意味をなさない場合が多いです。

普段我々はホームページなどを運営していく上で、「コンテンツを充実させてSEO効果を高めよう」「キーワードを選択して狙ったユーザーに情報を届けよう」というような俗に言うSEO対策というものを検討したりします。ホームページで言う、いわゆる集客の部分ですね。

この部分をリスティング広告などにお任せして(その代わり、広告費が必要になります)、販売したい商品やサービスを紹介したランディングページにアクセスしてもらうという形が基本となります。そして、結果としてコンバージョン(結果に対するアクション:資料請求や商品購入などのアクション)に結びつけていきます。

これがざっくり申し上げてランディングページというものです。

ランディングページを作っていく過程

大きく分けてランディングページを作っていこう工程として以下のようなものがあります。

  • 戦略設計
  • 情報設計
  • デザイン開発
  • コーディング
  • 運営開始

戦略設計

戦略設計とは、商品やサービスを売りたい・広めたいという前提でどのようなランディングページが必要かなどを考える工程です。

考えることはたくさんありますが、例えばこんなことを考えます。

  • インターネット広告からどのようなユーザーを流入させるか
  • 類似サービスはどのような販売戦略を取っているか
  • どのようにコンバージョンさせるか

このようなことを事細かく考えていくことで、プロジェクトのぶれない基盤を作るとともに、結果からのフィードバックによって改善点をより見えやすくするためにも、しっかりと考えて具体化しておくことが大切です。

ざっくりとイメージでやってしまうと、改善や修正を行う時にもざっくりとイメージでやらなくてはならなくなるのでアバウトに物事を進めることになってしまいます。あとから面倒なことにならないためにも、ある程度しっかりと地盤を固めるためにも考えておくと良いです。

情報設計

ページ内で何をどのような順に説明・紹介していくかを考えます。そして、その大枠が決まったら、各箇所に必要なテキストや画像素材などを用意していきます。ワーヤーフレームもちゃんと作っておきます。

気をつけておく点としては以下のようになります。

  • サービスや商品の特徴や強みをしっかりと伝えられているか
  • コンバージョンに誘導できているか(ボタンの位置など)
  • ユーザーが知りたい情報をしっかりと提供できているか

これらのどれかが足りていないと、思ったような結果が得られない可能性が出てくるのでしっかりとカバーしておきましょう。

デザイン開発

情報設計で出来上がったワーヤーフレームやテキスト・画像素材などをデザインしていきます。また、個人プロジェクトではなくクライアントワークの場合ですと、参考になるデザインなどもしっかりと共有しておくことで要望も希望もズレないデザイン制作を行うことができます。

  • デザインのトンマナが定まっているか
  • レイアウトの工夫
  • 色彩設計
  • 使用するフォント設計
  • メインビジュアル(ファーストビュー)の訴求力
  • パーツの作り込み
  • 写真素材の加工

このような点を注意しながらデザイン開発・制作を進めていきます。ここをスムーズに進めるコツとしては決めることを決めてから作業に入るという点に気をつけましょう。

考えながらデザイン制作をすると、自分が思っている以上に非効率です。デザイン制作の途中で考えなければならないことが出てきた場合には、一度中断することをお勧めします。

コーディング

ランディングページのコーディングは一般的に軽視されることが多くなっています。

というのも、構造云々ではなくリスティング広告などでユーザーを呼び込むことを前提としているので、Googleなどの検索エンジンに良い評価をもらわなくても良いという考えが根底にあるからでしょう。

ですが、私としては最低限バリデーションにクリアしたものを作るようにしていますし、アクセシビリティにも気を配るようにしています。

運営開始

実際の運営が始まると、アクセス解析の結果やヒートマッピングの結果などから随時修正を行ったりして最適化していきます。

しかし、一般的なプロジェクトですと、ランディングページの制作だけで終了してしまう場合も多いので全ての案件が運営後までコミットするかどうかはクライアントさんの要望や予算設定にもよると思います。

まとめ

今回はざっくりとランディングページを作っていく過程を大まかに説明してみました。

次回からは、これらの流れに従って実際にコンテンツを考えながら作っていこうと思います。

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。