MeDo

AI Cookieバナージェネレーター。

必要なCookie同意体験を説明してください — バナースタイル、ボタンラベル、法的文言、カラースキーム — MeDoが即座に本番対応コードを生成します。ボイラープレートなしで、準拠した、ブランドに合ったCookieバナーを公開しましょう。

Cookieバナー
Cookieバナー

Cookieバナーは法的に必須 — そして大抵ひどい。

GDPR、CCPA、ePrivacy規制は非必須Cookieを設定する前にインフォームドコンセントを要求し、規制当局はこれを積極的に執行しています。しかし、ほとんどのCookieバナーはダークパターンを使用するか、醜いか、壊れています。適切に設計された同意バナーはユーザーの信頼を築き、侵入的なポップアップによる離脱を減らし、体験を犠牲にすることなくサイトのコンプライアンスを維持します。MeDoは、後付けではなく意図的に見えるバナーの生成を支援します。

6 個のテンプレート

生成できる Cookieバナー テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

Bottom barBaseline

Accept and Reject Bottom Bar

One line of copy, two buttons of equal weight, a policy link. The smallest banner that still gives a genuine choice rather than a dismiss disguised as one.

Create a cookie consent bar fixed to the bottom of the viewport: a short line explaining that non-essential cookies are used for analytics, a link to the cookie policy, and two buttons — Accept all and Reject non-essential — rendered with identical size, contrast and padding so neither is visually demoted. Render it in a region with role="region" and an accessible name, do not trap focus, and place it last in the DOM so it does not sit ahead of the page content in tab order. Persist the decision under a versioned key in localStorage with a timestamp, and keep the bar hidden on every later visit until that version changes. Load no analytics script before a decision exists.

MeDoで試す
CategoriesGranular

Per-Category Consent Panel

Four categories, three of them off until someone turns them on. The version to build when tags actually differ in purpose rather than all being one analytics script.

Create a cookie consent panel with four categories: Necessary (locked on, with a note explaining it cannot be disabled), Functional, Analytics and Marketing, each a labelled switch with a one-sentence description of what it enables. Every non-essential switch defaults to off. Provide Accept all, Reject all and Save preferences, with Accept all and Reject all identical in weight. Store the result as an object keyed by category alongside a schema version and timestamp, and emit a consent-changed event so tag loading can react without a page reload. Keep the switches keyboard operable with visible focus rings and expose state through aria-checked rather than colour alone.

MeDoで試す
ModalGate

Centered Consent Modal

Blocks the page until a choice is made. Highest completion rate, highest bounce rate — reach for it only when a decision genuinely has to precede the first render.

Create a centered cookie consent modal with a dimmed backdrop: heading, two sentences of explanation, a cookie policy link, and Accept all, Reject all and Manage preferences buttons with the first two given equal visual weight. Use role="dialog" with aria-modal="true", label it by its heading, move focus to the heading on open, cycle Tab within the dialog, and do not close on Escape or backdrop click since either would leave consent undecided. Persist the choice in a versioned localStorage record with a timestamp and render nothing on subsequent visits. Do not pre-tick any non-essential category, and gate every non-essential script behind the stored value.

MeDoで試す
ToastCorner

Corner Card Consent Toast

A small card in the bottom corner that leaves the page usable. Least disruptive and least answered — expect a large share of visitors to simply ignore it.

Create a cookie consent card anchored to the bottom-left corner, roughly 360px wide, with a cookie icon, a two-line explanation, a policy link and stacked Accept all and Reject all buttons of matching width and contrast. It must not overlap other fixed UI, so offset it above any support launcher. Do not include a bare X dismiss control — a close button that leaves consent unrecorded means the banner returns on every navigation. Render it after the main landmark in the DOM, keep it out of any focus trap, and persist the decision in a versioned localStorage entry with a timestamp so it stays hidden once answered.

MeDoで試す
Persistent accessReopen

Banner With a Preferences Trigger

The banner plus a permanent footer link that reopens it. Consent that cannot be changed later is the most common defect in a shipped banner, and the fix is one link.

Create a cookie consent bar plus a persistent Cookie preferences button for the site footer that reopens the same panel with the stored values pre-loaded, so a visitor can withdraw consent as easily as they gave it. The panel lists Necessary, Functional, Analytics and Marketing switches with non-essential ones reflecting whatever was saved, and offers Accept all, Reject all and Save preferences. On reopen, move focus to the panel heading and return focus to the footer button on close. Write changes to the same versioned localStorage key with a fresh timestamp and emit a consent-changed event so already-loaded tags can be told to stop.

MeDoで試す
Geo-awareRegional

Region-Conditional Consent Banner

Shows the full category panel where prior consent is expected and a lighter notice elsewhere, driven by a server-supplied region hint. The requirements vary by jurisdiction, so confirm the rules for each region with counsel.

Create a consent component that takes a region prop resolved server-side from the request and renders one of two variants: a full category panel with all non-essential switches defaulting to off and Accept all, Reject all and Save preferences of equal weight, or a lighter notice with an acknowledge action and a link to a cookie settings page. Never pre-tick a non-essential category in either variant. Store the decision with the region and a schema version so the record explains which variant produced it, and re-prompt when the version changes. Keep the region check server-side so no tracking script loads before the variant is known.

MeDoで試す

Cookieバナー をカスタマイズする方法

サイトのデザインシステムに合わせる

プロンプトでブランドカラー、ボーダーラジアス、フォントを指定して、バナーがネイティブに見えるようにしましょう — サードパーティウィジェットのようではなく。ユーザーはサイトに馴染んだバナーほどインタラクションしやすくなります。

バナーの位置とアニメーションを選択

