今回は僕がはてなブログに使用させて頂いているGoogle AdSenseについてのお話をさせて頂きます。
先日、はてなブログテーマを新しくレスポンシブデザインの「Brooklyn」に変更しました。
これまでパソコンとスマホには別々のデザインを採用していたのですが、この変更に伴い、いままで「レクタングル(中)300×250」のみしか使用していなかったものを、試験的にレスポンシブタイプも導入してみることにしました。
そう易々と収益があげられるとは思っておりませんが、広告もブログデザインの一部ということでとりあえずやってみようかと。
ブログに馴染むように、また、記事を読む際の邪魔にならないようにバランスを保ちつつ、表示サイズの使い分けと配置の調整を行っていきたいと思いますよ。
変更前のGoogle AdSense広告表示サイズと配置場所(PC)
まずは、僕が以前までGoogle AdSense広告を配置していた場所と表示サイズについてです。
記事内にある広告は全部で3つ。というか、広告ユニットは3つまでしか置けません。※追記：2016年8月から広告上限が撤廃されました。
- 右側サイドバーの一番上に1つ
- 記事下に2つ横並び
サイズは全て「レクタングル(中)300×250」を使用していました。
基本的にアドセンスを横並べに2つ表示する場合はレクタングル広告(正方形に近い長方形)を並べるので、ダブルレクタングルと呼ばれていたりもします。
ダブルレクタングルは収益アップにもかなり効果的な配置になるので、非常におすすめなアドセン配置の1つになっています。
「Brooklyn」にする前のスマホデザインではレスポンシブ広告を使用
ちなみに、レスポンシブWebデザインテーマ「Brooklyn」に変更する前のスマホデザインには、レスポンシブタイプの広告を設置していました。
サイドバーに「レクタングル(中)300×250」を表示する代わりに、トップやカテゴリーを含む一覧のヘッダー下に表示してたわけです。
画像内の広告が縦に並んでいる箇所に「本当はダメ。」と表記がありますが、これについては次の項目で説明していきたいと思います。
Google AdSenseの規約違反に注意
- コンテンツ向けアドセンスのユニットは、パソコン版・スマホ版のウェブサイトは1 ページに３つまで
ハイエンド携帯端末は３つ、モバイルのコンテンツ向けは１つ
1つの表示可能なページ（1 ビュー）に表示できるモバイル コンテンツ向け AdSense の広告ユニットは 1 つのみ - クリックを誘導する文言を書いたりしても駄目
- もちろん、自分でクリックしたり、その他ソフトを使っても禁止
- コンテンツと区別がつかない配置や配色などもやっちゃ(みたい）
- 検索ユニットは1ページに２つ
- リンクユニットも３つまで
広告上限については2016年8月から撤廃されました。
はい。僕は特に何も考えずに広告を2つ並べて使っていましたが、これスマホだと規約違反みたいです。
「1ビューに表示できるモバイルコンテンツ向けAdSenseの広告ユニットは1つのみ」となっていますね。
つまり、表示可能な1ページに広告ユニットは2つあってはいけないのです。Oh……。
レスポンシブデザインWebテーマに変更後、広告表示サイズ＆配置場所を調整
そして、こちらがレスポンシブデザインテーマに変更後、広告位置を調整したもの。
- サイドバーの一番上にレスポンシブタイプが1つ
- 記事上にレスポンシブタイプが1つ
- 記事下にレスポンシブタイプが1つ
レスポンシブデザインWebテーマでは、パソコン＆スマホでの広告表示を同時に考える必要がある
変更点
- 記事下に横2つ並んでいたもののうち1つが記事上に移動
- 3つ全ての広告サイズをレスポンシブタイプに変更
これでスマホ側でも広告が適度に表示され、ブログ全体のバランスを崩さずに表示させることができました。
パソコンとスマホでそれぞれ違うサイズの広告を表示させる
パソコンとスマホ、それぞれに合った広告の表示サイズを考えてみました。
アドセンス的には「大きければ大きいほどジャスティス」なのでしょうが、僕はどちらかというと「デザインの美しさ」を優先気味に調整。
実践したレイアウト方法
記事上
- パソコン表示：728×90のビッグバナーサイズ
- スマホ表示：320×100のバナーサイズ
サイドバー
- パソコン表示：336×280のレクタングル(大)サイズ
- スマホ表示：300×250のレクタングル(中)サイズ
記事下
- パソコン表示：336×280のレクタングル(大)サイズ
- スマホ表示：300×250のレクタングル(中)サイズ
アドセンス広告をそれぞれの媒体で最適化してくれるようにCSSを編集していきます。
実際に僕が手直ししたコードがこちら
デフォルトの状態をスマホベースに考えていきます。
例として、記事上のレスポンシブタイプのものを挙げてみます。
スマホでは320×100のバナータイプを表示させ、パソコンでは780×90のビッグバナータイプを表示するように指定してあげるだけです。
アドセンス広告をセンタリング
あと、見栄えが良いようにアドセンス広告をセンターに配置しています。
本当にやりたかったこと
本当はレスポンシブWebデザインテーマを使用したまま、パソコンとスマホの広告配置を変えたかったのですが、はてなブログではそれができないようです。
いろいろ調べてみたものの、それらしい情報を見つけることができませんでした。もし、なにか良い方法があれば教えていただけると幸いです。
WordPressの場合はphpをいじることでそれが可能みたいですね。
ちなみに、これが本来の理想でした。
記事上
- パソコン表示：728×90のビッグバナーサイズ
- スマホ表示：320×100のバナーサイズ
サイドバー
- スマホ表示：300×250のレクタングル(中)サイズ
記事下
- パソコン表示：336×280のレクタングル(大)サイズを2つ(ダブルレクタングル)
- スマホ表示：300×250のレクタングル(中)サイズ
パソコンとスマホで別々のデザインを作成すれば解決する話なんですが……。
まとめと余談
ということで、以前よりも広告配置がバラけるように設定してみました。
トライ＆エラーの繰り返しで行っているため、あくまで参考程度、自己責任でよろしくお願い致します。間違いや修正点などございましたらお知らせください。
正直、この処置が収益にどう関わってくるのかは今のところ不明ですが、「ジュースが1本多く買える」程度の効果があれば嬉しいですよねー。
スマホでのファーストビューについて
現段階のままだと、記事上にグローバルメニューがあるせいでファーストビューで本文が見えておりません……。
これが果たして"Google AdSenseの規約違反"なのかは不明ですが、どちらにせよあまりよろしくないことだと思います。
そもそも、このSNSシェアボタンの位置に意味があるのかさえ不明ですが……。
早いうちに修正を検討してみたいと思います。
あわせて読みたい
雑記ブログで月30万円を稼ぐまでに読んだおすすめの本と習慣を紹介
雑記ブログでも月間収益10万円。稼ぐまでにやったこと＆コツとか
【Google AdSense】はてなブログで記事中・文中の2箇所にアドセンス広告を自動的に挿入してみた