今日、多くの人にとってウェブなしの生活は考えられません（Tim Berners-Lee氏がWrold Wide Webを開発していなければ、Kinstaは存在していないでしょう）。しかし、あらゆるものがそうであるように、ウェブにはその利便性の反面、嫌な側面もあります。
ダークパターンは、サイトで意図せずに生まれてしまうこともあります。例えば、マーケティング担当者や開発者が、適切と判断して実装した機能の問題点やデメリットを真に理解していないなど。もちろん、意図的に作られたものは厄介で、ユーザーをあざむいて行動を操り、意図しない操作を実行させるように仕組まれています。ダークパターンが定着しつつあることから、ユーザー側にも不審な要素を見極める能力が身についてきていますが、「気づいたときには手遅れ」というシナリオも大いにありえます。
ウェブは人の時間、移動、そして消費エネルギーを削減してくれる素晴らしいシステムですが、ダークパターンにはまれば、ユーザーは何百万時間もの手間や費用を浪費しかねません。今回はダークパターンの具体例をご紹介しながら、サイト所有者が意図せずダークパターンを用いることのないよう、改善策や回避策も併せて見ていきます。
ユーザーインターフェース
ダークパターンといえば、ユーザーインターフェース。優れたユーザー体験を構築するには、手間と配慮が欠かせません。しかし、以下のようなダークパターンを用いれば、そんな努力が水の泡になってしまうことも。
「アプリをインストールしてください」のメッセージ
サイトやSNSの中には、以下のような2種類の要素を通して、ユーザーにアプリのインストールを促すものがあります。
- ページに大きく表示される「アプリを開く」などの文言のボタン。クリックするとアプリストアにリダイレクトされ、専用アプリを承認、ダウンロード、インストール、そして起動しなければならない（使っているスマホが対応していれば）。その後、アプリにログインし、パスワードを間違え、パスワードのリセットを要求し、送られてきたリセット用のリンクを開き、パスワードを再設定してやっとアクセスできる、なんてことも。そんな操作に時間を費やしているうちに、何がしたかったか忘れかねない。
- 目立たないように小さく表示される「ブラウザで続行する」などの文言のリンク。
莫大な費用を投資して開発された素晴らしいアプリであっても、サイトの性能に優ることはほぼありません。アプリのインストールを促すのは、ウェブシステムよりも多くの個人情報を収集できるためです。
開発したアプリの宣伝はもちろん行うべきですが、アクセスしてすぐに最初のインタラクションとして促すのは、ユーザー体験を損ないます。アプリをインストールするユーザーもいれば、当然離れていくユーザーもいます。サイトをしばらく利用してからユーザーにアプリのインストールを促すほうがよほど効果的でしょう。
通知表示の許可
この手の通知を望むユーザーはほぼいません。
ニュースレターの登録、ウェブベースのプッシュ通知、チャットボット、アンケートのプロンプトなどは、便利かもしれませんが、ユーザー体験は考慮されていません。
ウェブ上で検索し、アクセスした瞬間に通知表示の許可を求めるサイトが一般的で、この時点でコンテンツが優れたものなのか、探している情報との関連性は高いのか、そして定期的に訪れたいサイトなのかどうかはわかりません。ほとんどの人が「ブロック」をクリックするのは当然です。
通知やニュースレターの提供が良くないことではありませんが、ユーザーがサイトで何らかの行動をとってから許可を取るのが最善です。例えば、記事の最後や、数回目の訪問時にプロンプトを表示するなど。控えめな印象を与えることで、「許可」をクリックしてくれる確率が高まります。
また、ニュースレター内のリンクをクリックしたユーザーに対して、ニュースレターの購読を促さないこと。ユーザーを顧客に変える前に、信頼を失うことになります。
理解しづらいナビゲーションメニュー
ヘッダーバーやドロップダウンメニューはある程度パターン化されており、個性を出すのは難しいかもしれませんが、少なくともユーザーは操作方法を理解することができます。UIの進化やデザインの可能性が広がるにつれ、奇抜で理解しづらいナビゲーションも見られるようになりました。
「ここをクリック」などのツールチップなどの要素を使ってユーザーを誘導したい場合には、デザインを再考してみてください。優れたUIには説明はいらないものです。
不要なスクロールハイジャック
ページをスクロールするとアニメーションが表示されたり、メニュー項目が更新されたりするのは、ユーザーを惹きつける仕掛けになりますが、以下のような場合は逆効果です。
- アニメーションの多用。要素をアニメーション化しすぎると気が散るもので、すべての項目を強調しても適切に注意を引くことはできない。重要なメッセージを届けるには、いくつかのちょっとした効果を加えるだけで十分。
- 動線を妨げる。スクロールによって、コンテンツの消失やモーダルダイアログ、フォーム送信、他のページへのリダイレクトなど、予期せぬアクションが起こるべきでない。
アニメーションは目が回ったり、頭痛の原因になったりする可能性もあるため、CSSのメディアクエリprefers-reduced-motionを使用し効果を無効にすることも検討してみてください。
また、無限にスクロールが続くページは避けましょう。関連コンテンツへのリンクは有益ですが、ユーザーの同意なしにランダムなコンテンツを自動読み込みするのは、帯域幅の浪費になります。ブックマークするのが難しくなり、フッターにある問い合わせ先などの情報にたどり着けなくなってしまいます。
複数ページにまたがる記事
段落の終わりに「次へ」のリンクが表示される記事を一度は目にしたことがあるはず。このようなページには、広告インプレッション稼ぎのようなからくりがあるのが一般的です。
おそらく、ウェブマーケターがこのアプローチをやめることはありませんが、開発者がこのような手法に対して反対の声を上げていけば、変わっていくかもしれません。
マーケティング
ウェブは世界最大の市場であり、物理的な製品からデジタル製品まで、あらゆる商品を販売することができます。収益にこだわりすぎてダークパターンを用いない限り、ユーザーは戻ってきてくれるものです。
手間のかかる購読解除
通知やニュースレターの購読解除は、購読するのと同じくらい簡単に実行できるべきです。購読の解除に手間がかかると、ユーザーをいら立たせ、サイトへの信頼の喪失につながります。ユーザーに出生証明書の原本や複数の住所証明、最新の医療記録を提出させたり、ファックスさせたりする正当な理由はありません。
偽装広告
広告は多くのサイトで多用されていますが、以下のような広告は悪質です。
- メニューや選択項目のように見せかける
- サイトのニュースや情報記事に見せかける
- ソフトウェア製品のダウンロードページで「ダウンロード」ボタンに見せかける
広告デザインは個々のサイトで決められるとは限りませんが、配置する場所は決められます。ユーザーが混乱するような目立つ場所に広告を掲載することは避けましょう。たとえ広告収入につながっても、大切な潜在顧客を失いかねません。
ショッピングカートへの商品の自動追加
関連商品やおすすめ商品の一覧の表示は有益かもしれませんが、ユーザーの同意なしにショッピングカートに商品を追加するのは行き過ぎです。
- 商品が追加されていることに気づき、そのまま購入するのはごく一部のユーザーのみ
- ほとんどの買い物客は追加された商品を削除する
- 届いてから気がついたユーザーから苦情が届き、返金対応を行うことに
このような操作は、わずかな収益アップと引き換えに、顧客対応および返品対応の増加と信頼の損失を引き起こします。そして、クレームや返金への対応によって、短期的な収益性の向上は結局相殺されてしまいます。
隠れたコスト
時間を割いて商品を選び、会員登録し、配送情報と支払い情報を入力した後、最終金額がなぜか競合サイトよりも上がっている。これは、最後の確認画面で、配送料、保険料、手数料など、隠れたコストが表示されるパターンです。
価格設定が明確かつ透明性の高いものでなければ、買い物客の信用を失います。配送料に幅がある場合は、購入確定前に国や郵便番号の入力を促し、事前に確認してもらいましょう。
偽の在庫表示とカウントダウン
商品の在庫を確認できるのは便利ですが、やりすぎは要注意です。情報が多ければ多いほど、かえって信ぴょう性が低くなる可能性がります。
この商品の在庫は残り2点です。過去3分間に15人が購入し、現在597人がこのページを見ています。
このような高圧的なメッセージは、デジタル商品や車や航空券などの高額商品に表示されていると、なおさら疑わしい印象を与えます。
商品が何日も残っていることがわかれば、このようなメッセージに信ぴょう性がないことはすぐに明らかになります。信用ならないマーケティングメッセージを掲げるサイトで商品を購入する人はごくわずかでしょう。
羞恥心や罪悪感の植え付け
このダークパターンは一部大手EC企業でも使用されており、アカウント登録手続きの最後、「同意する」ボタンとともに、以下のようなオプトインが表示されることがあります。
- 無期限の配送無料サービスは不要です
- 絶滅の危機にある野生動物には関心がありません
- 地球温暖化には関心がありません
このようなアプローチで利益を得ることができたとしても、顧客と誠実な関係を築き、サイトへの信頼を高めることはまずできないでしょう。
Cookie拒否の手間
EU一般データ保護規則（GDPR）では、ウェブサイトでは不要なCookieなどのトラッキング技術にオプトアウトを表示することが義務付けられています。非の打ち所がない規則というわけではありませんが、ユーザーを保護するという目的は善であり、ヨーロッパ全土で法的要件となっています。他の国でも類似の規則が制定されていますが、一般にGDPRほど厳しくはありません。
内容を確認せずに項目をオプトイン（許可）して次に進むユーザーは多く、これではせっかくの規則も意味がありません。オプトアウトすることも、オプトインするのと同等に容易であるべきところ、以下のようなことを行うサイトも存在します。
- 専門用語で溢れたページやタブを表示し、オプトアウトを面倒にする
- GDPRに違反しているにもかかわらず、何十個ものチェック項目を表示する
- 選択した設定を保存するのに最大1分間も待機させられる
一部のユーザーは「すべてに同意する」をクリックしてくれるかもしれませんが、大多数はサイトを放棄するか、Cookie情報が保存されないようシークレットモードに切り替えます。さらに、オプトアウトしづらいサイトは、何か裏があるのではないかという不審な印象を与えます。最悪の場合、このダークパターンは罰金を科せられたり、弁護士費用が発生したりする可能性があります。
技術
例えば、HTMLは完成された技術で、誰でも使用することができ、後方互換モードもあります。このような技術のメリットをあえて捨てるには、かなりの労力が必要になります。
ブラウザ本来の機能の妨害
戻るボタンは、ウェブがユーザーインターフェースにもたらした最大の功績とも言えます。非常に実用的かつ最低限の知識で誰でも使用できます。しかし、別のウィンドウやタブを開いたり、前のページが消えたり、ブラウザのコントロールを使用しないようにしたりして、この機能を妨げているサイトもあります。
ブラウザの機能をブロックする技術的な理由はありません。本来の操作が妨げられると、ユーザーは混乱し、サイトの操作性が落ちてしまいます。
以下のような問題も避けたいものです。
- 右クリックやロングタップのメニューの無効化
- テキストの選択やコピーの無効化
- URLを更新を怠りシングルページアプリのブックマークが破損
しかしこれよりもさらに深刻なのは、以下のダークパターンです。
パスワードフィールドへの貼り付けの無効化
いかなる理由であれ、貼り付けを無効にする必要はありません。大規模なサイトでもこのような制限を設けている場合があります（ある大手国際銀行でも）。
これはセキュリティ上の理由からきていることが予想されますが、ユーザーが貼り付けを行えなければ、パスワードが再利用できなくなることはもちろん、パスワード管理アプリも使用できません。高い安全性が確保される、長く無作為な文字列を生成することは不可能であり、それをいちいち手作業で入力するなど現実的ではありません。
さらに、専門知識を持つ人は開発者ツールを少しいじれば、貼り付けの無効化を解除できてしまいます（その他の一般ユーザーは単純で弱いパスワードを使用することに）。貼り付けの無効化はやめましょう。余計な手間が省け、システムのセキュリティも向上します。
パスワードの制限
パスワードは8文字から12文字の長さで、少なくとも1つの大文字、数字、記号を含めてください。/ や ; は使用できません。
厳しいパスワード制限を設定することにもまた、以下のような理由から技術的な必要性はありません。
- パスワードは平文のままでなくハッシュ化されてデータベースに保存される。
- 「password」「qwerty」「123456」のような単純なパスワードの使用を禁止することは推奨されていない（禁止すると強力なパスワード作成の妨げにもなり、ブルートフォース攻撃に役立つテンプレートを提供することになる）。
強力なパスワードを強制するには、最低文字数を設定することにつきます。文字数が増えるたびに、複雑さと解読にかかる時間は飛躍的に増加します。
モバイルコンテンツのずれ
スマートフォンでのブラウジングは、時に快適さに欠けることがあります。例えば、集中して記事を読んでいると、不意にコンテンツが画面の外に出てしまい、自分がどこにいるかわからなくなってしまうなんてことはよくあります。上下にスクロールして元の場所に戻り、続きを読み始めるのに数秒かかることも珍しくありません。さらに厄介なのは、動いた瞬間にリンクやボタンをクリックしてしまい、意図しないアクションが起こってしまう場合。このような経験によって、顧客になる前にサイトを離脱してしまうユーザーもいます。
コンテンツのずれは、画像やiframe（通常は広告）がビューポートのスクロールポイントより上で読み込まれたときに発生します。コンテンツが読み込まれると、ブラウザはそのサイズを判断してページ上に配置します。このため、例えば高さ500pxの画像（フルサイズで表示）は、その分コンテンツを押し上げることになります。
Googleの累積レイアウトシフト（CLS）は、コンテンツのずれを測定して評価する指標です。コンテンツのずれは深刻な問題でしたが、現在は以下のような技術的な解決策があります。
- HTMLの
imgとiframe要素に幅と高さの属性を追加するか、CSSのaspect-ratioプロパティを使用して、アセットが読み込まれる前にページ上のスペースを確保する。 - 広告、画像、SNSウィジェットなど、読み込みの遅いアセットを囲むコンテナ要素に寸法を設定する。
- できるだけ早い段階で大きな画像をリクエストし、HTMLの
headで事前読み込み（プリロード）することを検討する。 - ウェブフォントをうまく活用し、同サイズのフォールバックフォントを使ってレイアウトのずれを最小限に抑える。
- クリックなどのユーザーアクションをトリガーとしたDOM更新を除いて、ページ上部に要素を挿入することを避ける。
- コンテンツブロックのレンダリングの最適化として、CSS Containmentを使用する（他の要素のサイズや位置に影響を与えない要素を定義できる場合がある）。
ソーシャルログイン
OAuthのような技術により、ユーザーはGoogle、Facebook、Twitter、LinkedIn、Githubのようなアカウントを利用して素早くアカウント登録を行うことができます。適切に実装すれば、よりスムーズなアカウント登録プロセスを提供することができ、コンバージョンの向上が期待できます。
ソーシャルログインにまつわるダークパターンは、メールアドレスや個人情報、さらには記録のためと称してパスワードの入力を要求してくるものです。
すべての認証プロバイダーがユーザー情報を渡すわけではありません。サイトの機能的にこれらの情報が必要になる場合は、OAuthの導入は避けるのが賢明です。アカウント登録を妨げる不必要なステップは省きましょう。
パフォーマンス
HTTP Archiveによると、平均的なウェブページの読み込み時間はPCで7秒、モバイルで20秒です。1ページの閲覧で70回のHTTPリクエスト、2MB以上のデータのダウンロードが行われ、大気中に1.3gの二酸化炭素が排出されると言われています（Website Carbon Calculator参照）。これはあくまで平均値であり、多くのサイトではこれらの数値がより高くなります。
低速なサイトをあえて作る人はいませんが、パフォーマンスよりも機能の拡張を重視するサイトはよく見られます。13KBでシューティングゲーム「Quake」の複製を作成できることを考慮すれば、会社概要ページのたった2段落の情報のために154倍ものダウンロードが必要になるのは馬鹿馬鹿しく思えます。
パフォーマンスを改善するには、さまざまなテクニックを組み合わせる必要がありますが、「データを大量に提供しない」ことが肝です。
隠れたSNSウィジェット
「いいね！」ボタンなどのSNSウィジェットは、一見大した要素に見えませんが、以下のような問題があります。
- 一つひとつに数百キロバイトのJavaScriptコードが追加され、ページパフォーマンスに影響を与える。
- コードがサイトのJavaScriptと同じパーミッションで実行されるため、セキュリティ上のリスクがある。
- ウィジェットが有効化されていないときでもユーザーを追跡するため、地域によっては法的問題につながる可能性がある。
- そもそも効果がほとんどない（運が良くてもエンゲージメント率1%程度）。
SNSウィジェットは基本的に不要です。ほとんどのSNSプラットフォームでは、パフォーマンス、セキュリティ、プライバシーを損ねることなく共有できる標準的なリンクを提供しています。
- メール：
mailto:?subject=[title]&body=[url] - Facebook：
https://www.facebook.com/sharer.php?u=[url] - X（旧Twitter）：
https://twitter.com/share?url=[url]&text=[title] - LinkedIn：
https://www.linkedin.com/shareArticle?url=[url]&title=[title] - Reddit：
https://reddit.com/submit?url=[url]&title=[title]
[url]はページのURL、[title]は見出し（タイトル）になります。標準的な<a>のリンクも問題なく機能しますが、標準的なボタンのように動作させるには、ポップアップウィンドウでページを開くように拡張可能です。
CAPTCHA
CAPTCHAとは、Completely Automated Public Turing test to tell Computers and Humans Apart（コンピューターと人間を区別する完全自動化された公開チューリングテスト）の略で、ボットなどのマシンがウェブシステムにアクセスするのを防ぐ役割を果たします。解読不能な画像に表示されたテキストを入力するか、自転車などのある対象物が写った画像をクリックするのが一般的です。
CAPTCHAには以下3つの根本的な課題があります。
- 正常な視力を持つユーザー向けに設計されており、視覚障がいなどを持つユーザーには対応していない。
- ボットやAIの技術が向上するにつれて、CAPTCHAもさらに複雑にならざるを得ない。
- サイトの所有者や開発者がキュリティの責任をユーザーに押し付けることになってしまう。
一般的なサイトでは、CAPTCHAほどの認証は不要です。CAPTCHAに代わる選択肢としては、以下のようなものが挙げられます。
- Honeypotフィールドを導入して、ボットがデータを追加したときにフォーム送信をブロックする。
inputやkeydownなどのキーボードイベントが適切にトリガーされることをチェックする。- フォームの入力と送信にかかる時間をチェックする（ボットの場合はあり得ないくらい瞬時に実行される可能性がある）。
- 送信前にユーザーにデータの確認や追加の質問をするなど、2段階の送信プロセスを構築する。
上記のような対策でほとんどのボットやスパムを阻止することが可能です。あるいは、サイトに特化した追加の開発作業を行う方法もあります。いずれにしても、既知の脆弱性を持つサイトが何千件もあることを考慮すれば、ボットはあえて高度な対策のあるサイトを標的にする可能性は低いでしょう。
まとめ
ウェブは素晴らしいシステムですが、ちょっとした不審な操作によって台無しになってしまうことも。ウェブに限らず、日常生活のあらゆる場面でだまされる可能性はありますが、ウェブではわずかな費用と労力で、何千人ものユーザーに接触することができてしまいます。そして、数十億規模の大企業がダークパターンを使用していることは、非常に残念な現状です。
ダークパターンを使用する企業は、もちろんそれに利点があると考えているため。しかし、これは短期的な思考です。ユーザーは経験を通してダークパターンを認識するようになっており、二度と戻ってきてくれない可能性があります。
ユーザーを考慮したアプローチを取り、ブランドへの信頼を堅実に築いていけば、ダークパターンに頼ることなく顧客を維持し、ビジネスを成功させることができます。
ダークパターンに遭遇した経験はありますか？以下のコメント欄でお聞かせください。
コメントを残す