CV達成に必要なLPOのデザインのコツをご紹介

ランディングページを改善するための要素はとにかく多く、絶対的な正しさが存在しないのがLPOの難しいところです。しかし、LPのデザインに関していえばほんの少し手を加えるだけでコンバージョン率が大きく伸びることもあります。

そこで今回は、LPのレイアウトにおけるノウハウをご紹介します！

おさらい！CVRの目安ってどんな感じ？

CVRが「達成している！」といえる目安は業界によってバラバラというところも難儀です。それでも先人たちのおかげである程度の数値は見えているので、ここでおさらいしておきましょう。

指名キーワード（会社のサービス名・プロダクト名）からの流入：10%
一般ワード（一般用語）における流入：1%
ECサイトで商品を購入する場合：2〜3%

「ファーストビュー」を改善してレイアウトを良くしよう

ファーストビューとは、ユーザーがランディングページにアクセスした際に最初に目に入る部分です。このファーストビューがLPの印象を大きく決定づけたりする、実はとても重要な部分といえます。まずはこのファーストビューから改善していきましょう！

何のLPか3秒で分かるようにする

LPでは、ファーストビューからの直帰率は、70%ともされています。それくらい、LPにとってファーストビューのレイアウトは死活問題なわけです。就活のとき、「人は第一印象が重要！」とさんざん言われなかったでしょうか？

これと同じことがLPにも当てはまります。Webマーケティング界隈では「ファーストビューを制する者はLPを制す」といわれているほど極めて重要な要素です。

シンプルですぐ実行できる改善策は、「何のLPかを3秒で分かるようにする」というもの。LPのキモは「わかりやすさ」です。

したがって、NGなレイアウトでいうと、

ごちゃごちゃしているもの
キャッチコピーが的外れ（広告の訴求ポイントと合っていない、曖昧すぎる）
カラーリングが不適切（見にくいものは敬遠されます）

といったものが該当しますね。

Fの法則を利用しよう

Fの法則をご存知でしょうか？Webサイトを閲覧するユーザーの視線は、左上から右上に流れ、少し下がって右に流れるという、視線の流れがアルファベットの「F」に似ていることから名づけられた法則です。

このFの法則に基づくと、左上には一番目立たせたいもの（ロゴやキービジュアル、キャッチコピーなど）を盛り込んで、その下に本文を設置するとユーザーの視野にすっと入るレイアウトになります。

一方でこの法則を無視してレイアウトを組むと、ユーザーにとって無意識的なノイズになり、直帰の原因ともなるので注意です。

余白をうまく活用しよう

Appleのウェブサイトが余白の好例といわれています。

https://www.apple.com/

商品を売りたい気持ちが強くなるほど商品のよさをあますところなく伝えたくなるものですが、ポイントは<strong>「売りたいなら、削れ」</strong>です。サイトを開いたとき、画面いっぱいに画像とテキストが表示されたら一瞬でお腹いっぱいにならないでしょうか？

ユーザーの求めていない「特盛り」がユーザーを直帰させる原因になるのです。商品やサービス、プロダクトによってもたらされるベネフィットを簡潔かつ端的に述べ、それを引き立たせるのが十分な余白です。

腹八分目くらいの分量がユーザーにとってはちょうどよかったりします。

ファーストビューの一番下にボタンを設置しよう

「ユーザー目線」で考えてみてください。せっかく買う気で飛んできたのに、長いLPをスクロールして購入ボタンを探さなければならないとなると、ちょっと面倒だなと思いませんか？

購買意欲が初めから高いユーザーにとって、縦長のLPを下までスクロールしてボタンを発見させることはストレスにつながります。最悪の場合、せっかく買おうとしている気持ちを削ぐことにもなりかねません。

ファーストビューでの直帰率が70%ということも考慮すると、ファーストビューからCVに至る層を取りこぼさないようにボタンを設置しておくことは不可欠ともいえるでしょう。

矢印や人の顔を利用しよう

人間とは単純なもので、矢印があるとその方向に注意が向きやすくなります。（道路標識のデザインは伊達じゃないということですね）ベタではありますが、このような感じです。

↓
↓
↓
↓
↓
[購入はこちら]

