konkatsu-diagnosis-lp — Vite 企业官网模板

SHA-256: ff8d3e9cda7288e75431589601591d44d025037dfc556270fb55bbc761af3ea2

2026-10-18T21:47:53.609Z

# 3分婚活診断AI

> 小規模な結婚相談所・個人コンサル向けの、**「無料診断 → 無料相談予約」へ送客する診断LPテンプレート**です。
> フォークして文言・CTAを差し替えるだけで、自分の相談所用の診断ページを最短で公開できます。

🔗 **デモ：https://konkatsu-shindan-demo.vercel.app**

## 解決する課題（誰のための何か）

- **対象**：見込み客をHP・SNSで集めているが、**問い合わせ前のひと押し（送客導線）が弱い**小規模な結婚相談所・個人の婚活コンサル。
- **課題**：「いきなり無料相談」はハードルが高く離脱する。けれど診断ツールを自前で作る技術リソースはない。
- **このテンプレで解決**：見込み客が婚活状況を入力すると、
  **婚活準備スコア（100点満点）／強み／弱点／今すぐ直すべき3点／プロフィール改善例**
  を表示し、最後に**無料相談の予約・LINE登録へ自然に誘導**します。
  外部AI不要で動くため、**サーバーもAPIキーも不要・無料ホスティングで即公開**できます。

- 技術：React 19 + Vite + TypeScript
- 診断ロジック：**最初は外部AIを使わないルールベース**（あとからClaude / OpenAI APIへ差し替え可能）

## このテンプレートの使い方（フォークする人向け）

1. このリポジトリをフォーク／クローンして `npm install`
2. `src/data/config.ts` の相談所名・CTAリンク（無料相談 / LINE）を自分のものに差し替え
3. `src/data/questions.ts`・`typeQuestions.ts` で質問文を、`src/engine/ruleBasedEngine.ts` で点数・文言を調整
4. `npm run build` → Vercel / Netlify など静的ホスティングへデプロイ

---

## 起動方法

```bash
npm install
npm run dev
```

表示されたURL（例：http://localhost:5173 ）をブラウザで開いてください。

ビルド（本番用ファイル生成）：

```bash
npm run build      # 型チェック + ビルド
npm run preview    # ビルド結果をローカル確認
```

---

## ファイル構成と「どこを直すか」

```
src/
├─ App.tsx                  画面の切り替え（フォーム⇔結果）だけ
├─ index.css               見た目（色・レイアウト）を変えるならここ
├─ components/
│   ├─ DiagnosisForm.tsx   入力フォームの画面
│   └─ ResultView.tsx      診断結果の画面
├─ engine/                 ★診断ロジック（差し替えの中心）
│   ├─ types.ts            入力・出力の「型」= 画面とロジックの契約書
│   ├─ index.ts            diagnose() の窓口。使うエンジンの切替もここ
│   ├─ ruleBasedEngine.ts  ルールベース診断の中身（点数・文言）
│   └─ aiEngine.ts         AI版のひな形（今は未使用）
└─ data/
    ├─ questions.ts        入力項目・選択肢の定義（文言変更はここ）
    └─ config.ts           CTAリンク（無料相談・LINE）・相談所名
```

| やりたいこと            | 編集するファイル                                                 |     |
| ----------------- | -------------------------------------------------------- | --- |
| 質問文・選択肢を変える       | `src/data/questions.ts`                                  |     |
| 無料相談・LINEのURLを変える | `src/data/config.ts`                                     |     |
| 点数の付け方・結果の文章を変える  | `src/engine/ruleBasedEngine.ts`                          |     |
| 結果画面の見た目・項目の並び    | `src/components/ResultView.tsx` + `src/index.css`        |     |
| 診断をAIに差し替える       | `src/engine/aiEngine.ts` を実装 → `src/engine/index.ts` で切替 |     |

---

## 診断ロジックの仕組み（ルールベース）

`ruleBasedEngine.ts` は次の5観点をそれぞれ0〜100点で評価し、重み付き平均で総合スコアを出します。

| 観点 | 元になる入力 | 重み |
|---|---|---|
| 目標の明確さ | いつまでに結婚したいか | 20% |
| 行動量 | 現在の活動状況 | 25% |
| 出会いの成果 | マッチング・交際経験 | 25% |
| プロフィールの見せ方 | 写真・プロフィールの自信 | 20% |
| 活動の積み重ね | 婚活歴 | 10% |

- 70点以上の観点 → **強み**、45点以下 → **弱点** として文章化
- 低い観点や「一番の悩み」に合わせて **今すぐ直すべき3つ** を選択
- 「一番の悩み」に合わせて **プロフィール改善例（Before→After）** を表示

点数・文言はすべて同ファイル内のテーブルにまとまっているので、相談所の方針に合わせて調整できます。

---

## あとからAI（Claude / OpenAI）に差し替える手順

画面・データはそのままで、エンジンだけ差し替えられる設計です。

1. `src/engine/aiEngine.ts` を実装する
   - 返り値は必ず `DiagnosisResult` 型（`types.ts`）に合わせる
   - 雛形に **Claude/OpenAI共通のプロンプト例** をコメントで用意済み
2. `src/engine/index.ts` でエンジンを切り替える

   ```ts
   // import { aiEngine } from './aiEngine'; // ← コメントを外す
   const activeEngine: DiagnosisEngine = ruleBasedEngine;
   // const activeEngine: DiagnosisEngine = aiEngine; // ← こちらに変える
   ```

これだけで画面コードを変えずにAI診断へ移行できます。

### ⚠️ セキュリティ上の注意（重要）
APIキーをブラウザ（フロント）に置くと**盗まれます**。本番では必ず
**自前のサーバー（API Route / Cloud Functions など）を1枚はさみ**、
そこでキーを保管してClaude/OpenAIを呼んでください。

```
ブラウザ → 自前サーバー（キー保管）→ Claude / OpenAI API
```

`aiEngine.ts` のコメントは、このサーバー経由の呼び出し（`/api/diagnose`）を前提にした例になっています。

---

## 備考
- 本診断は一般的な傾向に基づく目安です。実際の提案は無料相談で行う想定です。
- CTAリンク（`config.ts`）は初期状態でダミーURL（example.com）です。公開前に必ず差し替えてください。

---

## コントリビューション / セキュリティ

- 改善提案・バグ報告は [`CONTRIBUTING.md`](./CONTRIBUTING.md) を参照してください。
- 脆弱性は公開Issueではなく [`SECURITY.md`](./SECURITY.md) の手順で報告してください。

## ライセンス

[MIT License](./LICENSE) です。商用・改変・再配布自由です。
自分の相談所用にフォークして使ってください。