下部バー、センターモーダル、コーナートーストの3つが主要なパターンです。どれを好むか、スライドアップ、フェードイン、即時表示のどれにするかをMeDoに伝えてください。下部バーは最も邪魔にならず、モーダルは厳格な法域で最もコンプライアント的です。

ボタンの階層をカスタマイズ

ダークパターン(拒否ボタンを隠す)は規制当局の罰金を招きます。MeDoに「承認」と「拒否」に同等の視覚的重みを与えるか、詳細な同意モーダルにつながる中立的な「設定を管理」CTAを使用するよう依頼しましょう。

設定パネルを追加

より充実したコンプライアンスのために、カテゴリ別トグル付きの展開可能な設定パネル(分析、マーケティング、機能)を含めるようMeDoに依頼してください。これはGDPRコンプライアンスとユーザーの信頼のゴールドスタンダードです。

Cookieバナー コンポーネントを使うのは誰か

SaaS製品

承認/拒否とCookieポリシーへのリンク付きの軽量な下部バナー。邪魔にならないが準拠 — GDPR義務を果たしながらアプリUIを前面に保ちます。

ECサイト

分析、パーソナライゼーション、マーケティングCookieをカバーする設定モーダル付きの完全な同意バナー。広告ピクセルやリターゲティングを使用するショップに不可欠です。

マーケティングサイトやブログ

単一の「承認」ボタンとCookie設定へのテキストリンク付きのシンプルなCookieお知らせ。分析Cookieのみのコンテンツ重視サイト向けの最小限の摩擦。

エンタープライズまたは規制産業

ベンダー別トグル、同意決定の完全な監査ログ、目立つ「すべて拒否」オプションを備えた詳細な同意モーダル — 厳格なDPA要件を満たすために構築されています。

サイト種別ごとの Cookieバナー パターン

同じ cookieバナー コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 06

SaaS Product Consent

A bottom bar with equal-weight accept and reject, and the reject path wired to skip product analytics rather than just hiding the bar. The failure here is a banner on the marketing site and none inside the authenticated app, where most of the event tracking actually happens.

Cookieバナー のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 06

Bottom Bar Banner

Full-width strip pinned to the bottom, one line of copy, two buttons. The least disruptive pattern and the safest default. Watch the mobile height — a three-line bar covering a sticky Add to cart button is a conversion bug, not a design detail.

React・Next.js・Vue・Svelte での Cookieバナー

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ cookieバナー を 6 通りの方法で組み込めます。

01 / 06

React Cookie Banner

Consent belongs in a context provider at the app root, not in the banner — the banner is one reader of that state and every gated feature is another. Read localStorage in an effect so the first render matches the server.

src/components/ConsentProvider.tsx

const KEY = 'consent.v2'

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(null)

  useEffect(() => {
    setConsent(JSON.parse(localStorage.getItem(KEY) ?? 'null'))
  }, [])

  return (
    <Ctx.Provider value={{ consent, setConsent }}>{children}</Ctx.Provider>
  )
}

Cookieバナー をプロジェクトに追加する方法

cookieバナー テンプレートを選んで本番に載せるまでの 4 ステップ。

01~30s

Pick a Consent Pattern

Choose by how many distinct cookie purposes you actually have — a bottom bar for one analytics script, a category panel once marketing and functional tags are separate concerns.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the category descriptions with the tags you really run, since that list is what your policy page has to agree with.

03~1min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "give reject all the same weight as accept", "expand preferences in place", "add a footer trigger that reopens it".

04~2min

Gate Your Scripts and Verify

Wire analytics and pixel loading to the stored value, then load the site fresh and confirm no non-essential request fires before a choice. Specific consent obligations vary by jurisdiction — have counsel review what you ship.

Cookieバナーに関するよくある質問

AIでCookieバナーを作成するには?

MeDoで必要なCookie同意バナーを説明してください — 位置、ボタンラベル、使用しているCookie、ビジュアルスタイル。MeDoがコンポーネントの完全なコードを生成し、プロジェクトにコピーしたり、フォローアッププロンプトで洗練し続けることができます。ボイラープレートの検索は不要です。

最高のAI Cookieバナージェネレーターは?

MeDoはCookieバナーを含む、本番対応のウェブサイトコンポーネント生成に特化して構築されています。汎用AIツールとは異なり、MeDoはアクセシブルなマークアップとGDPR準拠のラベリングに適したデフォルト値を備えたクリーンでセマンティックなコードを出力します — 修正が必要な粗いテンプレートではありません。

AIはGDPR準拠のCookieバナーを生成できる?

MeDoはGDPRベストプラクティスパターンに従うCookieバナーを生成できます:同等の重みの承認/拒否ボタン、Cookieポリシーへのリンク、オプションのカテゴリ別同意トグル。ただし、真の法的コンプライアンスは特定のデータプラクティスと法域に依存します — 最終実装は必ず法務チームにレビューしてもらいましょう。

Cookieバナーに「すべて拒否」ボタンを追加するには?

プロンプトに含めるだけです — 例えば「承認ボタンと同じ視覚的重みのすべて拒否ボタンを追加」。MeDoが一致するスタイルで両方のボタンを生成し、適切なロジックプレースホルダーを配線します。

AIでCookie設定モーダルを生成できる?

はい。カテゴリ別トグル付きの設定パネル(例:分析、マーケティング、機能Cookie)を含めるようMeDoに依頼してください。MeDoがトグルスイッチ、カテゴリの説明、保存/確認アクション付きの完全なモーダルを生成します。

AI CookieバナーはGoogle AnalyticsやMeta Pixelと連携する?

MeDoはUIとコンセントゲートロジックを生成します。ユーザーの同意に基づいて分析スクリプトをブロックまたは読み込むためのプレースホルダーフックを含めるよう指示できます。特定のタグマネージャーや分析SDKとの接続には、生成後に小さな統合ステップが必要です。