TL;DR
- Claude Codeに頼んだら30分でマネージャータイプ診断アプリができた
- 技術構成：Next.js + Anthropic API（Claude Haiku）+ Vercel
- プロンプト設計とAPI連携のポイントを全公開
- デモ：https://manager-type-quiz.vercel.app/
作ったもの
10問に答えると、あなたのマネジメントスタイルに最も近い歴史上の人物を診断するWebアプリ。
三国志の武将・日本の戦国武将・海外の偉人まで幅広く対応。Claude AIが回答を分析して診断結果を生成する。
デモ → https://manager-type-quiz.vercel.app/
技術構成
| 項目 | 内容 |
|---|---|
| フレームワーク | Next.js 15（App Router） |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| AI | Anthropic API（claude-haiku-4-5） |
| ホスティング | Vercel |
実装の全体像
app/
├── page.tsx # クイズUI（スタート・質問・ローディング・結果）
└── api/
└── diagnose/
└── route.ts # Claude APIを呼び出すAPIルート
シンプルな2ファイル構成。page.tsxでUI、route.tsでAPI呼び出しを担当する。
Claude APIへのプロンプト
診断の肝はここ。回答内容をClaude APIに送って歴史上の人物を選ばせる。
const prompt = `あなたはマネジメントタイプ診断の専門家です。
以下の10問の回答から、この人物のマネジメントスタイルを分析し、
最もよく似た歴史上の人物を診断してください。
【回答】
${answerText}
以下のJSON形式で回答してください：
{
"person": "歴史上の人物名（日本語）",
"era": "時代・出身",
"type": "マネジメントタイプを一言で",
"description": "この人物との共通点と解説（200文字程度）",
"strengths": ["強み1", "強み2", "強み3"],
"advice": "このタイプへのアドバイス（100文字程度）"
}
候補は三国志の武将、日本の戦国武将、海外の歴史的リーダーなど幅広く選んでください。`;
プロンプト設計のポイント
① JSON形式を指定する
JSON.parse() で処理するため、出力形式を厳密に指定する。レスポンスから{...}部分だけ正規表現で抽出して安全に処理する。
const jsonMatch = content.text.match(/\{[\s\S]*\}/);
const result = JSON.parse(jsonMatch[0]);
② 候補の幅を明示する
「三国志・戦国武将・海外まで幅広く」と指定することで、回答の多様性が上がる。指定しないと同じ人物が頻出する。
③ 文字数を指定する
「200文字程度」「100文字程度」のように指定すると、UIに収まるちょうどいい量のテキストが返ってくる。
APIルートの実装
export async function POST(req: NextRequest) {
const { answers } = await req.json();
// 回答を「Q1「質問文」→ A：選択肢」形式に変換
const answerText = answers
.map((ans: string, i: number) => {
const idx = ["A", "B", "C", "D"].indexOf(ans);
return `Q${i + 1}「${questions[i]}」→ ${ans}：${choices[String(i)][idx]}`;
})
.join("\n");
const message = await client.messages.create({
model: "claude-haiku-4-5-20251001",
max_tokens: 1024,
messages: [{ role: "user", content: prompt }],
});
// JSONを抽出してパース
const jsonMatch = content.text.match(/\{[\s\S]*\}/);
const result = JSON.parse(jsonMatch[0]);
return NextResponse.json(result);
}
回答を「質問文＋選択肢テキスト」の形に整形してから送ることで、Claudeが文脈を理解しやすくなる。
UIの実装（4つのステップ管理）
const [step, setStep] = useState<"start" | "quiz" | "loading" | "result">("start");
stepの状態だけで4画面を管理する。シンプルだが十分。
コスト
Claude Haiku（最安モデル）を使用。1回の診断あたり約700トークン。
| コスト | |
|---|---|
| 1回の診断 | 約0.4円 |
| 1,000回 | 約400円 |
$5チャージで数千回動かせる。
まとめ
- Next.js + Anthropic APIの組み合わせで診断アプリが30分で作れる
- プロンプトに「JSON形式・候補の幅・文字数」を指定すると精度が上がる
- Claude Haiku はコスト最小で十分な品質