Category · ログインフォーム
ログインフォームのデザイン例とAIプロンプト
ログイン、サインアップ、パスワードリセットなど認証フロー専用UIのAIプロンプト集。モーダル型・全画面型・SSO対応など現代の認証パターンを収録。
認証について
ユーザーがプロダクトに入る最初のドアであり、最も人が逃げる場所でもあります。モーダル型、専用ページ型、SSOボタン中心、メールとワンタイムリンクによるパスワードレス型など、設計のバリエーションは豊富。最近は Google / GitHub / Apple のSSOが主流です。まだ価値を体験していない相手に個人情報を求める非対称な取引なので、邪魔をしない・迷わせないを最優先に。SSOは3つまでに絞り、エラー表示と入力補助の質で差がつきます。
autocomplete を正しく書けば、多くの人は1タップで終わります。よく使われる場面
- SaaSのログイン・サインアップフォーム
- 管理画面の社内SSO認証
- 招待リンクからの参加フロー
- パスワード再設定・2段階認証
- passwordless（マジックリンク）認証
成功のポイント
- フィールド数は最小限に絞る
- SSOボタンは上部、メール入力は下部の階層
- エラーメッセージはテキストで具体的に
- パスワード要件はリアルタイム表示
- Caps Lock警告など細やかなUX対応
