画面仕様書 - pikawakapikka/SkillSync GitHub Wiki
画面仕様書：SkillSync
1. トップページ（TOP）
- URL：
/
- 目的：サービス紹介・ログイン/登録の入口提供
- 構成要素：
- ヒーローヘッダー（キャッチコピー＋CTA）
- SkillSyncの特徴紹介（図解3〜4項目）
- 求人掲載企業ロゴ一覧（信頼感醸成）
- 「無料ではじめる」ボタン（新規登録へ）
- フッター（利用規約・プライバシーポリシー）
- 機能：
- ログイン / 新規登録導線
- 各セクションへのスムーズスクロール
2. ユーザーダッシュボード（求職者）
- URL：
/dashboard
- 目的：スキル管理、マッチング、スカウトなどを集約
- 構成要素：
- 左サイドメニュー（プロフィール／スキルテスト／マッチング／スカウト）
- 中央メインエリア
- 【プロフィールカード】
- 【ジョブマッチ一覧】
- 【スカウト通知欄】
- 機能：
- マッチ率の高い求人の自動表示
- スキルアップ提案バナー（不足スキルあり時）
3. スキルプロフィール編集画面
- URL：
/profile/edit
- 目的：自身のスキル・実績を編集・公開する
- 構成要素：
- 入力フォーム（自己紹介、保有スキル、資格、成果物）
- ポートフォリオURL欄（GitHub/Notionなど）
- ファイルアップロードボタン（画像・動画）
- スキルテスト結果一覧（自動表示）
- 機能：
- スキルタグの入力補完
- 成果物のプレビュー表示
- 公開・下書き切り替え
4. スキルテスト画面
- URL：
/skill-test/[category]
- 目的：選択分野に応じたスキル診断の受験
- 構成要素：
- テストタイトルと説明文
- タイマー表示（右上固定）
- 問題表示エリア（選択式／コーディング）
- 次へ・前へボタン
- 機能：
- 回答の一時保存
- テスト終了後のスコア表示
- 結果をプロフィールに反映ボタン
5. 求人マッチング画面
- URL：
/jobs
- 目的：AIによるおすすめ求人の一覧表示と応募
- 構成要素：
- 検索フィルター（報酬、スキルタグ、働き方など）
- 求人カード一覧
- 応募ボタン・保存ボタン
- 機能：
- マッチ理由の可視化（「あなたのReact経験が求められています」など）
- 求人ブックマーク
6. スカウト一覧画面
- URL：
/scouts
- 目的：企業からのオファー確認・返信
- 構成要素：
- スカウトカード（企業名、ポジション、送信日時）
- スカウトメッセージ（展開）
- 「返信」「辞退」ボタン
- 機能：
- 状態フィルター（未返信・返信済・辞退済）
- オファー詳細表示
7. 面接対策・模擬面接画面
- URL：
/interview-practice
- 目的：AIによる模擬面接体験（テキスト/ビデオ形式）
- 構成要素：
- 選択：職種・形式（テキスト／ビデオ）
- 質問表示欄＋回答入力欄（または録画ボタン）
- 回答例の参考表示
- 機能：
- AIによるフィードバック生成
- 回答履歴の保存と再閲覧
8. 企業ダッシュボード
- URL：
/company/dashboard
- 目的：求人管理・候補者閲覧・採用管理
- 構成要素：
- 求人一覧（編集・削除・再公開）
- スカウト送信履歴
- 候補者検索バー
- 機能：
- スキルタグ検索
- 候補者プロフィール閲覧
- 面接予定・進捗ステータス管理
9. エラーページ（共通）
- URL：
/404, /500, /unauthorized
- 構成要素：
- 機能：
10. 共通UIパーツ
- ヘッダー：ロゴ／ログイン状態に応じたメニュー切り替え
- フッター：利用規約／プライバシー／問い合わせ
- 通知トースト：アクション完了時のフィードバック
- ダイアログ：削除・応募などの確認ポップアップ