クッキーバナー
画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で詳細へ。いずれの操作でも下へスライドして消える。
プレビュー
操作クリック／タップで動きます。
プレビューは枠内に収めるため、バナーを position:absolute（ステージ基準）で下端に固定しています。実際のページでは position:fixed; left:0; right:0; bottom:0 に変え、body 直下など高い階層へ置いてください。
使いどころ
EU圏や国内の一部制度でCookie利用の同意取得が必要なサイトの初回訪問時、画面下部に控えめに現れて選択を促す場面に使う。何度もCookieを使う分析タグや広告タグを実行する前に、まずこのバナーで同意を取ってから読み込む実装にするのが前提になる(同意前に既に分析スクリプトを動かしていては同意取得の意味がない)。法的にどこまでの粒度で同意を求める必要があるか(一括同意で足りるか、カテゴリごとの個別同意が必要か)は地域や業種で異なり実装だけでは判断できない専門的な論点なので、必ず自社の法務・専門家に確認したうえで「設定」ボタンの遷移先(詳細設定パネルの有無)を決めること。逆に、法的な同意取得義務が無いサイトに慣習的に置く必要は無い。
仕組み
実際のページではposition:fixed; left:0; right:0; bottom:0で画面下端に常時重ねるが、このプレビューはステージ内に収めるためposition:absoluteに変えてあるとnoteに明記されている通り、実装時はfixedに戻し、body直下など重なり順の高い階層に置く必要がある。開閉はtranslateYとopacityのトランジションだけで行い、閉じるときはtransform: translateY(140%)で画面外へ押し出してからpointer-events: noneにする。「同意する」「設定」のどちらを押しても内部的にはdismiss()という同じ関数が呼ばれ、バナーを閉じて完了メッセージを出すだけになっている。つまりこのデモの「設定」ボタンは実際には詳細設定パネルを開いておらず、同意するボタンと同じ挙動になっている点に注意する。
実装の注意
このデモは同意/拒否の結果をどこにも保存しておらず、resetTimerで一定時間後にバナーが再び現れる作りになっている。実装に持ち込むときは、同意した事実をlocalStorageやCookie自体に記録し、次回以降のページ読み込みで既に同意済みなら初めからバナーを出さない判定を必ず追加すること。また「設定」ボタンが「同意する」と同じdismiss()を呼んでいる現状のままでは、カテゴリ別の同意(分析用のみ拒否、広告用のみ許可など)を求める法制度には対応できない。実運用では設定ボタン専用のモーダルやパネルを別途用意し、カテゴリごとのトグルを持たせる必要がある。バナーが画面下部を覆うぶん、下に固定されたナビゲーションやチャットウィジェットと重ならないよう表示位置も確認する。
アクセシビリティ
バナーにはrole="dialog"やaria-modal="true"を使わず、role="region"とaria-label="Cookieの使用について"というランドマークの指定にとどめてある。これは正しい判断で、Cookieバナーはページ本体の閲覧・操作を妨げるべきではないため、モーダルダイアログのようなフォーカストラップ(Tabキーをバナー内に閉じ込める実装)を持たせてはいけない。ユーザーはバナーを無視してページの他の部分を自由に操作できる必要がある。一方で、バナーが表示された直後にフォーカスを強制的に移すような実装も避け、キーボード操作のユーザーが自分のペースでTabしてバナーへたどり着ける状態を保つ。同意・拒否の結果をユーザーへ伝える完了メッセージにはrole="status"とaria-live="polite"を使っており、これは緊急性の低い通知として適切な選択になっている。
調整して使う
調整しやすいのは3点。まずボタンの数と粒度で、デモは「設定」「同意する」の2択だが、「すべて拒否」を同列に並べる3択にすると、同意しない選択も同じ手間でできるようになり公平性が高まる(「同意する」だけを目立たせ拒否を見つけにくくするダークパターンは避けるべきだ)。次に表示位置で、下部バナーのほか画面隅の小さなカードや、初回のみ表示するモーダルに変えることもできるが、モーダルにする場合はフォーカストラップを持たせるかどうか設計判断が変わる。最後に文言の詳しさで、簡潔な一文とCookieポリシーへのリンクだけにするか、使用目的(分析・広告・必須)をバナー内に列挙するかは、求められる同意の粒度に応じて選ぶ。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="ck-bg" aria-hidden="true">
<span class="ck-line" style="width:70%"></span>
<span class="ck-line" style="width:90%"></span>
<span class="ck-line" style="width:55%"></span>
<span class="ck-line" style="width:80%"></span>
</div>
<div class="ck-banner" id="ckBanner" role="region" aria-label="Cookie の使用について">
<div class="ck-text">
<span class="ck-ic" aria-hidden="true">🍪</span>
<p class="ck-msg">当サイトでは利便性向上のため Cookie を使用します。詳しくは Cookie ポリシーをご確認ください。</p>
</div>
<div class="ck-actions">
<button class="ck-btn ck-btn--ghost" id="ckSettings">設定</button>
<button class="ck-btn ck-btn--primary" id="ckAgree">同意する</button>
</div>
</div>
<p class="ck-done" id="ckDone" role="status" aria-live="polite"></p>
</div>