ならば私はまごころをこめて広告をはろう

  • Posted on: 2015年2月2日
Pocket

  • このエントリーをはてなブックマークに追加

広告始めました

シュールスタンプ賢者の戯言風の記事タイトルにしてみました。
本記事の内容は広告はったぜというご報告だけなのですが、かこつけて思うところを切々と書いてみました。

広告はシンプルなビジネスです。
自分が管理するスペースや情報媒体の一区画を第三者に貸し出して対価を得ます。

広告は少し前までは規模のあるマス媒体でないと、広告主を募るのに営業コストがかさんでいたいのですが、昨今は状況が変わってきました。
個人が運営する小さな情報媒体にも広告主を募ることが可能になりました。
オンライン広告やアフィリエイトプログラムの登場により、営業コストをかけず広告主を集めることができるようになりました。
Google大先生のAdSense、Amazon師匠のAssociateプログラムがその一つです。

インターネットで活動を行う表現者にとってはこうした広告プログラムは力強い味方です。
少ない労力で、自分の表現活動から収益源を創出できるからです。

当ブログでもAdSense始めてみました。
検索の流入、アナリティクス、AdSenseによる収益と、Google大先生にはお世話になりっぱなしでシリコンバレーに足を向けて寝たら目覚めが悪くなりそうです。

しかし、広告の貼り方はカンタンではなるのですが奥深いです。
サイトの訪問者はなんといっても広告が好きではありません。
収益を最大化しながらも、コンテンツやユーザーの操作の邪魔にならない広告の配置はなかなか難儀というの正直なところです。
適当にやると、デザインは不揃いになるし、ユーザーのサイト閲覧を邪魔しストレスになります。
特に広告の誤クリックはユーザーを苛つかせるだけでなく、広告主に不要な費用を発生させ、媒体の価値も下がるという悪循環をおこします。

しかしながら、ユーザーに対して不快でなく、メディアの外観も損ねない広告の貼り方は追求されてしかるべきです。
拙かつおは、広告導入にあたって、そんなことを色々考えたので筆をとるに至りました。
本投稿では、どなたかの役に立つことを祈り、当サイトで実施したAdSense導入の過程をご紹介します。

私が実行したのは以下3つの超シンプルなことのみです。

  • 広告の掲載位置は大手メディアのマネをする
  • 広告とメディアの配色をなじませる
  • 広告の大きさと広告を配置する要素の幅をあわせる

以下、順番に説明をさせていただきます。

広告の掲載位置は大手メディアのマネをする

まずいきなりですが、「どこに広告を貼るべきか」という問題に関しては、ずばりパクリましょう。

大手のメディア企業は、当然広告の位置を熟考して配置しているはずです。
それこそ、収益とユーザビリティのトレードオフに日々腐心しているでしょう。
とすると、彼らの広告配置は現状考えるベストな解なのです。

偉大な諸先輩に経緯を評しパクらないわけにはいかない。
戦略的パクリを実行します。

参考にしたのは2つのサイトです。
いずれも大きなトラフィックを持つ知名度の高いサイト。

  • PC(Tablet含む) → Yahoo! JAPAN
  • スマートフォン→ Naverまとめ

Yahoo!をパクれ(右カラム上部)

まずPCでのにおけるYahoo! JAPANは、どのサイトを訪れてもほぼ右カラム上部に広告を配置しています。
2-3カラム構成のサイトの王道的な広告配置ですね。
とはいえこの場所こそが、高単価な掲載位置、ゴールデンポジションなわけです。

おそらくユーザーの目の動きが左上から右下に向かうことを意識して、視認性は高いけれども誤クリックの誘発が少ないといった理由からの配置だと推測できます。

以下は興味深いレポートですが、「もうユーザーは右カラムなんて広告ばっかだから見ないんだよ!」としながらもサイドバーの適切なデザインや広告との調和は重要だとしています。

Naverまとめをパクれ(下部固定)

スマホはPCと違い、必然と下に下にスクロールしていくようなレイアウトになります。
この場合、常に下部に固定され常に画面内におさめるのが視認性を担保する良い手法と言えます。

下部固定(フローティング)は、スクロールした時にしっかりと固定されなかったり、膨らむようなアニメーションがあると誤クリックを誘発します。
そういう意味で悪名高きポジションでもあります。
誤クリックはユーザーにも広告主にも最悪ですので、ヘンな動きや表示崩れなどが発生しないよう実装で気をつけます。
(JavaScriptなどを使わず、CSSのみで完結です。)

下部固定も王道中の王道と言えますが、Naverまとめの実装でおもしろいのは、サイト自体が白系の配色なのに広告の配色に黒を使っているデザインにあります。(画像広告も出ないっぽい)
この実装はコンテンツと広告を明確に区別しながらも、デザイン的に違和感がなくクールです。
ですので、拙ブログも大変ありがたくパクらせていただきました。

