security-ux

威圧ではなく明快さによってユーザーの信頼を得るセキュリティインターフェースを構築します。目標は、セキュリティ要件を負担に感じさせるのではなく、ユーザーが安全で、自分で管理できていると感じられるようにすることです。

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

必須の準備

ユーザーは /security-ux でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。ここには設計原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前にこのプロトコルに従ってください。設計コンテキストがまだない場合は、必ず先に $setup を読み込んでください。さらに、製品が直面する脅威モデル、すでに実装されているセキュリティ機能、ユーザーが現在セキュリティについて混乱や不安を感じている箇所を把握してください。

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