コンバージョン率が低いと落ち込んでしまいますよね･･･
「何が悪いんだろう？」
と考え込む方も多いのでは？
最後でユーザーにアクションを起こさせないと、いくらファーストビューや他が良くても意味がありません･･･
コンバージョンエリアの出来次第で変わるかもしれません！
コンバージョン率が上がるコンバージョンエリアのデザインをご説明していきましょう。
1.コンバージョンエリアとは
ランディングページの目的であるコンバージョン（商品購入、資料請求、お問い合わせがコンバージョンにあたります。）をユーザーに促す為に、必要な情報やボタンを配置したエリアの事です。
2.コンバージョンエリアの4つの構成
- 枠や背景で境界線を明確にし、１つのまとまったエリアだとわかるようにする。
- ユーザーにアクションを起こさせるような、キャッチコピーやテキスト。
- 問い合わせ先（電話番号、メールアドレス）受付時間の情報。
- 資料請求、購入などのコンバージョンボタン。
3.カラー設定
コンバージョンエリアの色を設定していきましょう。
ランディングページの色彩設定は大きく分けると3つあります。
●メインカラー
ブランドを伝える色（全体の基調となる色）
●サブカラー
アクセントをつける色（メインカラーを引き立て、メリハリをつける色）
●コンバージョンエリアカラー
アクションを促す色（目を引く色）
コンバージョンエリア内でさらに２つの色分けがあります。
コンバージョンエリア全体の背景色と、コンバージョンボタンの色です。
コンバージョンエリアカラーを設定するには注意が必要です！
ただ目立つ色にすればいいわけではなく、全体のトーン＆マナーを崩さないように設定しましょう。
コツは最後に決めること。
メインカラーとサブカラーと同系色は避け、印象的な色にすると良いでしょう。
一般的にコンバージョンボタンは赤か、緑が良いとされていますが、全体のカラーバランス、ブランドイメージの問題もありますので、一概には言えません。
しかし赤は購買意欲をかき立てる色ですし、緑は安心感を与えることが出来るのは確かです。
※色彩心理についてはこちらの記事をご参考にしてください。
4.デザイン
4-1.背景
背景は色だけで存在感があるようでしたら、余計な装飾は必要ありません。
もし目立たないようであれば装飾をしてみましょう。
4-2.ボタン
ボタンはボタンであることが明確にわからなければなりません。
ボタンがクリック出来るものなのか分からないと、ユーザーが気づかない可能性があります。
グラデーション、影を付けて立体的に見せ、ボタンであることを明確にしましょう。
しかし、近年ではフラットデザインが流行っています。全体のデザイン方針に沿って決めましょう。
5.コンバージョンエリアの例
5-1.商品の画像を取り入れた例
アテニア 「クリアオイルクレンズ」
商品の画像を取り入れることによって、イメージが沸きやすくコンバージョンを得られやすくなる。
5-2.電話番号を併記した例
Azul
直感的に分かるよう、視認性を重視したデザイン。
5-3.テキスト情報を中心とした例
ダイヤモンド企画
テキストの大きさやカラー、フォントを変えて配置してデザインされています。
まとめ
コンバージョンエリアは、ユーザーのアクションを促す為の重要なエリアです。
最適な色選びとデザインで、コンバージョン率アップを目指しましょう！
当社のWEBマーケティングメールマガジンにご登録いただきますと、下記の５つのPDFを無料でプレゼント！
平日 10:00～18:00
（セールス目的のお電話はご遠慮ください。）