AI面接練習アプリ(仮称)

有料職業紹介事業の求職者支援の一環として、中途採用の転職希望者がAIの面接官と音声で会話しながら、本番に近い形で何度でも面接練習ができ、回答ごとに具体的なフィードバックを受けられるWebアプリケーション。担当キャリアアドバイザーは、求職者の練習状況を把握して支援に活かせる。

ステータス

製品版の先行版(求職者が使う画面。ログインとデータベースの前の版)を / で、管理者向けの検証ツール(音声会話の試作版)を /poc で動かせる。先行版では、練習の記録などは求職者のブラウザに保存する(基本設計書 14.2)。

ドキュメント

• 引き継ぎ書(いまの状態・作業の決まり・次にやること)
• 要件定義書
• 基本設計書

ローカルで動かす

Node.js 22 が必要。

npm install
cp .env.example .env.local   # 値を入れる(下表)
npm run dev                  # http://localhost:3000/join#<POC_ACCESS_CODE の値> を開く(検証ツールは /poc)

環境変数	必須	内容
POC_ACCESS_CODE	○	招待のコード。求職者には https://<ドメイン>/join#<コード> を招待リンクとして送る(「#」より後ろはサーバーに送られないため、アクセスログに残らない)。検証ツール(/poc)では画面で入力する。未設定だと API は使えない
ANTHROPIC_API_KEY	△	Claude API キー。AI_PROVIDER=mock のときは不要。Anthropic Console でワークスペースを選んで作成したキーを使う
ANTHROPIC_WORKSPACE_ID		ワークスペースに属していないAPIキーを使う場合だけ、使うワークスペースのID(wrkspc_...)を入れる
AI_PROVIDER		mock にすると Claude API を呼ばず、固定の文面で動く(APIキーなしで画面と音声の流れを確認できる)
GOOGLE_TTS_API_KEY		Google Cloud の API キー。設定すると、音声合成(Text-to-Speech)と音声認識(Speech-to-Text)で Google Cloud を使える(どちらも標準になる)。Google Cloud で「Cloud Text-to-Speech API」と「Cloud Speech-to-Text API」を有効にし、キーの制限(API の制限)でこの2つだけを許可する
GOOGLE_STT_API_KEY		音声認識だけ別の API キーを使う場合に設定する(未設定なら GOOGLE_TTS_API_KEY を使う)
AZURE_SPEECH_KEY / AZURE_SPEECH_REGION		Azure AI Speech(音声認識・音声合成)。未設定でもブラウザ標準の音声認識・読み上げで試せる
INTERVIEWER_VOICE_ID		製品版の面接官の声(Google Cloud の声の名前。例:ja-JP-Chirp3-HD-Charon)。未設定なら男性の Chirp 3 HD の声のうち一覧の先頭を使う。検証ツールの「声を試す」で選んだ声を入れる
NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY		Supabase のプロジェクトの URL と公開用のキー。エージェントのログインとデータの保存に使う。未設定なら開発用の方式(サーバーのメモリに置き、ログインの確認コードを画面に出す)で動く。本番では必ず設定する

製品版(先行版)の使い方

