メンバーシップ リスト — 中央メンバーシップ & SSO ハブ
1. ドキュメントの目的
このドキュメントでは、メンバーシップ ハブアプリケーション内のすべての画面（スクリーン）を登録し、説明、主なコンポーネント、およびデザインおよび実装の際に考慮すべき条件を記載します。
2. パブリック エリア (ログインなし)
SCR-PUB-01: ランディング ページ
ルート: /
説明: ユーザーが最初に訪れるページ。製品の価値とサインアップのCTAを表示します。
コンポーネント:
- ヒーロー セクション: タグライン「1アカウント、すべてのアプリケーション」、短い説明、CTA「無料で始める」および「詳細を確認」
- 利用可能な製品のリスト
- 強み: SSO、複数製品、セキュリティ
- フッターに重要なリンク
条件: ユーザーがすでにログインしている場合、ダッシュボードにリダイレクトします。
SCR-PUB-02: サインアップ ページ (登録)
ルート: /register
説明: 新しいアカウントの登録フォーム。
コンポーネント:
- ロゴ: Hub
- タイトル: 「アカウントを作成」
- 入力: 完全名、メール、パスワード、パスワードの確認
- パスワードの強度指標
- ボタン: 「サインアップ」(プライマリ、フルウィドス)
- リンク: 「すでにアカウントを持っていますか? ログイン」
- フィールドごとのエラーメッセージ (インライン)
条件:
- 既に登録されたメール → インラインエラーメッセージ
- 実時検証 (ユーザーが入力するたびに)
- サブミット時はローディング状態
SCR-PUB-03: ログイン ページ
ルート: /login
説明: 既存のアカウントにログインするフォーム。
コンポーネント:
- ロゴ: Hub
- タイトル: 「ログイン」
- 入力: メール、パスワード
- ボタン: 「ログイン」(プライマリ)
- リンク: 「パスワードを忘れた場合?」
- ディバイダー: 「または」
- ボタン: 「アカウントを作成」(セカンダリ アウトライン)
条件:
- アカウントが未確認 → バナー + 再送メールのボタンを表示
- アカウントが凍結 → サポートに連絡するメッセージを表示
- リート リミット → 一時的に待機するメッセージを表示
SCR-PUB-04: メールの確認
ルート: /verify-email
説明: 登録後、ユーザーにメールを確認するよう求めるページ。
コンポーネント:
- イラストレーション: アンプル
- タイトル: 「あなたのメールを確認してください」
- テキスト: 「私たちはあなたのメールに確認リンクを送信しました」
- ボタン: 「メールを再送信」
- リンク: 「メールを変更するかどうか?」
- カウントダウン タイマー: 再送信までの時間 (例: 60秒)
ステート: 再送信中、成功状態、エラー状態
SCR-PUB-05: メールの確認を確認する
ルート: /verify-email/confirm?token=...
説明: ユーザーがメール内のリンクをクリックしたときに表示されるページ。
ステート:
- 成功: チェックマークのアニメーション、メッセージ「アカウントが確認されました!」、CTA「今すぐ始める」
- 期限切れ: 「リンクが期限切れです」、ボタン「再送信」
- すでに使用: 「アカウントが有効です」、ボタン「ログイン」
SCR-PUB-06: パスワードを忘れた
ルート: /forgot-password
コンポーネント:
- メール入力
- ボタン「パスワード リセット リンクを送信」
- サブミット後: イラストレーション + 「あなたのメールにパスワード リセット リンクを確認してください」
条件: 常にジェネリック メッセージを表示 (メールが存在するかどうかを確認しない)
SCR-PUB-07: パスワードをリセットする
ルート: /reset-password?token=...
コンポーネント:
- 入力: 新しいパスワード、パスワードの確認
- パスワードの強度指標
- ボタン「新しいパスワードを保存」
ステート:
- トークンが有効: フォームを表示
- トークンが期限切れ: 「リンクが有効でないか期限切れです」、CTA「新しいリンクを要求」
- 成功: 「パスワードが更新されました」、CTA「今すぐログイン」
3. メンバーシップ エリア (ログインあり)
SCR-MEM-01: ダッシュボード
ルート: /dashboard
説明: ログイン後、ユーザーが最初に訪れるページ。すべてのアクティブなサブスクリプションを表示します。
コンポーネント:
- ヘッダー: ようこそメッセージ (「こんにちは、[名前]!」)、アバター
- サブタイトル: 「すべてのサブスクリプションを管理」
- サブスクリプションごとのカード (Product Card)
- ボタン: 「+ サブスクリプションを追加」 (すべての製品を持っていない場合)
- グレース ペリオド バナー (ライセンスがグレース ペリオドの場合)
- フッター ナビゲーション
空の状態: イラストレーション + 「まだアクティブなサブスクリプションがありません」 + CTA「製品を探す」
SCR-MEM-02: 製品 カタログ
ルート: /products
説明: エコシステム内のすべての SaaS 製品のリスト。
コンポーネント:
- グリッド/リスト カード:
- ロゴ、名前、短い説明
- 利用可能なパッケージのラベル (無料、プロ、など)
- メンバーのステータス (未アクティブ / アクティブ)
- CTA「詳細を確認」または「すでにアクティブ」
SCR-MEM-03: 製品の詳細とパッケージの選択
ルート: /products/[製品コード]
説明: 製品の詳細とパッケージの比較ページ。
コンポーネント:
- ヒーロー 製品: ロゴ、名前、説明
- 月額/年額のスイッチ (有料製品の場合)
- カード パッケージ: 名前、価格、機能、CTA「パッケージを選択」
- メンバーがすでに所有している製品を特定の方法で表示
SCR-MEM-04: チェックアウト
ルート: /checkout/[注文 ID]
説明: 支払い前、注文の確認ページ。
コンポーネント:
- 進行状況: 「パッケージを選択 → 支払い → 確認」
- 注文の概要: 製品、パッケージ、価格、期間
- 支払いゲートウェイの選択: Midtrans カード / Xendit (ラジオ ボタンとロゴ)
- ボタン「支払いを続行」
SCR-MEM-05: 支払いを待つ
ルート: /checkout/[注文 ID]/waiting
説明: 支払いゲートウェイにリダイレクトされた後、確認を待つページ。
コンポーネント:
- ローディング アニメーション / スピナー
- テキスト: 「支払いを確認しています...」
- メソッドごとの簡単な指示
- リンク: 「ダッシュボードに戻る」