バナー広告をオーバーレイ表示(固定表示)させてアフィリエイトの成果をアップさせる方法

アフィリエイトを行う上で大事なことは、「しっかりとわかりやすく商品についてを紹介すること」、これにつきます。しかし、もう一つ忘れてはいけないこととして、「どのように広告を表示したらサイト訪問者の目に留まるようなるのか」、これもまた大事です。アフィリエイトは、広告がサイト訪問者の目に留まり、クリックされて初めて成果報酬への道が切り開かれます。例え、しっかり商品の紹介をしていたとしても、広告がどこにあるのかわからずサイト訪問者が広告をクリックすることができなければ、アフィリエイトとしては全く無意味なこととなってしまいます。

そこで今回は、如何に広告を目立たせるかの方法のひとつとしてよく用いられる「オーバーレイ表示(固定表示)」の方法を紹介したいと思います。広告をオーバーレイ表示させることで、アフィリエイトの成果にもきっと良い影響が出るはずです。ぜひ当記事を参考にチャレンジしてみてください。

オーバーレイ表示とは

オーバーレイとは、overlayという英単語の「一面を覆う」という意味からもわかるように、何かの上に重ねて表示することをいいます。インターネット広告の表示方法として使われるオーバーレイ表示も、つまりWebサイトの上に広告を重ねて表示させることを言います。よくスマートフォンでWebサイトを閲覧している際に、画面の上や下に固定された状態で表示されている広告を見かけることが多いかと思います。まさにこの表示方法こそがオーバーレイ表示となります。

Webサイト

オーバーレイ表示
オーバーレイ表示例

オーバーレイ表示の特徴として、一般的に画面に固定して(動かないように)表示させるようにするため、広告は画面をスクロールしても常に表示され続けるようになります。つまり、サイト訪問者がそのページを表示させている間はずっと広告が表示され続けるようになるため、サイト訪問者の目に留まる確率が高まり、さらにはクリックされる確率も高くなります。これこそが広告をオーバーレイ表示させる最大のメリットと言えます。

オーバーレイ表示に適している広告

オーバーレイ表示させた広告は常にページ上に表示されるようになる半面、文章を使った広告に関する内容の訴求が難しくなります。従って、例えばレビュー記事に適した広告などはオーバーレイ表示には向きません。

オーバーレイ表示に向いている広告は以下のようなものとなります。

  • アプリのインストールや無料会員登録など単価は低いが成果条件のハードルが低いもの
  • 思わず目が行ってしまうような広告のデザインが優れているもの
  • サイトに訪れたらつい利用したくなってしまうようなキャッチーな商品やサービスを扱ったもの
  • 広告が表示されるだけで成果が発生するもの
  • クリックされるだけで成果が発生するもの
  • サイズが300×50や320×50、320×100のもの

おおざっぱに言うと、多くの人の目に触れることになるので、大量に人を送り込めば、それなりに売り上げが上がるものと言うことになります。

広告をオーバーレイ表示させるには

オーバーレイ表示させる方法を紹介します。ここからは若干のHTMLとCSSの知識が必要となります。

  1. まずは適当なclass名を付けたdiv要素を用意し、その中にオーバーレイ表示させたい広告タグを貼り付けます。
    <div class="overlay-ad">
    <-- ここに広告タグを貼り付け -->
    </div>
    

    Moba8.netの管理画面で言うと、以下の部分をコピーして貼り付けます。

    オーバーレイ広告の実装
  2. 1で用意したdiv要素に対して、付与したclass名をセレクタとして以下のスタイルを指定します。

    <style>
    .overlay-ad {
      position: fixed;
      bottom: 0;
      text-align: center;
      z-index: 1000;
    }
    </style>
    

その他にも個々によってCSSによる調整は必要ですが、基本的には以上で画面下に固定表示されるオーバーレイ広告が実装できます。

オーバーレイ表示を実装するjQueryプラグインの紹介

Moba8.netでは、オーバーレイ広告を実装するためのjQueryプラグイン(jquery-overlayad-js)も用意しています。

jQueryプラグイン詳細

上記のように、HTMLとCSSだけでもオーバーレイの表示を実現することができますが、このプラグインには以下のような特徴があります。

当プラグインは、スマホでの表示を想定して画面サイズよりもバナーサイズが大きい場合や小さい場合の表示補助機能を用意しています。画面サイズがバナーサイズよりも大きかった場合に生じる余計なスペースのクリック領域化、画面サイズがバナーサイズよりも小さかった場合のリキッド表示、トリミング表示に対応しています。

主にアフィリエイトサービスの広告を使用することを想定しているので、アフィリエイトサービスからそのまま広告をコピーして実装できるようになっています。

プラグインの使い方

  1. まずは以下よりjQueryプラグインをダウンロードしてください。ZIPファイルになっていますので、解凍してお使いください。

    プラグインをダウンロード

  2. jQuery本体と、ダウンロードしたjQueryプラグインをオーバーレイ表示させたいページ(body要素の閉じタグの直前)に読み込みます。
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="jquery.overlayad.js"></script>
    
  3. 適当なclass名を付けたdiv要素を用意し、その中にオーバーレイ表示させたい広告タグを貼り付けます。
    <div class="overlay-ad">
    <-- ここに広告タグを貼り付け -->
    </div>
    

    Moba8.netの管理画面で言うと、以下の部分をコピーして貼り付けます。

    オーバーレイ広告の実装
  4. 3で用意したdiv要素に対して、付与したclass名をセレクタとして以下のスタイルを指定します。
    <style>
    .overlay-ad {
      display: none;
    }
    </style>
    
  5. 最終的にページが読み込まれた段階でプラグインを実行するようにします。以下を読み込んだプラグインの下に記述します。
    <script>
    $(window).ready(function () {
      $('.overlay-ad').overlayAd();
    });
    </script>
    

