security-ux

威圧感ではなく分かりやすさによって、ユーザーの信頼を得られるセキュリティインターフェースを構築します。目標は、セキュリティ要件を負担に感じさせるのではなく、ユーザーに安心感と主導権を持ってもらうことです。

サインイン、MFA、セッションの有効期限、パスワードの UX、リカバリーの仕組みについては、認証とアカウントのリカバリーのリファレンスを参照してください。 ロールエディター、アクセス権のリクエストフロー、アクセス拒否からの復旧、リスクの高い権限変更については、権限とロールの UXのリファレンスを参照してください。 断定的な UX 表現、進捗や同意を誠実に伝える文言、信頼を損なわないプロダクトの振る舞いについては、インターフェースの誠実さのリファレンスを参照してください。 セキュリティ関連の失敗後の対応については、エラーからの復旧のリファレンスを参照してください。

必須の事前準備

frontend-designを読み、Context Gathering Protocol に従ってください。利用可能なコンテキストを再利用し、重大な不足点についてのみ質問してください。さらに、プロダクトが直面する脅威モデル、すでに実装されているセキュリティ機能、ユーザーが現在セキュリティについて混乱や不安を感じている点を把握してください。

セキュリティ UX のニーズを評価する

セキュリティとユーザー体験が交差する箇所を特定します。

1. 認証フロー：ユーザーはどのようにサインインしますか？MFA は必須ですか、それとも任意ですか？現在のフローはどれほど煩雑ですか？
2. パスワードの使いやすさ：要件は妥当ですか？強力なパスワードを作成するためのガイダンスはありますか？
3. 信頼のシグナル：インターフェースはセキュリティを明確に伝えていますか（HTTPS インジケーター、認証済みバッジ、暗号化に関する注記など）？
4. リカバリー手段：ユーザーがアクセス手段を失った場合、どうなりますか？安全でありながら、不可能ではないリカバリーを提供していますか？
5. 侵害や異常への対応：不審なアクティビティやデータ侵害について、プロダクトはどのようにユーザーに通知しますか？
6. 権限と同意：ユーザーは共有する情報について、十分な情報を得たうえで判断していますか？

セキュリティ UX の側面

認証

サインインフロー：

• サインインフォームは最小限にします。メールアドレスとパスワード、またはソーシャル認証の選択肢を用意します
• 入力内容を確認できるよう、パスワードの表示／非表示を切り替えられるようにします
• 失敗した試行の後も、メールアドレス欄の内容は消去しません
• アカウント列挙攻撃の助けにならない場合に限り、「メールアドレスが見つかりません」と「パスワードが間違っています」を区別します
• 失敗した試行にレート制限を設け、明確なクールダウンメッセージを表示します

多要素認証（MFA）：

• 複数の MFA 方法を提供します（TOTP アプリ、SMS、ハードウェアキー、バックアップコード）
• ユーザーが設定済みの方法のうち、最も安全なものをデフォルトにします
• 視覚的なガイドを用いて、明確な設定手順を提供します
• ユーザーが承認対象を把握できるよう、デバイスに名前を付けられるようにします
• 設定中にリカバリーコードを表示し、保存するよう促します
• MFA を罰のように感じさせないようにします。保護のためのものとして伝えます

セッション管理：

• 設定画面に、デバイスや場所の情報とともにアクティブなセッションを表示します
• 個別のセッションをユーザーが取り消せるようにします
• 見慣れないデバイスや場所からの新しいサインインをユーザーに通知します
• 「このデバイスを記憶する」は控えめに使用し、その意味を説明します

パスワード UX

ユーザーを困らせない要件：

• 複雑さのルールよりも、最小文字数（12 文字以上）が重要です
• 理由を説明します：「パスワードが長いほど、推測されにくくなります」
• フォーカスが外れたときだけでなく、ユーザーの入力中に強度メーターを表示します
• パスフレーズ（「correct horse battery staple」など）を許可します
• 文字数が十分な場合、任意の文字種の組み合わせ（大文字を 1 文字、記号を 1 文字など）を必須にしません
• パスワードを一律に期限切れにしません。弱いパターンを促すことになります

パスワード作成のガイダンス：

• 生成されたパスワードまたはパスフレーズを提案します
• ユーザーが入力を始める前に要件を表示します。失敗した後に表示するのではありません
• 送信時にポップアップを表示するのではなく、文字数をインラインで検証します

信頼を示す要素

視覚的なサイン：

• 支払い情報やパスワードなどの機密フィールドの近くに、ロックアイコンを表示します
• 関連するセキュリティバッジや認証（PCI DSS、SOC 2）を表示します
• HTTPS を使用し、ブラウザーに安全な接続を示すインジケーターを表示します
• 専門用語ではなく、平易な言葉で暗号化について説明します（「お客様のデータは暗号化されています」）

