デザイナーが避けるべきダークパターンとは？？

• Web Create
• 2022.09.08

今回はWebサイトをデザインする上で気をつけなければいけないダークパターンについてご説明いたします。

そもそもダークパターンとは？？
ダークパターン（Dark pattern）とは、主にWebサイトなどでユーザーを騙すために作られたユーザインタフェースになります。
2010年8月にイギリスのWebデザイナーであるハリー・ブリヌルによって命名されました。
参照元：Wikipedia

買うつもりのない商品を購入していたり、覚えのないメルマガが送られてくるなどといった経験はありませんか？
もしかしたらダークパターンの被害にあっていたかもしれません。

ダークパターンの種類

ダークパターンとは実際にどのようなものなでしょうか。
ダークパターンの種類についてはハリー・ブリヌルの運営するDARK PATTERNSに紹介されています。

ひっかけ質問（Trick questions）
フォームを入力しているとき等に、ユーザーが意図しない回答をするような文言のチェックボックス等を配置します。ざっと目を通すと、あたりまえの質問に見えますが、注意深く読むと、まったく別のことを尋ねているように見えます。

カートへの忍び込み（Sneak into Basket）
何かを購入しようとした際に、知らない項目が追加されている。
ギフトラッピングの料金が勝手に追加されているなどが多いようです。

ごきぶりホイホイ（Roach Motel）
入会や登録は楽にできるのに、解約・解除を面倒にして抜けづらくします。
本当にゴキブリホイホイのようですね（笑）

Zuckeringプライバシー（Privacy Zuckering)
利用者が意図している以上に個人情報を公開・共有させるインターフェースのことのようです。
利用規約などあまり読まない中に同意条件が入れられていて、実際に意図したよりも多くの情報を公に共有するように仕向けられてしまいます。 FacebookのCEO、マーク・ザッカーバーグにちなんで名付けられたようです。

価格の比較防止（Price Comparison Prevention）
商品の単位や数値を比較しづらくする方法です。
10個で1000円で売られている商品なのに、少し量が多くなると1kgで1500円などと書かれている、商品の金額を比較しづらいように記載しているものです。

注意逸らし（Misdirection)
このデザインは、注意を別のものからそらすために、意図的に注意を 1 つのことに集中させます。
2択の選択肢の片方をものすごく強調しているようなインターフェイスのことですね。

隠された費用（Hidden Costs）
購入の最終ステップになって予期しない金額が発生している、配送料、消費税など。

おとり販売（Bait and Switch）
おとりの情報を活用して利用者が意図しない行為を実行させる
今まではクリックすると閉じるだけだったボタンに、違うものが追加されてしまっている、アップデートを勝手にされてしまうなど

羞恥心の植え付け（Confirmshaming)
ユーザーに何かを選択させる画面でに罪悪感を抱かせるような選択肢を用意します。辞退することは恥ずかしいことのような文言で表現されています。
「このキャンペーンを使用しないで通常価格で購入します」といった選択肢ですね。

偽装広告（Disguised Ads)
クリックさせるために、他の種類のコンテンツまたはナビゲーションを装った広告。
ニュース項目にバナーや広告を混ぜてしまう等。

強制的な継続性（Forced Continuity)
サービスの無料試用期間が終了し、クレジット カードから警告なしに金額が引かれてしまう。場合によっては、メンバーシップのキャンセルが困難になることで、これがさらに悪化します。

なりすましスパム（Friend Spam)
友人検索に使用するといった説明でメールやソーシャルメディアへのアクセス許可が求められます、許可を押してしまうと、自身のアドレスやソーシャルメディアのアカウントから勝手に情報が発信されてしまうようなパターンを指します。
こちらはもう怖いでしかないですね。

緊急性
こちらはややこしいのですが、キャンペーン等で「60分以内に購入で、割引実施中！残り00:59:30」と出ているにも関わらず、60分を過ぎてもそのクーポンが利用できる場合です。
実際に60分で終了のものは当てはまらないようです。

よく見るダークパターンの具体例

定期購読などのチェックボックス

こちらは先程のもので言うと「ひっかけ質問（Trick questions）」と「注意逸らし（Misdirection)」のあ合わせ技になりますね。
チェックボックスの文言が薄くて分かりづらいのと文言の内容が定期購読にチェックが付いた状況になってしまっています。

POPUP画面のキャンセルや解除ボタンが見つけずらい

こちらはPOPアップで表示されたキャンペーン広告になります。
先程のもので言うと、「ごきぶりホイホイ（Roach Motel）」「注意逸らし（Misdirection)」「羞恥心の植え付け（Confirmshaming)」「緊急性」といったダークパターンを盛り込みました（笑）

「ごきぶりホイホイ（Roach Motel）」
右上の「閉じるボタン」が黒い色で見えず閉じれることがわからない

「注意逸らし（Misdirection)」
キャンペーンを利用しないリンクの色が薄すぎて見えづらくなってしまっている

「羞恥心の植え付け（Confirmshaming)」
キャンペーンを利用しないリンクの文言が嫌な書き方になっている

「緊急性」
キャンペーン終了までの残り時間を表示して焦らせる

まとめ

中には意外と強弱の付け方でダークパターンになってしまう項目もあるので、こういったことは気をつけなければいけません。
わかりやすい、使いやすいサイトづくりを心がけたいですね！