パスワード再設定のUX：迷わずアカウントに戻れる導線の設計

パスワード再設定の画面では、「依頼は受け付けられたのか」「どのリンクがまだ使えるのか」「変更後はどこへ進めばよいのか」を利用者に推測させないことが大切です。サービスの画面とメールの受信トレイを行き来する一連の流れとして設計し、どの画面に戻ってきても次の操作が分かるようにしましょう。

たとえば、納品スケジュールを確認するためにワークスペースを開いたプロジェクトマネージャーが、パスワードを思い出せない場面を考えます。この人の目的は認証情報の管理ではなく、スケジュールの確認です。ここでは、再設定の依頼から通常のログインに戻るまでを、リンクの期限切れや再試行も含めて追っていきます。

再設定への導線は、ログイン画面の入力・認証エラー・復帰の設計と合わせて考えます。再設定ページが分かりやすくても、「パスワードを忘れた場合」のリンクが見つからなかったり、ログイン前に開こうとしていたページが分からなくなったりすれば、目的には戻れません。

再設定への入口を見つけやすくする

「パスワードを忘れた場合」は、ログインできないときに目が向きやすいパスワード欄の近くに置きます。エラーになる前から利用できるようにし、案内を表示するためだけに一度ログインを失敗させる必要がないようにします。主操作の「ログイン」と区別できるテキストリンクにしつつ、文字を薄くしすぎたり、押しにくくしたりしないことが重要です。

再設定ページには、目的が分かる見出し、入力後も消えないメールアドレスのラベル、一つの主操作を用意します。プロジェクト用ワークスペースなら、最初の画面は次のように整理できます。

パスワードを再設定
このワークスペースで使用しているメールアドレスを入力してください。
メールアドレス
再設定リンクを送信
ログインに戻る

ログイン画面ですでにメールアドレスが入力されていれば、その値を引き継ぐことで再入力を減らせます。ただし、アドレスの誤りがログインできない原因かもしれないため、編集はできるようにします。未入力や形式の誤りは、該当する欄の近くで修正方法を伝えます。メールアドレスの形式エラーに「アカウントが見つかりません」というメッセージを使ってはいけません。

ワークスペース固有のパスワードではなく、会社の認証サービスを使うチームもあります。ログインの入口では、この違いが分かるようにします。サービスが対応している場合は、「会社のアカウントでログイン」という案内のほうが、そのサービスで管理していないパスワードの再設定を促すより適切です。実際には利用できない別の方法を加えて、行き止まりを増やさないようにしましょう。

アカウントの有無を明かさず、依頼の受付を伝える

送信後は、操作を受け付けたことを画面で伝える必要があります。ただし、「お客様のアカウント宛てにリンクを送信しました」という表現は、サービスが明かすべき範囲を超える可能性があります。OWASPのパスワード再設定ガイド（英語）では、アカウントの存在にかかわらず同じ応答を返すこと、有効期限のある一度限りの再設定トークンを使うこと、変更後は自動ログインではなく通常のログインへ進めることを推奨しています。こうした条件を守っても、操作案内を曖昧にする必要はありません。

アカウントが登録されている場合も、登録されていない場合も、同じ確認文を表示します。

受信トレイを確認してください
入力したメールアドレスでアカウントが登録されている場合は、パスワード再設定用のリンクをお送りします。
このページを開いたまま、メールを確認してください。
別のメールアドレスを使う
ログインに戻る

この案内なら、特定のアカウントが存在するかどうかを確定させずに、次の行動を伝えられます。入力したアドレスを画面に表示して、本人が打ち間違いを確認できるようにする方法もあります。ただし、その表示を「登録済みアカウントとの一致」と受け取らせないことが大切です。アドレスを表示する範囲は、そのサービスのプライバシー上の条件に合わせます。

「メールを送信した」と「パスワードが変更された」は、別の結果です。依頼を受け付けた段階で、完了マークとともに「すべて完了しました」と表示しないようにします。まだメールを開いておらず、新しいパスワードも決めていないため、利用者は元の作業に戻れていません。

再試行の案内も具体的にします。「迷惑メールフォルダーを確認してください」は役立ちますが、それだけを唯一の手段にしないことが重要です。アドレスを修正する、許可されたタイミングでリンクを再送する、適切なログイン方法に戻る、といった選択肢を残します。再送まで待つ必要がある場合は、実際の残り時間と理由を表示します。他のサービスでよく見かけるからという理由だけで、カウントダウンを付けないようにしましょう。

メールと遷移先を同じ流れとして設計する

利用者はここでサービスの画面を離れ、過去の再設定メールも残っているかもしれない受信トレイを開きます。メールを後から付け足すものとして扱わず、画面遷移の一部として設計します。長いURLを確認しなくても目的のメールだと分かるように、件名、サービス名、操作ボタンの言葉を揃えましょう。

このワークスペースの例なら、件名は「ワークスペースのパスワード再設定」、ボタンは「新しいパスワードを設定する」とすると、操作の目的が伝わります。メールにはサービスを特定できる情報と、自分で再設定を依頼していない場合の対処を記載します。もともとの作業を中断している場面なので、販促情報を加えて再設定の操作と競合させないようにします。

有効期限を記載する場合は、実際の設定と一致させます。「まもなく期限が切れます」より正確な時間のほうが役立ちますが、具体的でも誤った値では逆効果です。リンクを開いた先でも、メールと同じサービス名や見た目を使い、無関係なサービスからログインを求められたように見えないようにします。

最初のメールが遅れて届いたため、利用者が二通目を依頼することもあります。どのリンクが有効なまま残るかは、実際の再設定ルールに沿って決め、確認画面とメールの説明を一致させます。再送しても以前のリンクが無効にならない仕組みなら、安易に「最新のメールを使ってください」と案内しないことが大切です。

