(cache) 【Google AdSense】広告の表示サイズをパソコンとスマホで使い分けて、配置も変えてみた

f:id:afrokanchan:20160316231154j:plain

今回は、私がはてなブログに使用させて頂いているGoogle AdSenseについてのお話をさせて頂きます。

先日、はてなブログテーマを新しくレスポンシブデザインの「Brooklyn」に変更しました。
これまでパソコンとスマホには別々のデザインを採用していたのですが、この変更に伴い、今まで「レクタングル(中)300×250」のみしか使用していなかったものを、試験的にレスポンシブタイプも導入してみることにしました。

そう易々と収益があげられるとは思っておりませんが、広告もブログデザインの一部ということでとりあえずやってみようかと。
ブログに馴染むように、また、記事を読む際の邪魔にならないようにバランスを保ちつつ、表示サイズの使い分けと配置の調整を行っていきたいと思います。

www.toritemi.com

変更前のGoogle AdSense広告表示サイズと配置場所(PC)

f:id:afrokanchan:20160316114907j:plain

まずは、私が以前までGoogle AdSense広告を配置していた場所と表示サイズについてです。

記事内にある広告は全部で3つ。というか、広告ユニットは3つまでしか置けません。

右側サイドバーの一番上に1つ

記事下に2つ横並び

サイズは全て「レクタングル(中)300×250」を使用していました。

基本的にアドセンスを横並べに2つ表示する場合はレクタングル広告(正方形に近い長方形)を並べるので、ダブルレクタングルと呼ばれていたりもします。
ダブルレクタングルは収益アップにもかなり効果的な配置になるので、非常におすすめなアドセン配置の1つになっています。

以下のサイト様から一部を引用させていただきました。

「Brooklyn」にする前のスマホデザインではレスポンシブ広告を使用

f:id:afrokanchan:20160316115240j:plain

ちなみに、レスポンシブWebデザインテーマ「Brooklyn」に変更する前のスマホデザインには、レスポンシブタイプの広告を設置していました。
サイドバーに「レクタングル(中)300×250」を表示する代わりに、トップやカテゴリーを含む一覧のヘッダー下に表示させておりました。

その際は、こちらの記事を参考にさせて頂きました。

画像内の広告が縦に並んでいる箇所に「本当はダメ。」と表記がありますが、これについては次の項目で説明していきたいと思います。

Google AdSenseの規約違反に注意

コンテンツ向けアドセンスのユニットは、パソコン版・スマホ版のウェブサイトは1 ページに３つまで
ハイエンド携帯端末は３つ、モバイルのコンテンツ向けは１つ
1つの表示可能なページ（1 ビュー）に表示できるモバイルコンテンツ向け AdSense の広告ユニットは 1 つのみ

クリックを誘導する文言を書いたりしても駄目

もちろん、自分でクリックしたり、その他ソフトを使っても禁止

コンテンツと区別がつかない配置や配色などもやっちゃ(みたい）

検索ユニットは1ページに２つ

リンクユニットも３つまで

こちらの記事から引用させて頂きました。

はい。私は特に何も考えずに広告を2つ並べて使っていましたが、これスマホだと規約違反みたいです。

「1ビューに表示できるモバイルコンテンツ向けAdSenseの広告ユニットは1つのみ」となっていますね。
つまり、表示可能な1ページに広告ユニットは2つあってはいけないのです。Oh……。

レスポンシブデザインWebテーマに変更後、広告表示サイズ＆配置場所を調整

f:id:afrokanchan:20160316123509j:plain

そして、こちらがレスポンシブデザインテーマに変更後、広告位置を調整したもの。

サイドバーの一番上にレスポンシブタイプが1つ

記事上にレスポンシブタイプが1つ

記事下にレスポンシブタイプが1つ

レスポンシブデザインWebテーマでは、パソコン＆スマホでの広告表示を同時に考える必要がある

変更点

記事下に横2つ並んでいたもののうち1つが記事上に移動
3つ全ての広告サイズをレスポンシブタイプに変更

これでスマホ側でも広告が適度に表示され、ブログ全体のバランスを崩さずに表示させることができました。

ちなみに、Googleが推奨する広告の配置がこちら。
全て英語で解説されておりますが、フィーリングでおおよそ理解できるかと思います。

www.youtube.com

パソコンとスマホでそれぞれ違うサイズの広告を表示させる

パソコンとスマホ、それぞれに合った広告の表示サイズを考えてみました。

アドセンス的には「大きければ大きいほどジャスティス」なのでしょうが、私はどちらかというと「デザインの美しさ」を優先気味に調整。

実践したレイアウト方法

記事上

パソコン表示：728×90のビッグバナーサイズ
スマホ表示：320×100のバナーサイズ

サイドバー

パソコン表示：336×280のレクタングル(大)サイズ
スマホ表示：300×250のレクタングル(中)サイズ

記事下

パソコン表示：336×280のレクタングル(大)サイズ
スマホ表示：300×250のレクタングル(中)サイズ

アドセンス広告をそれぞれの媒体で最適化してくれるようにCSSを編集していきます。以下のサイトを参考にさせて頂きました。

実際に私が手直ししたコードがこちら

<p style="text-align: center; font-size: 70%;">スポンサーリンク</p>
<style>

.ad-unit-name { width: 320px; height: 100px; }
/ @media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } } /
@media(min-width: 800px) { .ad-unit-name { width: 780px; height: 90px; } }
</style>

<div class="ad-unit-name">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="0987654321"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>