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

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

先日、はてなブログテーマを新しくレスポンシブデザインの「Brooklyn」に変更しました。

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

そう易々と収益があげられるとは思っておりませんが、広告もブログデザインの一部ということでとりあえずやってみようかと。

ブログに馴染むように、また、記事を読む際の邪魔にならないようにバランスを保ちつつ、表示サイズの使い分けと配置の調整を行っていきたいと思いますよ。

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

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

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

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

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

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

ちなみに、レスポンシブWebデザインテーマ「Brooklyn」に変更する前のスマホデザインには、レスポンシブタイプの広告を設置していました。

サイドバーに「レクタングル(中)300×250」を表示する代わりに、トップやカテゴリーを含む一覧のヘッダー下に表示してたわけです。

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

Google AdSenseの規約違反に注意

広告上限については2016年8月から撤廃されました。

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

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

つまり、表示可能な1ページに広告ユニットは2つあってはいけないのです。Oh……。

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

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

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

変更点

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

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

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

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

実践したレイアウト方法

記事上

サイドバー

記事下

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

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

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

例として、記事上のレスポンシブタイプのものを挙げてみます。

スマホでは320×100のバナータイプを表示させ、パソコンでは780×90のビッグバナータイプを表示するように指定してあげるだけです。

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

あと、見栄えが良いようにアドセンス広告をセンターに配置しています。

本当にやりたかったこと

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

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

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

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

記事上

サイドバー

記事下

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

まとめと余談

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

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

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

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

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

これが果たして"Google AdSenseの規約違反"なのかは不明ですが、どちらにせよあまりよろしくないことだと思います。

そもそも、このSNSシェアボタンの位置に意味があるのかさえ不明ですが……。

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

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

• ブログのアドセンス収益を1.3倍アップさせる方法。広告サイズとスマホを意識した配置がポイント！
• クリック率を劇的に上げるアドセンス広告の配置【ＰＣ/スマホ】