実装は以上です。以下のサンプルのように表示されるようになります。

オーバーレイの実装サンプル

プラグインのオプション

当プラグインでは、固定箇所の変更トリミング表示背景色の変更などさまざまなオプションを用意しています。ただやや小難しい話となりますので、ここでは省略します。興味のある方はオプションの詳細を確認してください。

オプション詳細

さらに効果を上げるためのポイント

オーバーレイで広告を表示すると、上でも述べた通り常に表示され続け、サイト訪問者の目にも留まりやすくなります。せっかくオーバーレイ表示をさせるなら、それなりの効果を期待したくなります。そこで効果を上げるためのポイントをいくつかご紹介します。

  1. サイトのイメージを崩さないようにする

    基本的なことですが、サイトのイメージにそぐわない広告や、あまりにもクオリティの低い広告を使用することは控えましょう。オーバーレイで効果を上げるには、上記した通り多くのサイト訪問者を広告主のサイトに送り届ける必要があります。オーバーレイさせた広告によって、サイトのイメージを崩したことによりサイト訪問者が減少してしまったら元も子もありません。

  2. 高解像度バナーを使用する

    最近はスマートフォンのみならずパソコンでも高精細なディスプレイ(Retinaディスプレイ)を搭載するものが増えてきました。通常サイズのバナー広告を表示させた場合、高精細なディスプレイで表示するとぼやけて表示されてしまうのはご存知でしょうか。「ぼやけた広告」と「くっきりした広告」では、広告のクリック率に大きな差が出ます。オーバーレイで表示させる広告は、「くっきりした広告」にしておきたいところです。

    こうした高精細のディスプレイでもぼやけないようにするには、通常の倍以上のサイズで画像を用意する必要があります。Moba8.netでは、高精細なディスプレイに対応したバナー広告を「高解像度バナー」として豊富に取り扱っているので、ぜひご活用ください。

  3. 訴求力の高いバナー広告を使用する

    オーバーレイ広告は常に目に留まる部分に表示されるものですが、文章と一緒に表示させるスタイルではないので、テキストを使っての訴求ができない分、訴求力には若干難があります。従って、オーバーレイさせる広告には気をつける必要があります。バナーの中に表示されているテキストや物だけで、しっかりと広告の内容がイメージできるものを選ぶようにします。くれぐれも見た目の印象だけでバナーを選ばないようにしてください。

  4. アニメーションバナーや動画広告を使用する

    上記のようにオーバーレイさせるものとして訴求力の高いバナー広告を使用することが大事だと述べましたがが、さらに効果を高めたい場合は、より表現力の高いアニメーションバナーや動画広告をオーバーレイで表示させてみましょう。動きのある広告は、広告をよりリッチに仕立て、クリック率を向上させます。また静止画像では実現できなかった広告にストーリーを持たせることができるようになり、訴求力の大幅な改善が実現できます。

    Moba8.netでは、今回のオーバーレイを実現するjQueryプラグインの他にスライドショー動画広告を実現するためのjQueryプラグイン(jQuery-slideshowad-js)も用意しています。今回は詳しく説明しませんが、こちらも併せてチェックしていただければと思います。

    スライドショー動画広告実装
    jQueryプラグイン

  5. ミスタッチは狙わない

    オーバーレイで表示させた広告のすぐ側に重要なリンクを設置して、サイト訪問者のミスタッチやミスクリックを狙ったサイトをよく見かけます。これは主にクリックされることによって成果が発生する広告を掲載しているメディアに多く見られるものです。ただし、先ほども述べたように、これはサイトのユーザービリティをただただ低下させるだけで、サイトのイメージを崩す大きな要因となります。オーバーレイさせた広告によって、サイトのイメージを崩したことによりサイト訪問者が減少してしまったら元も子もありません。サイト訪問者の使い勝手を最優先で考慮した上で、オーバーレイの表示を行うようにしてください。

まとめ

バナー広告のオーバレイ表示(固定表示)は、何度も述べてきたように、常にサイトに表示され続けるものです。今回紹介したポイントをしっかり抑えて、アフィリエイト広告をオーバーレイで表示させるようにしてみてください。きっとこれまで以上の成果が出るはずです。

オーバーレイ表示の実装には、ある程度のHTMLやCSSの知識が必要となりますが、こちらの記事で紹介した通りにやっていただければ、問題なく実装できるはずなので、ぜひチャンレンジしてみてください。

多くの方が広告をオーバーレイ表示させたことで、これまで以上の成果が上がるようになることを期待しております。

この記事を書いた人

Takanori Maeda
エンジニアやデザイナーだった経験を活かして、スマアフィではアフィリエイトを絡めた技術系の記事をメインに書いています。価格比較サイトでのディレクター経験もあり、アフィリエイトにはなんだかんだで10年以上関わっています。現代音楽の作品で受賞歴もある元ニート作曲家。
スポンサーリンク