「GoogleAdsenseレスポンシブ広告」と「iPhone」と「はてなブログ」と「推奨広告」と「私」♪

・GoogleAdsense

私を含めてブログを書いているみなさんの中には「GoogleAdsense」のお世話になっている方が結構いらっしゃると思います。

頑張ってPV稼いで最短で最大の収入をとバンバン狙っている方から、月々の小遣いの足しにでもなれば御の字かなぁととりあえず導入している方まで様々だと思います。

その導入方法についてはブロガーの大先輩たちがたくさんの記事を書いているのでここでは割愛させていただきます。が、今回取り上げたいのはレスポンシブ広告と推奨の広告フォーマットとiPhoneについて。

・推奨の広告フォーマット

GoogleAdsenceの広告ユニットには様々なサイズのものがあります。

• 「レクタングル（中）」300×250
• 「レクタングル（大）」336×280
• 「ビッグバナー」728×90
• 「ワイド スカイスクレイパー」160×600
• 「モバイル ビッグバナー」320×50
• 「モバイル バナー（大）」320×100
• 「バナー」468×60

などなど、他多数。

そしててこの広告サイズの中にはGoogole先生がこれが良いよぉ！とお勧めしている「推奨の広告フォーマット」というものが存在します。

通常、読みやすさの点で、縦長より横長のサイズのほうが効果的です。ユーザーは、ひとまとまりの意味を持つ複数の単語から情報を得ます。幅の広い広告は、幅の狭い広告と違って一行に多くの文字を記述することができるため、ひと目で多くのテキストを読むことができます。

幅の広い広告を適切な位置に掲載すれば、収益の大幅アップを見込めます。最も効果的なサイズは、336×280 のレクタングル（大）、300×250 のレクタングル（中）、728×90 のビッグバナー、そして 160×600 のワイド スカイスクレイパーです。

効果的な広告サイズ – AdSense ヘルプ

ようするに「レクタングル（中）」「レクタングル（大）」「ビッグバナー」「ワイド スカイスクレイパー」の4種類を選んで掲載するともっとも効率よく収益がでるよ！とGoogle先生が教えてくれているわけです。

ブログを書いている方々は自身のブログのデザインやブログパーツの配置に合わせておもいおもいの位置に様々なサイズの広告を配置していると思います。

ですのでブログによっては推奨の広告サイズではないサイズの広告を設置してることもあるわけですが、ここは私も人間です。
心情としてせっかく設置するのであれば収益が高いよとGoogle先生が教えてくれているサイズの広告を掲載したい。

・GoogleAdsenceポリシー

私がブログを書いているのはこの「はてなブログ」です。

パソコンとスマホでは自動で表示が切り替わってくれる優秀なブログです。また記事上に簡単に広告を掲載することもできます。
しかしここに大きな落とし穴が・・・

よく使う広告サイズに「レクタングル（中）」という300×250サイズの広告があります。が、

これです。
記事上に「レクタングル（中）」を設置している場合、記事TOPで画面の大部分が広告で占められてしまいます。

文の途中であれば問題ないようですが、記事TOP画面でこれをやらかしたらアウトです(;´Д｀)

こわーいこわーいアカウント停止処分が忍び寄ってきます・・・。

ここでその解決策としてGoogle先生はきちんと対処するために、モバイルバナーとよばれる320×50と言うサイズの広告を用意してくれているのです。
高さが50pxと低く設定されているので画面を占拠してしまう心配がない！

それじゃ、記事上にはモバイルバナーを設置すればいんだね！よっしゃぁ！！

となれば良いけれど、そうは問屋は卸さないようで・・。

・はてなブログとiPhone

このモバイルバナーにもひとつ大きな問題が、

スマートフォン横スクロールガクガク問題とは記事下に横幅の大きいバナー広告を貼るとスマートフォンやiOSアプリで読んだ時、縦にスクロールするたびに横にもガクガクしてしまって非常に読みづらくなる事です。この問題があるブログはフローリングバナーを貼っているサイトの次ぐらいに「モバイルで読むのはやめとこうかな(´・ω・｀)」って思ってしまいがちです
情報学の情緒的な私試論β

「スマートフォン横スクロールガクガク問題」と呼ばれているそうです。

はてなブログの仕様上、横幅が301px以上あると横にガクガクしちゃうそうです。
なもんで、320×50のモバイルバナーを載せちゃうと、画面から横に広告がはみだしちゃう( ﾟДﾟ)　
結果、非常に読みづらいブログになっちゃいます。

いまとなってはだいぶとスマホの大画面化が進んできているので大事ないのですが、一大巨大勢力であるiPhoneがこれに引っかかちゃうわけですよ。。

もっと小さな広告を掲載すれば問題は解消できますが、せっかくだったら大きな目立つ広告を載せたい。と思うのが人の心情というもんです。

かといって、多少のガクガクなんて気にしない！モバイルバナーでいいよ！といってもパソコンでブログを表示した際にまで小さなモバイルバナーが表示されるのはやっぱり頂けない・・・。
名前にモバイルという名がついてるくらいです。パソコンなどの大画面に適した広告ではありませぬ。。
もう八方塞がりです(;´Д｀)

