AdMob バナー広告のサイズ7種を実機で比較｜React Native

この記事は 2023 年 10 月時点の記録です（2026 年 7 月追記）

この記事の中心はバナーサイズ 7 種類の見え方の比較です。スクリーンショットは当時の実機のものですが、各サイズの寸法と見え方の関係は今も変わりません。導入・初期設定の手順については、より新しいAdMob バナー広告を実装する方法の記事をご覧ください。

サイズ選びに関わる変更点を 5 点にまとめます。

1. 現在の基本はアダプティブバナーです

Google はアダプティブバナーを最新世代の推奨フォーマットと位置づけています。固定サイズ（BANNER・LARGE_BANNER・MEDIUM_RECTANGLE など）は現在、公式ドキュメント上で「アダプティブバナーでは要件を満たせない場合の代替手段」という扱いです。迷ったらアンカードアダプティブを選ぶ、というのが現在の基本方針になります。

アンカードアダプティブの高さは、150dp（iOS では 150pt）か、その向きでの画面高さの 20% か、小さいほうが上限です。画面を占領しすぎない設計になっています。

2. 折りたたみバナー（コラプシブル）が追加されました

アンカードアダプティブバナーにパラメータを追加すると、コラプシブルバナーになります。最初は大きめのオーバーレイとして表示し、ユーザーが標準サイズに折りたためる形式です。広告主のメッセージを伝える面積が増えるため、視認性とクリック率の向上が見込めるとされています。本文の 7 種類には含まれていない選択肢です。

3. コンテナが小さいと広告は「表示されません」

本文では画面幅に応じて BANNER と FULL_BANNER を出し分けていますが、この分岐で気をつける点があります。広告を置くコンテナのサイズが、指定したバナーサイズより小さいと、広告は縮小されずに表示そのものが行われません。次のような警告がログに出ます。
W/Ads: Not enough space to show ad. Needs 320x50 dp, but only has 288x495 dp.
パディングを入れるとその分コンテナは小さくなります。「広告が出ない」と悩んだときは、まずここを確認してください。この点も、幅を意識しなくてよいアダプティブが有利な理由です。

4. setRequestConfiguration の 2 行はコピーしないでください

本文の tagForChildDirectedTreatment と tagForUnderAgeOfConsent は、現在どちらも非推奨になり、ageRestrictedTreatment に置き換わりました。加えて Google のドキュメントでは、この 2 つを同時に true にしてはいけないとされています。子ども向けではない一般のアプリでそのまま設定すると、パーソナライズ広告が配信されなくなります。詳細はこちらの記事の追記にまとめています。

あわせて、本文の requestOptions にある requestNonPersonalizedAdsOnly: true は、パーソナライズされていない広告のみを要求する指定です。同意を得たユーザーにも一律で適用されるため、本番環境で意図した設定かどうかご確認ください。

5. ライブラリのバージョンと EEA 対応

本文は react-native-google-mobile-ads 12.3.0 時点の記録です。2026 年 7 月時点の最新は 16 系で、途中に破壊的変更が入っています。また 2024 年 1 月 16 日以降、EEA および英国のユーザーに広告を配信するには Google 認定の同意管理プラットフォーム（CMP）が必要になりました。いずれも導入時の話なので、詳細は上記の記事をご参照ください。

参考: バナーサイズの選び方

どのバナーサイズを選ぶかについては、バナー広告のサイズ7種を実機で比較した記事にスクリーンショット付きでまとめています。あわせてご覧ください。

※ 上記は 2026 年 7 月時点の公式ドキュメント（Google・invertase）に基づく整理であり、当方の環境での再検証は行っていません。実装時は必ず公式ドキュメントで最新をご確認ください。

React Native Firebase のパッケージから独立された react-native-google-mobile-ads を使います。

パッケージをインストールする
iOS 静的フレームワークを構成する
Google AdMob コンソールでアプリを追加する
ビルトする
アウトバウンドリクエストを構成する
SKAdNetwork でコンバージョンを追跡できるようにする (iOS)
アプリ追跡の透明性 (iOS)を設定する
テスト広告でテストする
バナー別のサイズ・見え方
設定をまとめる
1. 初期ファイル：app/_layout.tsx
2. タブ初期ファイル：app/(tabs)/index.tsx

パッケージをインストールする

開発環境は既に @react-native-firebase/app: 18.5.0 バージョンが設定されていることを前提とします。(詳細)

