コンバージョン(CV)ボタンをCSSで装飾・アニメーションさせる方法を紹介！（アフィリエイトリンクをボタンに）

家で仕事していると、「子どもの面倒みれるでしょう！？」とか「仕事は夕飯前までね」と妻から言われがち〜！毎日通う仕事場はあったほうがいいですね。

子どもは好きだけど、もっとお仕事もしたい、とみっち（web制作のアカウント）です。

コンバージョンボタンをCSSで作ってみようとしている人に、今回の記事が少しでも役立てば嬉しいです。

ボタンの変更履歴

はじめに

僕はアフィリエイト再出発組です。2016年12月から再度アフィリエイトに注力し、収益を伸ばすために、記事の追加とA/Bテスト等をあれこれ繰り返しながら試行錯誤しています。

一応はプログラマー、そして以前はSEO会社に勤務していた経験があるので、アフィリエイトは論理的に攻略していきたいタイプです。

さて、僕が運営するブログでクリック数を計測してきた限り、コンバージョンボタンをCSSで装飾したりアニメーションさせたことが、クリック率（CTR）を高めたという実感があります。

以前はこんな感じのテキストリンクを多用していました。
 

アフィサイトでよく見るやつだっ！

今でも時々テキストリンクも使っているんですが、CSSで装飾したコンバージョンボタンを使うことが多くなっています。

そもそも、ボタンだと認識してもらえなかったり、目立たないことでクリックされる機会を逃してしまうとしたら、ものすごくもったいないですよね。

今回の記事では、コンバージョンボタンの作り方を、HTMLやCSSのソースとともに紹介してみます！

コンバージョンボタンの基本的な考え方

僕はコンバージョンボタンを設置するにあたり、あれこれ調べて以下を重要視しています。

読者にリンクだと伝わること

「読者にリンクだと伝わること」は最重要です。

一般のユーザー（読者や購入者）は、ボタンリンクやテキストリンクを、Webに詳しい人ほどリンクであると認識していないことが実は意外と多くあります。

特に重要なリンクほど、どこがリンクであるかをきちんと伝える必要があります。

「そんなの当たり前だろ」と言う人ほど見落としている可能性があります。2、3ヶ月前の僕ですね。

ここ数年流行ってきたフラットデザイン（リキッドデザイン含む）のボタンでは、読者にボタンとして認識されていないかもしれないと、常に疑って改善してみましょう。

以下はフラットデザインのボタンで、一見綺麗に見えるものの、アフィリエイトサイトで使用するには物足りないと考えられるボタンデザインの例です。

CVボタンとして物足りない例

これまで僕がWebサイトを作る時は、綺麗でオシャレっぽく見えるボタンをなんとなく好んで使っていました。

※ここで紹介するボタンは画像キャプチャなので、マウスオーバーはしません。

こんなのや、

ちょっと立体的にしたこんなボタン

最近はこういったデザインのボタンをよく見かけますよね。
 

今回、僕が書いたこの記事を見つけて読んでいる人は、ITリテラシーが高く、これらをボタンだと認識することができるでしょう。

しかし、問題はITリテラシーが高くない人達です。

アフィリエイトサイトではITリテラシーが高くない人が記事を読みにくる可能性も高く、また、そういった人達が主な申込者層となることが多いのです。

実際、普段スマホでしかWebサイトを見ないような友人達に、先ほどのボタンを設置したサイトをPC、スマホ両方で見てもらったところ、以下のような反応がありました。
 

え！？ これボタンなの？ 見出しかと思ったよ

どこがクリックできるのかイマイチ分からないな

パッと見て販売ページへの飛び方が分からないと別のサイトを探しちゃうよねぇ

見出しに見えるというのは衝撃でした...。

これまでの僕は、四角いボタンと見出しの区別がつかない人のことを、まったく考えていませんでした。

スマホで表示されるボタンのデザインを見てみましょう。

なるほど確かに、ボタンの横幅が広がると見出しに見えてこなくもない。
事実、スマホ画面のヒートマップを見ると、見出しがよくタップされています。

