mcpField
C
cnil-cookie-banner

cnil-cookie-banner

github.com/mukul975デザイン・UI32339 回インストール32 週間前に更新
リポジトリ

cnil-cookie-banner について

フランスの利用者向けにCookieバナーを実装するチームのための設計・技術ガイドです。選択肢の同等表示、目的別同意、タグのブロック、同意記録、アクセシビリティに関するCNIL準拠の要件を説明します。

主な機能

  1. 01受諾と拒否を同等に目立たせる設計
  2. 02目的別の同意設定
  3. 03必須でない項目は初期状態でオフ
  4. 04期限切れやポリシー変更時の再提示
  5. 05同意前の必須でないタグのブロック
  6. 06キーボードとスクリーンリーダーへの対応

活用シーン

  1. 01階層型Cookieバナーの実装
  2. 02目的別同意記録の設定
  3. 03同意前のタグ動作の確認
  4. 04バナーのアクセシビリティの点検

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mukul975/privacy-data-protection-skills --skill cnil-cookie-banner

インストール後、Claude Code で/cnil-cookie-bannerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
template.md
references/
standards.md
workflows.md
scripts/
process.py

詳細

CNIL 準拠の Cookie バナーの実装

概要

フランスのデータ保護機関である Commission Nationale de l'Informatique et des Libertés(CNIL)は、EU でも特に厳格な Cookie 同意要件を適用しています。更新されたガイドライン(2020 年 9 月 17 日付審議決定第 2020-091 号)および Google LLC に対する 1 億ユーロ、Google Ireland Limited に対する 5,000 万ユーロの制裁金(2021 年 12 月 31 日)、Meta Platforms Ireland Limited に対する 6,000 万ユーロの制裁金(2022 年 12 月 31 日。その後の複数の決定により、合計 1 億 5,000 万ユーロに増額)を含む、画期的な執行措置を踏まえ、フランスのユーザーにサービスを提供する組織は、特定のデザイン要件と機能要件を満たす Cookie バナーを実装する必要があります。

CNIL の Cookie バナー要件

1. 同意ボタンと拒否ボタンを同等に目立たせる

CNIL は、Cookie を拒否する仕組みを、同意する仕組みと同じくらい簡単に使えるようにすることを求めています。これは Google と Meta に対する執行措置の中心的な問題でした。両社は目立つ「すべて許可」ボタンを表示する一方で、Cookie の拒否には複数回のクリックを必要としていました。

Pinnacle E-Commerce Ltd に準拠するデザイン:

+------------------------------------------------------------------+
|  Pinnacle E-Commerce uses cookies                                |
|                                                                  |
|  We use cookies to improve your shopping experience, analyse     |
|  site traffic, and personalise content. You can accept all       |
|  cookies, reject non-essential cookies, or customise your        |
|  choices.                                                        |
|                                                                  |
|  [Accept All]    [Reject All]    [Customise]                     |
|                                                                  |
|  Privacy Policy  |  Cookie Policy                                |
+------------------------------------------------------------------+

デザインルール:

  • 「すべて許可」ボタンと「すべて拒否」ボタンの視覚的な重みを同一にする必要があります。サイズ、フォント、配色、配置の優先度を同じにします
  • いずれのボタンにもダークパターンを使用してはいけません(例:許可ボタンには明るい色、拒否ボタンにはグレーを使用する)
  • 「カスタマイズ」または「設定を管理」する選択肢も同じ階層で利用できるようにする必要があります
  • バナーでは操作を誘導する言葉(「最高の体験のために許可してください」など)を使わず、中立的な「すべて拒否」を使用する必要があります
2. Cookie ウォールの禁止

CNIL のガイドラインでは、ウェブサイトへのアクセスを Cookie への同意の条件としてはなりません。すべての Cookie を許可するまでコンテンツをブロックする Cookie ウォールは禁止されています。

禁止される実装:

+------------------------------------------------------------------+
|  To access Pinnacle E-Commerce, please accept our cookies.       |
|                                                                  |
|  [Accept All Cookies]                                            |
+------------------------------------------------------------------+

準拠する代替案: ユーザーが「すべて拒否」をクリックした場合でも、サイトは完全に機能する必要があります(最低限、閲覧できる状態にします)。カート機能、認証、セキュリティに必要な Cookie は、厳密に必要な場合の例外として引き続き設定できます。

3. 目的ごとの詳細な同意

カスタマイズ画面では、ユーザーが各目的に個別に同意できるようにする必要があります。

レイヤー 2 — 設定のカスタマイズ:

+------------------------------------------------------------------+
|  Manage your cookie preferences                                  |
|                                                                  |
|  Strictly Necessary          [Always Active]                     |
|  Required for the site to function (cart, security, login).      |
|  These cannot be disabled.                                       |
|                                                                  |
|  Analytics                   [Toggle OFF]                        |
|  Help us understand how visitors use the site to improve our     |
|  services. Data is aggregated and anonymised.                    |
|  Partners: Google Analytics                                      |
|                                                                  |
|  Advertising                 [Toggle OFF]                        |
|  Used to show you relevant advertisements on other websites.     |
|  Partners: Meta, Google Ads                                      |
|                                                                  |
|  Functionality               [Toggle OFF]                        |
|  Remember your preferences such as language and currency.        |
|                                                                  |
|  [Confirm My Choices]    [Accept All]    [Reject All]            |
+------------------------------------------------------------------+

レイヤー 2 のルール:

  • 必須ではない切り替え項目はすべて初期状態で OFF にします(同意にあらかじめチェックを入れません)
  • 各カテゴリに、サードパーティのパートナー名を具体的に記載します
  • 「選択内容を確定」では、現在の切り替え状態を保存します
  • この画面でも「すべて許可」と「すべて拒否」を選べるようにします
