デザイン とみっち

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

コンバージョンボタンをCSSで装飾したりアニメーションさせる方法を紹介するよ！
ボタンの変更履歴
2017年5月 9日 ボタンの色を4色切り替えができるように変更
2017年6月10日 プルルンアニメーション用「is-purun」クラスを追加

今日は子どもが熱を出してしまい保育園を休みました。僕が面倒をみています。

昼寝の間にちょっとだけ仕事をしようと思ったんですが、37度後半程度の熱だと、元気過ぎて寝てくれません！先ほどドライブで寝かしつけて帰ってきて、この記事を書いています（現在5月2日 14時46分）。

保育園の送り迎えもあり、僕ができる仕事はアフィリエイトくらいしかないんじゃないか...という気がする今日この頃です。

アフィリエイトを中心につぶやくアカウントを作りました → とみっち（裏）

↑僕が日々アフィリエイトサイトを作る中で、これはオススメできると思ったWordPressのプラグイン、カスタマイズ方法、ツールやノウハウなどはこっちのアカウントで紹介していくので、フォローしてもらえるとめっちゃ嬉しいです。

コンバージョンボタン（アフィリエイトテキストリンク）をCSSで装飾しようとしている人に、当ページのコンテンツが少しでも役立てば幸いと考えています。

前置きが長いので、ボタンの紹介をしている項目にジャンプしたい人は、

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

をクリックしてください。

はじめに

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

僕はにわかプログラマー、そして以前はSEO会社に勤務していた（8年も昔の出来事ですが...）ので、アフィリエイトは論理的に攻略していきたいタイプです。

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

※後ほどクリック数の推移などを紹介します。

コンバージョンボタンをCSSで作る前はテキストリンクが最強と思い、こんな感じのテキストリンクを多用していました。
 

今入会すると特典付き
 

今でも場合によっては時々使っていますが、CSSで派手にしたコンバージョンボタンを使うことが多くなっています。

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

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

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

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

  1. 読者にリンクだと伝わること
  2. クリック（タップ）後、公式サイトや販売ページに移動すると伝わること
  3. 目立つ色にする
  4. ボタン周りの余白を大きくとる
  5. ボタンを光らせたり、プルンプルンといった動きで目立たせる工夫

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

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

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

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

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

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

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

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

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

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

こんなのや、

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

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

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

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

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

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

え！？ これボタンなの？ 見出しかと思った
どこがクリックできるのかイマイチ分からないな...
パッと見て販売ページへの飛び方が分からないと別のサイトを探しちゃう
 

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

試しにスマホでボタンを見てみましょう。

スマホで閲覧 見出しなのかボタンなのか

なるほど、確かにボタンの横幅が広がると見出しに見えてきた...。

事実、ヒートマップを見ると見出しタグで設置した箇所がよくタップされています。

見出しをボタンと勘違い

※ヒートマップは「User Heat」をWordPressのプラグインで使っています。

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

とみっち
見出しとボタンはそもそも長さが違くね？

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

当たり前を当たり前と思わないこと。

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

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

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

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

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

CVボタンの改善例

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

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

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

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

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

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

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

ボタンの例

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

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

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

自作画像にアフィリエイトリンクを貼る行為
自分で画像を作って、そこにアフィリエイトリンクを貼る行為はASPで基本的に禁止されています。

あらかじめ用意されたテキストリンクのHTMLタグを、CSSで装飾する程度にとどめるようにしましょう。

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

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

そもそも、

「公式サイト」って何！？

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

アフィリエイトのリンク文言
ASPで発行されるアフィリエイトタグの文言を変更するのは基本的に禁止されています。発行可能なタグの中から選択しましょう。

随分と前置きが長くなりました...。

それでは、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: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: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%;
  }
}

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

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

公式サイトで見る
詳細はこちら

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タグ内部はリンクを設定してくださいね。

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

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

クラス名の説明

クラス名用途
btn-cvCVボタン基本（色は緑）
is-redボタンを赤くする
is-blueボタンを青くする
is-blackボタンを黒くする
is-reflectionボタンを一定時間で光らせる
is-tremblingボタン内部の矢印アイコンを動かす
is-bounceボタンをバウンドさせる
is-purunボタンをプルルンと動かす

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

単純に「red」とか、「black」にしちゃうと、既存のクラス名とかぶることがあると思うので、こんな命名規則にしています。

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

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

is-reflection
is-trembling
is-bounce

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

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

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

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

公式サイトで見る

HTML

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

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

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

ダッダーン ボヨヨン
ボヨヨンwwwwww

HTML

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

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

Font Awesome

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

WordPressのテーマやプラグインによっては既に使用しているかもしれませんが、もしまだ使用したことのない人は、僕が過去に書いた記事を参考にしてください。
→ 「Font Awesomeが素晴らしすぎる」

ボタンの色を変更

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が変更できる方は、

緑ボタン.btn-cv a
赤ボタン.btn-cv.is-red a
青ボタン.btn-cv.is-blue a
黒ボタン.btn-cv.is-black a

から、「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にしてしまうと、ボタン周りのシャドウ（影）が切れてしまうので注意してください。

余白が調整できない時
使用中のテーマによっては、この設定では余白がどうしても調整できない場合があるかもしれません。

その場合は、「!important」を使用してください。

margin: 1em auto !important;

のように指定します。

テキストリンク

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

こちらも矢印のアイコンは便利な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のイベントトラッキングで計測しています。

広告クリック回数推移

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

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

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

A8.net クリック数

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

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

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

AffingerのCVボタンをカスタム

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

「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で装飾するものが主体ですが、今後ボタンのパターンを増やして、この記事に追加していこうと考えています。

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

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

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

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

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

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

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

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

あと、

こんなデザインのボタンが「HTML+CSS」であったらいいな

とか、

こんなアニメーションがあったらCTR上がりそう！

といったリクエストや情報があれば是非Twitterでつぶやいたり、ご連絡ください。僕自身も、もっともっと勉強したいです。

良さそうなアイディアは採用して、新しいコンバージョンボタンのパターンを増やしていきます！

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

コンバージョンボタンをCSSで装飾したりアニメーションさせる方法を紹介するよ！

RECOMMENDこちらの記事も人気です。

ABOUTこの記事を書いた人

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車（GolfV GTI等）/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景 等

NEW POSTこのライターの最新記事