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

スポンサーリンク

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

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

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

【カスタマイズ記事】はてなブログのデザインテーマをレスポンシブ対応の「Brooklyn」に変えてみた

2016.03.06

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

f:id:afrokanchan:20160316114907j:plain

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

記事内にある広告は全部で3つ。というか、広告ユニットは3つまでしか置けません。※追記:2016年8月から広告上限が撤廃されました。

  • 右側サイドバーの一番上に1つ
  • 記事下に2つ横並び

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

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

アドセンスを横に2つ並べて表示する方法。ダブルレクタングルで収益アップだ! | にゅーすばんく様から一部を引用させていただきました。

はてなブログのレスポンシブデザインをやめたのでアドセンス広告の配置を見直してみた

2016.09.19

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

f:id:afrokanchan:20160316115240j:plain

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

はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン – 太陽がまぶしかったから 様を参考にさせて頂きました。

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

Google AdSenseの規約違反に注意

  • コンテンツ向けアドセンスのユニットは、パソコン版・スマホ版のウェブサイトは1 ページに3つまで
    ハイエンド携帯端末は3つ、モバイルのコンテンツ向けは1つ
    1つの表示可能なページ(1 ビュー)に表示できるモバイル コンテンツ向け AdSense の広告ユニットは 1 つのみ
  • クリックを誘導する文言を書いたりしても駄目
  • もちろん、自分でクリックしたり、その他ソフトを使っても禁止
  • コンテンツと区別がつかない配置や配色などもやっちゃ(みたい)
  • 検索ユニットは1ページに2つ
  • リンクユニットも3つまで

グーグルアドセンス規約まとめ!違反しないようにレスポンシブデザインに貼りましょう | 笑来

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

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

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

f:id:afrokanchan:20160316123509j:plain

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

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

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

変更点

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

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

 

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

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

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

実践したレイアウト方法

記事上

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

サイドバー

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

記事下

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

アドセンス広告をそれぞれの媒体で最適化してくれるようにCSSを編集していきます。

Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化 – はぴらき合理化幻想 様を参考にさせて頂きました。

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

<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>
<!– ad-unit-name –>
<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>

デフォルトの状態をスマホベースに考えていきます。

例として、記事上のレスポンシブタイプのものを挙げてみます。
スマホでは320×100のバナータイプを表示させ、パソコンでは780×90のビッグバナータイプを表示するように指定してあげるだけです。

アドセンス広告をセンタリング

あと、見栄えが良いようにアドセンス広告をセンターに配置しています。ゆきひーさんの記事を参考にさせて頂きました。

Googleアドセンス記事中央にセンタリングする方法|はてなブログカスタマイズ – Yukihy Life

本当にやりたかったこと

本当はレスポンシブWebデザインテーマを使用したまま、パソコンとスマホの広告配置を変えたかったのですが、はてなブログではそれができないようです。

いろいろ調べてみたものの、それらしい情報を見つけることができませんでした。もし、何か良い方法があれば教えていただけると幸いです。

WordPressの場合はphpをいじることでそれが可能みたいですね。

ちなみに、これが本来の理想でした。

f:id:afrokanchan:20160316225942j:plain

記事上

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

サイドバー

  • スマホ表示:300×250のレクタングル(中)サイズ

記事下

  • パソコン表示:336×280のレクタングル(大)サイズを2つ(ダブルレクタングル)
  • スマホ表示:300×250のレクタングル(中)サイズ

パソコンとスマホで別々のデザインを作成すれば解決する話なんですが……。

まとめと余談

ということで、以前よりも広告配置がバラけるように設定してみました。

トライ&エラーの繰り返しで行っているため、あくまで参考程度、自己責任でよろしくお願い致します。間違いや修正点などございましたらお知らせください。

正直、この処置が収益にどう関わってくるのかは今のところ不明ですが、「ジュースが1本多く買える」程度の効果があれば嬉しいですよねー。

スマホでのファーストビューについて

f:id:afrokanchan:20160316233048j:plain

現段階のままだと、記事上にグローバルメニューがあるせいでファーストビューで本文が見えておりません……。

これが果たして”Google AdSenseの規約違反”なのかは不明ですが、どちらにせよあまりよろしくないことだと思います。
そもそも、このSNSシェアボタンの位置に意味があるのかさえ不明ですが……。

早いうちに修正を検討してみたいと思います。

参考にさせて頂いたサイト様

関連記事

スポンサーリンク