知っておけば億万長者の、クリックされるボタンの色

2014年12月04日 23:03

  • LINEで送る
知っておけば億万長者の、クリックされるボタンの色
(C)Firefox

デザインの歴史は才能や技術ではなく、悠久の時を経て、血のように師から弟子へと受け継がれていくもの。
このあたりがエンジニアと違う部分なのかもしれないですが・・・。
WEB の世界でいわれる「デザイン」にも、先輩方から受け継がれていく how to のようなものがあります。
時には、都市伝説とも言われる、そのありがたいお言葉。

その代表作といえば。

「ボタンは緑色にすると、たくさん押される」

誰もが、「は? 何言ってるんすか先輩? ソースは?」と反発し、コロッケ待ち状態になったことかと思います。
ちなみに僕は、コロッケにはソースをかけません。

全世界のデザイナーたちが、疑い反発してしまう理由はあります。
それは、WEB の世界とかどーだから知らんけど、デザインの世界にそのようなセオリーは無いからです。



そんな都市伝説。

じゃない。

「緑色のボタンはクリック率が高い」という噂には、実は情報ソースがあります。
その情報ソースとは、あの有名ブラウザ Firefox を 開発した Mozilla 。

Mozilla は 2009年に、Firefox の製品ダウンロードページで A/B テストを行い、何色のボタンが押されるやすいのか検証しました。
以下が、その検証結果を報告した有名なブログ記事。

■Firefox is Green | Blog of Metrics(公式)
http://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/

この記事に、全世界はどよめき、ある者はひれ伏し、ある者は鼻で笑いました。

そして、半信半疑でボタンをグリーンにしたかと思います。
ボタンの色を変えるぐらいでそんな簡単になるわけないじゃな・・・って、なってる!
みたいな、驚くべき結果を招くことにもなりました。

多くのサイトも追従するように検証実験を行い、時には違う結果が出た、と大騒ぎしたサイトも出てきたのですが、数か月後にはそのサイト自身も何故か緑色のボタンを採用している始末。いったい何があったんだ!?


というわけで。
世の中のダウンロードサイトのボタンの色は、みんな、緑色になっているのです。
グリーン・ボタン・ワールド。
クリック率、コンバージョン率を生命線とするサイトは、だから緑色という理由になっています。

嘘だと思ったら、思い出す限りのダウンロードを主とするサイトを調べてみてね。


ちなみに Firefox のボタンの配色センスは、僕はひどいと思う。
そして僕自身の検証結果では、確かに緑色の方がクリック率(コンバージョン率)がわずかに高かったです。

ただ、なんていうか・・・。
まぁ、いろいろありますよね。


この記事に興味を持った人におススメの記事

2011/12/29
宣言的知識、手続き的知識
あるページを見ていた時に「どこにどんな情報があるか分からない」あるいは「操作方法が分からない」という状況になったことはないでしょうか。これは、分からない人が悪いというヒューマンエラーでは無く、作った人間(デザイナー)が情報を整理できていないから、制作者が悪いと考えられます。初めて見たページ…

2013/11/26
分かりやすくするために使用した色が、かえって混乱を招く
水道の蛇口をひねる部分の、「青」が冷たい水、「赤」が熱湯。そんな色分けは非常に分かりやすく、初めて使う人にも安心。同じ効果を狙ってからか、よく「色分けすることで情報を分かりやすくする」的なやり方を目にすることがあるのですが、その色が持ってる情報自体がよく分からないことって多いですね。色…

2012/06/25
生きる力を、デザインする。
「OLIVE」というサイトがあります。被災地で困った際に役立つ智慧をまとめた、WIKI ページです。■OLIVEhttp://www.olive-for.us/OLIVEは被災者に役立つデザイン・アイデア・ノウハウを被災者の方と出来る限り早く共有するためのプロジェクトです。知っていれば助かったことを、知らないまま失われていく…



タグ :配色UI

同じカテゴリー(デザインの話)の記事
デザイン産業のいま
デザイン産業のいま(2021-01-10 23:47)


このブログの新着情報を配信中!

RSSリーダーに登録することで、新着情報だけを確認することができ便利です。
上のアイコンをクリックしてご登録ください。

見るだけでは飽き足らない、あなた。あなたも小言に参加してみませんか。コメントトラックバック、ご自由にどうぞ。


入力した内容は表示されます
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
過去記事
デザイン特集
グルメ特集
アクセスカウンタ
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 32人
QRコード
QRCODE
プロフィール
yasukawa
yasukawa
浜松在住クリエイター&デザイナーが仕事のことについて頑張って書いてみる。
【認知心理学、コミュニケーションデザイン、情報デザイン、UI/UX、インフォメーションアーキテクト、サイネージ(Scala)、3Dモデリング、データベースアプリ構築(FlileMaker)、Flash Script 2.0&3.0、サーバ構築(Linux)、IoTセンサー&電子工作(Arduino)
文部科学省後援情報検定 情報デザイン試験合格
日本商工会議所販売士検定試験2級合格
日本英語検定協会実用英語検定試験3級合格
デザインカレッジ 外部講師(WEBマーケティング)
日本最大級レビューメディア「zigsow」2021年ベストレビュワー、2022年ベストレビュー