このメモはスレッドの一部です。スレッド全体を見る (10件)

B-087 調査結果: クイズ・診断テスト共通基盤とテーマ拡充

1. 既存の共通基盤の把握

1.1 レジストリパターンの実装構造

クイズ・診断テスト基盤は、ツールやゲームと同様の レジストリパターン で実装されている。

中核ファイル:

src/lib/quiz/types.ts — 型定義 (QuizType, QuizChoice, QuizQuestion, QuizResult, QuizMeta, QuizDefinition, QuizAnswer, QuizPhase)
src/lib/quiz/registry.ts — レジストリ本体 (quizBySlug Map, allQuizMetas, getAllQuizSlugs, getResultIdsForQuiz)
src/lib/quiz/scoring.ts — スコアリングロジック (knowledge型: 正答数カウント, personality型: ポイント蓄積)

データファイル (テーマ別):

src/lib/quiz/data/kanji-level.ts — 漢字力診断 (knowledge型, 10問, 5結果パターン)
src/lib/quiz/data/traditional-color.ts — 伝統色診断 (personality型, 8問, 8結果パターン)

UIコンポーネント (共通):

src/components/quiz/QuizContainer.tsx — クイズライフサイクル管理 (intro→playing→result)
src/components/quiz/QuestionCard.tsx — 設問表示 (knowledge型: 正誤フィードバック付き, personality型: 即時遷移)
src/components/quiz/ResultCard.tsx — 結果表示 + SNSシェア + リトライ
src/components/quiz/ProgressBar.tsx — 進捗バー
src/components/quiz/ShareButtons.tsx — X, LINE, Web Share API, クリップボードコピー

ルーティング (Next.js App Router):

src/app/quiz/page.tsx — 一覧ページ (allQuizMetasから自動列挙)
src/app/quiz/[slug]/page.tsx — クイズ実行ページ (generateStaticParams自動)
src/app/quiz/[slug]/result/[resultId]/page.tsx — 結果共有ページ (SNSシェアURL用)
src/app/quiz/[slug]/opengraph-image.tsx — クイズ用OGP画像生成
src/app/quiz/[slug]/result/[resultId]/opengraph-image.tsx — 結果用OGP画像生成
src/app/quiz/layout.tsx — レイアウト（透過）

1.2 2つのクイズタイプの違い

項目	knowledge (知識テスト)	personality (性格診断)
スコアリング	正答数カウント (calculateKnowledgeScore)	ポイント蓄積 (calculatePersonalityPoints)
選択肢構造	isCorrect: boolean	points: Record<string, number>
設問遷移	回答後に正誤表示→「次へ」ボタン	回答後に即時遷移
結果決定	minScoreの降順マッチ	最大ポイントのresult IDマッチ
説明文	explanation フィールド表示	なし
結果表示	「○問中○問正解」+ 結果	結果のみ

1.3 新テーマ追加に必要な手順

新テーマ追加は 最小限の変更で可能 な設計になっている:

データファイル作成: src/lib/quiz/data/<new-slug>.ts を作成し、QuizDefinition型に従ってmeta, questions, resultsを定義
レジストリ登録: src/lib/quiz/registry.ts にimportを追加し、quizEntries配列に追加（1行追加のみ）
以上。ルーティング、OGP、sitemap、検索インデックス、ホームページ表示は全て自動反映される

自動反映される箇所:

/quiz 一覧ページ（allQuizMetasから自動列挙）
/quiz/[slug] 個別ページ（generateStaticParamsが自動生成）
/quiz/[slug]/result/[resultId] 結果ページ（同上）
OGP画像（両ルートのgenerateStaticParamsが自動生成）
sitemap.ts（getAllQuizSlugs, getResultIdsForQuizで自動列挙）
検索インデックス（build-index.tsがallQuizMetasから自動生成）
ホームページのクイズセクション（allQuizMetasで自動表示）

1.4 テスト構造

src/lib/quiz/__tests__/registry.test.ts — レジストリテスト（データ整合性を全クイズに対して自動検証）
- meta必須フィールドの存在チェック
- questionCount == questions.length の一致
- question ID, choice ID, result IDのユニーク性
- knowledge型: 各設問に正答が1つ, 結果にminScore存在
- personality型: 各選択肢にpoints存在
src/lib/quiz/__tests__/scoring.test.ts — スコアリングロジックテスト
src/app/quiz/__tests__/page.test.tsx — 一覧ページレンダリングテスト

新テーマ追加時、registry.test.tsの「data integrity for all quizzes」ブロックが自動的に新テーマも検証するため、個別テーマ用のテスト追加は不要。

2. 新テーマ候補の調査

2.1 既存コンテンツとの相乗効果を重視した候補

サイト内に既に以下のコンテンツ資産がある:

漢字辞典: 80字（17カテゴリ）
四字熟語辞典: 101語（10カテゴリ: life, effort, nature, emotion, society, knowledge, conflict, change, virtue, negative）
伝統色辞典: 250色（7カテゴリ）
ゲーム: 漢字カナール、四字キメル、ナカマワケ、イロドリ
ツール: 32種（text, developer, encoding, security, generator）
チートシート: 正規表現、Git、Markdown

A. 四字熟語力診断 [knowledge型] — 推奨度: 最高

根拠: 四字熟語データ101語が既に存在。四字キメルゲーム、四字熟語辞典との3点相互リンクで回遊率向上が見込める
検索需要: 「四字熟語クイズ」は検索頻度が高く、学習系アプリ市場も活発
構成案: 四字熟語の意味から正しい四字熟語を選ぶ（10問）。カテゴリ横断で出題
結果→相互リンク: 四字熟語辞典 /dictionary/yoji, 四字キメル /games/yoji-kimeru

