どうやら今もランディングページのエントリーボタンは緑色が良いらしい

エントリーボタンの色問題

もう5年ほど前の話ですが、

Firefoxのダウンロード数を測定したエントリーボタンの配色テスト

比較グラフこのような結果が公開されました。

ランディングページ内に「フリーダウンロードはこちら!」

のボタンを配置して

  • ダウンロードページへ誘導できる率
  • その後ダウンロードする率

を計測したものです。

この調査結果報告によると

ランディングページからのDLページでのDL数で

:930,752

:256,344

:255,894

:255,822

という誘導結果になっています。

ランディングページへのアクセス数(母数)が公開されていないので比率については具体的なことは言えませんが、計測期間中の母数(LPへのアクセス数)がほぼ同等で推移していたとすればボタンの色が違うだけで緑ボタンは他の色の3倍強のDL誘導を果たしたことになります。

現在のFirefox(日本語)も緑ボタンでダウンロード

Firefoxではその後も継続的にテストしていることでしょう。

Firefox5年ほど立った2014年の今、

Firefoxのダウンロードページ(日本語)は緑色のボタンを配置しています。

Mac、PC、Linux 向け新高速ブラウザー | Firefox
応答性の高いエンジン、省メモリー、豊富な機能。デスクトップ版を今すぐダウンロード。

ボタンを緑から赤に変えたらコンバージョン上がった事例

LP事例

How We Improved Our Conversion Rate by 72% | DMix.ca
One of my favourite parts of creating web apps is being able to make subtle changes to our sales pages and see the impact it has on our signups.

英語のサイトですが、

3年ほど前の記事でエントリーボタンを緑から赤へ変更してコンバージョンが上がったという記事があります。

しかし、現在

そのパフォーマンス対象のサイトを見ると、、

このランディングページ下部にあるエントリーボタンは

LPテスト

https://carelogger.com/

現在は緑のエントリーボタンになってます。

少しわかりにくいので拡大した部分を

2014-03-26_20-07-51

ボタンが緑だから良い=間違い

こういう事例を見ると、5年経った今もやはり

エントリーボタンは緑がデフォルトっしょ!

みたいな声が上がりそうです。

しかし、今は5年前とは違います

WEBデザインにおける配色の基礎

  • テキストの色
  • 背景のカラー
  • 配置する画像の色合い
  • エントリーボタンの色
  • 全体配置

大きく分けるとこういった部分(パーツや全体色)のバランスによってエントリーボタンの色を決定するというのがセオリーでしょう。

そう考えると、

今ある自分のサイトにいきなり緑色のボタンを配置するのは乱暴すぎますよね。

それと、

5年前と違ってスマホ閲覧も増えてます

閲覧する端末がパソコンからスマホへ多く遷移してるサイトもあることでしょう。

スマホでwebサイトを閲覧する場合、場所は屋外だったり室内だったり不特定です。

画面のサイズが違えば「テキストの黒」と「背景の白」によるページ全体の配色率も全く別物になってきます。

そのあたりを考慮しても緑がいい

そういう条件の変化がある5年後の今でも緑のエントリーボタンを使ってるサイトが日本でも多いように見受けます。実際に多くのサイトで緑ボタンを採用し続けてるという事実は

緑=コンバージョン良し=儲かってる

みたいな式が成り立っているのかもしれません。

緑といっても単に緑というわけではなく

明るい緑(明るい緑色)

濃い目の緑(濃い目の緑色)

など、画面の発色に合わせていろいろ調整されているようです。

さて、

ランディングページで最終的なコンバージョンへ繋げるエントリーボタン

その色は自分のサイトなら「どの緑」がいいんでしょうね。

配色バランスなんてわからない場合、とりあえず白背景に濃い目の緑でいいように思います。

ただ、

エントリーボタンがわかりにくいサイトも多いので

エントリーボタンは目立ってナンボ

なんじゃないかなとも思う今日このごろです