デジタルマーケティング専門家/デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

【勝負あり】クリック率が高いボタンリンクの色・大きさ・形・アニメーション

 
クリック率の高いボタン
この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

ども! ブログマーケッターのジュンイチです。(Junichi_Santa

先日、こんな記事でボタン型リンクのクリック率の検証をしました。
【実験】直感を信じろ! どのボタンが一番押したくなるか! 実験ゲーム!

 

あなたはどんなボタンが一番クリックされやすいと思いましたか?

  • どんな色のボタンがクリックされやすいか?
  • どんな大きさがいいのか?
  • アニメーションはあったほうがいいのか?

そして、いよいよその結果が集計できました! 今回はその結果を発表したいと思います!
ヤッターーーーーーァァア!!

はい、あなたの予想は当たっているか、確かめてみてください。

 

【前提】どれだけの母数が集まったか? サンプリング数は約2,000!

とてもありがたいことに、このブログ、メルマガ、LINE@で検証のお手伝いを呼びかけたところ、1,200以上の方が協力してくださいました。

さらに、Crowd Works(クラウドワークス)でも同様に600件のアンケートを取らせてもらいました。

合計約2,000のサンプリングの数としては十分かなと思っています。

ただし、僕のブログを読んでくださっている方や、クラウドワークスを使っている方って、ある程度ネットリテラシーが高い人ネットに慣れている人だと思っています。

その前提で結果を見てもらえたらと思います。

 

補足データ:クラウドワークスでの回答者の性別と年代

Googleアナリティクスでは、うまく性別と年代のデータが集まらなかったので、クラウドワークスでは念のために性別と年代も含めて回答してもらいました。

性別

回答者としては、やや女性が多めです。

性別人数割合
男性18430.7%
女性41669.3%
ボタンリンク集計1

 

年代

以下が回答者の年代です。インターネットユーザーの多さにも比例したような結果になっています。20代~40代の方だけで80%以上です。

年代人数割合
~20歳172.8%
20代14724.5%
30代21535.8%
40代16327.2%
50代518.5%
60歳~71.2%
ボタンリンク集計2

 

と、クラウドワークスでの回答だけですが、参考にしてもらえたらと思います。

では!! お待たせしました。以下から、実験の結果です。

 

ケース1)「ボタンとして分かりやすい」のはどれ?

「ボタンとして一番認識しやすいのはどれ?」という意図で検証させてもらいました。

A
B
C
D
E
F
G
H

 

ケース1の結果

ケース1Crowd WorksCW割合GAGA割合
A28347.2%60340.3%
B21736.2%57238.2%
C518.5%19913.3%
D183.0%271.8%
E172.8%453.0%
F81.3%231.5%
G40.7%100.7%
H20.3%171.1%

 

結果考察

一番は意外とシンプルな、動きのないボタンでした。

一番ダメなのは、クラウドワークスと、それ以外の方で少し票は割れましたが、動きの激しいGや、Hはボタンとしては認識しにくいっていうのがわかります。

ボタンとしては、アニメーションなどがなくても、普通のボタン型で十分認識出来るっていうことがわかります。

ただすみません。もしかすると、ちょっと出題の意図が分かりづらかったかもしれません。
反省点としては、ボタンの上に「ボタン」と書いてしまったので別のテキストにすればよかったなぁと・・・。

 

ケース2)どのボタンが1番「安心してクリック」できますか?

ケース1と同じボタンで、今度は「安心感」を実験させてもらいました。

A
B
C
D
E
F
G
H

 

ケース2の結果

ケース2Crowd WorksCW割合GAGA割合
A41168.5%97669.1%
B10717.8%25017.7%
C508.3%1248.8%
D132.2%130.9%
E71.2%161.1%
F71.2%120.8%
G40.7%80.6%
H10.2%130.9%

 

結果考察

安心感という意味で見てみても、何もアニメーションがないAのボタンが一番でした。

アニメーションを試してみた経緯として、実は色んな所で今アニメーションボタンが使われていて、アニメーションボタンを使うことで成約率が上がるって聞いていたからなんですよね。
実際、以下のような感じのアニメーションボタンを使われている方がいらっしゃって、そういう方たちは、色々実験した結果、成約率が高かったからこのボタンに落ち着いたっていうことです。

 

そういう意味では、このアンケートの結果としてはAの動きが無いボタンが一番安心するっていうことなんですが、実際使ってみるとなるとアニメーションは有効なのかもしれません。
これは、ぜひあなたもテストしてもらえたらと思います。

 

 

ケース3)どの大きさのボタンが1番「目立つ」と思いますか?

次は大きさです。言わずもがな、一番大きいものが目立つよね、って思っていたのですが…

A
B
C
D

 

ケース3の結果

意外にも、クラウドワークスだと、Cが一番でした。その他の方は、Dが一番です。
うーむ、この結果をどう受け取ろうかという感じです。

ケース3Crowd WorksCW割合GAGA割合
A579.5%876.3%
B12821.3%21015.1%
C23038.3%44131.8%
D18530.8%65046.8%

 

結果考察

大きさが大きい=目立つ、という傾向はあるものの、デカければいいというわけではないかもしれない、という感じです。

