ランディングページの作り方を理解しよう。構成やツールも紹介

マーケティングを行う上で、ランディングページは重要な役割を担っています。コンバージョン率を上げるためのポイントを押さえたランディングページの作成方法について解説します。作成に使えるツールも紹介しますので利用してみてください。

Offers」は、時代の変化や環境にあわせてキャリアを築きたい、そんな人にぴったりのサービスです。副業にチャレンジしたい方や転職活動を始めたい方、フリーランスとして活躍したい方におすすめ!あなたも新しい環境/開発スタイルを経験しよう!

「Offers」をもっと詳しくみる!

ランディングページの役割とは

ランディングページは商品の紹介やWebサービスの紹介などを掲載したWebサイトです。一見すると普通のWebサイトのように見えますが、ランディングページならではの特徴があります。

ランディングページの持つ役割や制作の目的について、まずは知っておきましょう。

Webサイトとの違い

ランディングページは、大きく二つの意味があります。広義的には『検索エンジンからユーザーが訪れる最初のページ』です。しかし、Web業界ではしばしば、もう一つの意味である『マーケティング施策に利用するページ』という意味があります。

通常のWebサイトでも、商品やサービスについて記載しているページがあります。しかし商品以外のことも書かれていたり、別の記事へのリンクがあったりなど、さまざまな目的を同時に果たしている場合が多いです。

一方のランディングページはマーケティング施策のために使われることから、読んだ人が紹介した商品やサービスに対し、購入や登録といった何かのアクションを起こすことを目的とするページです。

制作の目的

ランディングページでは商品の購入やWebサービスの登録などを目的としていますが、これは、よくあるチラシなどの広告とは違います。単に商品を羅列するだけではランディングページとは呼べないのです。

ランディングページ制作では、以下の点が重要になります。

  • ユーザーが欲しい情報を掲載している
  • ユーザーの持つ現状の悩みや不満を解消するためのコンテンツを用意している
  • ユーザーが読みやすい構成を整えている

そして、制作にかけた費用の分だけ成果を上げることも重要な目的の一つです。

ランディングページの構成と作り方

ランディングページをユーザーにとって分かりやすく、そして知りたい情報を載せるためには必要な項目があります。構成を考える上で必要な項目なので、それぞれの役割について確認してください。

キャッチコピーと共感部

キャッチコピーは、ユーザーの注目させる短い文です。そのページの内容を、魅力的な一言でまとめたもので、多くの場合、ページの冒頭に配置されます。その下に2行程度の補足を入れたり、画像を使ってよりインパクトを演出したりなどの手法がよく用いられます。

共感部とは、ユーザーの共感を誘うための項目です。現状悩んでいることや不便に感じていることなどを書くことで興味を引きます。警戒心をほぐすと共に、その後に紹介するものに興味を持ってもらうために必要な要素です。

オファーとベネフィット

オファーは、そのページで紹介したい商品やサービスの説明です。ポイントは『実際にイメージできること』です。商品の概要を説明して、実際に使っている自分の姿をユーザーにイメージさせます。商品の画像などを添付し、分かりやすく伝えましょう。

ベネフィットは、商品やサービスを利用することで利用者に起こるメリットや変化のことです。

ベネフィットは単なる商品説明とは違います。例えば美容サプリを紹介するに当たって、『豊富なコラーゲンが含まれている』というのはベネフィットではありません。『綺麗になる』『若返る』といった変化がベネフィットです。

実際の声とアクション

商品を売る側がベフィットを記載しても、単なるセールストークとしか受け取られない場合があります。そこで、実際に利用したユーザーの声の紹介が必要です。ユーザーの声ではなく、アンケート結果や統計でも問題ありません。客観的な情報を記載することで信憑性を増すことが目的です。

そして、ページ下部にはユーザーが取るべきアクションを記載しましょう。商品購入画面や登録ページへのリンクボタンや、申し込むための電話番号などを記載します。

作り方において押さえるべきポイント

ランディングページを実際に作成する段階になった時には、まずは内容についてしっかりと考える必要があります。効果的なランディングページにするためにも、以下のポイントを押さえた上で内容を考えていきましょう。

コンバーションの定義

コンバージョンとは『成果』のことです。単純な商品購入だけではなく、資料請求や体験入学の予約など、そのランディングページでユーザーに取って欲しいアクションに至れば、コンバージョンと呼ぶことができます。

まずは、コンバージョンを定義しておきましょう。この際、定義するコンバージョンは一つでなくても構いません。

例えば商品の購入の際に、コンバージョンを『カタログの請求』と『商品の購入』の二つに設定することもできます。いきなり商品を買うことは難しくても、資料請求からのステップを踏むことでより詳しい商品の内容を知り、購入に至るケースも考えられるでしょう。

このように、コンバージョンをあえて段階的に定義することでランディングページの効果を高めることも可能です。

ファーストビュー

『ファーストビュー』はページを訪問した読者が最初に目にするもので、続きを読ませるためのインパクトや魅力が必要な部分です。

