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 と公開用のキー。エージェントのログインとデータの保存に使う。未設定なら開発用の方式(サーバーのメモリに置き、ログインの確認コードを画面に出す)で動く。本番では必ず設定する |
製品版(先行版)の使い方
- 招待リンク(
/join#<コード>)を開く。リンクを開けない場合は、トップの画面にリンクかコードを貼り付ける。
- はじめての案内(同意 → 職種 → 使い方)を進めると、約5分・やさしい面接官の「はじめての面接」に進む。
- 「このまま始める」→ 音と声の確認(声が届くか、面接官の声が聞こえるか、イヤホンの有無)→「面接を始める」。マイクが使えない場合は、原因と直し方が出て、文字で答える面接にも切り替えられる。
- 面接官の質問に声で答え、話し終えたら「以上です」と言う。
- 面接が終わると結果(点数・総評・良かった点・次に直すとよい点・次にやること)が出て、練習の記録に残る。
- ホームから、練習の記録・応募先(求人票の貼り付け)・職種と経歴・設定(面接官の話す速さ、字幕、データの削除)・困ったとき(よくある質問)を開ける。
音声認識・音声合成・AIモデル・面接官の顔と声は利用者に選ばせず、使えるものの中から決まった順に選ぶ(Google Cloud → ブラウザ標準など。面接官は Claude Opus 5.5 の佐藤 健一)。
エージェントの画面(作成中)
エージェントが求職者と応募先を登録し、求職者×応募先ごとの招待リンクを作って送る画面(設計:docs/superpowers/specs/2026-10-27-agent-invite-design.md)。いまはログインまでできる。
/agent を開くと、ログインの画面に移る。登録されているメールアドレスを入れると、ログインのリンクと6桁の確認コードが書かれたメールが届く。- Supabase を設定していない手元の環境では、メールは送らず、確認コードを画面に出す(どのメールアドレスでもログインできる)。
- エージェントは、管理者が Supabase の画面(Authentication → Users → Invite user)で招待する。データベースの定義は
supabase/migrations/、メールの文面は supabase/templates/(本番のプロジェクトには、ダッシュボードの Authentication → Emails に同じ文面を貼る)。
検証ツール(試作版)の使い方
- アクセスコードを入力する。
- 面接の設定(選考段階・スタイル・時間・面接官のAIモデル)と、音声の設定(音声認識・音声合成・イヤホンの有無)を選ぶ。応募先と応募書類にはサンプル(看護師の転職。架空の病院)が入っている。
- 面接官のアバターを選ぶ(下記)。「口の動きを試す」で動きを確認できる。
- 「準備する」でマイクを許可すると、質問計画が作られる。イヤホンを使わない場合は「スピーカーのエコーを確認」で、面接官の声をマイクが拾わないか確かめる。
- 「面接を開始」。面接官の質問に声で答える。話し終えると自動で次の質問に進む(「回答を終える」ボタンでも進める)。
- 面接が終わると、自動で評価とフィードバック(総合スコアと総評、6つの観点の5段階評価、良かった点・改善点、話し方の指標、質問ごとの講評と改善後の回答例、次回の練習課題)が表示される(1分ほどかかる)。
- 画面下の「応答時間の計測」で、話し終えてから面接官の声が聞こえ始めるまでの時間を確認する(目標:「以上です」と言い終えてから中央値 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 へのデプロイ
- Vercel で GitHub のこのリポジトリをインポートする(Framework: Next.js)。
- 環境変数(上表)を Production / Preview に設定する。
- 関数の実行リージョンは
vercel.json で東京(hnd1)に固定している。
- 商用利用のため 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)
ディレクトリ構成(主要部分)
app/(app)/、components/app/ 製品版(先行版)の求職者向けの画面
features/app/ 求職者向けの画面の処理(ブラウザへの保存・面接の設定・画面の言葉・招待)
app/poc/ 試作版の画面(管理者向けの検証ツール)
app/api/poc/ 試作版の API(質問計画・面接官の応答・音声認識トークン・音声合成)
components/poc/ 試作版の画面部品
features/interview/client/ ブラウザ側の音声処理(状態管理・マイク入力・話し終わりの判定・再生)
features/avatar/ 面接官のアバター(口の動き・表情違いの画像の位置合わせ・動画から作った口元のコマの再生・まばたき・うなずき・WebGL での描画)
lib/interview/turn-engine.ts 会話の1往復を処理するターンエンジン(Next.js に依存しない)
lib/ai/ Claude の呼び出し・プロンプト・質問計画
lib/speech/ 音声合成・音声認識トークンのアダプター
tests/unit/ 単体テスト
e2e/ ブラウザでの通しの確認(模擬サーバーと AI の固定の文面を使う)
エージェントの求職者・招待リンク管理（段階B）
/agent/login からログインし、/agent で求職者を登録する。求職者の詳細で応募先・求人票・面接設定を入れると、/i#<鍵> のリンクを作成・コピーできる。応募先を編集してもリンクは同じ。停止・再開でき、求職者の削除には確認を挟み、応募先・リンク・練習記録も削除する。他の担当者の求職者は見られない（管理者を除く）。
PRACTICE_LINK_SECRET: サーバーだけに設定する32文字以上の安全な乱数。Supabase 使用時は必須。各サーバーで同じ値を維持する。IDとこの値から鍵を作り、DBには鍵のハッシュだけを保存する。値を変更すると既存リンクとの対応が失われるため、変更時にはリンクの再発行・ハッシュの移行設計が必要。- Supabase 未設定時はログイン・データとも開発用のメモリ方式。再起動すると消える。本番用の保存先ではない。
- 段階Cでリンク先
/i の面接・結果保存も実装。実サービス・実機の確認前なので、まだ本番配布はしない。
- 現時点の確認は手元の模擬環境。本物の Supabase・メール・スマホ音声での確認は未実施。未公開。
招待リンクからの練習（段階C）
/i#<鍵> を開くと、担当者が入れた応募先の練習を始められる。結果の担当者共有と音声を保存しないことを案内し、音と声の確認→面接→結果へ進む。マイクが使えない場合は、直し方と「もう一度試す」を出す(文字で答える面接への切り替えボタンはない。面接の途中で聞き取りが続けて失敗したときだけ、自動で文字の入力に切り替わる)。同じリンクから履歴と結果を見返し、再練習できる。
- 練習開始は求職者単位で日本時間の1日3回・月30回。開始時点で数え、途中で終了しても戻さない。通信の再送は同じ開始IDで二重計上を防ぐ。
- 応募先・経歴・面接設定は開始時点のサーバーの内容を保存する。リンクを編集しても、既に始めた練習の内容は変わらない。
- 終了時に会話を保存し、その後サーバーで評価を生成する。終了保存が受理された後は画面を閉じても続行する（処理上限300秒）。保存前にページを閉じた場合の途中回答の復旧は対象外。
- Supabase使用時は
SUPABASE_SERVICE_ROLE_KEY をサーバーだけに設定し、新しい 20261027000001_practice_sessions.sql まで適用する。今回、実際のプロジェクトへの移行・設定変更はしていない。
- 管理接続を使うAPIは毎回鍵とリンクの利用可否を確認する。開始・終了関数は一般利用者には実行権限を与えない。
- 結果をまとめられなかった練習・まとめている途中で止まった練習(6分以上)は、過去の練習を開くと「もう一度まとめる」で作り直せる(段階D)。
- 手元の模擬環境での動作と本物のサービスの動作は区別する。
エージェントの結果画面（段階D）
求職者の詳細で、練習が1回以上ある応募先のカードに「結果を見る」が出る。開くと、そのリンクでの練習の一覧(日時・点数・状態)が出て、選ぶと求職者と同じ結果と会話の記録の全文を見られる。途中で終わった練習(会話を保存する前に画面を閉じた練習)は開けない。
- 結果をまとめられなかった練習・止まった練習は「結果を作り直す」で作り直せる。続けて押しても作成は1回だけ。
- Supabase使用時は
20261028000000_reopen_evaluation.sql まで適用する。
本番の構成(段階E。2026-10-28)
公開入口の更新（2026-10-28）
/ は利用案内、担当者は /agent/login、求職者は担当者が作った /i#鍵 から練習する。/privacy にデータの取り扱い、/help に操作の案内を置く。旧 /join は受付終了、旧端末保存方式の画面は案内へ戻す。旧端末データは削除しない。管理用の /poc は維持する。
閲覧記録は4本目のマイグレーション 20261028000001_agent_access_logs.sql と lib/agent-data/access-log.ts。アプリが認可済みの情報を提供した記録で、直接Data API/DBの監査や人の読了回数を意味しない。記録の保持期間・正式な運営主体の表記・法務確認は未確定。要件v0.19・設計v0.20を参照。
| 項目 | 内容 |
|---|
| Supabase | プロジェクト ai-interview-pj(東京リージョン、無料プラン、組織「month color PJ」)。データベースの定義は supabase/migrations/ の4本を適用済み。ログインの設定(招待制、サイトの URL、戻ってよい URL)は supabase/config.toml から反映済み |
| Vercel の環境変数 | NEXT_PUBLIC_SUPABASE_URL・NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY・SUPABASE_SERVICE_ROLE_KEY・PRACTICE_LINK_SECRET を本番(Production)と、ブランチ feat/login-db のプレビューに設定済み。PRACTICE_LINK_SECRET は本番とプレビューで同じ値(違うと、片方で作ったリンクがもう片方で開けない) |
| 秘密の値の控え | データベースのパスワードと PRACTICE_LINK_SECRET は、開発用の Mac のキーチェーン(「ai-interview-pj-supabase-db」「ai-interview-pj-practice-link-secret」)にだけ置いている |
| エージェントの追加 | node scripts/add-agent.mjs <メールアドレス> [--name 表示名] [--admin](環境変数 NEXT_PUBLIC_SUPABASE_URL・SUPABASE_SERVICE_ROLE_KEY が必要)。追加した人は /agent/login でメールアドレスを入れて、届いたメールのリンクでログインする |
いまのログインのメールは、Supabase 標準の英語のメール(件名「Your sign-in link」)で、本文の「Sign in」を、ログインの画面を開いた端末のブラウザで押す(別のブラウザで開くとログインできない)。確認コードは入っていない。
公開(求職者への配布)の前に必要なこと:
- メール送信サービス(SMTP)の設定:Supabase 標準のメール送信は、Supabase の組織のメンバーにしか届かず、1時間に2通まで。オーナー様側のエージェントがログインするには、Resend などのメール送信サービスを Supabase(Authentication → Emails → SMTP Settings)に設定する。設定したら
supabase/config.toml のメールの文面の4行の「#」を外して supabase config push する(確認コードの入ったメールになる)。
- 有料プランへの切り替え:無料プランは1週間使わないと止まり、バックアップもない。求職者に配る前に Pro(月25ドル〜)にする。
- スマホでの確認:本番の
/agent/login からログインし、求職者と応募先を登録して、招待リンクをスマホで開いて最後まで練習する(音声で答える面接も)。
