AdSenseのテキスト広告に似たアフィリエイトリンクを載せる

AdSenseを設置しているサイトが多くなったことで、ネットユーザーにとってAdSense広告は日常になりつつあるように感じます。広告を自然にクリックしてもらうという事で言うとAdSenseは最強と言えるのかもしれません。

特に、関連性の高い広告が自動的に表示されるプラス効果は大きく、AdSenseはユーザーの信頼度が高い広告となっているような気がします。

通常のサイトの場合、イメージ広告よりもテキスト広告の方がクリック率が上がる傾向にありますが、AdSenseのテキスト広告を真似してアフィリエイト広告を載せた場合、クリック率はどうなるのかという事が以前から気になっていました。

さらに突っ込んで、どうやってAdSense広告に似せるかという話ですが、元々SEO-SENCEのエヌさんがアフィリ広告をAdSenseに似せるとクリック率が上がるという話をしていたのを見てからずーっと頭に引っかかっていました。

そこで、1カ月ほど前にAdSenseに似た広告配置にしてみたところ、クリック率が上がったので、簡単にやり方をまとめておきます。全てのサイトで効果があるとは思いませんが、試してみる価値はあると思います。

※あくまでAdSenseを設置していないサイトに載せる広告の話ですので、AdSense設置サイトで実行した場合、警告を受けるかもしれません。

アフィリエイトリンクをAdSenseに似せる法

まず、これがAdSenseのレクタングル大というサイズの広告です。レクタングル大が最もクリック率が高いので、とりあえずこの広告を真似することにします。ただ、URLやGoogleのロゴまで真似すると結構面倒な作業になるので、形や広告サイズなどを真似することにしました。

実際に比べると全然違うのですが、見慣れている形ということで、ユーザーへの安心感が増していると思います。あと、プレミアムAdSenseのように、広告部分にマウスを乗せた時に背景色やリンク色を変えてみました。これで多少クリック率が上がるのではないかと思っています。

タイトル横にURLを付けて、右下のロゴ部分に自サイトの名前を入れても良いと思います。それぞれのサイトデザインに合わせてアレンジを加えてください。また、マウスが乗った時に背景色を変えるというのは、色々な場面で使えると思います。

AdSenseに似せるためのサンプルコード

以下に、サンプルとして今回紹介した広告デザインのコードとCSSを載せておきます。

HTML

<div class="ads_bn">
<div class="tbn"><a href="リンクのURL">タイトル</a><br />広告文</div>
<div class="tbn"><a href="リンクのURL">タイトル</a><br />広告文</div>
<div class="tbn"><a href="リンクのURL">タイトル</a><br />広告文</div>
<div class="tbn"><a href="リンクのURL">タイトル</a><br />広告文</div>
</div>

とてもシンプルなるので特に難しい部分はないと思います。class名は任意でOKです。

CSS

.ads_bn{
    height: 270px;
    width: 340px;
}
.ads_bn .tbn a{
    font-weight: bold;
    font-size: 16px;
    color: #008AE1;
    }
.ads_bn .tbn a:visited{
    color: #008AE1;
    }
.ads_bn .tbn a:hover{
    color: #FF9900;
}
.ads_bn .tbn{
    line-height: 18px;
    font-size: 14px;
    margin-bottom: 18px;
    }
.ads_bn .tbn:hover {
    background-color: #ffe1ff;
    }

こちらも特に難しいことはやっていないのですが、a:visited(訪問済みリンク)の色をaと同じにすることと、タイトルと文章のフォントサイズあたりが重要かなと思っています。.tbn:hoverがマウスをその領域に乗せた時の背景色を変化させる記述です。 #f0f0f0のようなグレー色でも良いと思います。

»テキスト広告のクリック率を高める為に見栄えを良くする方法