本文へスキップ
Mera News

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

ポップアップと同意

最終確認：2026年11月

記事の上に現れるボックスは、どれも、読者と、読者が来た理由との間に立ちはだかります。法律で求められているものもありますが、そうでないものも多くあります。この章では、Googleが求めること、ヨーロッパの規制当局が同意について述べてきたこと、そしてキーボードとスクリーンリーダーで使える確認画面の作り方を扱います。法的な助言ではないため、バナーについては、ご自身の弁護士に確認してください。

Googleが求めること

Googleは、読者からコンテンツの視界をさえぎるページ要素を邪魔なインタースティシャルと説明し、検索での評価が下がる可能性があると警告しています。ガイダンスは具体的です。

  • ページ全体を覆わないこと。
  • 同意や入力のために、読者を別のページへ移動させないこと。すべてのURLが1つの同意ページへリダイレクトされると、そのページ以外は検索結果から外れる可能性があります。
  • 全画面のインタースティシャルの代わりに、画面のごく一部だけを占めるバナーを使うこと。
  • ニュースレターの案内やアプリのインストールの案内など、あらゆる種類のプロモーション用ダイアログに、同じ注意を払うこと。

アプリのインストールについて、Googleは、SafariのSmart App Bannerのようなブラウザーが対応する方法や、適切なストアへリンクする通常のHTMLバナーを挙げています。

法律で義務づけられているインタースティシャルは、このガイダンスの対象外です。Googleが例に挙げているのは年齢確認です。必要な場合は、オーバーレイの下にあるページ上に、コンテンツを残しておけば、インデックスされます。

Better Ads Standardsは広告を対象としています。ポップアップ広告は、デスクトップとモバイルの両方に挙げられています。モバイルでは、プレスティシャル広告が、カウントダウンの有無にかかわらず挙げられています。デスクトップで挙げられているのはカウントダウン付きのプレスティシャルで、すぐに閉じられるものは、基準を下回りません。

ヨーロッパの規制当局が同意について述べてきたこと

欧州データ保護会議（EDPB）は、同意に関するガイドラインと、Cookieバナー・タスクフォースの報告書を公表しています。タスクフォースの報告書には、苦情への対応のために合意された最低限の基準が記録されており、各国の規則も引き続き適用されるため、以下の点は最低ラインとして扱ってください。

  • 同意が必要なものは、何も先に動かさない。 同意が必要なCookieは、読者が積極的な行動で同意するまで、設定できません。
  • スクロールは同意ではない。 ガイドラインは、スクロールやスワイプは、いかなる場合も、明確で積極的な行動とは認められないとしています。
  • あらかじめチェックされたボックスは同意ではない。 沈黙や、単にサービスを使い続けることも同じです。
  • 拒否する方法を用意する。 タスクフォースの大多数の当局は、同意ボタンがあるどの階層にも拒否の選択肢がないバナーを、違反と見なしました。
  • 拒否を隠さない。 段落の中に埋もれ、目を引くものが何もない拒否のリンクは、有効な同意につながりません。ボタンの色とコントラストは、個別に評価されます。
  • アクセスを、承諾に左右させない。 ガイドラインは、読者が「Cookieを承諾」をクリックするまで、すべてのコンテンツをふさぐページを、自由に与えられたものではない同意の例として挙げています。
  • 撤回は、同意と同じくらい簡単に。 同意が1クリックでできたなら、撤回も1クリックでできるべきです。目に見える標準的な場所に常設のリンクを置くことが1つの方法で、タスクフォースは、小さなアイコンにも触れています。

誰もが使える確認画面を作る

ページをふさがないバナー

小さなバナーなら読者はそのまま読み進められるので、Googleもそちらを好んでいます。それでも、WCAG 2.2は満たす必要があります。達成基準2.4.11「フォーカスが隠されない（最小）」は、固定されたバナーが、キーボードフォーカスのある項目を完全に隠してしまう場合に、不合格となります。バナーの高さと同じスクロールパディングを追加してください。

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

バナーは重ねて表示するか、場所を確保して、記事を押し下げてレイアウトのずれを起こさないようにします。

モーダルダイアログ

確認画面で読者を止める必要がある場合は、W3Cのパターンに沿って、本物のモーダルダイアログとして作ります。

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • ダイアログが開いたら、フォーカスをダイアログの中に移します。
  • TabとShift + Tabで、ダイアログ内のコントロールを順に移動し、端まで来たら反対の端へ戻ります。
  • Escapeでダイアログを閉じます。これは選択がなされなかったものとして扱い、承諾とは決して見なしません。
  • 閉じたら、フォーカスを、ダイアログを開いた要素へ戻します。ページの読み込み時にダイアログが開いた場合は、フォーカスをコンテンツの先頭へ移します。

モバイルでは

  • バナーは画面の下部に固定し、その上に見出しが見えるようにします。
  • ボタンは全幅で縦に並べて、どれも押しやすくし、承諾と拒否は同じ大きさにします。
  • テキストは短くし、詳細は2層目に移します。
  • 幅320 CSSピクセルと、テキストを200%に拡大した状態でレイアウトを確認します。ボタンは、横にスクロールしなくても届く位置にあるべきです。

デスクトップでは

  • 下部のバーか、隅のパネルを使い、記事をふさがないようにします。
  • すべてのコントロールをキーボードで操作でき、フォーカスの表示が見えるようにします。
  • テキストのコントラスト比は4.5:1以上、大きなテキストでは3:1以上を保ちます。

チェックリスト

  • 新しいブラウザープロファイルで、トップページと記事を、スマートフォンとデスクトップで読み込み、コンテンツの上に何が現れるかを数える。
  • 法律で求められていない全画面のオーバーレイを、すべて取り除く。
  • 別の同意ページへのリダイレクトを取り除く。
  • 読者が同意する前に、同意が必要なタグが動かないことを確認する。
  • 承諾の選択肢がある場所には、同じ重みのボタンとして、拒否の選択肢も置く。
  • あらかじめチェックされたボックスと、スクロールを同意と数えるロジックを取り除く。
  • プライバシーの選択を変更するための常設のリンクかアイコンを、すべてのページに追加する。
  • マウスを使わずにバナーをTabで移動し、フォーカスが見え続け、バナーの陰に消えないことを確認する。
  • モーダルを、Escapeとフォーカスの復帰も含めて、スクリーンリーダーでテストする。
  • 独自のアプリインストール用ポップアップを、小さなバナーに置き換える。

出典