try🐶everything myproject$ yarn add react-native-google-mobile-ads
...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ react-native-google-mobile-ads@12.3.0
info All dependencies
├─ @iabtcf/core@1.5.6
├─ dequal@2.0.3
├─ react-native-google-mobile-ads@12.3.0
└─ use-deep-compare-effect@1.8.1
✨  Done in 4.43s.
try🐶everything myproject$

iOS 静的フレームワークを構成する

react-native-firebase v15+ 以降と組み合わせて使用する場合は、use_frameworks! 設定が必要になります。( 詳細 )

use_frameworks! :linkage => :static と $RNGoogleMobileAdsAsStaticFramework = true を ios/Podfile に追加します。(⬇︎)

Google AdMob コンソールでアプリを追加する

Google AdMob のアカウント& Andoid / iOS アプリを作成後 app.json に アプリ ID を追加します。( android_app_id & ios_app_id )

アプリ ID の取得方法は⬇︎の通りです。

google-mobile-ads-02 — Google Admob > アプリ > アプリを選択 >

google-mobile-ads-03 — アプリの設定 > アプリIDのコピーアイコンをクリック

※ app.json に有効な アプリ ID を指定せずにアプリをビルドしようとすると、アプリが起動時にクラッシュするか、ビルドに失敗することがあるので注意が必要です！

⬆︎でコピーした各 アプリID を下記のように app.json に追加します。

// myapp/app.json

...
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

ビルトする

# For iOS
npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

アウトバウンドリクエストを構成する

import mobileAds, { MaxAdContentRating } from 'react-native-google-mobile-ads';

mobileAds()
  .setRequestConfiguration({
    // Update all future requests suitable for parental guidance
    maxAdContentRating: MaxAdContentRating.PG,

    // Indicates that you want your content treated as child-directed for purposes of COPPA.
    tagForChildDirectedTreatment: true,

    // Indicates that you want the ad request to be handled in a
    // manner suitable for users under the age of consent.
    tagForUnderAgeOfConsent: true,

    // An array of test device IDs to allow.
    testDeviceIdentifiers: ['EMULATOR'],
  })
  .then(() => {
    // Request config successfully set!
  });

SKAdNetwork でコンバージョンを追跡できるようにする (iOS)

Google Mobile Ads SDK は、Apple の SKAdNetwork を使用したコンバージョントラッキングをサポートしています。これにより、Google および参加するサードパーティ購入者は、IDFA が利用できない場合でもアプリのインストールを関連付けることができます。プロジェクトの app.json ファイル内に、推奨される SKAdNetwork 識別子を追加します。

{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "sk_ad_network_items": [
      "cstr6suwn9.skadnetwork",
      "4fzdc2evr5.skadnetwork",
      "4pfyvq9l8r.skadnetwork",
      "2fnua5tdw4.skadnetwork",
      "ydx93a7ass.skadnetwork",
      "5a6flpkh64.skadnetwork",
      "p78axxw29g.skadnetwork",
      "v72qych5uu.skadnetwork",
      "ludvb6z3bs.skadnetwork",
      "cp8zw746q7.skadnetwork",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "3qy4746246.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "f38h382jlk.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "t38b2kh725.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "9rd848q2bz.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "n6fk4nfna4.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "av6w8kgt66.skadnetwork",
      "klf5c3l5u5.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "424m5254lk.skadnetwork",
      "ecpz2srf59.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "zq492l623r.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "3qcr597p9d.skadnetwork"
    ]
  }
}

アプリ追跡の透明性 (iOS)を設定する

Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。プロジェクトの app.json ファイル内で、 user_tracking_usage_description を使用して使用方法を説明する必要があります。

{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
  }
}

App Tracking Transparency 認証をリクエストするため、expo-tracking-transparency ライブラリを使用します。

インストールし再ビルドします。

try🐶everything myproject$ yarn add expo-tracking-transparency
try🐶everything myproject$ npx pod-install
try🐶everything myproject$ yarn ios && yarn android

(選択) 念の為、NSUserTrackingUsageDescription キーを Info.plist にも追加しておきます。

// ios/myapp/Info.plist

   ...
    <key>NSUserTrackingUsageDescription</key>
      <string>This identifier will be used to deliver personalized ads to you.</string>
  </dict>
</plist>

以下のような使い方ができます。

...
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        console.log('Yay! I have user permission to track data');
      }
    })();
  }, []);
...

再ビルド後、アプリが起動するとユーザの同意を求めるダイアログが表示されれば OK です。 (⬇︎)

iPhone側で該当内容を確認する方法は、

