【保存版】クリック率を上げる！アフィリエイトリンクのボタン化デザイン6選。

この記事ではアフィリエイトリンクを「思わず押したくなるボタン風」にデザインするCSSを紹介しています。

こんにちは。さいとう（@S41T0H）です。

A8.net やafb、アクセストレード、バリューコマースといったASPによるアフィリエイト広告のテキストリンク、そのまま貼るだけではクリック率もぼちぼち。

せっかくなら押したくなるようなボタンデザインをしたいですよね。

↑こんなボタンが作れます。

そこで今回は「ASPのアフィリエイトリンクを改変せずに押したくなるボタンに変更するCSSデザイン」を紹介したいと思います。

※参考にしたページ：
アフィリエイトリンクをボタン化する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う
 アフィリエイトリンクの改行をなくしたりボタン化する方法 – 稼ぐネット
 配色パターン見本40選：ベストな色の組み合わせ確認ツール

この記事の目次

「押したくなるボタン」とはなにか。

どんなCTAボタンにも哲学がある。
サマセット・モーム

ボタンデザインを考える前に、「押したくなるボタン」とはどういうものなのかを考えてみるのがいいかもしれません。

なんとな～く四角いベタ塗りのボタンを置いてしまっていませんか？

クリックされやすいボタンデザインは確実にあります。

しっかりとユーザー行動を研究して、取りこぼしのないようにしていきたいものです。

そのボタン、誰が見てもわかる？

「作者であるあなた」と「読者」の意識はしばし乖離してしまうもの。

「どう見たってボタンじゃん！」とあなたが考えても読者はボタンだということに気付けないかもしれません。

過剰なくらいボタン感を出すくらいがちょうどいいのです（とは言え、過剰にアニメーションするボタンはどうかと思いますが……）。

リンク文言の選び方：未来をイメージさせるべし。

ASPにあるプロモーションのテキスト広告を見てるとさまざまな文言がありますが、あなたはどういった基準で選んでいますか？

クリックとは勇気のいる行為。ワンクリック詐欺などが喧伝された影響もあるでしょう。

大切なのは「安心してクリックしてもらえるボタン」を設置すること。

具体的に「クリックしたらどうなるか／なにができるか」といった未来がイメージできる文言を選ぶべきでしょう。

△「○○証券」

◎「いますぐ無料で口座開設をする」

ASPのアフィリエイトリンクを改変せずに押したくなるボタンに変更するCSSデザイン6選

多くのASPが生成するHTMLタグは下記のような構造になっています（下記はafbのもの）。

<a href="（URL）" target="_blank" rel="nofollow">（リンク文言）</a>
<img src="（トラッキング用画像URL）" width="1" height="1" style="border:none;" />

これに直接変更を加えるのは規約的にNGなので、このリンクを他の要素で囲っていきます。

具体的には、下のようにアフェリエイトリンク全体をdiv要素で囲んでしまいましょう。

<div class="btn-1">（ここにアフィリエイトリンク）</div>

「AddQuicktag」に登録しておいたり、ショートコード化してしまうと便利です。

ではデザイン案を見ていきます。

1. シンプルボタン

ブログのことなら『LISBLO.』

<div class="btn-1">（ここにアフィリエイトリンク）</div>

.btn-1 {
    background-color: #61c359; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    opacity: 0.8;
}

.btn-1:hover {
    box-shadow: none;
    transform: translateY(2px);
}

.btn-1 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}

.btn-1 > img { float: left; }
.btn-1::after{ content: ''; clear: left; }

影をつけることでボタンであることをアピールしています。

PCでないとわかりづらいですが、マウスオーバーで沈み込んでくれます。

ちなみに赤いボタンは背景色を「#fb7d79」、青いボタンは「#516c9d」に設定しています。

ブログのことなら
どこよりも丁寧に解説するブロガー向けWebメディア『LISBLO.[リスブロ]』

↑複数行のリンクもキレイに表示できます。

2. 矢印つきシンプルボタン

ブログのことなら『LISBLO.』

<div class="btn-2">（ここにアフィリエイトリンク）</div>

.btn-2 {
    background-color: #61c359; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    position: relative;
}

.btn-2 a::after{
    content: '\f054'; /* 矢印の種類 */
    font-family: FontAwesome;
    font-weight: normal;
    position: absolute;
    right:  1em;
}

.btn-2:hover {
    box-shadow: none;
    transform: translateY(2px);
    opacity: 0.8;
}

.btn-2 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    padding-right: 2em;
}

.btn-2 > img { float: left; }
.btn-2::after{ content: ''; clear: left; }

上のシンプルボタンにFontAwesomeでいろいろな矢印を付けてみました。使用する際はFontAwesomeがロードされているか確認してください。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

サンプルコードでは矢印の種類は一番上のものです。2つめ以降はそれぞれcontentの値を「\f101」「\f18e」「\f061「\f0a4」に変更してください。

その他の記号の種類は下記ページにて確認できます。

Search for Font Awesome | 日本語でアイコンフォントを簡単検索

Font Awesomeのアイコンフォントを日本語、英語、カタカナで簡単に検索することができる便利なウェブサービスです。

3. 立体的なボタン

ブログのことなら『LISBLO.』

<div class="btn-3">（ここにアフィリエイトリンク）</div>

.btn-3 {
    background-color: #668ad8; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 5px 0 0 #627295; /* ボタン陰色 */
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.btn-3:hover {
    box-shadow: none;
    transform: translateY(5px);
    opacity: 0.8;
}

.btn-3 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}

