🎆

React × FastAPI で作るAI面談練習自動化アプリ

MUR

2025/11/27に公開

 はじめに営業の方から面談練習を自動化し、時間を削減したいという要望を受け、約3週間の期間で「面談練習自動化アプリ」を開発しました。

機能として
面談者のスキルシートと応募する案件情報を基に、スキルシートのカンペと想定質問のQ＆Aを作成
AI面接官と実践的な練習を行い、その結果を分析、模範解答の表示
があります。

本記事では、このアプリの設計思想、採用した技術スタック、そして特に重要となる処理フローについて解説します。

 🚀 1. アプリケーションの概要と強みこのアプリの最大の目的は、論理的コミュニケーション能力の向上です。

面談に受かるためには相手が求めるスキル、コミュニケーション能力に達する必要があります。

そのアピールを練習によって最大化することを目標にアプリを作成しました。
制作物: Webアプリケーション

使用目的: スキルシートのカンペと想定質問の予想、面談練習の自動化

 💡 差別化ポイント
論理的回答の訓練: 回答時に「結論、理由、具体性」を意識させることで、相手に伝わりやすく論理的なコミュニケーションを訓練します。

弱点の特定と克服: 面談の出力結果を分析し、苦手分野や質問の傾向を特定。反復練習を通じて効果的に弱点を克服できます。

 💻 2. 技術スタック

カテゴリ
技術名
役割


フロントエンド
React
ユーザーインターフェース（画面描画）

バックエンド
FastAPI, Python
高速なAPIサーバー、OpenAI連携、分析処理

AI/自然言語処理
OpenAI GPT-4o, Sentence-Transformers
面接官の役割、評価分析、質問の関連性ソート（ベクトル化）

データベース
Firebase
スコア管理、ユーザー認証、ストレージ

認証
Firebase Auth
ログイン・ユーザー管理

音声処理
Web Speech API, Media Recorder API, OpenAI Whisper API
音声入力・認識、録音データの処理

評価分析
Recharts
分析結果のグラフ描画


 ⚙️ 3. 処理フローとアーキテクチャアプリは大きく3つの段階を経てユーザーをサポートします。

 A. ログイン・ホーム画面ユーザーはまず Firebase Auth で認証し、ホーム画面へ遷移します。

 B. カンペ・想定質問の準備面談練習を始める前に、提出されたスキルシートと案件情報を基に、練習すべき質問を準備します。

ベクトル化: スキルシートと案件情報を Sentence-Transformers でベクトル化

類似度ソート: 案件情報の類似度が高い項番順に質問をソート

カンペ生成: スキルシートのカンペ（2〜3個）を生成し、ユーザーに提示

 C. 面談練習と分析面談練習の核となるプロセスは以下の通りです。

質問の選定: Sentence-Transformers を利用し、スキルシートまたは案件情報から類似度の高い質問を抽出

AI面接官の質問: AI面接官（GPT-4o）が質問を提示

ユーザーの回答: 音声入力（Audio API）またはテキスト入力

音声認識: 音声入力の場合、OpenAI Whisper API でテキスト化

評価と分析情報の生成: OpenAI が回答に対して評価スコアと分析情報（模範回答、アドバイス）を生成

データ保存: 質問、回答、評価、分析情報は Firebase に保存

分析表示: 履歴データは Recharts を用いて可視化、苦手分野を把握可能

 🧩 4. 画面の解説
 ログイン
登録済みの メールアドレスとパスワード を入力するとホーム画面に遷移

パスワード再設定・新規登録画面へのリンクも用意

 ホーム
ホーム画面には以下の3つのリンクがあります。
カンペと想定質問作成
面談練習
分析・復習画面

 カンペと想定質問作成


情報入力
スキルシートと案件情報を入力
類似度検索を行い、関連性の高い情報を順にソート


カンペ作成
関連性の高い項目を優先的に2～3項目抽出


想定質問作成
関連性の高い質問を抽出

Closed Question (Yes/No) に対応
Yes/Noそれぞれの回答例を作成


 面談練習


情報入力
初期はカンペ・想定質問作成と同じ類似度検索を実施


2種類の質問モード
スキルシートからの質問
類似度検索をもとに案件と関連性の高い項目を質問

案件情報からの質問
AIが重要と判断した要素に対して質問



 質問の評価フロー1つの質問に対して以下を評価
結論
理由
具体性

3要素すべて満たしたら次の質問へ
満たしていない場合は最大3回まで補足質問
3回行っても不十分なら自動的に次の質問へ
強制的に次の質問に進めたい場合は 「次の質問に進む」ボタン で評価なしでスキップ可能

音声入力 に対応
チャット内容は テキストベースでダウンロード 可能

 分析・復習





最新案件の面談結果
各質問の模範解答（最新の10件）
求める人物像との差分を表示
グラフ表示
面談の1つの質問に対する平均回答回数
成長度の確認
苦手質問の把握
スキルシート・案件情報からの質問ごとに
リトライ回数
評価の低い質問 Top5 を表示

評価基準
結論、理由、具体性それぞれ1点
最大3回のやり取りで合計点算出
リトライが多いほどマイナス加点
苦手質問を優先的に出題


 💰 5. 想定コスト（1人あたり）毎日10分の面談練習を1人が1か月間行った場合の試算です。


項目
コスト


OpenAI Whisper API
約 ¥300

OpenAI GPT-4o
約 ¥1,750 (1日20回質問 x 30日)

Firebase など
無料枠で利用可能

合計
約 ¥2,050/月


 ⚠️ 6. 反省点Firebase Store からのアウトプットに時間がかかった:

prop などの依存関係の理解が浅かったため、処理の流れを理解するのに時間を要しました。
アプローチの柔軟性:

フロントエンドで処理をしたらうまくいったため、一つの問題に直面した際には、様々なアプローチを考えることの重要性を学びました。

 🎯 7. 今後の展望逆質問機能

面接官に質問する機能を追加し、実践度を高めます。
苦手問題の即時練習

分析結果から特定された苦手な問題に、ワンクリックで簡単にアクセスし練習できるようにします。
音声ファイルの詳細分析

回答の抑揚や声の大きさを分析する機能を追加し、コミュニケーションの改善を促します。
分析データの共有

分析結果をDBに保存し、自分以外のユーザーとも共有できるようにします。

カテゴリ	技術名	役割
フロントエンド	React	ユーザーインターフェース（画面描画）
バックエンド	FastAPI, Python	高速なAPIサーバー、OpenAI連携、分析処理
AI/自然言語処理	OpenAI GPT-4o, Sentence-Transformers	面接官の役割、評価分析、質問の関連性ソート（ベクトル化）
データベース	Firebase	スコア管理、ユーザー認証、ストレージ
認証	Firebase Auth	ログイン・ユーザー管理
音声処理	Web Speech API, Media Recorder API, OpenAI Whisper API	音声入力・認識、録音データの処理
評価分析	Recharts	分析結果のグラフ描画