I-010: Cookie Consent Banner | Vibe UI Pattern Library

ライブデモ Live Demo

Cookie同意バナーと設定パネルのデモです。ボタンを押して確認してください。

Demo of cookie consent banner with preferences panel. Click the buttons to try it out.

ページコンテンツ領域

Page content area

Cookie 設定 Cookie Preferences

使用するCookieの種類を選択できます。 Choose which cookies you allow.

必須 Necessary Required

分析 Analytics

マーケティング Marketing

機能性 Functional

スライド速度 Slide Duration

背景色 Background Color

アクセントカラー Accent Color

AI向け説明 AI Description

`I-010` は GDPR スタイルの Cookie コンセントバナーです。ページ下部から `cubic-bezier(0.16, 1, 0.3, 1)` のイージングでスライドインします。「すべて同意」「拒否」に加え、「設定」ボタンから設定パネルを開き、カテゴリ別（必須・分析・マーケティング・機能性）にCookieの許可/拒否を切り替えられます。ユーザーの選択は `localStorage` に JSON で保存され、次回訪問時にはバナーが表示されません。

`I-010` is a GDPR-style cookie consent banner that slides up from the bottom. In addition to "Accept All" and "Decline", a "Settings" button opens a preferences panel where users can toggle cookie categories (Necessary, Analytics, Marketing, Functional) individually. Choices are stored as JSON in `localStorage`.

調整可能パラメータ Adjustable Parameters

--banner-bg — バナーの背景色Banner background color
--banner-accent — Accept / 設定保存ボタンの色Accept / Save button color
--banner-slide-duration — スライドアニメーションの速度Slide animation duration
Cookie categories — 必須（常時有効）、分析、マーケティング、機能性Necessary (always on), Analytics, Marketing, Functional
localStorage key — 同意状態の保存キー（デフォルト: cookie-consent）Storage key for consent state (default: cookie-consent)

実装 Implementation

HTML + CSS + JS

<!-- (1) Banner -->
<div class="cookie-banner" id="cookie_banner">
  <p class="cookie-banner-text">
    <!-- Change this text to update the banner message -->
    This site uses cookies for usability, analytics, and advertising. Click "Accept All" to consent to all cookies.
  </p>
  <div class="cookie-actions">
    <button class="cookie-btn decline">Decline</button>
    <button class="cookie-btn settings">Settings</button>
    <button class="cookie-btn accept">Accept All</button>
  </div>
</div>

<!-- (2) Settings Panel (overlay) -->
<div class="cookie-overlay" id="cookie_overlay">
  <div class="cookie-panel">
    <h3>Cookie Settings</h3>
    <p>Choose which types of cookies to allow.</p>
    <!-- Required: always enabled (disabled) -->
    <div class="cookie-cat">
      <span>Required Cookies</span>
      <input type="checkbox" checked disabled />
    </div>
    <!-- The following can be toggled -->
    <div class="cookie-cat">
      <span>Analytics Cookies</span>
      <input type="checkbox" id="pref_analytics" />
    </div>
    <div class="cookie-cat">
      <span>Marketing Cookies</span>
      <input type="checkbox" id="pref_marketing" />
    </div>
    <div class="cookie-cat">
      <span>Functional Cookies</span>
      <input type="checkbox" id="pref_functional" />
    </div>
    <button id="pref_save">Save Preferences</button>
  </div>
</div>

<style>
/* (3) Banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #0f1126; color: #f6f6fe;
  padding: 16px 24px; display: flex;
  align-items: center; gap: 16px; z-index: 9999;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-text { flex: 1; font-size: 14px; opacity: .9; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-btn {
  padding: 8px 18px; border-radius: 6px;
  font-weight: 600; cursor: pointer; border: none;
}
.cookie-btn.accept { background: #5c6ac4; color: #fff; }
.cookie-btn.settings {
  background: transparent; color: #f6f6fe;
  border: 1px solid rgba(255,255,255,.25);
}
.cookie-btn.decline {
  background: transparent; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.15);
}

/* ④ 設定パネル */
.cookie-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.cookie-overlay.open { opacity: 1; pointer-events: auto; }
.cookie-panel {
  background: #fff; color: #1a1a2e;
  border-radius: 16px; padding: 28px 32px;
  width: 90%; max-width: 520px;
}
.cookie-cat {
  display: flex; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid #e5e7eb;
}
</style>

