ランディングページのデザインはどうすればいい?手順とポイントを解説! - Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・ディレクターの求人転職支援

ランディングページのデザインはどうすればいい?手順とポイントを解説!
TIPS 2020.10.07

ランディングページのデザインはどうすればいい?手順とポイントを解説!

多くのサイトにおいて、ユーザーが最初に閲覧するページはイメージを決める重要なものです。この「ユーザーが最初にアクセスするページ」のことをランディングページ(LP)と言います。ランディングページは、ユーザーが検索結果や広告を経由してサイトに流入する、いわば「玄関口」の役割を果たすものです。そのため、ページの印象によって、滞在時間やコンバージョン率も大きく変わってくるでしょう。しかし、どのようなポイントを押さえてランディングページのデザインを決めれば良いのか、知らない方も多いでしょう。目的もなしに、ただ闇雲にランディングページを作ったところで効果は発揮できません。制作の順序やポイントを理解することで、初めて効果的なランディングページが形作れるのです。この記事では、ランディングページについて、概要や制作手順、ポイントなどをご紹介します。

ランディングページとは

ランディングページは、広告や検索結果経由で流入するユーザーが初めにアクセスするページのことです。着地や土地を意味する「land」という言葉に由来しています。そんなランディングページですが、厳密には広義の意味と狭義の意味があります。まずはそれぞれの特徴や違いと、ランディングページの定義について確認してみましょう。

ランディングページの意味

広義におけるランディングページの意味は、ここまでご紹介したように、ユーザーが初めにアクセスしたページのことです。検索や広告など、流入経路による差異はありません。例えば、会社概要に最初にアクセスした場合には、会社概要のページがランディングページと見なされます。アクセス解析ツール「Googleアナリティクス(GA)」には、ランディングページの指標がありますが、GAでは広義の意味で用いられています。

一方、狭義におけるランディングページは、ユーザーのアクションを誘導するように特化して作られたページのことを指します。一般的に狭義の意味におけるランディングページは、縦に長く設計されているケースが多く、ユーザーの行動を喚起し、購入・資料請求などを誘発する訴求が多数盛り込まれています。よくインターネットを利用する方であれば、ユーザーの悩みや商品の魅力が盛り込まれた後、購入ボタンや資料請求のボタンが設置されているぺージを見たことがあるのではないでしょうか。

狭義のランディングページは、見込み客を発掘したり、人材を獲得したり、商品の売上を向上させたりする目的で制作されます。リスティング広告やSNSと組み合わせることで、ダイレクトなCVを狙うことも可能です。

ランディングページの特徴

ここからは、狭義の意味におけるランディングページにフォーカスしてご紹介します。

先ほどご紹介したように、ランディングページの特徴は何と言っても縦長のレイアウトです。ターゲット層に合わせてランディングページを作り分けることもありますが、基本的にはページ単独で全てのユーザーのアクションを喚起できるように設計されます。そのため、一般的なサイトと比較すると、チラシやセールスレターに近いレイアウトで作られることが多いです。ページの先頭から終わりにかけて、順序立ててユーザーを誘導できるよう作られているため、どうしても情報量が多くなるので縦に長いページになります。

もう一つの特徴として、他ページへのリンクが少ないことが挙げられます。不用意なリンクは他ページ経由の離脱を招き、ランディングページの効果を損ねてしまいます。例えば、ランディングページから企業サイトへとユーザーが遷移した場合、会社案内やアクセスページのようなCVに結びつかないページに流入してしまうと、ユーザーがアクションを起こす確率は大きく減ってしまいます。そのため、直接的にCVにつながらないページは全て塞ぐように設計されるのです。

最後に、デザインに関する特徴もあります。CVに特化して制作されたランディングページは、通常のサイトと違ってカラムやグローバルナビといったものがなく、一枚のページを丸々活用できます。加えて、ユーザーをひきつける目的で、インパクトのあるデザインが用いられたり、目を引く色使いがされていたりするケースも少なくありません。

ランディングページのデザイン決定までのステップ

ランディングページを上手く作るためには、事前準備とテストが重要です。ここからは、ランディングページを作る際のポイントを確認していきましょう。

ランディングページを作る目的を明確にする

