アフィリエイトのボタン周りは強い色ほど小さく使い弱い色ほど大きく使う

2018年5月12日ライフハック

皆さんどうもCSS！やっぱりボタンの色は緑が一番いいなと思った@xi10jun1です。

最近、運営しているアフィサイトのボタン周りの色を、ちょこちょこ変えて様子見しています。

で、そんなことをしているうちにあることに気が付いたので、メモ的に残しておこうかなと思います。

強い色ほど小さく使い弱い色ほど大きく使う

ボタンの色を最初は緑にしていました。

その後『目立つ色にしたほうが注目されやすいかも』と思って、一時期赤色に変えてみたんです。

が、見事にクリック率が下がりました！もうデータ取るまでも無いくらいクリック率がドカッと下げまして、当然成果も出ないので速攻でやめました。

このときに気が付いたのが、見出しの『強い色ほど小さく使い弱い色ほど大きく使う』です。

強い色、つまり赤ですね。

そして弱い色、つまり緑というわけです。

よくよく考えれば当たり前の話で、サイトの背景色って基本は白、灰色、良くて淡い黄色みたいな弱い色が使われていることが多いよなぁ。

たまにサイトの雰囲気に合わせて黒とか青系統の色にしているサイトがありますが、あれ目がチカチカして見にくいんですよね。昔のホームページなんかだと、個性を出そうとしてああなっていたわけですが・・・。

一方で、強い色である赤とか青なんかは範囲を抑えて、小さくピンポイントに使うものですね。

だからこそ大事なところを赤色にしたり、リンクの色が青色なんだなって、いまさらながら気が付いた次第です。

まとめ：弱いものほど大きく使い、強いものほど小さく使う

祖父と将棋を指していたときに『大駒(飛車、角)は小さく使うもんだ』と教わった記憶がありますが、あれはこういうことだったんだなぁと、今になって気が付きました。

今もボタンの周りの色を変えたりしていますが、やはりボタンは緑色が安定です。見た目の安心感があるのと、強すぎず弱すぎないちょうどいい色なのかもしれません、緑って。

あとは赤色の使いどころだな。