良い構成のCVエリアのアイデアをいろいろと考察してみる




スマホデバイスで閲覧しているとたまにトライアル商品以外もセットにしてCVエリアを構成しているランディングページ(LP)があります。その中でも気になったのが横並びにCVボタンを置いた構成をです。

今回はこの構成を元に記事をまとめたいと思います。

気になった構成はこのような感じのものです。

ワイヤーフレームだけなので、配置が認識しにくいかもですが、左右にCTAを分けて整頓されています。
見やすくて効率も良いですね。

【関連記事】
CVエリアデザインについて別記事も書きました。
ランディングページ(LP)の「売り場」! 訴求内容がまとまったCVエリアデザインについて

それぞれに同じおまけを付けたい時は、その下に統一した説明を入れればスッキリした構成も維持できる。

こんな感じ。

イメージすると収納上手な人って感じかな。無駄が無い。

だけど、私はこの構成でCVエリアをデザイン提案しません。

つぶしが効かない構成

収納がバシッと決まれば見ているだけでたしかに美しいし構成もきっと説明しやすいと思う。けど、課題も多い。

課題

・あと一つCVエリアを加えたい場合は?

横並びにすると、CVエリアだけ窮屈になる

・おまけを別々にする場合は

収納感はあるが、窮屈感が残る

・2重価格や訴求キーワード等追加構成の場合は?

窮屈なうえに縦長くなる

・F3層向けに文字級数をアップする場合は?

窮屈なうえに縦長くなる

といった感じで、この構成ではつぶしが効かないのです。

分かりやすくするには大きく変えなくても良い
CVエリア一つ一つを幅いっぱいとった構成のほうが詰め込む内容に余裕がでるし見せやすい。縦長になるデメリットがあるけど、CVエリアの見出しを工夫すれば縦長の意味もだせる。

こんな感じ。

そもそも、4つくらい上げた問題点も特に気にならず対応できる。

CVエリアはスマートに収納よく構成しなくても売り方がよければそれでいいと思ってます。

CVボタンデザインって案外時間がかかる!だからまとめファイルを作成しよう

2017.12.03

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27
今回の記事に関連するデザインノウハウをまとめました。こちらも確認してみてください。

この記事はここまで!

ここからはよく読まれる記事をまとめてご紹介します。
ひとあじ違うデザインノウハウに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

【男性編】薄毛・育毛・増毛商材向けランディングページ(LP)デザインについてまとめてみた

2018.08.05

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

電通グループが開発したAIのバナー自動生成ツールADVANCED CREATIVE MAKER β版のプレスで感じた事

2018.05.20

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法

2018.04.01

いつのまにか「Font Awesome」が新しくなってたので調べてみた

2018.03.11

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14


お気に入りの情報
が無かったでしょうか?
この記事の最後には、今までのデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google