コンバージョン率アップ!LPコンバージョンエリアのデザイン

img_lp_conversion_01

この記事は約 3 分で読めます。


コンバージョン率が低いと落ち込んでしまいますよね・・・

何が悪いんだろう?

と考え込む方も多いのでは?

最後でユーザーにアクションを起こさせないと、いくらファーストビューや他が良くても意味がありません・・・

コンバージョンエリアの出来次第で変わるかもしれません!

コンバージョン率が上がるコンバージョンエリアのデザインをご説明していきましょう。

1.コンバージョンエリアとは

ランディングページの目的であるコンバージョン(商品購入、資料請求、お問い合わせがコンバージョンにあたります。)をユーザーに促す為に、必要な情報やボタンを配置したエリアの事です。

2.コンバージョンエリアの4つの構成

img_lp_conversion_02

  1. 枠や背景で境界線を明確にし、1つのまとまったエリアだとわかるようにする。
  2. ユーザーにアクションを起こさせるような、キャッチコピーやテキスト。
  3. 問い合わせ先(電話番号、メールアドレス)受付時間の情報。
  4. 資料請求、購入などのコンバージョンボタン。

3.カラー設定

コンバージョンエリアの色を設定していきましょう。
ランディングページの色彩設定は大きく分けると3つあります。

 

●メインカラー
ブランドを伝える色(全体の基調となる色)

●サブカラー
アクセントをつける色(メインカラーを引き立て、メリハリをつける色)

●コンバージョンエリアカラー
アクションを促す色(目を引く色)

コンバージョンエリア内でさらに2つの色分けがあります。

コンバージョンエリア全体の背景色と、コンバージョンボタンの色です。

 

コンバージョンエリアカラーを設定するには注意が必要です!
ただ目立つ色にすればいいわけではなく、全体のトーン&マナーを崩さないように設定しましょう。
コツは最後に決めること。

メインカラーとサブカラーと同系色は避け、印象的な色にすると良いでしょう。

一般的にコンバージョンボタンは赤か、緑が良いとされていますが、全体のカラーバランス、ブランドイメージの問題もありますので、一概には言えません。
しかし赤は購買意欲をかき立てる色ですし、緑は安心感を与えることが出来るのは確かです。

※色彩心理についてはこちらの記事をご参考にしてください。

ECサイト、LPのデザインに役立つ!色彩心理から学ぶ色の効果

4.デザイン

4-1.背景

img_lp_conversion_03

 

背景は色だけで存在感があるようでしたら、余計な装飾は必要ありません。
もし目立たないようであれば装飾をしてみましょう。

4-2.ボタン

img_lp_conversion_07
ボタンはボタンであることが明確にわからなければなりません。
ボタンがクリック出来るものなのか分からないと、ユーザーが気づかない可能性があります。
グラデーション、影を付けて立体的に見せ、ボタンであることを明確にしましょう。
しかし、近年ではフラットデザインが流行っています。全体のデザイン方針に沿って決めましょう。

5.コンバージョンエリアの例

5-1.商品の画像を取り入れた例

アテニア 「クリアオイルクレンズ」

img_lp_conversion_04

商品の画像を取り入れることによって、イメージが沸きやすくコンバージョンを得られやすくなる。

5-2.電話番号を併記した例

Azul

img_lp_conversion_05

直感的に分かるよう、視認性を重視したデザイン。

5-3.テキスト情報を中心とした例

ダイヤモンド企画

img_lp_conversion_06

テキストの大きさやカラー、フォントを変えて配置してデザインされています。

まとめ

コンバージョンエリアは、ユーザーのアクションを促す為の重要なエリアです。

最適な色選びとデザインで、コンバージョン率アップを目指しましょう!

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。