・レスポンシブ広告

とそんな中で最近登場したのがGoogleAdsenceの「レスポンシブ広告」です。

表示しているデバイスの画面サイズに合わせて自動的に広告サイズを変更できるという優れものです。
これは使わない手はないっしょ！！

その設定手順は

・新しい広告ユニットを作成する

・適当な名前を入力し、広告サイズから「レスポンシブ広告ユニット（ベータ版）」を選択する。

・適宜設定が終わったら（他の項目についてわからなければ特に変更する必要はありません）、「保存してコードを取得」をクリック。

・モードを「アドバンス（コード変更が必要）」を選択します。アドバンスを選択することが重要です。

・広告のコードを編集する

ここまで完了すると以下のようなコードが出来ています。テキストエディタなどに張り付けて編集を行います。

今回編集するのはコードの先頭部分のここです

<style>
.test { width: 320px; height: 50px; }
@media(min-width: 500px) { .test { width: 468px; height: 60px; } }
@media(min-width: 800px) { .test { width: 728px; height: 90px; } }
</style>

この部分より下は何も修正することはありません。

デフォルトでは、広告サイズは横幅 320px、縦幅 50pxのサイズのものを表示するとなっています。
それ以下のコードの意味は、デバイスの横幅が 500px以上になったら広告を 468px x 60px のサイズのものに、800px 以上になったら 728px x 90px のサイズの広告を表示するようという設定になっています。

　
そこで私はこう変えました。

<style>
.my_adslot { width: 300px; height: 50px; }
@media(min-width: 330px) { .my_adslot { width: 320px; height: 100px; } }
@media(min-width: 600px) { .my_adslot { width: 336px; height: 280px; } }
</style>

中身の内容はというと上から、
基本の広告サイズは300px×50pxのサイズです。

.my_adslot { width: 300px; height: 50px; }

（修正：Googoleに設定のない広告サイズの変更はポリシー違反となるようです。本文下に修正した内容を追記しています）

これであればiPhoneでこのブログを表示した場合、表示される広告は横幅からはみ出ることが無く、またTOP画面を広告が占めることはありません。

320px以上の横幅を持つスマホやタブレットであれば、iPhoneのようなガクガク問題が起こることなく表示することが出来ます。ですので330px以上の横幅を持つデバイスに対して私は「ラージ モバイル バナー（320×100）」を表示されるように設定しました。
iPhoneとその他スマホの判定基準として330px以上を指定しているということです。

@media(min-width: 330px) { .my_adslot { width: 320px; height: 100px; } }

そしてパソコンなどの600px以上の大画面を持つデバイスに対しては「レクタングル（大）（336×280）」が表示されるように設定しました。

@media(min-width: 600px) { .my_adslot { width: 336px; height: 280px; } }

画面サイズで広告のサイズを変更することが出来ます。
みなさんのブログのデザインや設置したい広告のサイズに合わせて適宜横幅と高さを設定してあげると良いかと思います。

・推奨の広告フォーマット

これで広告の表示設定についてはひと段落したのですが、、
みなさんはGoogleAdsenceのホーム画面でこのような表示をみたことがありますか？

このスコアカードという欄があります。ここがスコアが上がったり下がったりとサイトの状況にあわせてGoogole先生が採点してくれているようです。

この中の「収益の最適化」は今回5点中4点との採点を頂いております。
今回このスクショをとった時点ではその中の項目には全て緑色のチェックが入っていますが、「推奨の広告フォーマット」がたまに黄色の！マークが付いており改善を促されることがあります。

この記事の最初にあげたGoogole先生がこれがいいよ！と推奨してくれている広告サイズに変更しましょうという案内です。

このブログのように細々とやっているのであればそれほど気にすることはないんだろうけれど、毎日うん万PVや毎月うん十万PVといったアクセスのあるブログだったら推奨サイズへ変更することは大きな収益の差となるのかもしれません。

推奨されている広告は他のサイズの広告といったい何が違うのか。
Googole先生が公式にアナウンスしているわけではないので推測ですが、ネットでちょいと調べてみると、

• 広告を出している企業が多い
• 広告への入札が多くひとつひとつの広告単価が高い
• 広告のサイズがある程度大きくクリックされる機会が多い

などといった意見が多いようです。

やはり推奨の広告を掲載しているほうが何かと得ですよってことだと思います。

私のレスポンシブ広告の設定ではiPhoneからアクセスされた際に表示される広告は300×50という中途半端なサイズを設定しているために、推奨の広告へ変更しましょうよって促されているのでしょう。

・はてなブログとiPhoneとGoogole先生

今回取り上げた「レスポンシブ広告」はデバイスの画面サイズに合わせて広告のサイズを変えることができる大変優れた広告です。

が、スマホにはたくさんの機種があってそれぞれの画面の横幅も様々とはいえ、シェアでいえばiPhoneは一大勢力ですやん。はてなブログではGoogle先生がせっかく用意してくれているモバイルバナーがデフォルトで使えないに等しいってちょっと辛くないかい？改善できないのかい？

