OneTrustクッキー（Cookie）バナーのデザイン自由度について解説

目次：
・クッキー（Cookie）バナーの構造
・クッキー（Cookie）バナーのデザイン変更機能概要
・バナー第一層・第二層の配置場所やバナーテキストのカスタマイズ機能
・クッキーバナーのカラーや装飾、ロゴのカスタマイズ機能
・おわりに

世界各国のプライバシー保護規制に対応するため、また企業としてプライバシーを重視した対応によりブランド価値の向上を図るため、現在多くの企業様が「クッキーバナー」の導入を始めています。

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（英語）

バナー第一層・第二層の配置場所やバナーテキストのカスタマイズ機能

OneTrustは幅広いデザイン機能を持つクッキー同意管理ツールです。バナー第一層と第二層の両方で、配置のレイアウトやバナーテキストをカスタマイズすることができ、自社のコーポレートサイトやブランドサイトなど、ウェブサイトのデザイン・イメージに合わせた適切なクッキーバナーを設置できます。以下に、選択可能なレイアウトのパターンをご紹介します。

・バナー第一層（８パターン）

① サイト中央にクッキーバナーを表示。シンプルに同意・拒否・クッキー設定ボタンを配置

② サイト中央にクッキーバナーを表示。同じポップアップ内でクッキーのカテゴリ別に同意・拒否の設定が可能

③ サイトの下部全体に帯状のクッキーバナーを表示、頻繁に見かけるオーソドックスなパターン

④ サイトの上部全体に帯状にクッキーバナーを表示

⑤ サイトの左下にクッキーバナーを表示

⑥ サイトの右下にクッキーバナーを表示

⑦ サイトの下部にクッキーバナーを表示。「クッキー」のイラスト付き。ボタンは丸みのあるデザイン

また、バナー第一層のポップアップを出力させずに、下記に説明するバナー第二層のポップアップを直接出力させることもできます（⑧）。


・バナー第二層（4パターン）

バナー第二層では、より詳細なクッキーに関する説明の記載や、サイト訪問者の同意・拒否の選択を目的毎にするか、ベンダー毎にするかなどの選択が可能です。また、ポップアップ内で選択ボタンの配置やボタンのデザインなどをカスタマイズできます。

① ブラウザ中央にバナー第二層を表示

② ブラウザの左側にバナー第二層を表示。下記の例ではサイト内右側のテキストが隠れるのを防ぐ

③ ブラウザの右側にクッキーバナーを表示。下記の例ではサイト内左側の画像が隠れるのを防ぐ

④ ブラウザの中央にバナー第二層を表示。クッキー設定ボタンをタブ化し、クリックすると設定画面が表示される

ユーザビリティやオプトイン率、マーケティング効果などを勘案して、貴社にとって理想のレイアウトを選択しましょう。

クッキーバナーのカラーや装飾、ロゴのカスタマイズ機能

ウェブサイトは、企業様にとっても「顔」に相当する部分です。全体のウェブサイトのデザインイメージ・トーン&マナーによってサイト訪問者が受け取る印象が左右されます。OneTrustは、クッキーバナーのレイアウトやテキストの内容だけでなく、企業様が制作したウェブサイトのコンセプトに合わせて、テキストやボタンのカラー設定、そしてロゴの挿入などを行うことができます。

また、OneTrustが標準で用意したデザイン変更機能以上にカスタマイズされたい場合はCSSによる装飾も可能です。細かいデザインについて、ウェブデザインを担当されている制作ベンダー様がいらっしゃれば、ご相談される事もお薦めです。

おわりに

世界各国のプライバシー保護規制に対応するためや、また企業としてプライバシーを重視した対応によりブランド価値の向上を図るため、多くの企業様でクッキーバナーの導入が進む一方で、クッキーバナーのレイアウトやデザインについてはデフォルトのまま使用される企業様もいらっしゃいます。しかしながら、ウェブサイト全体の設計やコンテンツの配置などに照らし合わせた場合、クッキーバナーのレイアウトやデザインによって、サイト訪問者が煩わしく感じてしまったり、拒否率が上がりマーケティング効果が十分に得られなかったりするケースもあります。OneTrustは、幅広いデザイン機能を搭載し、お客様の望むように自由にクッキーバナーをカスタマイズできます。操作方法に不安があるというお客様のために、IIJではきめ細かなサポートプランを用意しておりますので、お困りの際はお気軽にこちらからご相談ください。

なお、各国の法規制に対応したクッキーバナーの実装例や、避けるべきダークパターンNG例などについては是非こちらのeBookもご覧ください。