Component Gallery

Screen Pattern

アカウントセキュリティ画面（Account Security Screen）UIの作り方

アカウントセキュリティ画面は、パスワード、二要素認証、ログイン履歴、接続済み端末を安全に管理する画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

アカウントセキュリティ画面は、パスワード、二要素認証、ログイン履歴、接続済み端末を安全に管理する画面です。

自前ワイヤーフレーム

アカウントセキュリティ画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・パスワードを変更する
  • ・二要素認証を設定する
  • ・不審なログインを確認する

レイアウトの考え方

  • ・危険操作は確認を挟む
  • ・状態と推奨アクションをセットで示す
  • ・履歴は日時と端末情報を揃える

アクセシビリティ

  • ・警告を色だけで伝えない
  • ・確認ダイアログの文言を具体的にする
  • ・成功・失敗をテキストで通知する

よくある失敗

  • ・警告が怖いだけで行動が分からない
  • ・端末情報が曖昧
  • ・2FAの解除導線が簡単すぎる

構成コンポーネント

アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。

AI実装プロンプト

アカウントセキュリティ画面実装

アカウントセキュリティ画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

アカウントセキュリティ画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、alert、button、modalなどの構成要素を優先度順に配置します。

アカウントセキュリティ画面でよくある失敗は何ですか？

警告が怖いだけで行動が分からない

アカウントセキュリティ画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。