同意とプリファレンスシステム
目的
同意とプリファレンスシステムは、ユーザープライバシー管理のビジュアルおよび構造的フレームワークを設計するための方法論を提供します。プライバシー通知、Cookieバナー、詳細なプリファレンスコントロールが、法的に準拠（GDPR、CCPA）し、アクセシブルで高信頼性のウェブサイト体験に統合されることを保証します。このシステムは、情報を明確な階層に整理し、データ共有のための直感的なコントロールを提供することで、「同意疲れ」を防ぎます。
ユースケース
- 初期同意バナー: Cookieの使用をユーザーに通知する最初のタッチオーバーレイまたはバーを設計する。
- 詳細なプリファレンスセンター: ユーザーが特定のデータカテゴリ（アナリティクス、マーケティングなど）を切り替えられるモーダルまたはページを作成する。
- 永続的なプライバシートリガー: 初期選択後もアクセス可能な、さりげない「プライバシー設定」トリガーを実装する。
- 規制への適応: 異なる地域の要件（例：「すべて拒否」ボタンの要件）を満たすようにデザインを標準化する。
- コミュニケーション設定: ニュースレターやマーケティング通知のオプトインを管理するUIを設計する。
使用すべきでないケース
- 内部データガバナンス: このスキルはUI/UXレイヤーを扱います。バックエンドのデータアーキテクチャや法的ポリシーの作成は管理しません。
- 一般的なバナー: 販売促進やメンテナンスのような単純なお知らせには、
banner-and-alert-systemを使用してください。 - システム設定: プライバシーに関係のない純粋に機能的なアプリ設定（テーマ、言語など）には、
site-navigation-systemまたは専用の設定ビューを使用してください。
入力
- 規制要件: どの法律が適用されるか（GDPR、CCPA/CPRA、DMA）？
- データカテゴリ: すべてのデータ収集ツールのリスト（必須、機能、アナリティクス、マーケティング/ターゲティング）。
- ブランドボイス: プライバシーコミュニケーションに意図されたトーン（例：透明、ミニマリスト、安心感を与える）。
- レイアウトコンテキスト: バナーを配置する場所（ボトムバー、フローティングボックス、全画面モーダル）。
- ブラウザシグナル: サイトがGlobal Privacy Control（GPC）または「Do Not Track」シグナルを有効なオプトアウトとして検出し、尊重する必要があるかどうか。
出力
- 同意解剖仕様: バナー/モーダル領域の定義（見出し、説明、トグル、アクション）。
- 状態マトリックス: 保留中、承認済み、拒否済み、フォーカス済み状態のビジュアル仕様。
- プリファレンスセンターブループリント: 詳細なカテゴリ管理のための構造マップ。
- インタラクション仕様: 背景動作、「すべて拒否」の強調表示、永続的なトリガーの配置に関するルール。
ワークフロー
1. 同意レベルの分類
法的およびUXの目標に基づいて、必要な遮断レベルを決定します。
- レベル1（暗黙的/情報）: 操作をブロックしないさりげないバー。低リスク地域やトラッキングしないサイトに最適。
- レベル2（アクティブ/モーダル）: ナビゲーションの前または中に選択を必要とするフローティングボックスまたはモーダル。GDPR/CCPA準拠に最適。
- レベル3（ハードゲート）: 選択が行われるまでアクセスを完全に防ぐ全画面オーバーレイ。極度のコンプライアンスや年齢確認シナリオにのみ使用。
2. 空間パターンの選択
- ボトムバー: 下部に全幅で表示。遮断が少なく、馴染みのあるパターン。
- フローティングボックス: 通常は左下または右下。メインコンテンツの邪魔になりにくいが、視認性は高い。
- プリファレンスモーダル: 詳細な選択のための中央配置オーバーレイ。「設定を管理」ボタンからトリガー。
3. 情報階層の確立
「法律用語の壁」疲れを避けます。
- 見出し: 明確で正直に（例：「あなたのプライバシー設定」）。
- 主な説明: データが収集される理由とユーザーの権利を説明する1〜2の簡潔な文章。
- カテゴリラベル: 大まかな分類（例：「パーソナライゼーション」「広告」）と、展開可能な「詳細を見る」リンク。
4. アクション優先度の設計
必要な場合は「同等の強調表示」ルールに従います。
- 主なアクション: 「すべて許可」と「すべて拒否」（または「選択を確認」）は、ダークパターンを避けるために理想的には同じ視覚的重みを持つべき。
- 二次アクション: 「設定を管理」または「Cookie設定」リンクで詳細ビューへ。
- 逃げ道: 暗黙の同意を使用する場合、ユーザーが「閉じる」または「却下」を簡単に見つけられるようにする。
5. 永続的なトリガーの定義
同意は動的な状態です。ユーザーはいつでも考えを変えることができなければなりません。
- 「プライバシーシールド」アイコン: プリファレンスセンターを再び開く、小さく永続的なフローティングアイコン（通常は左下）。
- フッターリンク:
site-footer-system内の専用「Cookie設定」リンク。
6. ブラウザレベルのオプトアウトシグナルの尊重
自動オプトアウトメカニズム（CCPA/CPRAによるGlobal Privacy Controlの認識など）を認識する法域の場合：
- 検出して適用: GPCシグナルが存在する場合、それを有効な「拒否」または「販売/共有のオプトアウト」シグナルとして扱い、ユーザーが手動で再切り替えしなくても、その状態をプリファレンスセンターに反映する。
- 再プロンプトしない: ユーザーがすでに送信したGPCシグナルを上書きするよう求めるためだけに、初期バナーを再度表示しない。
- 透明性: プリファレンスセンターで検出されたシグナルを表示する（例：「Global Privacy Controlシグナルを検出し、オプトアウトを適用しました」）。これにより、状態が黙って適用されることがなくなります。
決定ルール
- 「同等の重み」ルール: 地域で「すべて拒否」が義務付けられている場合（EUなど）、そのボタンは「すべて許可」と同じくらい簡単に見つけてクリックできるようにする。「拒否」ボタンを小さなテキストリンクにし、「許可」を大きな青いボタンにするのは避ける。
- 「事前チェックなし」ルール: 非必須（アナリティクス、マーケティング）のトグルは、GDPR準拠のためデフォルトでOFFにする。
- 「明確な言語」ルール: 専門用語を避ける。「ピクセルベースのテレメトリを処理」の代わりに「サイトを改善」を使用する。
- 階層的な開示: 初期バナーはシンプルに保つ。20段落のポリシー一覧はプリファレンスセンターまたは専用のプライバシーポリシーページに移動する。
- 「シグナルを尊重」ルール: 検出されたGPCオプトアウトは、古いローカルの「すべて許可」Cookieよりも優先される。キャッシュされた同意記録が新しいブラウザレベルのオプトアウトシグナルを上書きしないようにする。
制約
- アクセシビリティ: バナーはキーボードで到達可能でなければならない。プリファレンスモーダルはフォーカスをトラップし、トラップ中はフォーカスインジケーターが表示され、隠されていない状態を保つ必要がある（WCAG 2.2 SC 2.4.11）。すべてのトグルには明確なARIAラベルが必要で、24x24pxの最低ターゲットサイズを満たす必要がある（SC 2.5.8）。
- コントラスト: ボタンのテキストとトグルはWCAG AA（4.5:1）のコントラストを満たす必要がある。
- レスポンシブ性: バナーはモバイルの主要ナビゲーション（ボトムナビゲーションバーなど）と重なってはならない。フローティングボックスが狭すぎる場合は、全画面ドロワーに切り替える。
よくある失敗パターン
- 「ダークパターン」の罠: 「拒否」ボタンを見つけられなくして、ユーザーに同意を強制すること。
- ナビゲーションへの干渉: サイトのモバイルメニューや主要なCTAを覆うボトムバーを配置すること。
- Z-インデックス戦争: バナーが他のオーバーレイやメニューの下に表示され、クリックできなくなること。
- 「50項目のチェックリスト」: 大まかなカテゴリではなく、50の個別ベンダーをユーザーに切り替えさせること。
- 逃げ道の欠如: バナーを閉じた後、ユーザーが設定を変更できないこと。
検証基準
- 「すべて許可」と「すべて拒否」が、対象地域に対して適切な視覚的強調表示を持っている。
- 非必須カテゴリはデフォルトでOFFになっている（厳格な準拠のため）。
- 永続的なトリガー（アイコンまたはフッターリンク）により、ユーザーが設定を再度開くことができる。
- 情報が階層化されている（シンプルなバナー→詳細なプリファレンスセンター）。
- トグルとボタンがWCAG 2.2 SC 2.5.8（24x24pxの最小タッチターゲット）を満たしている。
- アクセシビリティ: プリファレンスモーダルのフォーカス管理が行われ、フォーカスインジケーターが隠されない（WCAG 2.2 SC 2.4.11）。
- すべてのテキストとインタラクティブ状態のコントラスト比がWCAG AAを満たしている。
- Global Privacy Control（または同等）のシグナルが検出され、ユーザーに再プロンプトすることなく尊重される。