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

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の広告ユニットを個別にする方法

miyamoです。 日刊すあろぐ！ではWordPressのテーマとして、Simplicityを使っています。 Simpl...

sualog.com

2015-04-12 21:00

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

レイアウトの関係で、使える広告ユニットは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でした。