.btn-3 > img { float: left; }
.btn-3::after{ content: ''; clear: left; }

これは誰がどうみてもボタンですね。

ちょっと古臭い感じも否めませんが、ここぞというときに置いておきたいボタンです。

読者層が高齢なサイトなどで特に効果抜群かもしれません。

4. 跳ねるボタン

ブログのことなら『LISBLO.』

<div class="btn-4">（ここにアフィリエイトリンク）</div>

.btn-4 {
    background-color: #1da1f2; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 5px 0 0 #126599; /* ボタン陰色 */
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    animation: jumpbtn 3s ease-out 0s infinite; /* ジャンプの頻度など */
}

@keyframes jumpbtn {
    from, 10%, 20%, 100% {transform: translateY(0%);}
    5%, 15% {transform: translateY(-0.5em);} /* ジャンプする高さ */
}

.btn-4:hover {
    opacity: 0.8;
}

.btn-4 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}

.btn-4 > img { float: left; }
.btn-4::after{ content: ''; clear: left; }

はい、だんだん胡散臭い商材のLPのようになってきましたね。

僕はこういうアニメーションするリンクは絶対に踏みたくないのですが、あなたはどうですか？

リンクを踏ませたい対象のネットリテラシーに応じて使うといいかもしれないですね（無知につけこんで騙すのはダメですよ）。

5. キラリと光るボタン

ブログのことなら『LISBLO.』

<div class="btn-5">（ここにアフィリエイトリンク）</div>

.btn-5 {
    background-color: #79a1d4; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 5px 0 0 #194174; /* ボタン陰色 */
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.btn-5:hover {
    opacity: 0.8;
}

.btn-5 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.btn-5 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    left: -100%;
    top: -50vh;
    content: '';
    width: 3rem;
    height: 100vh;
    transform: rotate(5deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    animation: highLight 3s ease-in-out 0s infinite;
}

@keyframes highLight {
    from { left: -5%; }
    15%, 100% { left: 105%; }
}

.btn-5 > img { float: left; }
.btn-5::after{ content: ''; clear: left; }

ついにきてしまいました。LPによくある光るボタン。

CSSは下記ページを参考に修正・改善してあります（複数行対応など）。ベンダープレフィックスも邪魔なので取ってしまいました（後方互換性など知らん！）。

nakazilab

cssやJavaScriptの備忘録サイト

このコードを使えば
複数行の
とっても長いリンクでも光るよ
キラーーーーーーーーーーーーーーーン

6. タップを誘導するボタン

ブログのことなら『LISBLO.』

<div class="btn-6">（ここにアフィリエイトリンク）</div>

.btn-6 {
    background-color: #ffbc61; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.btn-6:hover {
    opacity: 0.8;
}

.btn-6 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.btn-6 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 50%);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.btn-6 > img { float: left; }
.btn-6::after{ content: ''; clear: left; }

スマホユーザーが多いとこういったタップ誘導も有効でしょう（スマホで動かなかったらスミマセン）。

いわゆるマテリアルデザインの「リップルエフェクト」というやつを意識したものですね（仮想通貨のXRPとは関係あるんでしょうか？）。

ページが見つかりませんでした

いかがだっただろうか。

クリックしたくなるボタンはCTR改善も期待できます。

ぜひあなたのサイトにも設置してみてくださいね。

afb（アフィb）のお申し込みはこちら

まるで魔法！記事内の画像を自動でちょうどいいサイズに調整してくれるCSSカスタマイズ！

この記事では、ブログ記事内の画像を自動でちょうどいい見やすいサイズに調整してくれるCSSカスタマイズを紹介しています。

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！

今後の記事執筆の励みになります！を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

【5ステップ】「Cocoon」まるごとカスタマイズ講座【コピペ可】

名前:たばちゃん :投稿日：2018/10/29(月) 12:07:04 ID：gyOTgxNzg
ありがとうございます、ブログで早速利用させて頂きました！
1.シンプルボタンのCSSのopacity0.8がhoverではなく通常のところに入っております！
返信
名前:かず :投稿日：2019/03/27(水) 17:17:38 ID：gzNTM2MzE
はじめまして
クリックボタンの文字を任意のテキストにしたいのですが、どうやったらできますか？
説明通りにリンクを挿入しましたが、文字ではなくURLがそのままでてきてしまうので、そこを変えたいです
よろしくお願いします
返信
名前:匿名 :投稿日：2019/04/24(水) 15:46:38 ID：A4MjcxNzc
わかりやすい記事でとても参考になりました。、
返信
名前:K,I :投稿日：2019/10/01(火) 21:45:43 ID：MyNjE4NDQ
2. 矢印つきシンプルボタンの矢印が表示されません。テーマはcocoonです。cocoonの場合、デフォルトでfontawesomeが使えるようなのでそのままコピペでいいのでしょうか？しかし、コピペしただけでは矢印だけが表示されません。宜しければご返答お願いします。
返信
名前:YUI :投稿日：2020/05/25(月) 12:53:35 ID：MxMzQzMDk
「6. タップを誘導するボタン」が気に入り使ってみたいと思いましたが、
2点質問があります。
・こちらのサイトのようにボタンを押したときに別タブで表示させるにはどうすればよろしいのでしょうか。
・「6. タップを誘導するボタン」のコードをコピペさせていただいたのですが、エフェクトが表示されないのはどうすれば改善されるのでしょうか。
無知ですみません。
テーマはcocoonを利用しています。
どうかご教示お願いいたします。
返信