スマホ向けアドセンスにレスポンシブ広告をおすすめする理由

miyamoです。

SimplicityはGoogle Adsenseの広告設定が簡単にできるようになっています。

PC向けに推奨されているのは、レクタングル(大)336×280です。ダブルレクタングルもはじめから設定されています。

スマホ向けの推奨は、レクタングル(中)300×250の広告です。僕も、推奨にしたがって、スマホ向けの広告は300×250で設定をしていました。

なぜスマホ向けの広告として300×250が推奨されているのかを考えると、たぶんiPhoneのブラウザの解像度が横320px(ピクセル)だからじゃないかと思います。

あるきっかけでブラウザの解像度を調べることがあり、スマホによって横の解像度が違うことがわかりました。

ということは、推奨のとおりに300×250のまま設定していると、スマホの機種によってはもったいないことになっているのです。

それはなぜでしょうか?答えはこの続きで。

それでは、いってみよー。

スポンサーリンク

スマホのブラウザの解像度を見てみる

スマホの解像度の区分として、iPhone 5Sまで、iPhone 6、iPhone 6 Plus、Android系と大きく分けることができます。

Simplicityのスマホ向けデザインには

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

と、width=device-widthが設定されていますので、ブラウザの横幅の解像度は次のようになります。

種類 横幅
iPhone 5Sまで 320px
iPhone 6 375px
iPhone 6 Plus 414px
Android系 360px

ということは、iPhone 5SまでのiPhone以外は、レクタングル(大)336×280が使えることになります。

最近のスマホに最適化するならレスポンシブがおすすめ

ここまでの話で、レクタングル(大)を設定するのは、ちょっと待って下さい。設定してしまうと、iPhone 5SまでのiPhoneで横幅が足りず、広告が切れてしまうことになります。

僕のおすすめは、レスポンシブ広告にすることです。

レスポンシブ広告にしておくと、ブラウザの解像度にあわせて、最適な広告が表示されるようになります。

Adsenseの広告設定で、広告のサイズをレスポンシブとして作成してください。

おまけ:Simplicityでスマホ向け広告ユニットを2つ使う方法

Simplicityはウィジェットに広告を設定します。スマホ向け広告には、「広告 300×250」のウィジェットが1つ用意されています。

前回の記事で、PC向けの広告ユニットを使い分ける方法をお伝えしました。

SimplicityでAdsenseの広告ユニットを個別にする方法
SimplicityでAdsenseの広告ユニットを個別にする方法
miyamoです。 日刊すあろぐ!ではWordPressのテーマとして、Simplicityを使っています。 Simpl...

今回は、スマホ向けに広告ユニットを使い分ける方法です。簡単に説明しますので、詳しくはこちらの記事を参照してください。

レイアウトの関係で、使える広告ユニットは2つまでです。

function.phpへのコード追加

function.phpに以下のコードを追加します。

register_sidebars(1,
  array(
  'name'=>'広告 300x250-2',
  'id' => 'adsense-300-2',
  'description' => '300×250pxの広告を入力してください。',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<div class="widget-ad">',
  'after_title' => '</div>',
));

これで、「広告 300×250-2」というウィジェットができあがります。このウィジェットに広告ユニットのコードを設定してください。

ad-article-footer.phpの修正

続いて、追加したウィジェットを使うようにします。前回と同じようにad-article-footer.phpを修正します。

  <?php else: //レスポンシブじゃない時?>
    <?php if (is_mobile()): //スマートフォンの場合?>
      <?php if ( is_active_sidebar( 'adsense-300' ) ) :  ?>
         <div class="ad-article-bottom ad-space">
          <div class="ad-label"><?php echo get_ads_label() ?></div>
          <div class="ad-mobile adsense-300"><?php dynamic_sidebar('adsense-300');?></div>
        </div>
      <?php endif; ?>

ad-article-footer.phpから、この部分を探してください。抜粋した上のコードの6行目を修正します。

変更前
<?php dynamic_sidebar(‘adsense-300’);?>

変更後
<?php dynamic_sidebar(‘adsense-300-2‘);?>

このように修正することで、追加したウィジェットが使われるようになります。

修正後の広告につわかれるウィジェット

スマホで使われる広告ウィジェットはこのようになります。

  • 1つ目のh2タグ前:広告 300×250
  • 本文下:広告 300×250-2
  • 関連記事下:広告 300×250

PCは3つ全てに別々の広告ユニットを使えましたが、スマホでは2つまでとなります。h2タグ前と関連記事下が同じとなってしまいます。

これらを分けようと思うと、他のphpファイルを修正しなければならないので、今回の修正までとしました。

まとめ

iPhone 6などの横幅が大きいスマホでは、より大きな広告が表示されるようになります。これで収益が増えるか・・・はわかりません。だって、まだほとんどクリックないのでA/Bテストできないんです(泣)

おしまい。miyamoでした。

スポンサーリンク

この記事がおもしろかったらシェアしてもらえると嬉しいです。

Twitterでのフォローお待ちしています。

コメント

  1. M.K より:

    「Simplicityでスマホ向け広告ユニットを2つ使う方法」は大変参考になりました。
    スマホ向け広告ユニットを3つに出来れば完璧なんですが、やはり難しいんですね。

    と言うのも私はnendの広告を利用していて、nendはアドセンスみたいに「1つのコードで複数表示」ということができないのです。

    どちらにしても、参考になりました。ありがとうございます。

    • miyamo より:

      M.Kさんコメントありがとうございます。

      お役にたてたみたいでよかったです。
      スマホ向けは、1つ目と3つ目の広告に同じPHPのコードが使われているので、大きく修正しないといけないので、今回はあきらめました。