透明性：

• データの提供を求める前に、どのようなデータをなぜ収集するのかを説明します
• 同意チェックボックスの近くに、プライバシーポリシーへのリンクを表示します
• セキュリティ設定には、企業向けの専門用語ではなく、平易な言葉を使います
• ユーザーが自分のデータを確認し、エクスポートできるようにします

アカウントの復旧

安全かつ利用しやすく：

• 複数の復旧方法（メール、電話、バックアップコード、信頼できる連絡先）を提供します
• 復旧を許可する前に本人確認を行い、利便性を理由に手順を省略しません
• 復旧が開始されたら、登録済みの連絡先に通知を送信します
• 復旧リンクとコードに有効期限を設けます
• 復旧後に機密性の高い操作を行う前に、再認証を必須にします

復旧時の UX：

• 復旧手順を段階的に案内します
• 各段階で何が起きるかを説明します
• いずれかの復旧方法が使えない場合に、明確な代替手段を提示します
• 紛失したものそのものを使わないと復旧できないようなループに、ユーザーを陥らせません

情報漏えいと異常に関する通知

情報漏えいの通知：

• アカウントが侵害された可能性がある場合は、速やかにユーザーへ通知します
• 何が起き、どのデータが影響を受けたのかを具体的に説明します
• パスワードの変更、セッションの確認、MFA の有効化など、明確ですぐに実行できる対策を提示します
• 情報漏えいの通知をマーケティングメールに埋もれさせません

異常アラート：

• 不審なサインイン試行について、デバイスと場所を添えてユーザーに通知します
• 通知から直接、試行を承認またはブロックできるようにします
• 情報を知らせるだけのアラートではなく、「これは自分です」／「これは自分ではありません」の選択肢を提示します
• 誤検知を連発しません。誤検知が多すぎると、ユーザーはアラートを無視するようになります

同意と権限

十分な情報に基づく同意：

• ユーザーが同意する内容を、法律用語ではなく平易な言葉で説明します
• 段階的に情報を開示します。最初に概要を表示し、詳細を展開できるようにします
• 目的（マーケティングと機能提供など）ごとに同意を分けます
• 同意したときと同じくらい簡単に、同意を撤回できるようにします
• 同意チェックボックスをあらかじめオンにしません

アクセシビリティ

• MFA コードの入力欄は大きく入力しやすいものにし、ブラウザーの自動入力とワンタイムコードの動作に対応させます
• TOTP コードの残り時間を、視覚的にもスクリーンリーダーでも確認できるようにします
• セキュリティアラートと通知には aria-live を使用します
• 信頼を示す要素は、色だけに頼らず認識できるようにします
• 復旧フロー全体をキーボードで操作できるようにします

アンチパターン

• 見せかけのセキュリティ：機密性のないページにロックアイコンを表示しているが、実際には何も保護していない
• 根拠のないパスワード要件：短いパスワードを許しながら、記号や数字を必須にする
• 情報漏えいの責任をユーザーに押し付ける：「MFA を有効にしておくべきでした」ではなく、「アカウントのセキュリティを確保できるようサポートします」と伝えます
• セキュリティ設定を隠す：MFA や復旧オプションを、ユーザーが見つけられないメニューの奥に埋め込む
• 不必要に危機感をあおる：通常の確認作業なのに「24 時間以内にアカウントが削除されます」と表示する
• 復旧手段がない：ユーザーが携帯電話を紛失したために、アカウントが永久にロックされる
• 専門用語だらけのセキュリティ文言：「TOTP で 2FA を有効にする」ではなく、「セキュリティをさらに強化するため、認証アプリを追加してください」と伝えます
• 情報漏えいを通知しない：データが侵害されたときにユーザーへ通知しない
• あらかじめオンにされた同意チェックボックス：信頼を損ない、多くの場合、規制にも違反します
• 一貫性のないセキュリティ対策：MFA は強固でも、脆弱なパスワード復旧によって回避できてしまう

セキュリティ UX の品質を確認する

リリース前に確認します。

• サインインのフローは簡潔で、柔軟に対応できます
• MFA の設定はわかりやすく、複数の方法を提供しています
• パスワード要件では、恣意的な複雑さより長さを重視しています
• 信頼性を示す情報は正直で具体的です
• アカウント復旧の手段は安全でありながら、利用しやすくなっています
• 漏えいや異常に関する通知は迅速で、対応につながる内容です
• 同意は十分な情報に基づき、細かく設定でき、簡単に取り消せます
• セキュリティに関する文言は専門用語ではなく、平易な言葉を使っています
• アラートは対応できる程度に具体的でありながら、多すぎて煩わしくなりません
• インターフェースによって、ユーザーは罰せられているのではなく、安全で自分で管理できていると感じられます