CVRの前にCTRを上げるボタンデザインについて考えてみた結果
私は商業Webデザイナーなので、当たり前の事ですが、
自分のデザインしたいものを作るのではなく、商業ベースでデザインを考えられる人でなければなりません。
分かってはいても、では、CVRするデザインとはどんなものかという知識が無かった事もあり、雰囲気はそれっぽいデザイン、自分が好きなデザイン、もしくは自分が好きな系統のデザインに寄りがちだったので、
「CVRするデザイン」とか何なのか、知識を深めていこうと思います。
そんな中、これも当たり前ですが、CVRするには、まずその一歩手前でユーザーに「ボタンをクリックする」というアクションを起こしてもらわなければいけません。
CVRの前にCTRを向上させる事も重要なわけです。
構成とかライティングとかそもそものデザインとか、大事な部分は他にも沢山ありますが、それは一旦置いておいて、CTR向上の為の「ボタンデザイン」だけで言うとという意味で。
「CVRするデザイン」には色々な要素要因がある中で、今回は、
クリックされやすい・クリックしたくなる、
「CTRを上げるボタンデザイン」に目的を絞って調べました。
そこで行き着いた「CTRを上げるボタンデザイン」の結論を先に言うと、
「動きがあって日常で使う言葉を使用した大きい緑のボタン」である事です。
①まず、動きのあるボタン
これはgifアニメーションで動かしているものですが、gifアニメーションはどうしても画質の粗さが気になります。
また、Flashで常に動かしているボタンはLP上でよく見かけますが、
今はCSSで相当な動きが表現できるので、ホバー時に動きを出せばFlashを使用しなくてもかなり色々な動きをつけることができます。
ボタン＝押すという認識の中、震えるなどの自分が予想していない動きをしたら、
少なくとも興味を示してしまうものではないでしょうか。
②次に日常で使う言葉を使用したボタン
[1.ユーザにとってわかりやすい表現にする]
確かにユーザーは発注じゃなくて注文している感覚だし、営業所より店舗を知りたいはず。
お問い合わせはご相談じゃなくても分かりやすいと思うけど…
③次に大きいボタン
[フィッツの法則]
Fitts's law - Wikipedia, the free encyclopedia
簡単に言うとユーザーの目的に対して、移動距離とサイズを考えること。
近いと大きな目標、速いアクションに繋がる為、大きいボタンであれば必然的に移動距離は短くなる。
もちろん、大きければ良いというものではないと思いますが、大きければ単純に「目立つ」という効果も付随されます。
あと似たところだとVisual Weightという考え方。
比べると一目瞭然、確かに…。
④最後に、緑のボタン
昔から言われているけどなんだかんだでまだ効果は期待できるようです。
積極的な気持ちになりやすい赤などの暖色系の色を使用する事が多かったですが、それよりも安心や信頼のある色の方が良いみたいです。
ボタンで物を購入する判断をしているのかと言われれば違うと思います。
でも、ボタンが求めている導線上にあって、ボタンだと分かる事、
ユーザーが何も考えずにスムーズに動けるかどうかで「ここで今買う(申込む)」かどうかが決まる場合もあるのだと思います。
まずは、
今期作成するLPの中や、既存サイトの改善で積極的に取り入れ、実践してみたいと思います。