またGoogole先生が用意してくれているスマホ（モバイル）向け広告の数そのものも少なくないかい？
いまではパソコンからのアクセスだけでなく、タブレットやスマホなどからのアクセスが無視できないくらいウェイトがある時代でっせ。もう少しモバイル向けの広告に力を入れて頂いて、モバイル向けにも推奨広告の幅を広げてくれないかい？

と、いろいろ思うところがあるわけですよ。。。

しまいには今回のように「レスポンシブ広告」を設定しているのに、iPhoneからこのブログの記事にアクセスした際に、300×50の指定はどこへやら、しれーっと300×250サイズの広告が表示されることもしばしば・・
(;´Д｀)

リロードすると300×50の広告が表示されることもありますが、気づけば300×250サイズの広告がまた表示されるという・・・
この「レスポンシブ広告」はベータ版として提供されているので、その挙動がまだ安定していないのかもしれません。。

んじゃ、初めからはてなブログなんて使わずに自分でサーバ借りてWordPressでも使いながら一から納得できるブログ始めればいいじゃん！って言われてしまうとそれまでなんですが(;´Д｀)

思うところがたくさんありつつも、とりあえず当面はこの設定で様子をみたいと思いまーす。
今回のレスポンシブ広告の設定がひとりでもお役に立てれば幸いです。

今回は以上です。
ほなまた。

（修正：2014.3.27）

昨日書いたこの記事ですが、いつもブログを通してお世話になっているマネー報道著者 (id:MoneyReport)さんから、このようなご指摘を頂きました。

設定の内、レスポンシブルのワイドとハイトを、存在しない公告サイズの設定はNGだった様な・・・。
以前グーグルアドセンスのヘルプを検索していた時に見た質問にやはり「ダメ！」と記載がありました。
https://productforums.google.com/forum/#!topic/adsense-ja/jl_bVo60qlU
【質問者】
アドセンスのバナーが自分のサイトに合わない時、バナーのサイスを変更してもよいでしょうか。
【回答】
ソースの広告コードを改変するのは、プログラムポリシー違反になります。
広告の種類を変更してサイズを変えるのは問題ありません。
多分「.my_adslot { width: 300px; height: 50px; }」の指定が上記のポリシー違反に引っ掛かります。
別の方法を検討される事をお勧めします。

これは大変です！！
Googole先生のポリシー違反にならないように記事上にレクタングル（中）を設置しないように対策していたつもりが、まったく別の形で違反を犯していました( ﾟДﾟ)

さっそく改善しなければ！！
マネー報道著者 (id:MoneyReport)さん、ほんとうにありがとうございます。

で、さっそく変更しました。

<div style='margin:0 0 0 -15px;'>
<style>
.my_adslot { width: 320px; height: 100px; }
@media(min-width: 600px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test -->
<ins class="adsbygoogle my_adslot"
style="display:inline-block"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

わかりますかね？
デフォルトの広告サイズをラージモバイルバナー320×100に変更しました。これはGoogole先生が設定している広告サイズですから、ポリシー違反は解消です！！

また、iPhoneと他のスマホの区別が必要なくなったので、画面サイズの判定は600px以上の場合の一つのみとしました。
スマホなどの画面が小さなデバイスではラージモバイルバナーを表示。
600px以上のパソコンなどのディスプレイの場合は「レクタングル（大）（336×280）」が表示されるといった具合です。

と、これでポリシー違反は解消されたのですが、ガクガク問題が復活です(;´Д｀)

ガクガク問題というよりも、なんかiPhoneで表示した記事ページが固定されずに、にゅるにゅると動いてしまうんですね。。

と、今回のことでネットをあれこれと調べまくっていたところこんな記事を発見しました。

iPhone ではみ出さないように CSS を調整

最後は CSS の調整です。iPhone で Twenty Twelve のサイトを閲覧すると、横 320px の表示領域の中で左右に 20px ずつ余白が入るので、横幅 300px の広告は収まりません。

左側の余白を 10px にすればちょうど真ん中に収まりますので、広告が入っているボックス（

）を左に 10px ずらします。
SimpleLiving

この記事は今回のはてなブログとモバイルバナーのガクガク問題を直接扱った内容ではないのですが、広告の位置をちょうど真ん中に表示されるようにずらしてあげればもしかしたらガクガク問題の解消につながるのでは？という淡い期待を抱かせてくれたので参考にさせて頂きました。

で結果、

<div style='margin:0 0 0 -15px;'>

先頭のこの部分ですね。
左に15pxほどずらしてやることでなんとなく真ん中に配置されて、しかもにゅるにゅる問題もクリアです。

どうにか改善出来てよかったです。

みなさんも知らず知らずにGoogoleのポリシー違反を犯しているかもしれませんよぉ( ﾟДﾟ)

ご注意くださーい！！

そしてご指摘いただいたマネー報道著者 (id:MoneyReport)さんありがとーございます！！