--- title: OneTrustクッキー（Cookie）バナーのデザイン自由度について解説 description: OneTrustクッキー(Cookie)バナーの選べるレイアウトの種類や、カラー・装飾・ロゴ配置のカスタマイズ機能についてご紹介します。 image: https://cookie.bizrisk.iij.jp/hubfs/thumb0309.jpg --- 　 [![IIJ](https://cookie.bizrisk.iij.jp/hubfs/OneTrust_LP/img/icons/iij/iij_logo.png) ![IIJ](https://cookie.bizrisk.iij.jp/hubfs/OneTrust_LP/img/icons/iij/iij_logo.png)](https://cookie.bizrisk.iij.jp/?hsLang=ja-jp) - [機能](https://cookie.bizrisk.iij.jp/function/?hsLang=ja-jp) - [サポート](https://cookie.bizrisk.iij.jp/about-support/?hsLang=ja-jp) - [ブログ](https://cookie.bizrisk.iij.jp/blog/?hsLang=ja-jp) - [FAQ](https://cookie.bizrisk.iij.jp/faq/?hsLang=ja-jp) - [ご購入方法/料金](https://cookie.bizrisk.iij.jp/service-fee/?hsLang=ja-jp) - [お問い合わせ](https://cookie.bizrisk.iij.jp/inquery) [お問い合わせ](https://cookie.bizrisk.iij.jp/inquery/?hsLang=ja-jp) 1. [TOP](https://cookie.bizrisk.iij.jp/) 2. [ブログ](https://cookieblog.bizrisk.iij.jp/) # OneTrustクッキー（Cookie）バナーのデザイン自由度について解説 ## 新着記事 [導入準備](https://cookie.bizrisk.iij.jp/blog/tag/導入準備) ## [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護…](https://cookie.bizrisk.iij.jp/blog/privacy-report-20251023) 2025.10.24 [導入準備](https://cookie.bizrisk.iij.jp/blog/tag/導入準備) ## [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護…](https://cookie.bizrisk.iij.jp/blog/privacy-report-20250423) 2025.04.28 [導入準備](https://cookie.bizrisk.iij.jp/blog/tag/導入準備) ## [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護…](https://cookie.bizrisk.iij.jp/blog/privacy-report-20241024) 2024.10.25 [IIJサポートの紹介](https://cookie.bizrisk.iij.jp/blog/tag/IIJサポートの紹介) ## [【受付終了】6/19（水）ウェビナー：脱ダークパターンのすすめ　…](https://cookie.bizrisk.iij.jp/blog/seminar_0619) 2024.05.09 ## カテゴリー - [導入準備](https://cookie.bizrisk.iij.jp/blog/tag/導入準備) - [機能](https://cookie.bizrisk.iij.jp/blog/tag/機能) - [実装](https://cookie.bizrisk.iij.jp/blog/tag/実装) - [運用](https://cookie.bizrisk.iij.jp/blog/tag/運用) - [IIJサポートの紹介](https://cookie.bizrisk.iij.jp/blog/tag/IIJサポートの紹介) [IIJプライバシー保護規制対応支援ツールポータル 事務局](https://cookie.bizrisk.iij.jp/blog/author/iijプライバシー保護規制対応支援ツールポータル-事務局) 2022.03.09 [![X（旧Twitter）](https://cookie.bizrisk.iij.jp/hubfs/logo_metaX-2.svg)](https://twitter.com/intent/tweet?url=https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations&text=IIJクッキー規制ブログ%20%23クッキー規制%20) [![linkedin](https://cookie.bizrisk.iij.jp/hubfs/icon-linkedin.png)](http://www.linkedin.com/shareArticle?mini=true&text=IIJクッキー規制ブログ&url=https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations) [![Hatena bookmark](https://cookie.bizrisk.iij.jp/hubfs/icon-hatena.png)](http://b.hatena.ne.jp/entry/https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations)   [クッキーバナーテンプレート](https://cookie.bizrisk.iij.jp/blog/tag/クッキーバナーテンプレート) [機能](https://cookie.bizrisk.iij.jp/blog/tag/機能)   目次： [・クッキー（Cookie）バナーの構造](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#a1) [・クッキー（Cookie）バナーのデザイン変更機能概要](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#a2) [・バナー第一層・第二層の配置場所やバナーテキストのカスタマイズ機能](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#a3) [・クッキーバナーのカラーや装飾、ロゴのカスタマイズ機能](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#a4) [・おわりに](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#a5) 世界各国のプライバシー保護規制に対応するため、また企業としてプライバシーを重視した対応によりブランド価値の向上を図るため、現在多くの企業様が「クッキーバナー」の導入を始めています。 OneTrustでは、ウェブサイトのデザインイメージ・トーン&マナーに合わせたバナー表示や自社ブランドのロゴの挿入が可能で、企業イメージを向上させ、同意を取りやすいUIを検討しながらデザインをカスタマイズして設定していくことができます。 ## クッキー（Cookie）バナーの構造 クッキーバナーとは、一般的にはサイト訪問者からクッキー利用に対する同意を取得する機能を備えたポップアップ、あるいはそれを実装させるツールを指します。標準的なクッキーバナーの例としては、まずサイトで取り扱われるクッキーに関する概括的な利用目的の説明と「同意」ボタン、「拒否」ボタン、そして「クッキー設定」ボタンが設置されている「バナー第一層」が表示されます。そして「クッキー設定」ボタンをクリックすると、より詳細な説明を記載した「バナー第二層」が表示される構造になっています。サイト訪問者は「バナー第一層」で包括的な同意か、包括的な拒否を選択する、もしくは「クッキー設定」ボタンから「バナー第二層」を呼び出して、より細かい粒度（たとえば、クッキーの目的カテゴリー毎）で同意・拒否の選択を行うことが可能です。 ## クッキー（Cookie）バナーのデザイン変更機能概要 OneTrustのクッキーバナーでは、バナーテキスト（クッキー説明文言）はもちろん、クッキーバナーの表示位置や、同意・拒否ボタンの色、大きさなどを幅広くカスタマイズすることができます。ユーザビリティの観点からも、サイト訪問者が使いやすいクッキーバナーのデザインが望まれます。また、もし一般データ保護規則（GDPR）へ対応する場合、その同意要件から、サイト訪問者に同意を強要させないような中立的なデザインがクッキーバナーに求められます。このようなデザインのカスタマイズ機能は法令遵守のうえでも、また企業イメージを向上させ、同意を取りやすいUIを検討していくうえでも必要不可欠な機能といえます。 実際、クッキーバナーの設置場所やデザインにより、オプトイン率が大きく変わったという調査報告が公表されています。国際的な物流会社であるDHLによると、クッキーバナーの配置場所やデザインのパターンを複数用意し、自社サイトを使ってオプトイン率を計測したところ、最大で70%のオプトイン率となったということです。 （参考記事）[Despite GDPR: Up to 70% Analytics Opt-in rates – why extensive testing is worth every minute of effort](https://analytics.dhl.com/despite-gdpr-up-to-70-analytics-opt-in-rates-why-extensive-testing-is-worth-ervery-minute-of-effort/)（英語） ## バナー第一層・第二層の配置場所やバナーテキストのカスタマイズ機能 OneTrustは幅広いデザイン機能を持つクッキー同意管理ツールです。バナー第一層と第二層の両方で、配置のレイアウトやバナーテキストをカスタマイズすることができ、自社のコーポレートサイトやブランドサイトなど、ウェブサイトのデザイン・イメージに合わせた適切なクッキーバナーを設置できます。以下に、選択可能なレイアウトのパターンをご紹介します。 ・バナー第一層（８パターン） ① サイト中央にクッキーバナーを表示。シンプルに同意・拒否・クッキー設定ボタンを配置 ![0309①](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A0.jpg?width=599&name=0309%E2%91%A0.jpg) ② サイト中央にクッキーバナーを表示。同じポップアップ内でクッキーのカテゴリ別に同意・拒否の設定が可能 ![0309②](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A1.jpg?width=593&name=0309%E2%91%A1.jpg) ③ サイトの下部全体に帯状のクッキーバナーを表示、頻繁に見かけるオーソドックスなパターン ![0309③](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A2.jpg?width=588&name=0309%E2%91%A2.jpg) ④ サイトの上部全体に帯状にクッキーバナーを表示 ![0309④](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A3.jpg?width=600&name=0309%E2%91%A3.jpg)   ⑤ サイトの左下にクッキーバナーを表示 ![0309⑤](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A4.jpg?width=595&name=0309%E2%91%A4.jpg) ⑥ サイトの右下にクッキーバナーを表示 ![0309⑥](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A5.jpg?width=605&name=0309%E2%91%A5.jpg) ⑦ サイトの下部にクッキーバナーを表示。「クッキー」のイラスト付き。ボタンは丸みのあるデザイン ![0309⑦](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A6.jpg?width=553&name=0309%E2%91%A6.jpg) また、バナー第一層のポップアップを出力させずに、下記に説明するバナー第二層のポップアップを直接出力させることもできます（⑧）。 ・バナー第二層（4パターン） バナー第二層では、より詳細なクッキーに関する説明の記載や、サイト訪問者の同意・拒否の選択を目的毎にするか、ベンダー毎にするかなどの選択が可能です。また、ポップアップ内で選択ボタンの配置やボタンのデザインなどをカスタマイズできます。 ① ブラウザ中央にバナー第二層を表示 ![0309⑧](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A7.jpg?width=541&name=0309%E2%91%A7.jpg) ② ブラウザの左側にバナー第二層を表示。下記の例ではサイト内右側のテキストが隠れるのを防ぐ ![0309⑨](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A8.jpg?width=536&name=0309%E2%91%A8.jpg) ③ ブラウザの右側にクッキーバナーを表示。下記の例ではサイト内左側の画像が隠れるのを防ぐ ![0309⑩](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%A9.jpg?width=534&name=0309%E2%91%A9.jpg) ④ ブラウザの中央にバナー第二層を表示。クッキー設定ボタンをタブ化し、クリックすると設定画面が表示される ![0309⑪](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%AA.jpg?width=539&name=0309%E2%91%AA.jpg) ユーザビリティやオプトイン率、マーケティング効果などを勘案して、貴社にとって理想のレイアウトを選択しましょう。 ## クッキーバナーのカラーや装飾、ロゴのカスタマイズ機能 ウェブサイトは、企業様にとっても「顔」に相当する部分です。全体のウェブサイトのデザインイメージ・トーン&マナーによってサイト訪問者が受け取る印象が左右されます。OneTrustは、クッキーバナーのレイアウトやテキストの内容だけでなく、企業様が制作したウェブサイトのコンセプトに合わせて、テキストやボタンのカラー設定、そしてロゴの挿入などを行うことができます。 ![0309⑫](https://cookie.bizrisk.iij.jp/hs-fs/hubfs/0309%E2%91%AB.jpg?width=1377&name=0309%E2%91%AB.jpg) また、OneTrustが標準で用意したデザイン変更機能以上にカスタマイズされたい場合はCSSによる装飾も可能です。細かいデザインについて、ウェブデザインを担当されている制作ベンダー様がいらっしゃれば、ご相談される事もお薦めです。 ## おわりに 世界各国のプライバシー保護規制に対応するためや、また企業としてプライバシーを重視した対応によりブランド価値の向上を図るため、多くの企業様でクッキーバナーの導入が進む一方で、クッキーバナーのレイアウトやデザインについてはデフォルトのまま使用される企業様もいらっしゃいます。しかしながら、ウェブサイト全体の設計やコンテンツの配置などに照らし合わせた場合、クッキーバナーのレイアウトやデザインによって、サイト訪問者が煩わしく感じてしまったり、拒否率が上がりマーケティング効果が十分に得られなかったりするケースもあります。OneTrustは、幅広いデザイン機能を搭載し、お客様の望むように自由にクッキーバナーをカスタマイズできます。操作方法に不安があるというお客様のために、IIJではきめ細かなサポートプランを用意しておりますので、お困りの際はお気軽に[こちら](https://cookie.bizrisk.iij.jp/inquery)からご相談ください。 なお、各国の法規制に対応したクッキーバナーの実装例や、避けるべきダークパターンNG例などについては是非[こちらのeBook](https://portal.bizrisk.iij.jp/ebook/7)もご覧ください。 --- [![X（旧Twitter）](https://cookie.bizrisk.iij.jp/hubfs/logo_metaX-2.svg)](https://twitter.com/intent/tweet?url=https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations&text=IIJクッキー規制ブログ%20%23クッキー規制%20) [![linkedin](https://cookie.bizrisk.iij.jp/hubfs/icon-linkedin.png)](http://www.linkedin.com/shareArticle?mini=true&text=IIJクッキー規制ブログ&url=https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations) [OneTrustクッキー（Cookie）バナーのデザイン自由度について解説">![Hatena bookmark](https://cookie.bizrisk.iij.jp/hubfs/icon-hatena.png)](http://b.hatena.ne.jp/entry/https%3A%2F%2Fcookie.bizrisk.iij.jp%2Fblog%2Fcookie-banner-layout-design-variations) - ### クッキー関連のニュース [![クッキー関連のニュース](https://no-cache.hubspot.com/cta/default/6528117/b2814b3d-0224-40bc-a4fc-2f4fcb4c9b75.png)](https://cta-redirect.hubspot.com/cta/redirect/6528117/b2814b3d-0224-40bc-a4fc-2f4fcb4c9b75) - ### 国内外のクッキー規制対応（ナレッジベース） [![国内外のクッキー規制対応（ナレッジベース）](https://no-cache.hubspot.com/cta/default/6528117/806a1854-43fd-4aab-b0a0-ff82911d2c9b.png)](https://cta-redirect.hubspot.com/cta/redirect/6528117/806a1854-43fd-4aab-b0a0-ff82911d2c9b) - ### データマッピング&プライバシーリスク評価ツール導入・運用支援の紹介 [![](https://cookie.bizrisk.iij.jp/hubfs/onetrust_sidemovie.jpg)](https://cookie.bizrisk.iij.jp/blog/cookie-banner-layout-design-variations#sample) ### タグ [スキャン](https://cookie.bizrisk.iij.jp/blog/tag/スキャン) [クッキーバナースクリプト](https://cookie.bizrisk.iij.jp/blog/tag/クッキーバナースクリプト) [クッキーバナーテンプレート](https://cookie.bizrisk.iij.jp/blog/tag/クッキーバナーテンプレート) [サポート](https://cookie.bizrisk.iij.jp/blog/tag/サポート) [クッキー分類](https://cookie.bizrisk.iij.jp/blog/tag/クッキー分類) [ジオロケーションルール](https://cookie.bizrisk.iij.jp/blog/tag/ジオロケーションルール) [ライセンス](https://cookie.bizrisk.iij.jp/blog/tag/ライセンス) [言語設定](https://cookie.bizrisk.iij.jp/blog/tag/言語設定) [クッキー制御](https://cookie.bizrisk.iij.jp/blog/tag/クッキー制御) [ダッシュボード・レポート](https://cookie.bizrisk.iij.jp/blog/tag/ダッシュボード-レポート) [不明クッキー](https://cookie.bizrisk.iij.jp/blog/tag/不明クッキー) ### メルマガ 最新情報をBizRis会員に毎週配信 [BizRis会員登録はこちら](https://portal.bizrisk.iij.jp/intro/#menu) ### 最新記事 [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護規制調査レポート　【10月23日更新】のお知らせ](https://cookie.bizrisk.iij.jp/blog/privacy-report-20251023) 2025.10.24 [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護規制調査レポート　【4月23日更新】のお知らせ](https://cookie.bizrisk.iij.jp/blog/privacy-report-20250423) 2025.04.28 [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護規制調査レポート　【10月24日更新】のお知らせ](https://cookie.bizrisk.iij.jp/blog/privacy-report-20241024) 2024.10.25 [【受付終了】6/19（水）ウェビナー：脱ダークパターンのすすめ　顧客重視の誠実な姿勢が企業の持続的成長を加速させる!?](https://cookie.bizrisk.iij.jp/blog/seminar_0619) 2024.05.09 [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護規制調査レポート　【4月25日更新】のお知らせ](https://cookie.bizrisk.iij.jp/blog/privacy-report-20240425) 2024.04.30 ### アクセスランキング [OneTrustの多言語設定機能について](https://cookie.bizrisk.iij.jp/blog/onetrust-multi-language-settings) 2022.04.06 [世界各国のクッキー規制の情報収集に最適！ 世界のプライバシー保護規制調査レポート【1月24日更新】のお知らせ](https://cookie.bizrisk.iij.jp/blog/privacy-report-20230124) 2023.01.25 [クッキー同意管理ツールの実装でつまずきやすいポイントシリーズ~スキャン編~](https://cookie.bizrisk.iij.jp/blog/cookie-oetrust-scan-point) 2021.05.20 [セミナーレポート「導入からサポートまで！OneTrust社Cookieツールで万全な対策を」](https://cookie.bizrisk.iij.jp/blog/cookie-seminar-report01-b) 2020.03.04 [スポットサポートのご案内](https://cookie.bizrisk.iij.jp/blog/spot-support-how-to-ask) 2020.12.22 ### 無料eBook一覧 - [![](https://cookie.bizrisk.iij.jp/hubfs/sidebar/ebook_ga.jpg) Google Analyticsと改正個人情報保護法～法令遵守上のポイントと透明性確保の重要性～　無料ダウンロード](https://portal.bizrisk.iij.jp/ebook/10) - [![](https://cookie.bizrisk.iij.jp/hubfs/sidebar/side_ebook01.jpg) すぐに役立つ！ クッキーバナー表示のNG集　無料ダウンロード](https://portal.bizrisk.iij.jp/ebook/7) ## プライバシー専門家による 安心の日本語サポート IIJが数多くのコンサルティングで得たクッキーツール導入・運用に関する知見や導入マニュアル・運用ガイド、よくある技術的問い合わせ（FAQ）、プライバシー保護規制対応ガイドやCSSデザイン集等、有用なコンテンツをサポートポータルにて無料で公開しています。これらを参照頂ければお客様自身で導入・運用が可能です。 ##### IIJプライバシー保護規制対応支援ツールポータル OneTrustクッキー同意管理バナーは、近年規制が強まるGDPR/ePrivacy指令やCCPA等各国のプライバシー保護規制が求めるクッキー規制に対応したクッキー(Cookie)同意管理ソリューションです。 私たち株式会社インターネットイニシアティブ（IIJ）は米国OneTrust社認定販売パートナ－です。このページでは、世界で75,000以上のWebサイトで導入されているOneTrust社のクッキー同意管理バナーの機能や、IIJのサポート内容を紹介します。 グローバルのプライバシー保護規制と技術のエキスパートである株式会社インターネットイニシアティブ（IIJ）がお客様のWebサイトへOneTrustクッキー同意管理ソリューションの導入を支援します。 ##### コンテンツ - [TOP](https://cookie.bizrisk.iij.jp/) - [機能](https://cookie.bizrisk.iij.jp/function/) - [サポート](https://cookie.bizrisk.iij.jp/about-support/) - [ブログ](https://cookie.bizrisk.iij.jp/blog/) - [FAQ](https://cookie.bizrisk.iij.jp/faq/) - [ご購入方法/料金](https://cookie.bizrisk.iij.jp/service-fee/) ##### ご利用にあたって - [このサイトについて](https://cookie.bizrisk.iij.jp/about-website/) - [個人情報の取り扱いについて](https://cookie.bizrisk.iij.jp/privacy-policy/) - [IIJについて](https://www.iij.ad.jp/) ##### 関連サービス - [IIJビジネスリスクマネジメントポータル](https://www.bizrisk.iij.jp) - [プライバシー保護規制対応ソリューション](https://www.iij.ad.jp/biz/gdpr/) --- © Copyright Internet Initiative Japan Inc.