スマホはともかく、PCで見ても見出しに見えると言われ、

見出しとボタンはそもそも長さが違うよね？

と反論したんですが、見出しに見えるようです。

これが、Webサイトを作る上での鉄則なのかもしれません。

普段Webサイトをあまり見ない人は、我々Web制作者が想像する以上にサイト内のリンク、アイコン、装飾などの意味を理解できていないと疑うべきでしょう。

Webサイト（ブログ）はアートなどではなく、読者に情報を伝えるためのツールです。

分かりづらいデザインを読者に押し付けないようにしましょう。

ちなみに、当ブログもまだまだ改善点が山ほどあるので、偉そうなことを連呼するのは恥ずかしい...。

CVボタンの改善例

さて、先ほどのボタンですが、手っ取り早く簡単にリンクだと分かりやすくするためには、以下のようにすると理解できるとのことでした。

テキストの後に「>」や「→」といった記号をつける。

さらにテキストに下線が付いているとリンクだと、認識しやすくなるという意見でした。

※もちろん個人差はあるでしょうね。

僕の場合ですが、このようにボタンの中に下線付きのテキストを設置するのは、デザインの観点からどうしても好きになれないでいます。。

ボタンの中に下線があるのって、現実世界ではないよなぁと思ってしまうのですが、リンクとしての分かりやすさ重視ならこれもアリなのです。実際、大手企業のサイトのボタンでも見かけることがあります。

最近のフラットデザイン、リキッドデザインのボタンよりも、以前流行っていたグラデーションが強めにかかっていたり、光沢があるいかにもボタン！といったものが、クリックできると容易に分かるのだそう。

たしかに、ボタンらしいボタンの方が、クリックしたくなりませんか！？

「Web2.0」って懐かしいですが、あの頃のボタンのデザインがクリック率はいいのかもしれません。

ちなみにこのボタンは「Free Button Generator」というフリーサイトで作成してみました。

公式サイトや販売ページに移動すると理解できること

先ほどの「公式サイトはこちら >」のように、テキストと矢印「>」といった記号を併用する程度のわずかな工夫で、公式サイトや販売ページに移動するということを伝えやすくなります。

そもそも、

「公式サイト」ってなぁに？

という意見もあるようなので、どういった文言でリンクをするのがクリック率が高まるかも色々と調査中です。

それでは、CSSでコンバージョンボタンを作る方法を紹介していきます。

【ボタン紹介】CSSで装飾したコンバージョンボタン

以下で紹介するHTMLとCSSをコピペすることで使えます。

ただし、WordPressのテーマや、WebサイトのCSS設定によって調整が必要になるので、修正する前提でご使用ください。

なお、サイト（ブログ）デザインや、取り扱う商品、読者層によって、クリック率がどうなるかは変わるはずです。

クリック率が高くならなくても責任は負い兼ねますのでご了承くださいね。

どんなボタンを採用するのか一定期間でA/Bテストをして改善していくのをオススメします。
色だけ変更してテスト、文言を様々に変えてテストしてみましょう。

設置方法

設置方法と設置した見本を紹介していきます。まず最初に、ボタンを設置するサイトやブログのCSS（スタイルシート）に、以下のソースをコピペしてください。

記述がめちゃめちゃ長いので折りたたんでいます。「+ソースを開く」ボタンを優しく押してくださいね。

CSS

/* 
 * コンバージョンボタン
 */
.btn-cv {
  padding: .5em 0;
  overflow: hidden;
  position: relative;
}
.btn-cv a {
  border: solid #fff 3px;
  border-radius: 12px;
  box-shadow: 1px 1px 10px 0 #a1a1a1;
  color: #fff;
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.3;
  margin: 2em auto;
  padding: 1em 2em .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  vertical-align: middle;
  width: 59%;
}
.btn-cv.is-fz20 a {
  font-size: 20px;
}
.btn-cv a img {
  vertical-align: middle;
}
.btn-cv a:after {
  content: ' ' !important;
}

