【AdSense】レスポンシブ広告を使ってPCとスマホで別サイズの広告を出す！

丁度1年前くらいまではまだまだPCからのアクセスが多かったですが、スマホ出荷台数の爆発的増加に伴って最近はスマホからのアクセスの方が多くなって来ているサイト・ブログは増加していると思います。

このブログも今年の8月くらいにPCとスマホの比率が逆転して、スマホからのアクセスのほうが多くなりました。美容系やファッション系のサイトだとアクセスの8割がスマホというサイトも珍しく有りません。

そうなってくると問題になってくるのがスマホからのアクセスをどうやって収益に変えていくか？ですよね。そこで今回は僕も最近導入したGoogle AdSenseのレスポンシブ広告について紹介したいと思います。

レスポンシブ広告の基本

レスポンシブ広告の基本については僕の説明を見るのではなく公式のヘルプを御覧ください。

レスポンシブ広告ユニットについて-AdSenseヘルプ

ヘルプを見たらAdSense公式ブログ「InsideAdSense」の記事も見ておきましょう。

Inside AdSense : レスポンシブ ウェブデザイン に対応した新しい 広告ユニット

上記公式ブログの中では以下のように書かれています。

レスポンシブ広告ユニットの特徴は大きく 2 つあります。

・レスポンシブウェブデザインを導入したウェブページ上で連動させ、様々なデバイスに対応することができます。
・配信される広告のサイズを動的に指定できるため、デバイスに応じてページを読み込む際に、広告もそれに合わせて表示させることができます。

上記引用枠の中にも書いていますが、デバイスのサイズに合わせて最適な広告サイズを出稿できる！というのがレスポンシブ広告の最大の特徴です。最近はWordPressのテンプレートでもレスポンシブ対応のテンプレートが増えてきたので労せずしてスマホに最適化した状態でブログ運用が出来るようになりました。

しかし、レスポンシブデザインはPC・スマホ共にhtmlが共通化されているので、PCとスマホで同じサイズの広告を出稿せざるを得なかったんです。もちろんPHPの知識がある人は条件分岐関数等を使ってPCとスマホで出す広告を分ける事は出来るのですが、正直素人には難しい。

そこで、php等の小難しいことがわからない人でもデバイスのサイズ別に適切な広告が出せるようにとGoogleが開発してくれた広告がレスポンシブ広告です。

補足-なぜPCとスマホで同じ広告サイズを出すと問題になるか？

PC版とスマホ版で同じ広告サイズを出してもいいんじゃない？と思われる方もいると思うので補足。なぜ、僕がこれを問題視しているかと言うと、スマホでレクタングル大をそのまま出すとポリシー違反になるからです。

AdSenseは絶対的に広告サイズが大きいほうがクリックされるので、大きなサイズを貼った方が収益は伸びます。「300×250のレクタングル中」を貼るよりも、「336×280のレクタングル大」を貼った方が収益が伸びるということですね。この辺りに関しては異論はあまり出ないと思います。

であれば、収益が伸びやすい「336×280レクタングル大」を使いたくなるのが人間の心情ってもんでしょう。

しかし、レスポンシブデザインでそのまま「336×280レクタングル大」を使うとスマホの広告サイズに関するAdSenseポリシーに違反してしまうんです。

参考：使用できるモバイル広告のサイズ-AdSenseヘルプ

上記ヘルプではスマホ等のハイエンド携帯端末向けデバイスに使えるモバイル広告を以下の5種類に限定しています。

そして、これを簡単に解決してくれるのが「レスポンシブ広告！」というわけですね。レスポンシブ広告を適切に設定すればスマホにレクタングル大のサイズを出稿してもポリシー違反にはならないんですよ！（これはGoogleの中の人も言ってますのでまず間違いないかと思います）

僕がレスポンシブ広告をお勧めする理由

僕がレスポンシブ広告をお勧めする一番の理由は、php等の小難しい言語を知らない人でも簡単に設定できる事。これがまぁ一番ですね。

更に、その上でレスポンシブ広告を設定することが収益の最大化に繋がりやすいというのが2点目。

なぜなら、「Google ウェブマスター オフィスアワー 2014年10月23日のまとめ。」でも書いてますが、最近のスマホは画面のサイズが非常に大きくなってきていますよね！特にアンドロイド端末はメチャクチャでかくなってきてます。

そうするとスマホに対して、とおり一辺倒にレクタングル中を出すよりもスマホのサイズに合わせてレクタングル大のサイズも出したほうがほぼ確実に収益の最大化が出来るわけです。本来的にはスマホにレクタングル大を出すとポリシー違反になりますが、レスポンシブ広告ならレクタングル大での出稿も可能ですからね。

レスポンシブ広告の設定方法

AdSense管理画面から「広告の設定」⇒「新しい広告ユニット」をクリックして下さい。

そこで、広告サイズは「レスポンシブ」を選びます。

広告タイプやカスタムチャネルなどはお好きなように設定して頂いて、ページ下部の「保存してコードを取得」をクリック。

すると、ブログに貼り付けるタグが出てきます。ここは要注意です。

・スマートサイズ(推奨）
・アドバンス(コード変更が必要)

上記どちらかを選ぶポップアップが出てくるので、ここでは「アドバンス(コード変更が必要)」の方を選んで下さい。こちらを選ばないと自分で自由にサイズ設定が出来ません。

レスポンシブ広告タグを改変する

アドバンス(コード変更が必要)を選ぶと以下の様な広告コードが出てくるかと思います。

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サンプル -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- サンプル -->

①.my_adslot { width: 320px; height: 50px; }
②@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
③@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }

①が基本の広告コードで②及び③に該当するデバイスサイズ以外では「320×50」の広告サイズを出しますよという意味。

②デバイスのサイズが500pxを超えると「468×60」の広告サイズを出しますよという意味。

③デバイスのサイズが800pxを超えると「728×90」の広告サイズを出しますよという意味。

このようにレスポンシブ広告では基本的な広告サイズを設定した上で、デバイスのサイズがこれを超えるとこちらの広告サイズに切り替える。という設定が出来るわけです。

私はここを以下のように変えています。

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

つまり、340px以上の横幅を持つスマホやタブレットには「336×280」の広告サイズを出して、それより小さい場合には「300×250」を出しますよ～という設定ですね。

一応出来上がりの広告タグも貼っつけておきます。

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サンプル -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これによって従来私のブログをスマホで見た場合、記事下では「300×250レクタングル中」が表示されていましたが、デバイスのサイズによっては「336×280レクタングル大」が出る表示設定に代わりました。実機で見るとこんな感じです。

①「300×250レクタングル中」表示

②「336×280レクタングル大」表示

明らかに画面に占める割合が大きくなったことが分かりますね。あんまりphpとか詳しくないけどAdSenseの収益あげたいなーと考えている人は是非お試し下さい！

当ブログの広告配置の考え方については下記記事を参照頂ければと思います！

Google AdSenseの広告ユニット配置換えで収益が2倍以上になった話