設定 > プライバシーとセキュリティ > トラッキング で アプリからのトラッキング要求を許可 を総括 ON/OFF 管理できます。下の方ではアプリことにもON/OFFできますね。

次は実際に広告を表示させましょう。

テスト広告でテストする

AdMob を使用してアプリを開発するときは、Google AdMob アカウントの本番広告ではなくテスト広告を使用するようにしてください。そうしないと、アカウントが無効になる可能性があります。

広告を作成するときに、テスト中に使用される「広告ユニット ID」を テスト ID に設定できます。( TestIds )

以下のような書き方で設定します。

import { BannerAd, TestIds } from 'react-native-google-mobile-ads';
...
<BannerAd unitId={TestIds.BANNER} size={BannerAdSize.BANNER} />

バナー別のサイズ・見え方

アダプティブバナーは最新のバナー広告で、優れたユーザーエクスペリエンスを提供できます。今後、スマートバナーと標準バナーはこれに置き換えられる予定です。

なお、スマートバナーはサポートが終了します。
https://support.google.com/admanager/answer/10017110?sjid=594813323851808854-AP

BANNER：
Mobile Marketing Association (MMA) のバナー広告サイズ (320×50 密度に依存しないピクセル)
FULL_BANNER：
Interactive Advertising Bureau (IAB) のフルバナー広告サイズ (468×60 密度に依存しないピクセル)
LARGE_BANNER：
大きなバナー広告サイズ (320×100 密度に依存しないピクセル)
LEADERBOARD：
Interactive Advertising Bureau (IAB) リーダーボードの広告サイズ (728×90 密度に依存しないピクセル)
MEDIUM_RECTANGLE：
Interactive Advertising Bureau (IAB) 中長方形広告サイズ (300×250 密度に依存しないピクセル)
ANCHORED_ADAPTIVE_BANNER：
全幅および自動高さの動的サイズの (次世代) バナー
INLINE_ADAPTIVE_BANNER：
アンカーアダプティブバナーと比較して、大きくて背の高いバナーです。高さは可変で、デバイスの画面と同じ高さになる場合もあります。これらは、スクロールするコンテンツに配置することを目的としています。
WIDE_SKYSCRAPER：
IAB ワイド超高層ビル広告サイズ (160×600 密度に依存しないピクセル)。このサイズは現在、Google モバイル広告ネットワークではサポートされていません。これはメディエーション広告ネットワークのみを対象としています。

google-mobile-ads-09-banner — **BANNER**

google-mobile-ads-10-full — **FULL_BANNER**

google-mobile-ads-12-large — **LARGE_BANNER**

google-mobile-ads-13-medium — **MEDIUM_RECTANGLE**

google-mobile-ads-11-aab — **ANCHORED_ADAPTIVE_BANNER**

google-mobile-ads-08-iab — **INLINE_ADAPTIVE_BANNER**

google-mobile-ads-14-wide-sky — **WIDE_SKYSCRAPER**

※ LEADERBOARD：iOS 非表示、Android ランダム表示される

設定をまとめる

初期ファイル：app/_layout.tsx

①
mobileAds().setRequestConfiguration()

アウトバウンドリクエストを構成する
②
requestTrackingPermissionsAsync()

アプリ追跡の透明性 (iOS)を設定する
③
mobileAds().initialize()

Google Mobile Ads SDK を初期化する

タブ初期ファイル：app/(tabs)/index.tsx

タイムラインのタイトル

①

adUnitId 設定

const adUnitId = __DEV__
? TestIds.BANNER
: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

②

ダイナミックバナー広告サイズを適用

高さ ( h ) が固定されていて 50 〜 60 の広告だけを利用したいので、画面の Width によって BANNER か FULL_BANNER に分岐処理します。

  const [bannerSize, setBannerSize] = React.useState(BannerAdSize.BANNER);
  React.useEffect(() => {
    if (layout.width < 468) {
      setBannerSize(BannerAdSize.BANNER);
    } else setBannerSize(BannerAdSize.FULL_BANNER);
  }, []);

③

広告を一番上にレンダリングする

React Native Paper の <Portal/> コンポーネントを利用します。

... 
      <Portal>
        <View style={styles.ad}>
          <BannerAd
            unitId={adUnitId}
            size={bannerSize}
            requestOptions={{requestNonPersonalizedAdsOnly: true}}
            onAdLoaded={() => {
              console.log('Advert loaded');
            }}
            onAdFailedToLoad={error => {
              console.error('Advert failed to load: ', error);
            }}
          />
        </View>
      </Portal>
...