/* ボタン内のアイコン */
.btn-cv a:before {
  content: "\f138";
  font-family: "fontawesome";
  font-weight: normal;
  font-size: 1.1em;
  margin-top: -.6em;
  position: absolute;
  right: 15px;
  top: 50%;
}
.btn-cv a:hover {
  box-shadow: 1px 1px 2px 0 #a1a1a1;
  filter: alpha(opacity=70);
  opacity: .7;
}

/* 2つ連続で並べる場合の余白 */
.btn-cv + .btn-cv a {
  margin-top: 0;
}

/* 緑ボタン */
.btn-cv a {
  background: #00a23f;
  background: -webkit-linear-gradient(#00a23f, #39900a);
  background: linear-gradient(#00a23f, #39900a);
  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}

/* 赤ボタン */
.btn-cv.is-red a {
  background: #fb4e3e;
  background: -webkit-linear-gradient(#00a23f, #39900a);
  background: linear-gradient(#fb4e3e, #d64b26);
}

/* 青ボタン */
.btn-cv.is-blue a {
  background: #09c;
  background: -webkit-linear-gradient(#09c, #069);
  background: linear-gradient(#09c, #069);
}

/* 黒ボタン */
.btn-cv.is-black a {
  background: #666;
  background: -webkit-linear-gradient(#8a8a8a, #666);
  background: linear-gradient(#8a8a8a, #666);
}

/* ボタンの光沢 */
.is-reflection a {
  overflow: hidden;
}
.is-reflection a:after {
  -moz-animation: is-reflection 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: is-reflection 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: is-reflection 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: is-reflection 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: is-reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーションを遅延させる */
.is-reflection + .is-reflection a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* CVボタン矢印揺れ */
.is-trembling a:before {
  -webkit-animation-name:is-trembling;
  -webkit-animation-duration:.8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  -moz-animation-name:is-trembling;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
  0% {-webkit-transform:translate(-3px, 0);}
  100% {-webkit-transform:translate(0, 0);}
}

/* ボタンをバウンドさせる */
.is-bounce {
  animation: bounce 4s infinite;
  -moz-animation: bounce 4s infinite;
  -webkit-animation: bounce 4s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes bounce {
  0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
  5% {-webkit-transform: translateY(-6px);}
  12% {-webkit-transform: translateY(-4px);}
}
@keyframes bounce {
  20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
  32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}
/* アニメーションを遅延させる */
.is-bounce + .is-bounce {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

/* ぷるるるるん！ */
.is-purun {
  -webkit-animation: is-purun 5s infinite;
  -moz-animation: is-purun 5s infinite;
  animation: is-purun 5s infinite;
}
@-webkit-keyframes is-purun {
   0% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
   4% { -webkit-transform: scale(0.9, 0.9) translate(0%, 3%); }
   8% { -webkit-transform: scale(1.1, 0.8) translate(0%, 7%); }
  12% { -webkit-transform: scale(0.9, 0.9) translate(0%, -7%); }
  18% { -webkit-transform: scale(1.1, 0.9) translate(0%, 3%); }
  25% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes is-purun {
   0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
   4% { transform: scale(0.9, 0.9) translate(0%, 3%); }
   8% { transform: scale(1.1, 0.8) translate(0%, 7%); }
  12% { transform: scale(0.9, 0.9) translate(0%, -7%); }
  18% { transform: scale(1.1, 0.9) translate(0%, 3%); }
  25% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
/* アニメーションを遅延させる */
.is-purun + .is-purun {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}




/**
 * ===============================================
 * MediaQuery : スマホ対応
 * ===============================================
 */
@media only screen and (max-width: 767px) {
  /* コンバージョンボタン */
  .btn-cv a {
    font-size: 1.3em;
    margin: 0 auto 1em;
    width: 94%;
  }
}

まず紹介するのは、ボタンを点滅、矢印のアイコンを震えさせ、さらにボタン自身もバウンドするやりすぎ感のあるボタンです。

ITリテラシーが高くない層が読者となる場合、やりすぎ感があってもいいでしょう。クリックしてもらえることが大切です。

ボタンの見本（アニメーション全部盛り）

HTML

HTMLファイルやブログ投稿のHTML入力画面で、ボタンを表示させたい箇所に以下のHTMLをコピペで設置します。

<div class="btn-cv is-reflection is-trembling is-bounce">
  <a href="">公式サイトで見る</a>
</div>

<div class="btn-cv is-blue is-reflection is-trembling is-bounce">
  <a href="">詳細はこちら</a>
</div>

※aタグのhref要素にはリンクを設定してくださいね。「href=""」の「""」の部分です。

これで、先ほどの「見本（アニメーション全部盛り）」のボタンを表示できます。

続いて、クラス名を説明します。

クラス名の説明

状態を表すクラスは「is-xxx」のように命名しています。

単純に「red」とか、「black」にしちゃうと、使用中のテーマのクラス名と重複しちゃうことがあると思うので、こんな命名規則にしています。

「.btn-cv」は基本となる緑色のボタン、「.btn-cv + .is-red」は赤色のボタン、「.btn-cv + .is-blue」は青色のボタン、「.btn-cv + .is-blue」は黒色のボタンを表示するといった具合です。

例えば、ボタンを光らせたり、矢印を動かしたり、ボタンをバウンドさせるといったアニメーションが一切不要であれば、

のクラス全てを削除すればそのように表示可能です。

ぜひ好きなアニメーションを組み合わせて使ってみてください。

ボタンの見本（アニメーションなし）

すべてのアニメーションを解除した状態のボタンです。

HTML

<div class="btn-cv is-cv">
  <a href="" target="_blank">公式サイトで見る</a>
</div>

ボタンの見本（プルルンアニメーション）

プルルンとアニメーションするボタンです。

僕は使ったことはないのですが、たまに見かけるので用意してみました。

HTML

<div class="btn-cv is-red is-reflection is-purun">
  <a href="">ダッダーン ボヨヨン<br>ボヨヨンwwwwww</a>
</div>

「is-purun」クラスを使用することで、このようにエロダイナミックな動きで魅了することが可能です。

Font Awesome

矢印のアイコンは「Font Awesome」を使っています。

WordPressのテーマやプラグインによっては既に使用しているかもしれませんが、もしまだ使用したことのない人は、この記事を参考にしてください。

ボタンの色を変更

HTMLのクラス名を変更することで、以下のようにボタンの色を変えることができます。

赤ボタン

<div class="btn-cv is-red is-reflection">
  <a href="">赤色のボタン</a>
</div>

青ボタン

<div class="btn-cv is-blue is-trembling">
  <a href="">青色のボタン</a>
</div>

黒ボタン

<div class="btn-cv is-black is-bounce">
  <a href="">黒色のボタン</a>
</div>

グラデーションの調整

ボタンの色（グラデーション）を変更したい場合、CSSが変更できる方は、

から、「background」の値を変更してください。

一応、ブラウザ対応でbackgroundの値はそれぞれ3種類（linear-gradient、-webkit-linear-gradient、グラデーションなし）を指定してあります。

グラデーションに関しての参考記事をリンクしておきます。

余白の調整

コンバージョンボタン上下の余白はかなり広くとっています。

広い方が目立っていいと思いますが、やはり好みが分かれるところですよね。

この余白を調整するためには、以下の値を調整しましょう。

「.btn-cv a」の「margin」を調整します。

調整例

.btn-cv a {
  ・
  ・
  ・
  margin: 1em auto;
  ・
  ・
  ・
}

※emという単位を使っていますが、pxでも構いません。

「.btn-cv」の「padding」でも余白を設定しているので、どうしても細かく調整したい人はこちらも調整してください。

調整例

.btn-cv {
  padding: .3em 0;
  ・
  ・
  ・
}

※このpaddingを0にしてしまうと、ボタン周りのシャドウ（影）が切れてしまうので注意してください。

テキストリンク

場合によっては、冒頭で紹介したテキストリンクも使えると思うので、設置方法を紹介します。

こちらも矢印のアイコンは便利なFont Awesomeを使いましょう。

見本

設置方法

■HTML

<div class="txt-link is-cv is-trembling">
  <a href="">今入会すると特典付き</a>
</div>

■CSS

/* テキストリンク */
.txt-link {
  font-size: 1.3em;
  font-weight: bold;
  margin: .8em 0 2em;
  text-align: center;
}
.txt-link.is-cv a {
  padding-left: 25px;
  position: relative;
}
.txt-link.is-cv a:before {
  color: #04c;
  content: "\f061";
  font-family: "FontAwesome";
  font-size: .9em;
  left: 0;
  margin: 0 5px 0 2px;
  position: absolute;
  text-shadow: 1px 2px 0 rgba(0,0,0,.3);
}

/* CVボタン矢印揺れ */
.is-trembling a:before {
  -webkit-animation-name:is-trembling;
  -webkit-animation-duration:.8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  -moz-animation-name:is-trembling;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
  0% {-webkit-transform:translate(-3px, 0);}
  100% {-webkit-transform:translate(0, 0);}
}

広告クリック回数の推移

僕は広告クリック回数の推移をGoogle Analyticsのイベントトラッキングで計測しています。

2017年2月前半に、今回の記事で紹介しているコンバージョンボタンのデザインが完成、以後全てのアニメーションを付けたバージョンは2月末に完成しました。

記事自体のPVも上昇していたので、一概にコンバージョンボタンのカスタマイズだけでクリック数が向上したとは言えないんですが、今回紹介したボタンを2月末にブログに適用してすぐクリック回数も増えているので、僕の運営するブログでは、ボタンを目立たせた効果が出ているように感じています。

お次はA8.netの管理画面で確認できるクリック数の推移。

これで確認してもやはり、2月以降のクリック数がかなり伸びたのが分かります。

念のため書いておくと、A8の広告をメインにした記事を20記事ほど増やしているし、商品の季節需要もあったので、ボタンを目立たせた効果だけではない点は強調しておきます。

何よりも記事を書くことが一番で、ボタンのデザインをカスタマイズするなんていうのは補助的なものです。

AffingerのCVボタンをカスタム

「おってぃ」さんが僕が今回作ったボタンを元に、Affinger用に紹介してくれました！

昼間のCVボタンについて需要がありそうだったのでまとめておきました。気になる方のみ見てください。大したこと書いてないです。メモですhttps://t.co/PDhoDXtYYE

— おってぃ🐼晴れ時サイトコンサル (@ottea69) June 8, 2017

「WordPress+AffingerのCVボタンを超かっちょよくする小技」

嬉しいですー！

参考サイト

今回のコンバージョンボタンを作成するにあたり、いくつかの記事を参考にしました。

ありがとうございました！

質問に回答

ボタンの中に<br>タグがある場合

WordPressを使用していて、改行が<br>タグに変換されてしまうことがあります。

ボタンのデザインの余白が少しおかしく表示される場合があります。

対策方法を検討中ですが、現状これは仕様となりますのでご了承ください。。

WordPressの自動整形を無効にしている方は問題ないかなと思います。

2つ連続で並べる場合って何！？

以下のCSSに質問がありました。

/* 2つ連続で並べる場合の余白 */
.btn-cv + .btn-cv a {
  margin-top: 0;
}

これですが、ボタンを縦に2つ並べた場合にボタン同士の間隔が広がり過ぎてしまうのを防止しています。

↓こんなふうに設置する場合の余白の調整です。

<div class="btn-cv is-reflection is-trembling is-bounce">
  <a href="">公式サイトで見る</a>
</div>
 
<div class="btn-cv is-blue is-reflection is-trembling is-bounce">
  <a href="">詳細はこちら</a>
</div>

ボタンを縦に2つ並べた場合の間隔を調整したい場合以外は特に無視してそのまま使っていただいて構いません。

他にも似たような調整として、ボタンが2つ並ぶ時にはアニメーションのタイミングをわざとずらしています。

全部同じタイミングでアニメーションするのも何か変かなと思い、CSSを調整しています。こちらも特に意識せずご使用ください。

ちなみに、質問頂いて気がついたんですが、横にボタンを並べる想定をしていませんでしたw

今後横に並べる方法も調整してみたいですが、実装は気まぐれとなりますのでご了承ください。

まとめ

コンバージョンボタンを追求していなかったら、アニメーションのある今回紹介したようなボタンやテキストリンクは作っていなかっただろうなーなんて思っています。

正直言って、ダサいほうがクリックされるかなと考えています。

アフィリエイトリンクでなくて、自社のコンバージョンボタンを独自に作るのであれば、ネット広告社さんの記事「A/Bテスト6連発！ コンバージョン率の高いランディングページはどっちだ！？」でも分かるとおり、商品画像とテキストを装飾し、バウンドしたり、プルルンとしたり、ボヨヨンしたりするアニメーションがある大きなボタンがいいでしょう。

僕が用意するボタンは、汎用性を持たせ、テキストリンクをCSSで装飾するものが主体ですが、今後ボタンのパターンを増やしてみたいとも考えています。

プラグイン化を希望！

よくリクエストされるんだけど、おとうさん開発するのに疲れちゃったんだ...w

歳だね...！

これまでの経験上、コンバージョンボタンは「赤」よりも「緑」派ですが、サイトのデザインに応じて、ぜひA/Bテストを繰り返して、色を決めるのがいいでしょう。

コンバージョンボタンは「赤」がオススメと色々なブログで書かれているからといって、そのまま「赤」を自分のサイトやブログで採用するのはオススメできません。

ぜひとも「本当なのかな！？」と常に疑う姿勢で検証してくださいね。

A/Bテストは、ボタンのクリック数を比較する程度であれば「Google Analytics」の「イベントトラッキング」、WordPressであればプラグイン「AdRotate」がオススメです。

僕は併用して計測をしています。

専業でアフィリエイトに取り組みだして実感したのですが、常に疑問を持って検証していくという過程がめちゃくちゃ重要です。

今回の記事も、コンバージョンボタンを改めて見直すきっかけとして利用してもらえれば幸いです。

検証の結果、僕が作ったボタンが採用されたら嬉しいです。

【2018年6月追記】CVボタンに関して議論した

実は先日、バウンドするボタンとかキラッと光るボタンに関して、ブログ飯などの様々な書籍で有名な染谷さんと飲み会の場で議論する機会がありました。

染谷さんのお話だと、バウンドするボタンはかなり嫌いで、キラッと光るボタンはなんとか我慢できる範囲とのことでした。

というお話でした。

ITリテラシーが高い人ほど、今回の記事のような、いかにもアフィリエイトっぽいボタンって嫌う傾向にある気がします。

そういえば、僕も昨年末くらいに、妻から、

と言われ、めっちゃ悩んだ挙句（5分くらいね）、ボタンをバウンドさせるのをやめましたw

僕が力を入れいているアフィリエイト商材は、ITリテラシーがやや高めの人を相手にしているからこのような判断をしました。

現在では、

このようなアニメーションだけをボタンに設定していることが多いです。

アフィリエイト記事ではなく、通常の記事ではあんまりボタンを過剰に装飾はしたくないな〜とは思っちゃいます。

このような考え方のもと、ボタンを装飾したりしていなかったりしてます。

ネット上にはホント色んな情報があふれています。ボタンの色は赤にしようだとか、緑がいいだとか。

くれぐれも、自分のサイトでABテストなどをした結果や、信念と相談した上で、どのようなボタンやリンクにするか決めていきましょうね。

僕は、ユーザーにどこがボタンかを見落とさせないという思いでボタンを装飾するので、魂が汚れる気まではしていませんw