Component Gallery

Screen Pattern

ログイン画面（Login Screen）UIの作り方

ログイン画面は、ユーザーが本人確認を行い、サービス内の個別領域へ入るための入口です。

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

30秒でわかる要点

ログイン画面は、ユーザーが本人確認を行い、サービス内の個別領域へ入るための入口です。

自前ワイヤーフレーム

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

主なユースケース

  • ・メールアドレスとパスワードで認証する
  • ・SSOやSNSログインを選ばせる
  • ・パスワード再設定へ誘導する

レイアウトの考え方

  • ・入力欄は少なく保つ
  • ・主操作と補助リンクを明確に分ける
  • ・エラーは入力欄の近くに表示する

アクセシビリティ

  • ・autocomplete属性を適切に使う
  • ・エラー内容をテキストで伝える
  • ・フォーカス順を自然にする

よくある失敗

  • ・エラー理由が曖昧
  • ・パスワード再設定導線が見つけにくい
  • ・SNSログインの優先度が整理されていない

構成コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。チェックボックス（Checkbox）チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。区切り線（Divider）区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。

AI実装プロンプト

ログイン画面実装

ログイン画面をReact + Tailwind CSSで実装してください。入力エラー、読み込み中、パスワード再設定、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

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

参照元

FAQ

ログイン画面で最も重要なUIは何ですか？

入力欄、主ボタン、エラー表示、パスワード再設定導線です。装飾よりも認証の失敗時に迷わないことが重要です。

ログイン画面で最初に決めるべきことは何ですか？

この画面でユーザーが完了したい主目的を1つに絞り、input、button、checkboxなどの構成要素を優先度順に配置します。

ログイン画面でよくある失敗は何ですか？

エラー理由が曖昧