Webデザイナーは、デザインセンスやデザインスキルだけではなく、ユーザーの行動(消費者行動)を知っておく必要があります。
Webに来訪したユーザーの行動をあらかじめ理解しておくことで、コンバージョン率(資料請求や問合せなどの成約率)の高い、「結果の出る」ホームページを作ることができるからです。

それでは、どうすればコンバージョン率を高くすることができるのでしょうか。
今回は、ホームページに設置されている「問合せフォーム」や「申込フォーム」を例に、ユーザーの心理を理解したフォームの『ボタン』のポイントについてご紹介します。

高いコンバージョン率を誇るCTAボタンの作成方法

一般的に、「問合せフォーム」や「申込フォーム」に紐付くボタンのことを*「コンバージョンボタン」といい、ホームページを訪問したユーザーに資料請求や問合せなど、何らかのアクションを促すためのボタンです。そのため、「コール・トゥ・アクション(＝CTA)」や「CTAボタン」*とも呼ばれています。

コンバージョン率は、コンバージョンボタンを少し工夫するだけで大幅に改善される可能性を秘めています。コンバージョンボタンの文字やデザインはコンバージョン率に影響します。ボタンだけではなく、フォームの入力のしやすさ、入力項目の簡素さや煩雑さなども大きな要因となります。

では、コンバージョン率が高いボタンはどう作ればいいのでしょうか。3つの観点から探ってみます。

コンバーション率の高いボタンを作るポイントに迫る！

1. 他の要素よりも目立たせる

まず、コンバージョンボタンのデザインを行う上で気をつけなければならないのが*「目立たせる」*ということです。

例えば、あなたがランディングページを見て商品を買いたいと思っている時に、「あれ？どこにボタンがあるのだろう」と購入ボタンが見当たらなかったらどうでしょうか。ボタンが見つからなければ、購買につながらないどころかホームページを離脱してしまう可能性があります。

コンバージョンボタンを作る上で大切なのは、「購入ボタンはここですよ！」とはっきりとアピールさせることです。そのために、他の要素と「対比」して目立たせる必要があります。具体的には、以下の点に気をつけてデザインを行います。

A. 色

周りと同系色を用いると、ボタンが他の要素と同化してしまい、ボタンであると気づかないことがあります。
そのため、コンバージョンボタンを作成・設置する際は、他の周りの要素の補色となる色や、色相や明度・彩度が違う色を使用します。

また、扱っている商材などによっても、どの色を使えばいいかは、ある程度決まってきます。
一般的に、緑色を使うとコンバージョン率が高くなることが検証によってわかっていますが、セミナーやビジネス商材では「オレンジ」、キャッチコピーのフックの強いものは「赤」、高価な商品は「黒」がいいと言われています。

B. 大きさ

周りと同じサイズだと、ボタンだと気付きにくくなります。
小さいよりも、大きい方が目立って見えます。

C. 形

周りが四角で囲まれているデザインなら、縁を丸くしてみたり、傾斜をつけたりすることで目立たせることができます。

D. 余白

ボタンの周りにマージンを設けることで、コンテンツのまとまりごとにメリハリをつけられボタンの認識度が高まります。
また、ボタンの中身自体にも十分なパディングを設けて、識字率を上げましょう。

E. 質感

周りの要素と違う質感を利用して目立たせていきましょう。
フラットデザインでは、ボタンであると認識するのに困ってしまうことがあるので、明らかにボタンだとわかるように立体的にしてみるのも一つの手段です。

F. フォント

周りが細字のフォントを利用しているのなら、コンバージョンボタンは太字にしたり、フォントに縁取りをしたりして、他と対比できるようにしましょう。

G. 変化

マウスオーバーでボタンだけが変化するようであれば、コンバージョンボタンだと認識されやすくなります。
色や大きさだけでなく、動きをつけてみるのもいいでしょう。

2. ボタンの情報を整理する

重要なのは、ユーザーにとってわかりやすく有益な情報を伝達することで、それが伝わらなければコンバージョンボタンは押されません。
資料請求や購入を考えている訪問者にとって、シンプルで有益な情報を伝えてあげると、後押しされた気持ちになり、次なるアクションへのきっかけとなります。

それでは、ボタンの中身はどんな情報をまとめればいいのでしょうか。

A. 何をするボタンなのか伝える

そのボタンが何をするボタンなのかがわからなければ、実際にホームページを訪問してきたユーザーは、ボタンを押すのをためらってしまいます。
例えば、「購入」とだけ書かれたボタンは、ボタンを押すことで一気に決済されてしまうのではないか、とボタンを押すことに心理的な障壁を感じてしまいます。

一方、「カートに入れる」と書かれていれば、そのボタンが押されただけでは決済されない、という安心感が生まれます。

B. ベネフィットを伝える

「30％OFF」や「送料無料」など、ユーザーにベネフィットを与える記述は、ボタンを押す後押しになります。さらに、「本日限定」「○日まで」と限定感を出すことで、「今ここでボタンを押す理由」が明確になり、コンバージョン率を上げることになります。

C. 簡単であることを伝える

ボタンを押した後のアクションが容易であることを伝えると、コンバージョン率は高くなります。
例えば、「資料請求はコチラ！」というボタンよりも「たったの3分で簡単入力！無料で資料請求」と書かれていたほうが、あらかじめ入力項目の多さや必要な時間を把握するすることができるのでストレスや不安を抱かずにアクションにうつせるので、結果的にコンバージョン率の向上につながります。

3. 検証を繰り返す

最初のポイントで、扱う商材ごとに有効な色をご紹介しました。しかし、これが全てのホームページに当てはまるわけではありません。重要なのは、仮説と検証です。一般的に緑のボタンがコンバージョン率が高いと言われていますが、あるECサイトでは紫を使用したことでコンバージョン率が上がったという事例もあります。

最近では、A/Bテストといって、AパターンとBパターンのどちらのほうがコンバージョン率が高くなるのか、というのを測定するツールもあります。正しい検証のためには、コンバージョン率だけではなく、全体的なコンバージョン数やクリック数・クリック率にも着目する必要があるでしょう。様々な要素を検証して、ベストなボタンデザインを探ってみてください。