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

WordPress

この記事ではアフィリエイトリンクを「思わず押したくなるボタン風」にデザインする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. シンプルボタン

<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」に設定しています。

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

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

<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. 立体的なボタン

<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. 跳ねるボタン

<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. キラリと光るボタン

<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は下記ページを参考に修正・改善してあります(複数行対応など)。ベンダープレフィックスも邪魔なので取ってしまいました(後方互換性など知らん!)。

CSSだけでつくるキラッと光るボタン | NAKAZI LAB.(ナカジラボ)
以前jQueyを利用して光がアニメーションするボタンを作りましたが、今回はCSS3のaimatioを使って光のアニメーションを作った、CSSだけで動くキラっと光るボタンです。 HTML [html…

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

<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とは関係あるんでしょうか?)。

波紋が広がるリップルエフェクトボタンの作り方(CSS・Javascript)
CSSとJavascriptで「波紋が広がるようなアニメーションをかける」方法を解説します。マテリアルデザインを作るときに便利です。

いかがだっただろうか。

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

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

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

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

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

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

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

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

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

[PR]最新SEO対策済み!WordPressテーマ「Diver」
収益化を加速する!Diverは、初心者でも簡単に利用することが可能な高品質高機能なハイスペックワードプレステーマです。 一回テーマを購入すれば、複数のサイトでの利用が可能なのも魅力的。 ブロガー・アフィリエイターの次のステップに最適です。 【WordPressテーマ「Diver」公式サイト】
WordPress
スポンサーリンク
この記事をシェアしよう
リスブロ

コメント