# ザ・ダークパターンをshadcn/uiで作成する

  ## 目的
デザインダークパターンを読んで特に印象に残ったものをshadcn/uiで試してみる

## 前提

## ダークパターンとはなにか

> **ダークパターン**は、主にウェブサイトなどで、ユーザーを騙すために慎重に作られたユーザインタフェースのことである。認知バイアスを利用して、ユーザーが思っているよりも多くの時間やお金を使わせる。または注意を払うように設計されている。

## 開発環境

- Next.js 13
- shadcn/ui

## 印象に残った箇所

## スニーキング(こっそり)

ユーザにとって重要な情報を隠したり、偽装したり、公開を遅らせたりする行為のこと。
該当するケースはショッピングカートにユーザの同意を得ず、勝手に商品を追加する行為です。
ある商品を注文すると、有料オプションが勝手に付属品としてついてきたりするケースもある。こっそりカゴに入れるダークパターンの多くは、有料オプションがデフォルトで選択されていたりもする。
以下はザ・ダークパターンという商品だけをカートに入れたのに、勝手にメッセージカード代がカートに入れられている。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/260b2895-de51-ae21-3d40-98a4623c805b.png)


私が実際に体験したものでは、飛行機の比較サイトで決済の最終画面で謎の手数料(画像で言う特別販売利用料)が発生している。
決済画面まで行かないと分からない仕様になっていたため、悪意があると感じてしまった。

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/70b206ac-e21d-a99d-cb2f-4e03bae606ac.png)


## ひっかけ質問

紛らわしい言葉を使ってユーザを特定の選択へ誘導するとパターンです。
例えばチェックボックスに添えられたテキストよく読むと別のことや正反対のことを意味していたりします。
以下は、月額プレミアム会員を辞めるための画面です。いくつかのよろしくない点があります。

![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/adc79157-86f6-6142-ec45-f64fd3be09a0.png)

### よろしくない点

- 同じ色が使われているため、どちらが推奨されている動きなのか分からない。
- ユーザーの操作的に直感的じゃない。一般的に左側は否定の動作で、右側は肯定の動作にするのが望ましい。
- ユーザーが推奨するべき動作が左に設定されている。この画面にいる時点でユーザーが推奨する動作は**月額プレミアム会員の資格を失うこと**(=会員をやめること)
- 右側の**キャンセル**は**月額プレミアム会員の資格を失うこと**の**キャンセル**なので二重否定となっており分かりづらい。

実際に作成するとしたらこんな感じになると思っています。

![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/0361f516-bb18-e421-1703-e4a54b194f7b.png)

### なぜこのような画面があるか？

ユーザは個人情報を提供したり、望んでもいないことを約束させられていることを嫌うため、ユーザを欺くの表現で強引に同意を得ようとする。

### オプトイン、オプトアウト方式の混在

強引に同意を得ようとする画面の例として、チェックボックスのオプトイン方式とオプトアウト方式が紹介されている。

> **オプトイン(Opt-in)方式**
オプトイン方式では、ユーザーがアクティブに選択肢を選んで同意や購読を行う必要があります。チェックボックスはデフォルトでは未選択の状態で表示され、ユーザーが意図的にチェックを入れることで、メーリングリストへの登録や利用規約への同意などを行います。
例えば、ウェブサイトがニュースレターの購読をオファーする場合、オプトイン方式を用いると、ユーザーは「ニュースレターを購読する」にチェックを入れることで購読を開始します。
> 

> **オプトアウト(Opt-out)方式**
オプトアウト方式では、チェックボックスがデフォルトで選択されており、ユーザーがアクティブに選択を解除することで同意や購読を回避します。つまり、何もしなければ、ユーザーは自動的に購読や同意をしたことになります。
> 

チェックボックスの同意箇所が複数あると、ユーザーは1つ目の文言読み2つ目以降の文言を流し読みする癖がある。このように惰性的にチェックする可能性があるため、オプトイン、オプトアウト方式が混在するようなチェックボックスは使用しない。

以下は1個目のチェックボックスではオプトアウト方式なのに、2個目ではオプトイン方式を使用している。

![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/f28033f5-7173-288a-1b1c-9f587ba8cd04.png)


### チェックボックスの使用ガイドライン

- 簡潔な表現にする
- 二重否定などの紛らわしい表現の使用を避ける
- チェックボックスのテキストな肯定文を使用する。
- 1つのチェックボックスで1つの同意得る。(まとめて同意を取らない)
- チェックボックスの方は同意オフは、同意を意味する。(意味を反転させない)

## おわりに

先述した `ひっかけ質問` のように少しでも「？」と感じたUIは改善余地があることに気づけました。
脳のメモリを消費するようなUIを作らないためにも基礎的な部分を固めたいですね…

今回作成したリポジトリはこちらになります。
https://github.com/Suntory-N-Water/the-dark-pattern-ui-sample