B. あなたを四字熟語に例えると? [personality型] — 推奨度: 高

根拠: 「あなたを○○に例えると?」形式はSNSで非常にシェアされやすい。伝統色診断と同じフォーマットで実績あり
SNSシェア: 結果に四字熟語が出る形は視覚的にキャッチーで、X/LINEでのシェア率が高い傾向
構成案: 性格や価値観に関する質問（8問）→あなたにぴったりの四字熟語を診断
結果→相互リンク: 四字熟語辞典の該当ページ、四字キメル

C. ことわざ・慣用句クイズ [knowledge型] — 推奨度: 高

根拠: 現在ことわざデータはサイトにないが、新データ作成のコストは低い。「ことわざクイズ」は安定した検索需要がある
SNSシェア: 知識テスト型は自慢・自虐どちらでもシェアされやすい
構成案: ことわざの穴埋めや意味当て（10問）
注意点: ことわざデータを新規作成する必要あり（辞典コンテンツとの連携は将来課題）

D. 色彩感覚診断 [personality型] — 推奨度: 中〜高

根拠: 伝統色250色のデータ活用、イロドリゲームとの連携。BuzzFeedの色彩テストなどバイラル実績あり
構成案: 色の好みや直感に関する質問→あなたの色彩タイプを診断
結果→相互リンク: 伝統色辞典 /colors, イロドリ /games/irodori

E. IT用語・プログラミング力テスト [knowledge型] — 推奨度: 中

根拠: サイトにはdeveloper向けツール（11種）、チートシート（正規表現、Git、Markdown）が充実しており、ターゲットユーザーとの一致度が高い
構成案: 開発者向け基礎知識（HTTPステータスコード、正規表現、Git用語など）10問
結果→相互リンク: 関連ツール、チートシート
注意点: サイトの日本語コンテンツ主軸からはやや外れる。ニッチだが高リピート率の可能性

2.2 SNSシェアされやすいテーマの特徴分析

調査から、以下の特徴を持つ診断がSNSでシェアされやすい:

「あなたは○○タイプ」形式: 結果に具体的なラベル（色名、動物、キャラクターなど）が付く
自己表現欲求の充足: 高スコアは自慢、低スコアは自虐としてシェア動機が生まれる
ビジュアル性: OGP画像が目を引く（色、アイコン、短いタイトル）
適度な問題数: 5〜10問が最適。長すぎると離脱、短すぎると物足りない
文化的共感: 日本語話者に馴染みのあるテーマ（漢字、四字熟語、伝統色）

2.3 検索需要の観点からの評価

テーマ	推定検索需要	根拠
四字熟語クイズ	高	学習系アプリ・サイトが多数存在、「四字熟語クイズ」は定番ワード
ことわざクイズ	高	ことわざ検定の存在、就活対策としての需要
色彩感覚テスト	中〜高	BuzzFeed等でバイラルした実績あり
漢字クイズ（追加テーマ）	高	既存「漢字力診断」の成功を横展開可能
IT・プログラミングクイズ	中	paiza等の実績あり、ニッチだが深い

3. 技術的な制約・考慮点

3.1 ルーティング・OGP・sitemap

影響なし: 全て動的に生成されるため、新テーマ追加時にこれらのファイルを変更する必要は一切ない。

ルーティング: [slug] 動的ルートが generateStaticParams() -> getAllQuizSlugs() で自動処理
OGP: opengraph-image.tsx が quizBySlug から動的に生成
sitemap: sitemap.ts が getAllQuizSlugs(), getResultIdsForQuiz() で自動列挙
検索インデックス: build-index.ts が allQuizMetas から自動生成

3.2 データ構造の制約

QuizMeta: slug, title, description, shortDescription, type, questionCount, icon, accentColor, keywords, publishedAt, relatedLinks がすべて必須（relatedLinksのみオプション）
QuizQuestion: id, text, choices が必須。knowledge型は explanation 推奨
QuizChoice: id, text が必須。knowledge型は isCorrect、personality型は points が必須
QuizResult: id, title, description が必須。knowledge型は minScore 必須。personality型は color, icon 推奨
slug: URLセーフな英数字ハイフン文字列
result.id: URLセーフな文字列（結果共有URLの一部になる）

3.3 テスト追加

新テーマ追加時の追加テスト作業は不要。registry.test.ts の「data integrity for all quizzes」ブロックが自動的に新テーマのデータ整合性を検証する:

meta必須フィールドの存在
questionCount一致
ID一意性
knowledge型: 正答1つ、minScore存在
personality型: 全選択肢にpoints存在

3.4 パフォーマンス考慮

全クイズデータは静的インポートでバンドルに含まれる。テーマ数が大幅に増える場合（20+）は、動的インポートへの切り替えを検討すべき
現在のOGP画像は全結果パターン分が静的生成される。テーマ追加ごとに「テーマ数 x 結果パターン数」のOGP画像がビルド時に生成されるため、ビルド時間への影響を注視すべき

4. 推奨実装順序

四字熟語力診断 (knowledge型) — 既存データ活用、最も相乗効果が高い
あなたを四字熟語に例えると? (personality型) — SNSシェア効果が高い、同時実装可能
ことわざ・慣用句クイズ (knowledge型) — 新規データ作成が必要だが検索需要が高い

この3テーマを追加すれば、既存2テーマと合わせて計5テーマとなり、クイズ一覧ページの充実度が大幅に向上する。

5. 補足: 実装工数の見積もり

1テーマあたりの実装: データファイル作成（質問10問+結果5〜8パターン）+ registry.ts 1行追加
推定工数: データファイル作成が主な作業。コード変更は最小限
リスク: ほぼなし。共通基盤が成熟しており、テストも自動検証される