ただ言えることは、ある程度の大きさはやはり必要だなということ。

 

 

ケース4)どの色のボタンが1番「安心して押せる」と思いますか?

次はちょっと面白いです。「色」の違いです。

A
B
C
D

補足としては、

  • A:Amazonのボタンの色
  • B:楽天市場のボタンの色
  • C:安心の緑(クリック率が高いと言われています)
  • D:あえて黒

という感じで設定しました。

 

ケース4の結果

ケース4Crowd WorksCW割合GAGA割合
A28848.0%55940.5%
B9816.3%1329.6%
C19131.8%66047.8%
D233.8%302.2%

困りました。実はこれもクラウドワークスと、それ以外の方で割れました。アマゾンのオレンジVS緑です。

クラウドワークスの方は、Amazon。それ以外の僕のブログの読者の方は緑。

全ての人数を合計すると、以下のような結果になり、ほんまに僅差きんさCの緑でした!

ケース4合算合算での割合
A84742.8%
B23011.6%
C85143.0%
D532.7%

 

結果考察

結果としては、緑とオレンジが効果的だということがわかりました。

ただし、この色については、実は一概にこれが正解とは言えません。サイトのデザインによるからです。

全体的にオレンジっぽいサイトカラーの中で、オレンジの色は目立ちにくいし、同様にサイト全体が緑っぽいのにボタンも緑だと目立ちません。

 

 

ケース5)申込みをしようかな?と思った時に「1番押したくなる」ボタンはどれですか?

次は文言のテストです。

A
B
C
D

これも微妙な違いでテストしてみました。

 

 

ケース5の結果

ケース5Crowd WorksCW割合GAGA割合
A11619.3%906.6%
B31853.0%81860.4%
C7913.2%13810.2%
D8714.5%30922.8%

 

結果考察

ボタン上の文言でどこまで変わるのかな? というテストなんですが、意外にもかなり差が出ました。

これを考えると、ボタンの文字はかなりテストしがいがあるぞ!! ということが言えます。

ボタンの文言1つでここまで反応が変わるのなら、絶対色々試したほうがいいですね。

 

 

ケース番外編)あなたがWEBサイト運営者側だとすると、どのボタンが一番好きですか?

最後は、視点をユーザー側ではなくサイト運営者側になって考えてもらいました。

A
B
C
D

 

ケース番外編の結果

ケース6Crowd WorksCW割合GAGA割合
A25542.5%43634.1%
B8113.5%604.7%
C15025.0%22817.9%
D11419.0%55343.3%

これもクラウドワークスの方と、それ以外の方で割れました。

 

結果考察

僕の読者さんはブログやHPを運営している方が多いので、違いもあるかもしれません。

それを加味しても、サイト運営者としてもあまりアニメーションがあるボタンは嫌なんだなぁと。

 

 

総合的に見て分かるクリック率の高いボタンの4つの傾向とは?

あくまでも今回の結果から言えることは以下の4つポイントです。

  1. ボタンリンクとしては、アニメーションは重要ではない
  2. 大きめのボタンの方が目立つ
  3. 色はAmazonオレンジor緑が好まれる
  4. 「申し込みはこちら」が効果が高い

 

この結果を踏まえて1番効果的なボタンはコレだ!!

 

逆に1番やっちゃダメなボタンはコレだ!!

 

ただこの結果が全てじゃないので盲信もうしんはしないで!

ただ、あくまでも今回の結果は傾向です。

WEBに100%の正解はありません。

  • あなたが運営しているサイトの内容やデザイン
  • ユーザーの年代や性別
  • ユーザーがネットに慣れているかどうか

などなど、いろんな要素によって結果が変わってきます。

 

だって考えてみてください。

ネット通販最大手のAmazonがオレンジを使っているなら、楽天もオレンジにしたら良いですよね。でも赤色ボタンを使っているということは、楽天としては赤色のほうが効果が高いからだと思うんですよね。

 

A/Bテストを繰り返して、検証と改善を繰り返していくことが大事

ということで、本当に大事なことはしっかりとあなたのサイトでテストをしていくことです。

A/Bテストっていうんですが、AパターンとBパターン違うページを用意して、ボタンの大きさや色や文言を変えて、効果が高い方をしっかりと検証していく事が大事です。

これを1回で終わらせずに、どんどん別のパターンで試していく。

コレを繰り返していき、どんどん効果が高いものにしていきましょう!

 

 

まとめ

ということで、実験から結果まで楽しんでいただけましたでしょうか!?

効果的なボタンリンクの傾向としては、4つのポイント。

  1. ボタンリンクとしては、アニメーションは重要ではない
  2. 大きめのボタンの方が目立つ
  3. 色はAmazonオレンジor緑が好まれる
  4. 「申し込みはこちら」が効果が高い

ただし、文字の文言1つでかなり効果が変わる。ということも分かりました。

 

この結果が全てではないので、あなたも色々遊ぶつもりで試してみてください。きっと面白いですよ!

あなたも色んなボタンリンクなどを試して、少しでも効果の高いWEBサイトにしていきましょう。

 

 

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

ebook

この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら