Web担当者が知っておきたい!Webサイトを闇堕ちさせないためのデザインのダークパターンの知識

2024年01月23日

2024年07月10日

こんにちは、ASUE株式会社広報のN村です!

みなさんは「ダークパターン」と呼ばれるものをご存知でしょうか。Webサイトのデザインやユーザーの心理などを利用して、ユーザー側に不利益となる行動をとらせてしまう手法のことです。

例えば、「今なら限定500円!(定期購入3ヶ月以上契約の初月限定、次月以降3980円)」のように、実は定期購入なのに1回の購入だけでお得に見せるような広告。

最低3ヶ月の定期購入だし、翌月以降は3980円の金額がかかるため、実際には最低でも500 + 3980 × 2 = 8460円の支払いが発生するにもかかわらず、表記をとても小さくすることでそれをわかりにくくしており、ユーザーが500円の支払いだけでOKと勘違いして気付かずに契約してしまう可能性があります。

このようなユーザーを騙してあわよくばを狙うような手法のデザインを、近年ではダークパターンと呼び、(ダークパターンにあてはまるかどうかに関わらず)ギリギリのラインを狙って騙すようなやり口は世界的にも規制強化される流れとなっています。

「これは明らかにダメでしょ……」というものだけでなく、意外と普通に「こういうのよく見るよね」というものもあり、普通に、まっとうに、やっているつもりであっても、気付かずに取り入れている場合もあるかもしれません。

作る側(マーケターやデザイナーなど)としても見る側(ユーザー)としても、知っておけば避けられると思うので、今回はダークパターンのよくある具体例をご紹介します。

ダークパターンの種類

ダークパターンにはいくつか種類があります。

分類方法もいくつかあるようですが、主な分類がこちら!

プリンストン大学による7つの分類

  • Sneaking (こっそり)
  • Urgency(緊急)
  • Misdirection(ミスディレクション)
  • Social Proof(社会的証明)
  • Scarcity(希少性)
  • Obstruction(妨害)
  • Forced Action(強制)

参考:「Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites」
https://webtransparency.cs.princeton.edu/dark-patterns/

ダークパターンを提唱したハリー・ブリグナル氏による分類

  • Comparison prevention(比較の妨害)
  • Confirmshaming(羞恥心の植え付け)
  • Disguised ads(偽装広告)
  • Fake scarcity(希少性の偽装)
  • Fake social proof(社会的証明の偽装)
  • Fake urgency(緊急性の偽装)
  • Forced action(強制)
  • Hard to cancel(キャンセルしにくい)
  • Hidden Costs(隠れた料金)
  • Hidden subscription(隠れたサブスクリプション)
  • Nagging(しつこい)
  • Obstruction(妨害)
  • Preselection(事前選択)
  • Sneaking(こっそり)
  • Trick wording(紛らわしい文言)
  • Visual interference(視覚的干渉)

参考:「Types of deceptive pattern」
https://www.deceptive.design/types

後者はプリンストン大学の7つの分類をさらに細かく分類したものと言えるかと思います。

今回はハリー・ブリグナル氏による分類をプリンストン大学の7つの分類をもとにグルーピングしながら、具体的にどのようなものがあるかをご紹介します。

ダークパターンの具体例

Sneaking(こっそり)

ユーザーにとって不利益だったり望ましくないことなどを意図的に隠すことで、本来であればユーザーが選ばない行動をとるよう操作することを目的とします。

Preselection(事前選択)やHidden costs(隠れた料金)、Hidden subscription(隠れたサブスクリプション)などがこのSneakingの一種にあたります。

Hidden Costs(隠れた料金)

商品・サービスの価格に加えて、その商品やサービスを得るのにその他の手数料やオプション料金などがかかることが支払い直前までわからないようにすること。

例:

・チケット購入前には書かれていなかった諸手数料が決済時に記載されており、思っていたよりも高い金額を払わないと買えなかった

・モールサイトから欲しい商品を出品している業者のうち、安い店舗を選択。だが、送料が高額だった。

広報のN村

謎の高額送料、Amazonで買い物する時に、販売元がAmazon以外のときにたまに起きますよね。3000円のもの買おうとしたら送料も3000円になってたことがある。くわばらくわばら。

参考:「7.隠されたコスト」
https://darkpatterns.jp/types-of-dark-pattern/hidden-costs/

「ダークパターン事例 最後に予想外の料金が発生する「隠れたコスト」」
https://darkpatterns.jp/blog/hidden-costs/

「Hidden Costs」
https://www.deceptive.design/types/hidden-costs

Hidden subscription(隠れたサブスクリプション)

明示的な同意がないまま、気付かぬうちにサブスクリプションに登録され、支払いをすることになっていること。ユーザーは一度や単品での購入のつもりでいたのに知らぬ間にサブスクリプションに登録されており、本人が気がつくまで定期的に支払いが発生する。

例:

・オプションの有料機能(月額)であることを明示せず、利用ボタンのクリックで自動で支払いが追加される

広報のN村

実在の例をもとにちょっと変えて画像を作ってるんですが、なんてアコギな……と思ってたら、わりと有名なツールだったのでびっくりした。

参考:「Hidden subscription」
https://www.deceptive.design/types/hidden-subscription

Comparison prevention(比較の妨害)

機能や価格が複雑に組み合わされていたり重要な情報が見つけられなかったりなど、ユーザーが商材やサービスを正確に比較・検討をすることが難しい状態のこと。

例:

・からあげ5個499円とからあげ100g 449円のように、販売単位を変えて売る

・プランごとに価格表記が統一されていない(税込と税抜が混在)

・最安のプランだけ小さいリンクになっている

・プランの紹介ページで各プランの詳細がしっかり見られない  など

広報のN村

1個おかしな販売単位があるな。

参考:「ダークパターン事例 賢い買い物を妨害する「価格比較の阻止」」
https://darkpatterns.jp/blog/price-comparison-prevention/

「5.価格比較の阻止」
https://darkpatterns.jp/types-of-dark-pattern/price-comparison-prevention/

「Comparison prevention」
https://www.deceptive.design/types/comparison-prevention

Preselection(事前選択)

ユーザーが購入等のアクションをとるときに、最初からオプションなどのチェックボックスが自動で選択されており、ユーザーが意図しないものに対して支払いが発生する可能性がある。

例:

・寄付を行う際に、予め「毎月同額の寄付をする」というチェックボックスが選択されており、毎月寄付することに

・サービスの契約の際、購入しなくていいオプション機能が予め選択されており、追加の支払いが発生

Obstruction(妨害)

ユーザーの目的のアクション(タスクの完了や情報へのアクセスなど)を妨害すること。

物理的に妨害するHard to cancelや、心理的に妨害するConfirmshamingなどもこの一種と言える。

例:

・プライバシー設定で「同意して続行」は簡単だが、拒否の場合は「データの取り扱いの設定」などユーザーが混乱しかねないステップを挟むこと。

Hard to cancel(キャンセルしにくい)

登録は簡単なのに、解約や退会が難しいサービスやサブスクリプション。

例:

・定期購入の開始はWebサイト上から可能だが解約は電話のみ

・Webサイトの月額会員の退会用ページリンクがフッターのメニュー内に設置されていなかったりわかりにくいページ遷移をする必要があったりする

インターネットで「Hard to cancel ダークパターン」で検索するとトップに出てくるこちらの記事が面白かったので読むと良いです。

君は3分以内に「Amazonの退会ボタン」を見つけられるか──ダークパターンの規制と今後
https://note.com/ml_s_hayashida/n/ne55f03f96986

後述のVisual interference(視覚的干渉)など、別のダークパターン手法と組み合わせてキャンセルが難しくなってる場合も多いと思います。

広報のN村

定期商品を解約しようと思ったら0570から始まるナビダイヤル、電話をかけたら長々質問。そういうオペレーションなんだろうけど、もう絶対そこのものを買わないかな〜と思った経験がある。

そして会員退会ページを探すのは一種の宝探しゲームみたいなものだと思っている。すぐ見つけさせてほしい。

Confirmshaming(羞恥心の植え付け)

ユーザーの心理を利用して、騙すような形で同意等をさせること。

例:

・メルマガ等の登録解除のクリックリンクを「お得な情報は必要ありません」とする

・解約や退会時に悲しげなキャラクターによる「お別れは寂しいです」などの表示

例のように、同意しない選択や退会・解約などをすることに対して罪悪感などのネガティヴな感情を起こさせ、そのユーザーの心理状況を利用して有利な行動を起こしてもらう手法がこちら。

しょんぼりしたアスエくん(30秒で描きました)が何かのキャンセルを引き留め、「苦渋の決断の末キャンセルする」というボタンを押すことになります。なんとなく罪悪感を抱く人がいてもおかしくないかもしれません。

広報のN村

ボタンの文言はともかく、キャラクターこういうのは単なる企業のちゃめっ気だと思っていた……

参考:

「ダークパターン事例 羞恥心を植え付ける「コンファームシェイミング」」
https://darkpatterns.jp/blog/confirmshaming/

「9.コンファームシェイミイング(羞恥心の植え付け)」
https://darkpatterns.jp/types-of-dark-pattern/confirmshaming/

「Confirmshaming」
https://www.deceptive.design/types/confirmshaming

Forced action(強制)

特定のアクションをとらないとコンテンツを閲覧できないなど、ユーザーに何かを提供する代わりに無理やり望ましくないアクションをとらせること。

後述のSneaking(こっそり)やTrick wording(紛らわしい文言)、Visual interference(視覚的干渉)などと組み合わせられることも多い。

Naggingなどもこれにあたる。

例:

・Cookie同意の確認ポップアップの[OK]をクリックしないとコンテンツを閲覧できない(拒否のボタンは目立たず押しにくい)

・サイトへの登録ステップの中で、登録に必要のない情報の入力画面を設置。スキップボタンは小さく目立たない。

Nagging(しつこい)

ユーザーに対してなんらかのアクションをさせるためのアラート等をこまめに表示することで、ユーザーの邪魔をして同意させようとする方法。

例:

・アプリの通知をONにさせるアラートを閲覧中に何度も表示する。[今はしない]を選べば一旦は消えるが、[はい]を選ぶまでは何度でも出続ける

Misdirection(誘導)

デザインや文言などでユーザーが意図しない購入・登録等の行動を取らせる方法。

Trick wordingやDisguised ads、Visual interferenceがこの一種。

Trick wording(紛らわしい文言)

誤解を招く紛らわしい表現を使って、ユーザーに誤解させ行動を起こさせる手法。

例:

・旅行会社のフライト予約ステップで、居住国の選択項目があり、これを選択すると自動で旅行保険へ加入することになる。加入不要の場合はドロップダウンの中から「保険は必要ありません」を選ぶ必要があった。

・2つのチェックボックスを並べ、片方は「◯◯を希望しない」もう一方は「××を希望します」などチェックの意味を項目ごとに変える

Disguised ads(偽装広告)

ボタン風のデザインなどにすることで、ユーザーがWebサイトのインターフェースの一要素やネイティブコンテンツだと勘違いしてクリックしてしまうような広告のこと。

例:

・「DOWNLOAD」と書かれたボタン風の広告(ソフトウェア等のダウンロードページによく出てきますね)

・PCなどのシステムからの警告に見せかける広告(セキュリティシステムが破損しています!等)

・別の動きをするように見せているバナー(スワイプできそうな矢印がある、等)

例えばこんな感じのボタンが、何かのダウンロードページに正規のダウンロードボタンとは別に表示されていた経験はありませんか?

本物のダウンロードボタンだと間違えて押してしまって、思っても見ないページが開いた経験がある方もいるかと思います。

広報のN村

間違えてクリックしてもらえたらOKなわけじゃない……

参考:「ダークパターン事例 コンテンツにカモフラージュする「偽装広告」」
https://darkpatterns.jp/blog/disguised-ads/

「10.偽装広告」
https://darkpatterns.jp/types-of-dark-pattern/disguised-ads/

「Disguised ads」
https://www.deceptive.design/types/disguised-ads

Visual interference(視覚的干渉)

ページの見た目上で、重要な情報やリンクを小さい文字や背景とのコントラストの小さい色などで表記するなど、ユーザーにわかりにくくしておくこと。

例:

・「今なら限定500円!(定期購入3ヶ月以上契約の初月限定、次月以降3980円)」←これ

冒頭でも紹介したような、極端に目立たないように小さくしたり背景の色と同化する色を使ったりして重要な情報・リンクを隠す手法です。

参考:「Visual interference」
https://www.deceptive.design/types/visual-interference

Fake scarcity(希少性の偽装)

商品やサービスの入手がしにくい・可能性が低いとユーザーに思わせ、チャンスを逃すことを恐れたユーザーに行動を促すもの。

例:

・在庫数:3個 本日12個売れました!(※嘘)のような偽の表記をする

Fake social proof(社会的証明の偽装)

レビューなどの「他のユーザーがおすすめしている」というような偽装や誇張を行って、信頼性のある商品やサービスだと思わせる方法。

例:

・偽のレビューの掲載

・Aさんが3分前にこの商品1を購入しました! のような偽のメッセージを掲載

Fake urgency(緊急性の偽装)

実際はそんなことはないのに時間的に余裕がないと思わせることで、購入や申込などに至らせる方法。

例:
・カウントダウンタイマーを設置し、制限時間内30%オフ!を謳っているのに、タイマーをループさせている

本日中30%OFF!!

残り時間は……

hours

minutes

seconds

広報のN村

本当にその日だけで終わるならいいけど、このタイマーはアクセスした日時を取得してそこから翌日0時00分までのカウントダウンを走らせる状態になっているので「緊急性の偽装」ということになります。

他にも、「今だけ入会費無料キャンペーン!」のようなものをずっとやっている場合もこれにあたります。この辺りは、景品表示法の「有利誤認」にもあたると考えられるので要注意です。

広報のN村

「今だけ」を謳ったお得なキャンペーンなどをやる場合は、定期的にやるにしてもきっちり期間を区切ってやるなどやり方を考えて実施しましょう。

まとめ

以上がダークパターンの種類と具体例となります。

意外と、「あれ、普通に利用しているWebサイトでも見たことあるな?」と思うものもありますよね。ダークパターンと呼ばれるもの自体は、現在国内で法的な規制はありません。(もちろん、ものによっては上述の通り景品表示法の有利誤認などに抵触する可能性もありますが……。→その辺りについての詳細はこちらもどうぞ:「知らなかった」が命取り!?Web広告に関わる景品表示法・薬機法のこと

ですが、このようなダークパターンを多用していると、ユーザーに不信感を抱かせたりブランドを毀損する可能性もあります。

デザインは、正しく情報を伝えたり魅力を伝えたりするのに非常に有用です。が、良くない使い方をすると今回紹介したダークパターンのような感じになってしまうことも。

広報のN村

闇堕ちをさせないように気をつけましょう。

ASUEでは、Web広告やデザインなどをはじめとしたWebマーケティングの情報を本ブログやメルマガにて情報発信しております。

もし興味がある方は、メールマガジンへのご登録をよろしくお願いいたします!

せっかく制作したLP、成果出てますか?

  • ブランディング色が強く訴求がおろそかに……
  • なんのサービスかがわかりにくい
  • ターゲットに刺さりにくいデザインになっている
  • CVRが低い・成果に繋がっていない

Web広告改善事例集見本

本資料では、上記のやりがちな失敗を踏まえて
売れるデザインにするための効果的な方法を分かりやすく紹介!

【無料】LP制作のポイント集をダウンロード