2015.01.29
Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法
あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。
ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。
事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！
そもそもコンバージョンボタンとは？
本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資料請求や問合せなど何かしらの「アクション」を起こしてもらうためのボタンです。別の言い方をするとコール・トゥ・アクション(CTA)といいます。
そしてコンバージョンボタンのデザインに工夫を施すことで、コンバージョン率(資料請求やお問い合わせの成約率)に影響します。もちろん、ボタンだけが要因ではなく、フォームの使いやすさなども大きな要因に当たります。
が、コンバージョンボタンに一工夫することで改善される可能性も非常に高いです。では具体的にどうすれば高いコンバージョン率を狙えるボタンが作れるのでしょうか？
ポイント1:目立たせる
コンバージョンボタンをデザインする上でまず最初に気をつけなければならないのが「目立たせること」です。例えばあなたがある企業の公式サイトを見ているとします。「おっ！この企業魅力的だな～資料請求してみよう」と思った時、「あれ？どこにボタンがあるんだ？」と資料請求ボタンがとても分かりづらかったらどうでしょうか？
あなたはそれをストレスに感じますし、最悪の場合資料請求しないままサイトから離脱してしまうかもしれません。つまりコンバージョンボタンは他の要素と「対比」させることで目立たせ、お客様に「資料請求ボタンはこれですよ～！」とはっきりと伝えることが重要です。その具体的な方法を１つずつ詳しく見ていきましょう！
色で対比する
１つ目は「他と明らかに違う色にする」ことです。あなたは上記画像のどのボタンに目が行きましたか？おそらく中央にある青色のボタンだと思います。つまり周りのボタンや要素と違う色にすることで、コンバージョンボタンを目立たせることが出来ます。
では実際には何色のボタンにすれば良いのでしょうか？はっきり言うと正解はありません。もし上記画像のグレーのボタンが全て青色だったら、コンバージョンボタンはオレンジにして対比させなければなりません。サイトのベースカラーや他の要素と対比できる色にしましょう。
ある検証では、ブラウザソフトであるFirefoxをリリースしているMozilla社によると「緑色のボタン」が一番コンバージョン率が高かったそうです。が、これが緑をベースにしているサイトでは目立ちませんよね。つまり正解はないのです。
サイズで対比する
２つ目は「他と明らかに違うサイズにする」ことです。あなたは大きいボタンと小さいボタンのどちらに目が行くと思いますか？おそらく大きいボタンだと思います。高さの高いビルと低いビル、パッと目が行くのは大きいビルですよね。
サイズを他の要素より大きくすることで目立たせることが出来ます。おしゃれに、クールにデザインしたいがために要素を小さめに作ることもありますが、デザインとは見た目だけでなく機能性にも優れなければなりません。おしゃれに小さくしたい所ですが、コンバージョンボタンは大きくしましょう！
ボタン感を出す
３つ目は「明らかにボタンと分かるデザインにする」ことです。あなたは上記画像のどちらのボタンが「押すことができそう」ですか？おそらく右側だと思います。立体感を出すことによってお客様が「これはクリック出来るものなんだ」と分かってもらうことが重要です。
しかしここ最近ではフラットデザインが増えてきているため、グラデーションによる加工がサイトのテイストに合わないこともあります。その場合には、矢印などのリンクマークを付けたり、下にだけくっきりした線を付けることで立体感が出ます。
また、マウスオーバー効果を付けることでボタンだと理解しやすいようにしましょう。マウスオーバー効果がないと「あれ？これボタンかな？」と若干違和感を感じますよね。それはユーザビリティの低下に繋がるのでぜひ気をつけたい所です。
ポイント2：メリットを伝える
続いては「クリックすることで起こるメリット」を伝えることが重要です。「目立たせるボタン」の作り方がお分かり頂けたと思いますが、目立つだけではお客様はクリックしてくれません。クリックしてもらうには「メリット」を明確にしなければなりません。その具体的な方法を１つずつ詳しく見ていきましょう！
クリック後のアクションを明確に
ボタン上の文言をラベリングといいます。このラベリングが人の心理に与える影響はとても大きいので慎重に検討しましょう。重要なのはボタンをクリックした先に何があるか明確に伝えることです。それはお客様の不安を取り除くだけでなく、コンバージョン率の改善にも繋がります。
あなたは上記画像の左側のボタンはクリックする気が起きますか？「絶対クリックしない！」とまではいきませんが、「請求」だけのラベリングは何か不安ですよね。それが果たして無料の資料請求なのか、明確でないからです。それに比べて右側のボタンは「クリックしたら資料請求が出来る」とはっきり分かりますよね。
そしてラベリングに関してもう１つ、それは「気軽にクリックできるラベリング」が重要です。事実「会員登録」より「体験してみる」や「参加してみる」という言葉に変えるだけでコンバージョン率が改善された例もあります。これが全て当てはまるわけではないのですが、ラベリングに関しては敷居の低く感じるものにしましょう。
容易であることを明確に
２つ目は「クリック後のアクションが容易であることを明確にする」ことです。あなたは上記画像のどちらのボタンのほうが「資料請求がすぐに終わりそう！」と思いますか？左側のボタンだと「どれくらい入力項目があるんだろう」や「時間かかるのかな？」と感じますよね。
そうです、お客様は常に「出来るだけ簡単に申し込みを完了したい」という心理があります。簡単に申し込みが完了することを伝えるためにも、その旨を記載することが望ましいですね。
そこで重要なのが、ただ「簡単入力！」ではなく「たった5分の簡単入力！」など具体的に時間を記載することで、より簡単に感じることができます。
メリットを伝える
最後は「今クリックすることでどんなメリットがあるか伝える」ことです。あなたは上記画像のどちらのボタンのほうが「お得！」と思いますか？おそらく右側のボタンだと思います。
上記画像のように「◯％OFF」と割安感を出すだけでなく「◯日まで限定」など限定感を出すことも可能です。そうすることでお客様にお得感を伝えることができ、コンバージョン率の向上にも繋がります。
下記の記事が非常に参考になりましたので、ぜひご参照ください。
▼記事リンク
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
ポイント3：A/Bテストを用いた上で検証
最後のポイントは「A/Bテストを用いた上で検証すること」です。上記2つのポイントにより「お客様の目を引きメリットが明確なボタン」をデザインすることが出来ました。このようにデザインするだけでコンバージョン率を大きく改善した例は数多くあります。
が、これだけではコンバージョン率の改善に至らないケースもあります。ではどうすれば改善することが出来るのでしょうか？それは、A/Bテストを用いて様々な検証をすることです。その具体的な方法を詳しく見ていきましょう！
お試しボタンを用意
1つ目は「お試しボタンを用意」することです。あなたは上記画像のどちらのボタンが「気軽に購入」出来ますか？おそらく右側だと思います。すぐに成約に結びつけるのではなく、まずは無料でお試ししてもらうことはお客様にとって敷居が低く感じるためです。
「え～…なんか有料版の成約率が下がりそう」と不安になる気持ちはよく分かります。これは検証してみないと分からないからです。この検証によってコンバージョン率が改善された事例はもちろん数多くあります。
まとめ
いかがでしたか？コンバージョンボタンは「目立たせること」と「メリットを明確に伝えること」の２つが重要だとお分かり頂けたと思います。コンバージョン率の高いボタンはこの２つを徹底しているといっても過言ではありません。
しかし重要なのは何度もA/Bテストなどの検証を行って、そのWebサイトに最適なボタンに作り上げていくことです。先にも記載した通り、これが正解！というボタンはありません。だからこそコンバージョンボタンの基本を理解した上で、少しずつ改善していくことが最終的に「コンバージョン率の高いボタン」に仕上げる必要があるのです。
少しずつ改善を重ねて、コンバージョン率を上げてお客様に喜んでもらいましょう！