<script>
(function() {
  var KEY = 'cookie-consent';
  if (localStorage.getItem(KEY)) return;

  var banner  = document.getElementById('cookie_banner');
  var overlay = document.getElementById('cookie_overlay');
  setTimeout(function() { banner.classList.add('visible'); }, 800);

  function save(prefs) {
    localStorage.setItem(KEY, JSON.stringify(prefs));
    banner.classList.remove('visible');
    overlay.classList.remove('open');
  }

  // すべて同意
  document.querySelector('.cookie-btn.accept').onclick = function() {
    save({ necessary:true, analytics:true,
           marketing:true, functional:true });
  };
  // 拒否（必須のみ）
  document.querySelector('.cookie-btn.decline').onclick = function() {
    save({ necessary:true, analytics:false,
           marketing:false, functional:false });
  };
  // 設定パネルを開く
  document.querySelector('.cookie-btn.settings').onclick = function() {
    overlay.classList.add('open');
  };
  // 設定を保存
  document.getElementById('pref_save').onclick = function() {
    save({
      necessary:  true,
      analytics:  document.getElementById('pref_analytics').checked,
      marketing:  document.getElementById('pref_marketing').checked,
      functional: document.getElementById('pref_functional').checked
    });
  };
})();
</script>

React (JSX + CSS)

// react/I-010.jsx
import { useState, useEffect } from "react";
import "./I-010.css";

const CATEGORIES = [
  { key: "necessary",  label: "Required Cookies",   required: true  },
  { key: "analytics",  label: "Analytics Cookies",  required: false },
  { key: "marketing",  label: "Marketing Cookies",  required: false },
  { key: "functional", label: "Functional Cookies", required: false },
];

// Change the message prop to update the banner text
export default function CookieConsentBanner({
  message = "This site uses cookies for usability, analytics, and advertising. Click \"Accept All\" to consent to all cookies.",
  storageKey = "cookie-consent",
  onSave,
}) {
  const [visible, setVisible] = useState(false);
  const [panelOpen, setPanelOpen] = useState(false);
  const [prefs, setPrefs] = useState(() => {
    const init = {};
    CATEGORIES.forEach(c => { init[c.key] = c.required; });
    return init;
  });

  useEffect(() => {
    if (!localStorage.getItem(storageKey)) {
      const t = setTimeout(() => setVisible(true), 800);
      return () => clearTimeout(t);
    }
  }, [storageKey]);

  const dismiss = (values) => {
    localStorage.setItem(storageKey, JSON.stringify(values));
    setVisible(false);
    setPanelOpen(false);
    if (onSave) onSave(values);
  };

  if (!visible) return null;

  return (
    <>
      <div className="cookie-banner visible">
        <p className="cookie-banner-text">{message}</p>
        <div className="cookie-actions">
          <button className="cookie-btn decline"
            onClick={() => dismiss({ necessary:true, analytics:false,
                                      marketing:false, functional:false })}>
            Decline
          </button>
          <button className="cookie-btn settings"
            onClick={() => setPanelOpen(true)}>
            Settings
          </button>
          <button className="cookie-btn accept"
            onClick={() => dismiss({ necessary:true, analytics:true,
                                      marketing:true, functional:true })}>
            Accept All
          </button>
        </div>
      </div>

      {panelOpen && (
        <div className="cookie-overlay open"
          onClick={e => e.target === e.currentTarget && setPanelOpen(false)}>
          <div className="cookie-panel">
            <h3>Cookie Settings</h3>
            {CATEGORIES.map(cat => (
              <div className="cookie-cat" key={cat.key}>
                <span>{cat.label}</span>
                <input type="checkbox"
                  checked={prefs[cat.key]}
                  disabled={cat.required}
                  onChange={e =>
                    setPrefs(p => ({ ...p, [cat.key]: e.target.checked }))
                  } />
              </div>
            ))}
            <button onClick={() => dismiss(prefs)}>Save Preferences</button>
          </div>
        </div>
      )}
    </>
  );
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: I-010
- パターン名: Cookie コンセントバナー
- 参照URL: https://devsnips.dev/animations/I-010.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: I-010
- Pattern Name: Cookie Consent Banner
- Reference URL: https://devsnips.dev/animations/I-010.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]