ランディングページは適切なものでなければ「なんとなく」綺麗なだけのページにしかなりません。制作する際にはターゲットのペルソナを定めて、目的を明確にしましょう。 男女どちらをターゲットにするのか、どの年齢層に訴求するのか、どのようなニーズを持ったユーザーに届けたいのかなど、項目毎に洗い出して整理してみましょう。

デザイン構成を考える

事前準備を行った後、細かなデザイン構成を決めていきます。ケースによって構成はさまざまですが、一般的には下記のような流れに沿って構成される場合が多いです。

1.誘起 2.結果 3.証拠 4.共感 5.信頼 6.ストーリー 7.クロージング

まずはキャッチコピーやファーストビューで印象付けます。その後、商品内容と効果の結果を提示します。続けて、成分やお客様満足度といった証拠や効果を裏付けする情報で補強し、ユーザーの悩みに寄り添う訴求を経てクロージングへとつなげます。ランディングページはCVを狙うために特化しているだけあって、このように導線をしっかりと形作ったうえでデザインされるのです。

テストを行う

ランディングページは制作後のテストフローも重要です。一度作って終わりではなく、Googleアナリティクスなどの分析ツールを用いて、文言やボタンの色、コンテンツ順番などを細かく分析・検証し、最適化します。改善を繰り返して、より効果の高いランディングページを目指しましょう。

ランディングページのデザインの4つのコツ

ここからは、ランディングページのデザインを検討するときに意識したい4つのコツをご紹介します。

ファーストビューの画像をこだわる

サイト制作において、画像選定は重要なポイントです。ランディングページでもそれは変わりません。中でも、ファーストビューに使う画像はこだわりましょう。

ファーストビューの画像は、ページの訪問者が読み進めるかどうかを決める大きな分かれ目であり、ファーストビュー次第で直帰率が大きく変化します。キャッチコピーも含めて、画像や文章で惹きつける内容を心がけましょう。目を惹く画像などを効果的に配置できれば、CVRにも影響を与える可能性があります。

アニメーションを活用する

アニメーションを活用することもコツの一つです。ページを閲覧したときに、動きがあるものは目を惹きつけます。例えば、縦の移動に合わせて画像や動画を動かすギミックを作れば、最後までスクロールしてもらえる確立は高くなるでしょう。

こういったアニメーションを作るにはGIF動画を活用したり、CSSやJavaScriptを使ったりして構築する場合がほとんどです。実装が著しく難しいわけではないので、コーディングする際にはポイントになるでしょう。

お客様の声を掲載する

さまざまな情報に簡単にアクセスできるようになった今、ユーザーは商品を買う前にレビューを確認する傾向にあります。

そのため、ランディングページにもお客様のポジティブな声を掲載してみましょう。実際にその商品を買った人、商品が手元に届いた人のレビューがあれば、購入者も検討する材料になります。

補色を活用する

サイトを構築するにあたり、色味を統一させることは重要です。商品やブランドのイメージカラーを基調にして、まとまりのある好印象なページにしましょう。例えば、水色がイメージカラーの場合は、トップ画面も水色にすると良いです。登録ボタンなど目立たせたい箇所には補色のオレンジ色を使いましょう。補色を使うことで、流し読みをしている閲覧者の目にも留まりやすくなります。色味を統一しつつ、部分に補色を使うことで閲覧者を誘導する流れを作りましょう。

まとめ

今回はランディングページについて、概要や制作のポイントをご紹介しました。狭義のランディングページは、一般的なホームページよりもチラシやセールスレターに近く、情報量が多いため縦長になりやすい特徴がありました。ランディングページを制作する際には、今回ご紹介したポイントを参考に、根拠に基づいたデザインを意識しましょう。ぜひランディングページを上手に活用して、効果的にCV向上を目指してみてください。

▼関連記事

・ランディングページのコーディングとは?役割やポイントを解説!
・ランディングページ(LP)の効果測定に便利!ヒートマップを分かりやすく解説 ・LP制作の【相場】を徹底解剖!ラインディングページの値段は幾らが妥当か?

▼クリエイティブ業界の求人情報

・クリエイター求人検索

-カテゴリーから記事を選ぶ-

はじめての方へ

アカウントを登録すると、求人情報やポートフォリオをお気に入り登録することができます。



Webディレクターの求人

MORE

おすすめの記事