本文へスキップ
Mera News

パブリッシャー向けガイド 第5章

広告

最終確認：2026年11月

広告は報道の費用をまかなう一方で、読者がニュースサイトを嫌う原因の多くも生み出しています。Coalition for Better Adsは、基準を下回る形式の一覧を公開しています。この章では、その一覧、すべての広告枠の場所を確保する方法、そして画面ごとの広告の置き方を扱います。

避けるべき形式

Better Ads Standardsは、デスクトップの6つの形式とモバイルの10の形式を挙げています。ショート動画とモバイルアプリには、別の一覧があります。

形式デスクトップモバイル
ポップアップ広告対象対象
音声付きの自動再生動画対象対象
プレスティシャル広告カウントダウン付きカウントダウンの有無を問わない
大きな固定広告画面の30%超画面の30%超
広告密度50%超30%超
固定動画広告がある場合の密度30%超対象外
点滅するアニメーション広告対象外対象
カウントダウン付きのポストティシャル広告対象外対象
全画面のスクロールオーバー広告対象外ページの30%超
固定されて飛び出す動画広告対象外対象
大きなインライン広告（300x600以上）と固定動画の組み合わせ対象外対象

密度の測り方

密度とは、メインコンテンツ内にあるすべての広告の高さの合計を、メインコンテンツ全体の高さで割ったものです。測るのはビューポートではなく、メインコンテンツに対してです。

  • ヘッダー、フッター、サイトのナビゲーションは除かれ、関連記事も除かれます。
  • メインコンテンツの下にある広告は、数に入れません。
  • 固定広告やインライン広告を含め、すべての形式を数えます。
  • 固定広告の高さは、それぞれ1回だけ数えます。
  • デスクトップでは、サイドレールの広告も数えます。
  • ページに関連する動画のプレロール広告とミッドロール広告は、測定の対象外です。

具体例として、メインコンテンツの高さが5,000ピクセルのモバイルの記事を考えます。30%以下に収めるには、その記事の広告の合計を、1,500ピクセル以内にする必要があります。

実際のページを確認するには、これをブラウザーのコンソールに貼り付けます。セレクターは、自分のテンプレートに合わせて変更し、article の外にある固定広告やサイドレール広告の高さも加えてください。

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

すべての枠の場所を確保する

web.devは、広告をレイアウトのずれの最大の要因の1つとして挙げています。場所の確保は、CSSで行ってください。Googleは、JavaScriptで行うことを戒めています。スクリプトの読み込み時にずれが起きる可能性があるためです。

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

より大きなクリエイティブも収まるよう、min-height を使います。複数のサイズがある枠については、GoogleのPublisher Tagのガイドが、3つの方法を示しています。

確保するもの利点代償
最大のサイズずれが起きない小さなクリエイティブの下に空白ができる
最小のサイズ空白ができない大きなクリエイティブが配信されるとずれが起きる
最も頻繁に配信されるサイズ両方のバランス多少のずれと、多少の空白

同じガイドとweb.devから、さらに2つのルールがあります。

  • fluid の枠は、スクロールしないと見えない位置に置きます。クリエイティブに合わせてサイズが変わるため、必ずずれが起きます。
  • 広告が入らなかった枠を、折りたたまないでください。確保した場所を取り除くと、コンテンツを挿入するのと同じくらい、ページがずれることがあります。代わりにプレースホルダーを表示し、枠が埋まる見込みが低い場合に限って、折りたたんだ状態から始めます。

画面ごとの配置

モバイルでは

  • モバイルの上限のほうが低いため、密度はスマートフォンのレイアウトで数えます。
  • 固定広告は、画面の30%未満に収めます。下部に固定する短いアンカー広告が、一般的な形です。
  • 記事の上に浮かぶ広告や、通過するのにスクロールやタップが必要な全画面の広告は避けます。
  • 最初の広告は、見出しと冒頭の段落の下に置いて、LCPの要素を押し下げないようにします。

デスクトップでは

  • サイドレールの広告も、密度の合計に数えます。
  • 固定の広告は、画面の30%未満に収めます。
  • 動画はミュートで始め、音声は読者が選べるようにします。
  • まず記事の列のサイズを決め、サイドレールの枠が、記事を動かさずに読み込まれるようにします。

速度とアクセシビリティ

  • 最初のビューポートの外にある広告は、広告タグ自身の設定か、自分で管理するiframeの loading="lazy" で、遅延読み込みにします。
  • iframeごとに専用のメインスレッドがあるため、INPを見直すときは、遅い操作がどのフレームから来たのかを確認します。
  • 同意が必要な場合は、読者が同意してから、広告タグを読み込みます。詳しくはポップアップの章にあります。
  • 広告の領域にラベルを付けて、スクリーンリーダーの利用者が、見分けて飛ばせるようにします。
  • WCAGの達成基準2.2.2では、自動で始まり、5秒を超えて続き、ほかのコンテンツと並んで動く、動きのあるコンテンツには、一時停止、停止、または非表示にする方法が必要です。これは、アニメーション広告に当てはまります。
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

現在の評価を確認する

Search Consoleの広告エクスペリエンスレポートには、Better Ads Standardsに違反する広告エクスペリエンスが一覧で表示されます。審査の結果、サイトのステータスが「不合格」になった場合、レポートにはGoogleが見つけた内容が表示されますが、すべての問題を捉えているとは限りません。指摘された点を修正してから、新しい審査をリクエストします。審査はドメイン全体が対象です。

チェックリスト

  • 広告運用チームと、デスクトップとモバイルの両方で、形式の表を確認する。
  • ポップアップ、モバイルのプレスティシャル、カウントダウン付きの広告を取り除く。
  • 最も長い記事テンプレートと最も短い記事テンプレートで、スマートフォン上の密度を測る。
  • すべての固定広告が、画面の30%未満に収まっていることを確認する。
  • すべての枠を、CSSの min-height で確保する。
  • fluid の枠を、スクロールしないと見えない位置へ移す。
  • ページがずれる場合は、空の枠の折りたたみを、プレースホルダーに置き換える。
  • 最初のビューポートの外にある広告を、遅延読み込みにする。
  • 各広告の領域に、ラベルを追加する。
  • 広告エクスペリエンスレポートを、デスクトップとモバイルの両方で確認する。

出典