4. 同意の有効期間と再同意

CNIL は、同意を定期的に更新することを推奨しています。

パラメーターCNIL の要件
同意の最大有効期間6 か月(CNIL の推奨)
拒否の保持期間再度確認するまで 6 か月
同意の証明の保持期間同意の有効期間に、適用される時効期間を加えた期間
同意の有効期限後の再確認バナーを自動的に再表示する必要があります
Cookie ポリシー変更後の再確認必須 — 新たな同意が必要です

Pinnacle E-Commerce Ltd での実装:

同意のタイムスタンプをファーストパーティ Cookie に保存します。

cookie_consent_timestamp=2026-01-15T10:30:00Z
cookie_consent_version=v2.3
cookie_consent_state=accepted_analytics|rejected_advertising|accepted_functionality

各ページの読み込み時に、次の点を確認します。

  1. cookie_consent_timestamp が存在するか
  2. そのタイムスタンプが 6 か月以内のものか
  3. cookie_consent_version が現在の Cookie ポリシーのバージョンと一致しているか

いずれかの確認に失敗した場合は、バナーを再表示します。

5. 欺瞞的なデザインパターンの禁止

CNIL は、以下のダークパターンを明確に禁止しています。

ダークパターン説明禁止される理由
非対称なボタン同意ボタンは大きく色鮮やかで、拒否ボタンは小さく灰色目立ちやすさに差があると、同じ容易さを求める要件に違反します
拒否の隠蔽拒否オプションが設定の階層の奥に埋もれている同意と同じ階層に配置する必要があります
紛らわしいトグルOFF のときに、トグルが視覚的に ON に見える十分な情報に基づく同意を損ないます
罪悪感をあおる表現「拒否すると、パーソナライズされた特典を逃してしまいます」操作的な表現です
目的の事前選択分析や機能のトグルがあらかじめ有効になっている積極的な同意の要件(Planet49)に違反します
繰り返しの表示拒否後もページを表示するたびにバナーを再表示する強制にあたり、拒否を 6 か月間尊重する必要があります

技術的な実装

バナーの読み込み動作
  1. 同意前に Cookie を設定しない:ユーザーがバナーを操作する前に、必須ではない Cookie を設定してはなりません。タグはコンテナレベルでブロックする必要があります。
  2. バナーを同期的に読み込む:タグ管理スクリプトを実行する前に、同意バナーを読み込む必要があります。
  3. サーバー側での適用:Cookie の設定をトリガーするリクエストについては、同意の状態をサーバー側で検証する必要があります。
タグブロックのアーキテクチャ
Page Load
    │
    ├── Load consent banner script (synchronous)
    │
    ├── Check consent state cookie
    │   ├── No consent recorded → Show banner, block all non-essential tags
    │   ├── Consent expired (>6 months) → Show banner, block all non-essential tags
    │   ├── Consent recorded → Parse consent state
    │       ├── Analytics accepted → Fire GA4 tags
    │       ├── Advertising accepted → Fire Meta Pixel, Google Ads tags
    │       └── Functionality accepted → Fire preference cookies
    │
    └── User interacts with banner
        ├── Accept All → Set all tags, store consent
        ├── Reject All → Block all non-essential tags, store refusal
        └── Customise → Show Layer 2, await per-purpose selection
同意の保存

同意の証明は、少なくとも以下のフィールドを含めて保存してください。

フィールド値
同意 ID同意イベントごとの UUID
ユーザー識別子仮名化したユーザー ID または Cookie ID
タイムスタンプISO 8601 UTC
バージョンバナーのテキスト/デザインのハッシュ
Cookie ポリシーのバージョンバージョン識別子(例:v2.3)
選択内容目的ごとの同意/拒否
収集方法"cookie_banner_layer_1" または "cookie_banner_layer_2"
IP アドレス位置情報の検証用(別途保管し、アクセスを制限)
アクセシビリティ要件

Cookie バナーは WCAG 2.1 Level AA に準拠する必要があります。

  • キーボードで操作できる(Tab、Enter、Escape)
  • スクリーンリーダーに対応している(ARIA のロール、ラベル)
  • 十分な色のコントラストがある(最低 4.5:1)
  • 操作が完了するまでバナー内にフォーカスを閉じ込める(背後のページとの操作を防止)
  • バナーのテキストのフォントサイズは最低 14px

CNIL の執行事例

日付組織罰金主な違反
31 Dec 2021Google LLCEUR 100,000,000同等の拒否手段がないこと、同意前に Cookie を設定したこと
31 Dec 2021Google IrelandEUR 50,000,000Google LLC と同じ違反
29 Dec 2022TikTokEUR 5,000,000同等の拒否手段がないこと
31 Dec 2022Meta Platforms IrelandEUR 60,000,000同等の拒否手段がないこと
15 Jun 2023CriteoEUR 40,000,000同意が自由意思に基づいていないこと、情報が不十分であること
28 Dec 2023Amazon FranceEUR 32,000,000同意なしに Cookie を保存したこと

主な法的根拠

  • CNIL Deliberation No. 2020-091(17 September 2020) — Cookie およびその他のトラッカーに関するガイドライン
  • CNIL Recommendation on cookies(1 October 2020) — 同意を取得する実務上の方法
  • ePrivacy Directive 2002/58/EC, Article 5(3) — デバイスへの情報の保存/アクセスに関する同意
  • CJEU Case C-673/17(Planet49) — 積極的な同意、事前にチェックされたボックスの禁止
  • GDPR Article 7 — 撤回を含む同意の条件
  • CNIL Decision SAN-2021-023(Google) — Cookie の同意違反に対する総額 EUR 150M の罰金
  • CNIL Decision SAN-2022-021(Meta) — Cookie の同意違反に対する EUR 60M の罰金

コメント