1. 招待リンク(/join#<コード>)を開く。リンクを開けない場合は、トップの画面にリンクかコードを貼り付ける。
2. はじめての案内(同意 → 職種 → 使い方)を進めると、約5分・やさしい面接官の「はじめての面接」に進む。
3. 「このまま始める」→ 音と声の確認(声が届くか、面接官の声が聞こえるか、イヤホンの有無)→「面接を始める」。マイクが使えない場合は、原因と直し方が出て、文字で答える面接にも切り替えられる。
4. 面接官の質問に声で答え、話し終えたら「以上です」と言う。
5. 面接が終わると結果(点数・総評・良かった点・次に直すとよい点・次にやること)が出て、練習の記録に残る。
6. ホームから、練習の記録・応募先(求人票の貼り付け)・職種と経歴・設定(面接官の話す速さ、字幕、データの削除)・困ったとき(よくある質問)を開ける。

音声認識・音声合成・AIモデル・面接官の顔と声は利用者に選ばせず、使えるものの中から決まった順に選ぶ(Google Cloud → ブラウザ標準など。面接官は Claude Opus 5.5 の佐藤 健一)。

エージェントの画面(作成中)

エージェントが求職者と応募先を登録し、求職者×応募先ごとの招待リンクを作って送る画面(設計:docs/superpowers/specs/2026-10-27-agent-invite-design.md)。いまはログインまでできる。

1. /agent を開くと、ログインの画面に移る。登録されているメールアドレスを入れると、ログインのリンクと6桁の確認コードが書かれたメールが届く。
2. Supabase を設定していない手元の環境では、メールは送らず、確認コードを画面に出す(どのメールアドレスでもログインできる)。
3. エージェントは、管理者が Supabase の画面(Authentication → Users → Invite user)で招待する。データベースの定義は supabase/migrations/、メールの文面は supabase/templates/(本番のプロジェクトには、ダッシュボードの Authentication → Emails に同じ文面を貼る)。

検証ツール(試作版)の使い方

1. アクセスコードを入力する。
2. 面接の設定(選考段階・スタイル・時間・面接官のAIモデル)と、音声の設定(音声認識・音声合成・イヤホンの有無)を選ぶ。応募先と応募書類にはサンプル(看護師の転職。架空の病院)が入っている。
3. 面接官のアバターを選ぶ(下記)。「口の動きを試す」で動きを確認できる。
4. 「準備する」でマイクを許可すると、質問計画が作られる。イヤホンを使わない場合は「スピーカーのエコーを確認」で、面接官の声をマイクが拾わないか確かめる。
5. 「面接を開始」。面接官の質問に声で答える。話し終えると自動で次の質問に進む(「回答を終える」ボタンでも進める)。
6. 面接が終わると、自動で評価とフィードバック(総合スコアと総評、6つの観点の5段階評価、良かった点・改善点、話し方の指標、質問ごとの講評と改善後の回答例、次回の練習課題)が表示される(1分ほどかかる)。
7. 画面下の「応答時間の計測」で、話し終えてから面接官の声が聞こえ始めるまでの時間を確認する(目標:「以上です」と言い終えてから中央値 3.0 秒以内、P95 4.0 秒以内)。「結果をJSONで保存」で記録と評価を保存できる。

音声の組み合わせ:

区分	選択肢	補足
音声認識	Google Cloud(Speech-to-Text。標準)	どのブラウザ(Safari・スマホを含む)でも同じように使える。マイクの音声を話の短い間(0.5秒)ごとに区切ってサーバーへ送り、文字にする(途中の文字は出ず、区切りごとに字幕が出る)。準備のときにごく短い無音を送って使えるかを確かめ、使えなければ文字での回答に切り替えて、有効にする方法を画面に出す。Google Cloud が使える場合は、前回の選択に関係なく Google Cloud から始める
	ブラウザ標準(Web Speech API)	Chrome・Edge 向け(Safari は Siri の設定などで聞き取れないことがあり、Firefox・Brave は非対応)。音声はブラウザの提供元のサーバーで処理されるため、比較の基準として使い、本番では採用しない。認識のサーバーにつながらない(network エラーが3回続く)、マイクが許可されていないなどで使えなくなったら、面接は続けたまま文字での回答に切り替え、理由と対処を画面に出す
	Azure AI Speech	サーバーが発行する一時トークンで、ブラウザから直接接続する
	テキスト入力	マイクを使わずに流れを確認する
音声合成	Google Cloud(標準)/ Azure AI Speech / ブラウザ標準 / テスト音	面接官の声をそろえるため、Google Cloud が使えるとき(GOOGLE_TTS_API_KEY を設定済み)は、前回の選択に関係なく Google Cloud から始める(ブラウザ標準の声は端末ごとに変わる)。Google は日本語の声の一覧から選べる(Chirp 3 HD が最も自然、WaveNet が低価格)。「声の高さ」「話す速さ」で調整し、「声を試す」で確認できる。テスト音は発話時間ぶんの信号音(音声サービスなしで確認する用)

面接官のアバター:

選択肢	補足
佐藤 健一(写真)	標準の面接官(public/avatars/sato/)。口は、この写真から作った話している動画の口元のコマ(mouth-frames.webp と mouth-frames.json)で動かす。動画を作り直したら node scripts/build-mouth-frames.mjs <動画ファイル> で作り直せる(ffmpeg が必要)。目を閉じた顔の画像と、予備の口の形の画像(「い・う・え・お」。「あ」は「え」で代用)つき。面接官はこの名前で名乗り、ブラウザ標準の読み上げでは男性の声を優先する
仮の顔(イラスト)	public/avatars/placeholder/。正式な顔画像ができるまでの仮の顔。表情違いの画像は node scripts/generate-placeholder-avatar.mjs で作り直せる
自分で用意した画像	画像生成AIなどで作った顔画像を選び、両目・口・あごの4点をクリックする。正面を向き、目を開けて口を閉じた、肩まで写った画像(正方形がおすすめ)を使う。続けて「表情の画像」に、同じ人物の口の形(あ・い・う・え・お)と目を閉じた顔を追加すると、口の中やまばたきも本物の画像になる(位置は自動で合わせる)。画像はサーバーに送らず、そのブラウザだけに保存する。実在の人物に似せない
表示しない	アバターを出さずに試す

アバターは声に合わせて口を動かし、まばたき・相づちのうなずきをする(設計書 3.12)。サーバーで合成した音声(Google・Azure)は音から、ブラウザ標準の読み上げは文章の母音から口の動きを作る。テスト音はほぼ無音のため、口はほとんど動かない。

スマホでマイクを使うには HTTPS が必要なため、スマホでの確認は Vercel のプレビュー・本番の URL で行う。

Vercel へのデプロイ

1. Vercel で GitHub のこのリポジトリをインポートする(Framework: Next.js)。
2. 環境変数(上表)を Production / Preview に設定する。
3. 関数の実行リージョンは vercel.json で東京(hnd1)に固定している。
4. 商用利用のため Pro プランが前提。Claude の利用額は Anthropic Console で上限を設定しておく。

開発コマンド

npm run lint        # ESLint
npm run typecheck   # TypeScript の型チェック
npm test            # 単体テスト(Vitest)
npm run build       # 本番ビルド
cd e2e && npm test  # ブラウザでの通しの確認(e2e/README.md)

This is the beginning of the README. Read the rest at the original. Read the full README ↗