期限切れ・使用済みのリンクからも先へ進めるようにする

再設定リンクは、時間がたってから開かれたり、パスワードの変更後にもう一度開かれたりします。どちらも想定しておくべき操作です。使えないリンクをすべて一般的なエラーページへ送ってしまうと、利用者はアカウントに戻る方法まで失われたのか判断できません。

期限切れと使用済みを分けて表示するのは、サービス側で確実に判別できる場合に限ります。無効なリンクという一つの結果しか返さない場合は、「この再設定リンクは利用できません」のように、確認できる範囲で案内します。重要なのは次の行動が分かることです。アプリケーションが把握していない原因まで、詳しく説明する必要はありません。

主操作の名前も具体的にします。同じリンクを再度開くのではなく、新たなメールを依頼するボタンなら、「再試行」より「新しいリンクをリクエスト」のほうが正確です。使用済みのリンクでは、別のタブですでに変更が完了している可能性があるため、「ログイン」が適切な進み先になることもあります。

新しいパスワードを迷わず設定できるようにする

新しいパスワードの画面では、送信前に必要な条件を示します。条件は入力欄の近くに置き、入力中も確認できるようにします。数字、大文字、記号の組み合わせをデザイナーの好みで決めるのではなく、そのサービスで実際に採用しているルールを伝えます。

入力欄のラベルは「新しいパスワード」とします。確認入力が必要なら、「新しいパスワード（確認）」と明示し、不一致の際に両方の入力を消さずに修正を促します。表示・非表示の切り替えは入力内容の確認に役立ちますが、支援技術にも操作が伝わる名前を付け、現在の状態が分かるようにします。パスワード管理ツールから入力できる実装にし、手入力での転記を前提とする流れにしないことも重要です。

ボタンを押すと変更を保存するのであれば、ラベルは「続ける」ではなく「新しいパスワードを保存」とします。応答待ちの間はフォームの大きさを保ち、保存中だと分かる状態を示して、誤って何度も送信されないようにします。保存が拒否されたことが確認できた場合は、すべてを同じエラーで済ませず、修正できる問題を伝えます。

結果が不明なときには、別の説明が必要です。送信後に通信が途切れたからといって、パスワードが変更されなかったとは限りません。確認できていないのに「保存されませんでした。もう一度お試しください」と断定しないようにします。「パスワードの変更結果を確認できませんでした」と伝え、サービス側で分かる状態と復旧方法に応じて、通常のログインや再設定への案内を用意します。

手順を短く見せるためだけに、自動ログインを加える必要はありません。変更が完了したことを表示し、通常のログインへ進めることで、「パスワードの変更は完了した。次はアカウントへログインする」という区切りが明確になります。

ログイン後は元の目的へ戻す

完了画面は簡潔にまとめます。

パスワードを変更しました
新しいパスワードでログインして、ワークスペースに戻ってください。
ログイン

ログイン中のセッションの扱いも、この案内と整合させます。他の端末でのログイン状態を終了するか選べる場合は、対象範囲を明確にします。「他のセッションをログアウト」と「すべてのセッションをログアウト」では意味が異なります。必ず終了する仕様であれば、変更できないスイッチを見せるのではなく、実際に何が起きたかを伝えます。

通常のログイン後は、納品スケジュールがまだ存在し、閲覧権限もあるなら、そこへ戻れるようにします。開けなくなっている場合は、移動先の問題として別に説明します。プロジェクトの削除や権限変更を、成功したパスワード再設定の問題のように見せないことが重要です。

メールを別の端末で開くケースも含めます。そちらで変更が完了しても、元のブラウザは「受信トレイを確認してください」のままかもしれません。その画面には「ログインに戻る」という使える導線を残します。カウントダウンを見続けたり、元のタブが別の端末の操作を検知するまで待ったりしなくても、先へ進めるようにしましょう。

Pixsoで再設定の流れを通して確認する

Pixsoの同じデザインファイルに、リンクの依頼、受信トレイの確認、有効なリンクからのパスワード入力、期限切れ、使用済み、変更完了の各画面を並べます。依頼画面とリンク先の間には、メールも一つのフレームとして追加します。ワークスペース名と操作の表現を揃えると、一つのサービスとして流れを追いやすくなります。

メールアドレス欄、パスワード欄、ボタンは、必要に応じて再利用できるコンポーネントにします。自動レイアウト（Auto Layout）を使い、短い確認文と長い翻訳文を比較します。ボタンを固定位置に置いて文字と重ねるのではなく、説明文の下に収まるように調整します。画面内キーボードの表示領域を考慮した、幅の狭い画面も用意しましょう。

プロトタイプで各画面をつなぎます。最初の確認では、チームメンバーにアカウントへのアクセスを回復してスケジュールへ戻ってもらいます。次は期限切れのリンクを渡し、その次は変更が成功した後でもう一度リンクを開いた場合の行動を確認します。見た目の感想だけでなく、次に何をすればよいか迷う箇所に注目してください。

開発に渡す情報には、サービスのどの応答でどの画面になるのか、各操作が何を実行するのか、ログイン後はどこへ移動するのかを含めます。キーボードのフォーカス移動や読み上げの案内も、該当する状態のそばに記します。プロトタイプで伝えた要件に沿って、実際のサービスでは再設定ルールを実装します。

パスワード再設定では、すべての段階を大きな成功として演出する必要はありません。依頼を正確に受け付け、使えないリンクからの進み方を示し、変更が完了したことを伝える。そのうえで元の仕事へ戻れることが、分かりやすい体験につながります。

Pixsoでアカウント復旧の流れを設計する