Cookie確認画面の参考デザイン(基本&かわいいクッキー画面)

Video recording for online suggestions about healthy food. smiling woman showing hand made cookies 自力のホームページ作成

ウェブサイトに掲載するデザインが可愛いCookie確認画面を集めてみました。

クッキー(Cookie)とは?Cookie

ウェブサイトに表示されるポップアップのCookie確認画面は、訪問者に対してそのサイトがクッキー(Cookie)を使用していることを知らせ、ユーザーの同意を求めるものです。

クッキーは、ユーザーのデバイスに保存される小さなデータファイルで、サイトのパフォーマンスを向上させたり、訪問者のサイト利用体験をカスタマイズするために使用されます。

また、広告のターゲティングや利用者の行動分析など、マーケティング目的で用いられることもあります。

今後はクッキー(Cookie)確認画面が必要になります

日本ではまだ必須ではありませんが、EUの一般データ保護規則(GDPR)など、プライバシーに関する法律の下では、ウェブサイト運営者はクッキーを使用する前にユーザーから明示的な同意を得る必要があります。

そのため、訪問者がサイトにアクセスすると、クッキーの使用を許可するかどうかを選択する画面がポップアップ形式で表示されます。

この画面では、どの種類のクッキーが使用されるのか、その目的が何であるかが説明されており、ユーザーはそれぞれのクッキーの使用を許可するか拒否するかを選択できます。

そのため、今から参考になりそうなかわいい、おしゃれなデザインを集めて行こうと思います。

サイト運営者側としては、Cookieを許可してほしいため、デザインも許可をするボタンの方が色がはっきりしていたり、クリックしやすい位置にあります。

ベーシックのCookie確認画面

ウェブサイトのファーストビューの下に表示される基本なシンプルなクッキー確認画面です。

▼ こちらは、案内だけで閉じるボタンのみのCookie確認画面です。

出典:DeepL

▼ Cookieをどう扱うのかについてきちんと説明がされていますが、「すべてのCookieを許可する」ボタンと「Cookieを管理する」ボタンが背景と溶け込んでいて、少しわかりにくく感じます。

出典:Canva

▼「同意しない」白いボタンが左に配置されて、緑の「すべて受け入れる」が右に配置されています。
一般ユーザーは右側の方をクリックする傾向があるため、デザインとしてより目立つ緑のボタンで「すべて受け入れる」のデザインになっていますね。

出典:Jimdo

▼ GoogleのAdSense広告のCookie画面は、同意するも同意しないも同じデザイン、同じ色のボタンです。とても中立ですね。

出典:Google AdSense

 

右下にポップアップで表示されるデザインのCookie確認画面

▼ クッキーが食べるクッキーのアイコンになっていて可愛いデザインです。

出典:Toobit

▼ シンプルですが、色のコントラストがはっきりしているので分かりやすく目立つデザインです。許可するボタンのオレンジがわかりやすいです。

出典: Ubersuggest

 

かわいいデザインのCookie確認画面

Cookieがお菓子のクッキーになっていてかわいいですね

 

 

出典:WP Media – We help people having faster websites

 

出典:WP Media – We help people having faster websites

出典:WP Media – We help people having faster websites

 

クッキー選択画面

Image from Gyazo

キャラクターがかわいいデザインですね。

 

しっかりしたのCookie確認画面

▼ 日本の会社でここまでしっかりとした目的別に選択できるクッキーの使用許可画面はすごいですね!さすがKDDIウェブコミュニケーションズさん。

出典:KDDIウェブコミュニケーションズ

 

タブで分けられてより詳細なクッキー確認画面

3つのタブで詳細が分かれていいます。

(出典:GOOSE VPN )

▼真ん中の詳細タブの画面です

 

画面いっぱいに表示

UKのYahooニュースは、画面いっぱいに下記の内容のようにしっかりと詳しくわかりやすく記載されています。

出典:UKのYahooニュース

プロフィール

MIYUKI
こんにちは、三重県四日市出身です。ネットショップやWordPressなどの制作やコンサルやセミナー講師等で教えています。このブログは最近雑多になってしまったため、備忘録として色々書いています。
■ はっちゃんセミナー
タイトルとURLをコピーしました