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

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

昼寝の間にちょっとだけ仕事をしようと思ったんですが、37度後半程度の熱だと、元気いっぱいすぎて寝てくれません！寝たほうが身体のためにもいいので、家の周りをドライブして寝かしつけました。では、記事を書きます（2017年5月2日 15時）。

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

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

めっちゃ前置きが長くなったんですが、コンバージョンボタン（アフィリエイトテキストリンク）をCSSで装飾しようとしている人に、今回の記事が少しでも役立てば幸いと考えています。

ボタンの変更履歴

はじめに

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

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

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

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

よく見るやつだっ！

今でも場合によっては時々使っていますが、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タグ内部はリンクを設定してくださいね。

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

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

クラス名の説明

状態を表すクラスは「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のテーマやプラグインによっては既に使用しているかもしれませんが、もしまだ使用したことのない人は、僕が過去に書いた記事を参考にしてください。
→ 「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が変更できる方は、

から、「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のイベントトラッキングで計測しています。

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

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

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

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

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

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

AffingerのCVボタンをカスタム

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

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

— おってぃ@作業強化月間 (@ottea69) 2017年6月8日

「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でつぶやいたり、ご連絡ください。僕自身も、もっともっと勉強したいです。