編集してコピーできるオリジナルのCookieバナー4種、英国ICOのガイダンスに照らしてリスクのある設定を指摘するチェッカー、Google Consent Mode v2のコードを紹介します。
良いCookieバナーは、「すべて許可」と「すべて拒否」を並べて表示し、カテゴリーごとに選べる手段を用意し、訪問者が操作するまで必須でないトグルをすべてオフにしておきます。以下に、編集してコピーできるオリジナルのバナーデザイン4種、リスクのある設定を指摘するチェッカー、それらと組み合わせるGoogle Consent Modeのコードを紹介します。
バナーの設定早見表（2026年10月時点の英国ICOガイダンスに基づく）
多くのバナーギャラリーは他社のバナーのスクリーンショットを並べるだけで、それがルールに沿っているかは説明していません。ここにある例はすべて私たちのオリジナルデザインで、その場で動かして編集できます。それぞれに、拒否、デフォルト設定、無反応について英国の規制当局のガイダンスが実際に何と言っているかを添えています。このページはデザインのパターンを説明するもので、法的助言ではありません。
英国ICOの同意管理に関するページでは、同意を拒否するのが許可するのと同じくらい簡単な仕組みを良い例として挙げ、悪い例として「すべて許可」はあるのに「すべて拒否」がないバナーを挙げています。他の地域のルールは各国の当局が定めるため、対象とする国のガイダンスを確認してください。
ICOは、沈黙や無反応は同意に当たらないとしており、継続利用を同意とみなすポップアップを、同意なしにCookieをあらかじめ有効にするものと位置付けています。訪問者がバナーを無視した場合は、必須でないCookieをオフのままにしましょう。
ショッピングカートやログインなど、訪問者が求めた機能に厳密に必要なCookieは適用除外に当たります。ICOは、便利ではあっても必須ではないCookieには引き続き同意が必要だと述べています。
訪問者が同意したかどうかをGoogleのタグに伝える仕組みです。タグが読み込まれる前に gtag('consent', 'default', ...) でデフォルトを設定し、訪問者が選択したときに gtag('consent', 'update', ...) を呼び出します。バージョン2では、ad_storage と analytics_storage に加えて ad_user_data と ad_personalization のパラメーターが追加されました。
どちらでも機能します。下部のバーはページを読める状態に保ち、中央の箱型は判断を早く促せますがコンテンツを隠してしまいます。より重要なのは、どちらの選択肢も同じくらい簡単に選べて、必須でないものが先に動かないことです。
各プレビューはスクリプトを無効にしたサンドボックスで動いているため、ここではボタンを押しても何も起きません。マークアップをコピーし、ボタンを自分の同意処理のコードにつないでください。
最も一般的なレイアウトです。「許可」と「拒否」は同じスタイルで、「選択」で設定パネルが開きます。
大きな画面では場所を取りません。スマートフォンでは画面幅いっぱいに広げましょう。
必須のCookieは常にオンとして表示し、それ以外のボックスはすべてチェックなしの状態から始めます。
全ページのフッターに小さなリンクを置くと、訪問者はいつでも選択を変更できます。
サイトでGoogleのタグを使っている場合は、タグが読み込まれる前にデフォルトを設定し、訪問者が選択したときに更新します。以下のパラメーター名は、Googleの同意モードのドキュメントに記載されているものです。
Consent Modeのパラメーター
default の呼び出しはGoogleタグのスニペットより前に置きます。wait_for_update により、タグが動き出す前にバナーが更新を送るための500ミリ秒の猶予ができます。
レイアウト
下部バー
隅の箱型
中央の箱型
バナーの動作
最初の画面に「すべて拒否」がある
「許可」と「拒否」が同じ見た目
アクセス解析のトグルが最初からオン
閲覧を続けると同意したとみなす旨の文言がある
「Cookie設定」リンクで選択を変更できる
プレビュー
当サイトは、サイトの運営と、同意いただいた場合はアクセスの計測のためにCookieを使用します。
閲覧を続けることで、Cookieの使用に同意したものとみなします。
すべて許可
すべて拒否
選択
アクセス解析
注意点
選択した内容にリスクのある設定は見つかりませんでした。
最初の画面に「すべて拒否」がありません。ICOは、同意を拒否するのが許可するのと同じくらい簡単であることを良い例としています。
「拒否」が「許可」より目立ちません。私たちの見解では、これは拒否を許可より難しくします。対等なボタンの組み合わせがより安全なデザインです。
必須でないトグルが最初からオンになっています。ICOの良い例では、適用除外でない技術のトグルはデフォルトでオフです。
閲覧を続けることを同意とみなしています。ICOは、沈黙や無反応は同意に当たらないとしています。
後から選択を変更する手段がありません。ICOは、ユーザーが必須でないCookieを簡単に有効化または無効化できるべきだとしています。
公表されているICOのガイダンスに基づくデザインの補助であり、法的助言ではありません。
無料で始める · クレジットカード不要