以降の項目がどんなに魅力的でも、ファーストビューに魅力がなければ、ユーザーはすぐにページを離れてしまうでしょう。

魅力的なキャッチコピーはもちろん必要ですが、その他の要素についても考える必要があります。『ランキングNo.1』や『満足度○○%』といった権威付けも有効です。

分かりやすさとインパクトを備えたファーストビューの作成に、まずは力を注いでいきましょう。

アクション導線

アクション導線とは、商品の購入や資料請求といったそのページでユーザーに行って欲しいアクションまで、ユーザーを誘導することを指します。例えば、商品ページに誘導するリンクボタンを入れる場合は、以下のようなポイントを押さえると有効です。

  • ページが長くなる場合、ページ途中にも数回リンクボタンを挿入する
  • 周囲に同化させないために違う系統の色を選ぶ
  • クリックできることが分かるようなデザインにする

アクション導線をうまく考えることで、ユーザーがアクションを起こすハードルを大きく下げることができます。

ソフトやツールを活用しよう

ランディングページを一から作るには、HTML等のプログラムを利用しなければならず、プログラマーを雇うか、外注を考える必要があります。

しかし、Webサイトを作成するツールやソフトウェアを利用することで、プログラミング知識がなくてもランディングページを作成可能です。ランディングページ作成に役立つ便利なソフトウェアやツールを紹介します。

WordPressなどのWebサイト作成ツール

『ペライチ』や『Lander』などのWebサイト作成ツールを利用するという方法があります。本来はHTMLやCSSの知識が必要なものでも、テキストと同じように書くことができるツールです。

無料で利用できるものも多く、はじめての人でも手軽にページデザインを作ることができます。

特に、現在は個人ユーザーから世界的な企業まで利用している『WordPress』はおすすめのツールです。オープンソースのため、世界中のプログラマーが作成したプラグインを使ってカスタマイズを行うこともできます。

Photoshopなどの画像作成ツール

ランディングページを作成するにあたってボタンや背景、ロゴなどの素材が必要です。フリー素材やテンプレートを作成することもできますが自分で作成してみるとオリジナリティを演出できます。

特に商品などのメインとなる素材は、実際に写真で撮ったものなどを綺麗に見えるように加工することが求められます。画像作成ツールの利用を考えましょう。

フリーツールもありますが、おすすめはPhotoshopです。Photoshopで出力できる『psd』という形式は利用しているデザイナーも多く、外部との受け渡しなどでも有効なツールと言えます。

ランディングページの作り方でおすすめの本

ランディングページをきちんと作成するための詳しいノウハウが知りたい場合は、無料ブログを参考にすることも有効ですが、実際に成功しているノウハウを持った人の著書を参考にするのもおすすめです。

ランディングページの基本やテクニックについて、分かりやすく記載されている書籍を紹介します。

いちばんよくわかるWebデザインの基本 きちんと入門

レイアウトの原則やレスポンシブデザイン、配色などのWebデザインについて詳しく記載されている書籍です。タイポグラフィ等を含むデザイン用語や概念について、図解付き初心者でも分かりやすく解説されています。

ランディングページのデザインや、キャッチコピーの見せ方やフォント等、デザイン面を勉強する際に活用できる1冊です。

  • 書籍名:いちばんよくわかるWebデザインの基本きちんと入門
  • 価格:2380円
  • Amazon:商品ページ

ランディングページ・デザインメソッド

著者は『株式会社ポストスケイプ』というランディングページやサイトデザイン、クラウドなどのWeb関連を扱っている会社で、蓄積されているノウハウを活かしてランディングページに必要なことを詳しく、全般的に記載されています。

他のWebページとの差別化をするための方法など、役立つ知識が満載で、これ1冊あればランディングページ作成に必要な知識のほとんどを学ぶことが可能です。

  • 書籍名:ランディングページ・デザインメソッド
  • 価格:2160円
  • Amazon:商品ページ

コンテンツ・デザインパターン

こちらは、ランディングページ制作の事例集です。国内外の135社のコンテンツ作成の事例について記載されていて、パターンの中からランディングページに必要なアイディアやノウハウを学ぶことができます。

ランディングページの基礎を学んだ後に読めば、さらに理解度を深め、魅力あるランディングページを作るノウハウを得るために役立つでしょう。

  • 書籍名:コンテンツ・デザインパターン
  • 価格:2182円
  • Amazon:商品ページ

まとめ

ランディングページを作るためには構成について学び、ファーストビューやコンバージョンといったポイントをあらかじめ押さえた上で作成していくことが求められます。

プログラミング的な面での知識習得まで難しい場合は、WordPressなどの制作ツールを利用すると良いでしょう。また、基礎的な知識を学ぶためには、プロの執筆している書籍から学ぶのもおすすめです。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職サービスを使って、企業を探し回るのはもう終わり。副業をきっかけとした新しい働き方を実現します!

あなたも新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

お金

採用・組織

転職

イベントレポート