クッキーバナー
画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で分析 Cookie の可否を選んで保存。いずれも下へスライドして消える。
プレビュー
操作クリック／タップで動きます。
仕様書
- 向く場面
- 同意取得が必要なサイトの初回訪問
- 分析・広告タグを読む前の確認
- 本文閲覧を妨げない控えめな告知
- 避ける場面
- 同意義務の無いサイトへの慣習的な設置
- 拒否を隠して同意だけ目立たせる配置
- 同意を保存せず毎回出す実装
- 構成要素
- バナー
- アイコン
- メッセージ
- 設定ボタン
- 同意ボタン
- 設定パネル
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 無効
- キーボード
Tab で「設定」「同意する」に到達・Enter/Space で選択。「設定」で分析 Cookie のチェックへフォーカスが移り「保存」で閉じる。トラップしない
- 支援技術
role=region aria-label「Cookie の使用について」（dialog にせずトラップしない）。閉じたバナーは inert で Tab から外す。結果は role=status で通知。絵文字は aria-hidden
- 動き
閉じる時 320ms cubic-bezier(.4,0,.2,1) で 140% 下へスライド＋280ms フェード。完了文は 300ms フェード。reduce で停止
デザインの要点
- dialog にせずフォーカスも奪わない。同意バナーで本文の操作を止めると、読む前に「同意する」を押させることになる
- 「設定」は同意と同じ閉じ方にせず、必須（常に有効）と分析のチェックを出して保存させる。拒否の手間を同意と揃える
- 閉じたバナーは opacity と translateY だけでなく inert と visibility も切る。見えないボタンに Tab が入る
- 結果は role=status で「同意しました」と告げる。消えただけでは何が起きたか読み上げに乗らない
プレビューは枠内に収めるため、バナーを 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%)で画面外へ押し出し、visibility: hiddenとinertで見えないボタンにTabが入らないようにする。「同意する」はそのままdismiss()でバナーを閉じて完了メッセージを出す。「設定」は同じdismiss()ではなく、バナー内の設定パネル(.ck-settings)を開いて必須Cookie(常に有効・disabled)と分析Cookieのチェックを見せ、「保存」で選んだ内容を完了メッセージに載せて閉じる。どちらの経路も結果はrole=statusの要素へ書き込む。
実装の注意
このデモは同意/拒否の結果をどこにも保存しておらず、resetTimerで一定時間後にバナーが再び現れる作りになっている。実装に持ち込むときは、同意した事実をlocalStorageやCookie自体に記録し、次回以降のページ読み込みで既に同意済みなら初めからバナーを出さない判定を必ず追加すること。設定パネルのカテゴリは「必須」「分析」の2つだけなので、広告・パーソナライズなど求められる粒度に応じてチェックを増やし、保存した結果を実際のタグ読み込みの分岐に結線する必要がある(このデモは結果を完了メッセージに出すだけで、どこにも保存しない)。バナーが画面下部を覆うぶん、下に固定されたナビゲーションやチャットウィジェットと重ならないよう表示位置も確認する。
アクセシビリティ
バナーには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-settings" id="ckSettings" hidden>
<label class="ck-opt"><input type="checkbox" checked disabled> 必須（常に有効）</label>
<label class="ck-opt"><input type="checkbox" id="ckAnalytics" checked> 分析（利用状況の計測）</label>
</div>
<div class="ck-actions">
<button class="ck-btn ck-btn--ghost" id="ckOpen" type="button" aria-expanded="false" aria-controls="ckSettings">設定</button>
<button class="ck-btn ck-btn--primary" id="ckAgree" type="button">同意する</button>
</div>
</div>
<p class="ck-done" id="ckDone" role="status" aria-live="polite"></p>
</div>