こうして矢印の向かう先にCVボタンを設置するとボタンが注目されやすくなります。また応用として、他者の視線の先にも注目が集まりやすかったりもします。一緒にご飯を食べている人が急に手を止めて壁の隅をじっと見つめたら、自分も注目すると思いませんか？

これは極端ですがそういうことです。注目させたいコンテンツに向けて人の顔を置くのも、滞在時間を高めたり、読んでもらいたいコンテンツを読んでもらうためには有効ですよ。

ボディはユーザーの納得感を高めるために存在します

ファーストビューが「心を鷲づかみにするインパクト勝負の部分」だとしたら、ボディ部分は、「なぜその商品がよいのかを納得させる『読ませる』部分」です。ターゲットとしたペルソナに共感しつつ、その商品を購入するメリットを伝えることになります。

ただしこちらも特盛りにならないよう、簡潔にまとめることを意識してください！PCで2行程度が望ましいです。

なお、どのくらい信頼性が高いのかを示すために数値データを示したり、「○○賞受賞！などの「紋章系」実績をあわせて入れておくことも有効です。またよくあるのが「お客様の声」「SNSの口コミ」の抜粋ですね。

ユーザーから怪しまれることなく、納得感を高めるストーリーの組み立てが重要になってきます。

クロージングではアクションボタンを目立たせよう

本当に効果があるの？と思われそうなほどシンプルな施策ですが、キャッチコピーやメインビジュアルの修正と同じくらい重要な要素のひとつです。

アクションボタンのデザインを変更する

これは、アクションボタンの大きさや色を変更したり、影をつけて立体感を出したりなどです。まず試したいのは、ボタンの横幅を広げてクリック（タップ）しやすくすることや、色を暖色にすることです。

これだけでCTRが向上する場合があり、CVR改善にも寄与します。（全体のトーンを気にするあまり、ボタンがサイトカラーに溶け込んでしまって目立たないということが、特にマーケティングを意識していない生粋のデザイナーのデザインには多くあるのです）

アクションボタンの文言を変更する

極端な例をあげると、LPの流れとして促したい行動が「商品を探す」であるにもかかわらず、「会員登録」になっているとユーザーは困惑してサイトを離れてしまいます。LPを量産しているとうっかり起こりやすいのであまりにCVRが低い場合はチェックしましょう。

また、「商品を購入」というアクションボタンの文言があったとして、これを言い切る形よりも「商品を購入する」の方がCVRが改善する傾向があります。更に追加すると「商品を購入してみる」といった口語体の方がより改善する場合もあります。

ただしこれは商材の特性にもよるので、いろいろと試してみるとよいでしょう。

アクションボタンの文言にサブ文言を追加する

こちらは意外と知られていないLPO施策です。例えば「商品を購入する」というアクションボタンの文言があったとして、これに加える補足の文言がサブ文言です。例えば「購入は1分で完了します」や「人気商品です」といった文言ですね。

これを施すことでアクションを後押しすることができるようになります。

希少性を高めて商品の購入意欲を促そう

ところで、心理学における「希少性の原理」をご存知でしょうか？人は、「今すぐ決断しなければ手に入らなくなってしまう物」に対して心を揺さぶられてしまいます。言葉にすると「今だけ限定●●個」や「特別セール終了まであと●●時間」というものですね。

みなさんも少なからず心当たりがあるのではないかと。こうして希少性を高めて「今すぐ買うべきメリット」を目立たせることで、購買意欲をぐんと高めることができるのです。ただしこうした煽りの演出は不信感を招くことにもつながりやすいので、「交換・返品無料」など、購入や購入後の不安を解消する案内をセットにすることで解消されます。

このフォローを忘れてしまう人が少なからずいるので、忘れずに加えてくださいね。

まとめ

今回はファーストビューのレイアウトやデザインに焦点を当てて、一手間でCVRを向上させるLPO施策をご紹介しました。ちなみに今回紹介した施策を行う際にはLPOツールによるA/Bテストを忘れず実施してくださいね！

LPOツールについては以下の記事で解説しています。

https://cxbottle.com/users/cxeditor01/CT6Gza9ytIuAS23ay1nD

LPOはシンプルながら奥の深い施策なので、ひとつずつ確実にマスターしていきましょう！