当サイトの広告掲載位置は以下のように落ち着きました。
下記の図は便宜的に広告要素を赤くしていますが、実際はモノトーンの配色に設定しました。
ただただフツー過ぎるポジションじゃねーか!という厳しいツッコミは華麗にかわさず顔面で受け止めます。
adLayout

広告とメディアの配色をなじませる

AdSenseでは、広告の配色を指定できます。
ブログに馴染みつつもコンテンツと広告と違いが出るように設定します。
やること自体は少ないですが、やるかやらないかで印象がかなり変わってくる点です。
効果の高い広告掲載結果を得られる施策としてGoogleも奨励しています。
このサイトの場合、もともとのブログのデザインのカラーパレットから逸脱せず、白黒グレーを基調にしたモノトーンの広告のみです。
意外とやらないメディアさんは多いです。

広告の大きさと広告を配置する要素の幅をあわせる

ここからは少し実装の話もでてきますが、やることは単純です。
幅を揃える、です。

広告の大きさとサイトの要素の幅が不揃い感満載のサイトはちらほらあります。
私は私生活は怠惰でだらしないですが、こういう微妙なところは気になるタイプです。
サイト自体を統一性あるものとするために、ブログの構成要素と広告のレイアウトの関係も非常に重要だと思います。
それぞれのカラム幅と広告をあわせる・そろえることも意識したいところです。

ちなみに弊ブログでは広告を実装するにあたって、もカラム幅を変更しました。
(例えばPCであれば、横幅300pxの広告が20pxずつの余白とともに収まるよう右カラムの横幅を340pxとしました。)

ただ面倒にさせるのは、広告サイズの複数端末対応です。

WEBサイトは、PC、タブレット、スマートフォンの3種類の端末からアクセスされることを念頭に作った方が良いでしょう。
このサイトでも、レスポンシブで3つの端末の画面幅に対応して変化します。(PCの場合ブラウザ幅を動かしてみてください)
であれば広告も、主な3つの端末ごとのレイアウトにあわせて適切に変化する必要があります。

レスポンシブの場合、コードの修正箇所自体は分かりやすいですが、それぞれのポジションの広告で端末別の大きさや振る舞いを考える必要があります。

広告のサイズについて

一般的に広告主が入稿されるであろう縦横サイズを念頭にして端末別の広告ユニットの大きさにします。
(縦横が特殊なサイズの広告は、誰も画像素材をつくらないので広告は充填されづらいはず。)

先にも書きましたが弊サイトは、端末ごとに以下の広告サイズを実装することとしました。
AdSense広告ユニットの基本サイズとして用意され、オンライン広告の業界標準にも準じています。

  • PC → 300 x 250
  • タブレット → 200 x 200
  • スマートフォン → 320 x 50

端末別の広告出し分けについて

複数の広告を3つのレイアウトごとに呼び出すために、ここでは2つのレスポンシブ広告ユニットを発行します。

はいここで、わざわざサイズ可変の広告を2つ発行しないで、サイズ固定の広告ユニットを3つ発行すれば良いのでは?という疑問が出てくると思います。
しかし、この場合、広告を呼び出した後に広告を隠す(CSSでdisplay: none;とする)ような実装となってしまい、これはGoogleの禁止事項にあたります。
出したいと言って、もらった広告を隠すというある意味詐欺ですねw
これを回避するために、レスポンシブ広告ユニットを発行しCSSのmedia queryによって最初からdisplay:none;とします。
レスポンシブ広告ユニットであれば、CSSで隠すことは許可され、広告リクエストも発生しないようです。
以下、広告ユニットごとのCSSのパラメータを参考まで。

広告ユニット名 PC タブレット スマホ
Responsive
AdUnit1
display: block;
width: 320px;
height: 250px;
display: block;
width: 200px;
height: 200px;
display: none;
Responsive
AdUnit2
display: none; display: none; display: block;
width: 320px;
height: 50px;

実装したコードも書いておきました。

Responsive AdUnit1

Responsive AdUnit2

ちょっとだけ補足します。

  • insタグのclass指定でheightが効かない?(Googleのjsに上書きされる)よう。ちょっとハマったので、data-ad-format要素で形状を指定して解決しました。
  • 下部固定はCSSで親になるdivタグを定義して固定&サイズ指定しました。

広告をはる作業自体はラクチンです。
しかしおりゃーと貼る前にちょっとだけ実装を考えることは大事です。
広告を提供してくれる広告主、サイトに来て抱くユーザー様に対して、一手間のまごころを込めて広告を配置することは、メディアの発展性に大きく寄与すると信じています。
さらに、こうした土台がまわりまわって収益最大化につながるものと思います。

以上、最後まで読んで頂きありがとうございました!

Pocket