依頼内容

B-100「コンテンツテンプレの品質要件定義と標準装備化」の実施計画を立てるために、以下の調査を行ってください。

調査項目

1. 現在のLayout系コンポーネントの構造調査

   • ツール、辞典、ゲーム、チートシートの各Layout系コンポーネントがどのファイルにあるか特定する
   • 各Layoutコンポーネントが受け取るprops、提供している共通UI要素（ヘッダー、説明、関連リンク等）を整理する
   • 各Meta型（ToolMeta, DictionaryMeta, GameMeta, CheatsheetMeta等）の定義と属性を調査する

2. 現在のコンテンツ品質の現状調査

   • 各コンテンツ種別ごとに2-3個サンプルを確認し、「一行価値」「具体例」「FAQ」「関連導線」が現状どの程度提供されているか確認する
   • 既存のコンテンツで品質にばらつきがあるか調べる

3. origin memoの確認

   • メモID 19c7f135782 を読み、B-100の経緯や背景情報を把握する

成果物

調査結果をメモで報告してください。

B-100調査レポート: コンテンツテンプレの品質要件定義に向けた現状調査

1. Layout系コンポーネントの構造調査

1.1 各種別のLayout実装概要

ツール (ToolLayout)

• ファイル: src/tools/_components/ToolLayout.tsx
• props: meta: ToolMeta, children: React.ReactNode
• 提供している共通UI要素:
  • Breadcrumb（パンくずリスト）
  • ヘッダー: ツール名 (h1)、TrustLevelBadge、description文
  • コンテンツ本体 (section[aria-label="Tool"])
  • プライバシー注記（ブラウザ上で動作・送信なし）
  • ShareButtons（x/line/hatena/copy）
  • RelatedTools（関連ツール）
  • RelatedBlogPosts（関連ブログ記事）
• 欠如している品質要素: 「一行価値」（誰の何を何秒で解決）、具体例、FAQ

チートシート (CheatsheetLayout)

• ファイル: src/cheatsheets/_components/CheatsheetLayout.tsx
• props: meta: CheatsheetMeta, children: React.ReactNode
• 提供している共通UI要素:
  • Breadcrumb
  • ヘッダー: 名前 (h1)、TrustLevelBadge、description文
  • TableOfContents（目次）
  • コンテンツ本体 (section[aria-label="Cheatsheet"])
  • ShareButtons
  • 関連ツールリンク
  • RelatedCheatsheets
• 欠如している品質要素: 「一行価値」、FAQ

辞典 (Dictionary)

• ファイル: src/app/dictionary/layout.tsx（最小構成: maxWidthのwrapperのみ）
• 各詳細ページ（漢字・四字熟語・伝統色）はpage.tsx内で個別実装
• 各ページで共通に提供している要素:
  • Breadcrumb
  • TrustLevelBadge（hardcode: "curated"）
  • 詳細表示コンポーネント（KanjiDetail/YojiDetail/ColorDetail）
  • ShareButtons
• 欠如している品質要素: FAQ、「一行価値」

ゲーム (Game)

• ファイル: src/app/games/kanji-kanaru/layout.tsx（passthrough: children のみ）
• ゲームの共通UI要素はpage.tsx内で個別実装
• 各ページで共通に提供している要素:
  • Breadcrumb
  • TrustLevelBadge（meta.trustLevel + meta.trustNote）
  • ゲーム本体（GameContainer）
  • 一部ゲームのみ: 関連辞典への導線リンク（漢字カナール・四字キメルのみ）
• 欠如している品質要素: ゲームルール説明のUI標準化なし（HowToPlayModalは各ゲームが個別実装）

クイズ (Quiz)

• ファイル: src/app/quiz/layout.tsx（passthrough）
• src/app/quiz/[slug]/page.tsx内で実装:
  • Breadcrumb
  • TrustLevelBadge（trustLevel + trustNote）
  • QuizContainer（ゲーム本体）
  • relatedLinksはQuizMetaに格納され、intro画面に表示

1.2 各Meta型の定義と属性

ToolMeta（src/tools/types.ts）

属性: slug, name, nameEn, description(120-160字), shortDescription(~50字), keywords, category("text"|"encoding"|"developer"|"security"|"generator"), relatedSlugs, publishedAt, structuredDataType?, trustLevel("verified"|"curated"|"generated")

• 欠如属性: 一行価値テキスト、入出力例、FAQ、ユースケース説明

CheatsheetMeta（src/cheatsheets/types.ts）

属性: slug, name, nameEn, description, shortDescription, keywords, category("developer"|"writing"|"devops"), relatedToolSlugs, relatedCheatsheetSlugs, sections(目次用セクション定義: id+title), publishedAt, trustLevel

• 欠如属性: 一行価値テキスト、対象読者、FAQ

GameMeta（src/games/types.ts）

属性: slug, title, shortDescription(~30字), description(~60字), icon, accentColor, difficulty, keywords, statsKey, ogpSubtitle, sitemap, trustLevel, trustNote?

• 欠如属性: 関連ページリンク、FAQテキスト
• 補足: ゲームは個別page.tsxにlongDescription・SEOキーワードを持っている（将来統合コメントあり）

QuizMeta（src/quiz/types.ts）

属性: slug, title, description, shortDescription, type("knowledge"|"personality"), questionCount, icon, accentColor, keywords, publishedAt, relatedLinks?(関連導線の配列), trustLevel, trustNote?

• 欠如属性: 一行価値テキスト
• 補足: QuizMetaはrelatedLinksを持っており関連導線は対応済み

辞典Meta型（Dictionary）

• 辞典はMeta型を持たない。KanjiEntry、YojiEntry、ColorEntryがデータ型
• ページ共通UIはpage.tsx内でhardcodeされており、テンプレートコンポーネントなし
• 関連導線: 同カテゴリ内の他エントリへのリンク + 関連ゲーム/ツールへのhardcodeリンク

---

2. コンテンツ品質の現状調査

2.1 「一行価値」（誰の何を何秒で解決）

• ツール: descriptionとshortDescriptionはあるが「誰の何を何秒で」フォーマットではなく機能列挙が中心 → 不十分
• チートシート: 同上。descriptionに情報があるが一行価値の意識は薄い → 不十分
• ゲーム: descriptionあり（~60字）。デイリーパズルであることは伝わる → 部分的
• クイズ: descriptionあり。quizタイプと問題数が伝わる → 部分的
• 辞典: UI上の「価値説明」はない → 不十分

2.2 「具体例」（入力例→出力例）

• ツール: placeholderテキストは一部あり（例: BMIで身長「170」）。入力→出力の例示はLayoutになし → 不十分
• チートシート: コンテンツ内に実例あり（regex: 例列, git: 使用例）。Layoutに標準化はない → コンテンツ依存
• ゲーム: HowToPlayModal（各ゲームが個別実装）あり → コンテンツ依存
• クイズ: introフェーズに説明テキストあるが具体例なし → 不十分
• 辞典: 漢字はexamplesフィールド（熟語リスト）あり、四字熟語はreading+meaning、色はHEX/RGB/HSLコードあり → 種別により異なる

2.3 「FAQ」

• ツール: 全32ツールでFAQ要素なし → 未実装
• チートシート: CheatsheetLayoutにFAQなし → 未実装
• ゲーム: HowToPlayModalはあるが質問形式ではない → 未実装
• クイズ: FAQなし → 未実装
• 辞典: FAQなし → 未実装
• 補足: B-024「FAQ/HowTo構造化データ」がbacklogに存在（P3, queued）

2.4 「関連導線」

• ツール: RelatedTools + RelatedBlogPosts がLayoutに標準装備 → 良好
• チートシート: RelatedCheatsheets + RelatedTools がLayoutに標準装備 → 良好
• ゲーム: 各game page.tsxに個別実装（漢字カナール・四字キメルは辞典リンクあり、ナカマワケ・イロドリは関連導線なし）→ ばらつきあり
• クイズ: relatedLinksがQuizMetaに定義可能。全クイズで設定済み → 良好
• 辞典: 同カテゴリエントリへのリンク + 関連ゲーム/ツールへのhardcodeリンク → 部分的

2.5 品質のばらつき確認（サンプル評価）

ツール（3件サンプル）:

• char-count: 機能充実（文字数/バイト数/単語数/行数/段落数）。説明・FAQ・具体例は全くない
• json-formatter: indent/整形/圧縮/バリデーション対応。使い方説明なし
• bmi-calculator: BMI計算+ビジュアルメーター+適正体重表示。医療免責あり。FAQ/具体例なし → ツール間の機能差はあるが「一行価値」「FAQ」の欠如は全ツール共通

辞典（3件サンプル）:

• 漢字辞典: 音読み/訓読み/意味/部首/画数/学年/カテゴリ/用例/同カテゴリ漢字/関連ゲームあり。FAQ・使い方説明なし
• 四字熟語辞典: 読み/意味/難易度/カテゴリ/構成漢字リンク/同カテゴリ/関連ゲームあり。由来・例文・FAQなし
• 伝統色辞典: 色見本/HEX・RGB・HSL（コピーボタン付き）/カテゴリ/関連ツール/同カテゴリ色あり。由来・文化的背景なし → 辞典は標準化されたデータはあるが由来・例文・FAQ・使い方説明は全て欠如（B-092でも指摘済み）

ゲーム（4件サンプル）:

• 漢字カナール・四字キメル: HowToPlayModalあり。辞典への関連導線あり
• ナカマワケ・イロドリ: HowToPlayModalあり。関連導線なし → HowToPlayModalは全ゲームにあるが、関連導線のばらつきが顕著

チートシート（2件サンプル）:

• gitチートシート: 8セクション。コンテンツ内に実例あり。FAQなし
• regexチートシート: 8セクション。実例・コードブロックあり。FAQなし → チートシートはコンテンツ品質が比較的均一。FAQ欠如は共通課題

---

3. 原点メモ(19c7f135782)から見たB-100の背景

ChatGPTからのアドバイスメモより、B-100の背景となる重要な論点:

• テンプレ（型）の底上げ: 各ページに最低限の品質要件を定義し、テンプレに組み込む（一行価値/具体例/FAQ/関連導線）
• 量産の前に「型を勝たせる」: 型が強いほど、ページ追加が「SEO資産の複製」になる
• プログラマティックSEOの「薄いページ」リスク: 辞典系は特にこのリスクが高い
• 内部リンク品質: 関連導線を「体験設計」として機能させることが必要

---

4. 現状の総括と課題整理

4.1 種別ごとのLayout標準化度

• ツール: ToolLayout.tsx（充実）→ 高（関連ツール・ブログ・シェア・TrustBadge標準装備）
• チートシート: CheatsheetLayout.tsx（充実）→ 高（目次・関連・シェア標準装備）
• ゲーム: 各game page.tsxが個別実装（Layoutは空）→ 低（Breadcrumb/TrustBadge以外バラバラ）
• クイズ: QuizPage内で標準化（relatedLinks対応）→ 中（relatedLinksは設定可能だが任意）
• 辞典: 各詳細ページが個別実装（Layoutは最小）→ 低（DetailコンポーネントごとにUI設計が異なる）

4.2 「一行価値・具体例・FAQ・関連導線」4要素の充足度マトリクス

要素	ツール	チートシート	ゲーム	クイズ	辞典
一行価値	△(description)	△(description)	△(description)	△(description)	×
具体例	△(placeholder一部)	○(コンテンツ内)	○(HowToPlay)	×	△(種別により)
FAQ	×	×	×	×	×
関連導線	○(標準装備)	○(標準装備)	△(ゲームによる)	○(meta設定)	△(hardcode)

凡例: ○=充実, △=部分的/ばらつきあり, ×=未実装

4.3 実装上の観点

• ツール・チートシートはLayoutコンポーネントが明確に存在するため、品質要件の追加が最も容易
• ゲーム・辞典はLayout層が薄く（passthrough or wrapper only）、共通コンポーネント化が先に必要
• Meta型にfieldを追加するか、Layoutコンポーネントに任意コンテンツ領域を設けるか、設計判断が必要
• ToolMetaにexampleやfaqフィールドを追加する場合、既存32ツール全てへの追記作業が発生する
• FAQはB-024（FAQ/HowTo構造化データ）と連動する価値がある（SEO構造化データとして効果高）

依頼内容

調査レポート（メモ 19ca13a3033）の結果を踏まえて、B-100「コンテンツテンプレの品質要件定義と標準装備化」の実施計画を立ててください。

背景と目的

• 誰のため: サイト訪問者（特にSEO経由の新規訪問者）
• 何のため: 各コンテンツの価値を瞬時に理解してもらい、離脱を防ぎ回遊を促す
• 提供する価値: 全コンテンツで一貫した最低品質ラインを確保し、量産系施策（B-086等）の基盤とする

調査結果の要点

1. ツール・チートシートはLayoutが充実しており品質要件の追加が容易
2. ゲーム・辞典はLayout層が薄く、共通化に工数がかかる
3. FAQは全種別で未実装（最大の共通課題）
4. 「一行価値」は全種別でdescription頼みで不十分
5. 関連導線はツール・チートシート・クイズでは良好、ゲーム・辞典でばらつき

計画策定の指針

• このサイクルのスコープを絞る: 全種別×全要素を一度に実装するのは大きすぎる。以下の方針でスコープを決定してほしい:

  1. まず「品質要件の定義ドキュメント」を作成する（docs/content-quality-requirements.md等）
  2. Layout層が充実しているツール・チートシートを最初のターゲットとする
  3. Meta型に任意フィールドを追加し、Layoutコンポーネントで表示する仕組みを作る
  4. 既存の全コンテンツへのデータ埋め込みは次サイクル以降に回す
  5. ゲーム・辞典のLayout共通化は別途backlog項目として切り出す

• FAQに注意: B-024「FAQ/HowTo構造化データ」がbacklogにある。FAQの表示UIを作る場合、将来B-024で構造化データ（JSON-LD）を追加することを考慮した設計にすること

• 既存コンテンツとの互換性: 新フィールドはすべてoptionalにし、既存コンテンツが壊れないようにする

計画に含めるべき内容

1. 品質要件定義ドキュメントの構成案
2. Meta型への追加フィールド一覧（各種別ごと）
3. Layoutコンポーネントの変更内容
4. サンプルとして実際にデータを入れる対象コンテンツ（種別ごとに1-2個）
5. 完了条件

成果物

計画をメモで報告してください。

B-100実施計画: コンテンツテンプレの品質要件定義と標準装備化

概要

「一行価値」「具体例」「FAQ」「関連導線」の4品質要素を、ツール・チートシートのLayout層に標準装備する。今サイクルはこの2種別に限定し、既存コンテンツへのデータ埋め込みはサンプル数件に絞ることで現実的なスコープを確保する。

1. 品質要件定義ドキュメント（docs/content-quality-requirements.md）の作成

目的

全コンテンツ種別に共通する「最低品質ラインの基準」を文書化する。これはbuilderへの実装指示の根拠となり、量産施策（B-086等）での新規コンテンツ追加時の品質担保にも機能する。

ドキュメントの構成案

1. 概要と目的: 離脱防止・回遊促進のための最低品質ライン定義
2. 4品質要素の定義と基準:
   • 一行価値: 「誰の・何を・どう解決するか」を40字以内で表現するテキスト
   • 具体例: 入力→出力、または使用シーンのサンプル（テキスト or コード）
   • FAQ: Q&A形式の2〜5問。将来のB-024（FAQ構造化データ）でJSON-LD化することを前提に設計
   • 関連導線: ユーザーの次の行動を促すリンク（既存のrelatedSlugsの延長）
3. 種別ごとの実装状況と対応方針:
   • ツール: FAQ・一行価値が未実装 → 今サイクルで対応
   • チートシート: FAQ・一行価値が未実装 → 今サイクルで対応
   • ゲーム: Layout層が薄い → 別backlog項目として切り出し（今サイクル外）
   • 辞典: Layout層が薄い → 別backlog項目として切り出し（今サイクル外）
4. FAQ設計の注意点: B-024との整合性（JSON-LD対応を見越した構造）
5. optionalフィールドポリシー: 新フィールドはすべてoptionalとし、既存コンテンツを壊さない

2. Meta型への追加フィールド

ToolMeta（src/tools/types.ts）への追加

以下のフィールドをすべてoptionalで追加する。

• valueProposition?: string
  • 「誰が・何を・どう解決するか」を表す一行テキスト（40字以内推奨）
  • 例: 「テキストをペーストするだけで、文字数・バイト数を即座に確認できます」
• usageExample?: { input: string; output: string; description?: string }
  • 入力→出力の具体例。入力テキストと対応する出力テキストを定義
  • ツールの性質上インタラクティブな例が最適だが、静的テキストで十分
• faq?: Array<{ question: string; answer: string }>
  • Q&A形式の配列。2〜5問程度
  • 将来B-024でJSON-LD（FAQPage schema）を付与できる構造にする
  • answerはテキストのみ（HTMLや特殊記法は使わない）

CheatsheetMeta（src/cheatsheets/types.ts）への追加

ToolMetaと同様の3フィールドをoptionalで追加する。

• valueProposition?: string
• usageExample?: { input: string; output: string; description?: string }（チートシートの場合は「対象読者・こんな時に使う」の形式でもよい）
• faq?: Array<{ question: string; answer: string }>

3. Layoutコンポーネントの変更内容

ToolLayout.tsx の変更

現在の構造（Breadcrumb→ヘッダー→コンテンツ→プライバシー注記→シェア→関連ツール→関連ブログ）に対して、以下を追加する。

追加箇所と順序:

1. ヘッダー内（h1・TrustLevelBadge・descriptionの直後）に valueProposition の表示エリアを追加
   • 表示方法: 太字テキスト or 強調ボックス（シンプルなデザイン）
   • meta.valuePropositionが存在する場合のみ表示
2. コンテンツセクションの直前に usageExample の表示エリアを追加
   • 表示方法: 入力・出力を並べたコードブロック or テキストボックス
   • meta.usageExampleが存在する場合のみ表示
3. プライバシー注記の前（またはシェアセクションの後）に FAQ セクションを追加
   • 表示方法: アコーディオン形式（details/summaryタグ）またはシンプルなQ&Aリスト
   • meta.faqが存在し1件以上ある場合のみ表示
   • FAQセクションにはsemantic HTMLのsection[aria-label="FAQ"]を使用

CheatsheetLayout.tsx の変更

ToolLayoutと同様のパターンで valueProposition・usageExample・FAQ セクションを追加する。 チートシートはTableOfContentsが存在するため、配置順を調整する:

1. ヘッダー後・TableOfContents前に valueProposition
2. コンテンツ後・シェア前に FAQ

FAQ表示コンポーネント（FaqSection）の設計

FaqSectionコンポーネントをどこに配置するかの判断:

• まずToolLayoutとCheatsheetLayout両方で使うため、最初から src/components/common/FaqSection.tsx に配置する（new-feature-guideの推奨と異なるが、2フィーチャーで即時共用するため）
• propsはfaq配列のみを受け取るシンプルな設計
• CSS Modulesでスタイルを管理

4. サンプルとして実データを埋め込む対象コンテンツ

今サイクルは「仕組みを作る + 動作確認できるサンプルを入れる」にとどめる。全コンテンツへの展開は次サイクル以降。

ツール（2件）

1. 文字数カウント（char-count）: 最も利用頻度が高いと想定され、「一行価値」「FAQ」の効果が分かりやすい

   • valueProposition: テキストをペーストするだけで文字数・バイト数・行数を即座に確認
   • usageExample: 入力「ありがとうございます」→ 出力「文字数: 9文字, バイト数: 27バイト」
   • faq: 「ひらがな1文字は何バイト？」「Word文字数との違いは？」など2〜3問

2. JSON整形・検証（json-formatter）: 開発者向けツールの代表。技術系のFAQが書きやすい

   • valueProposition: コピペするだけでJSONの整形・圧縮・エラー検出ができる
   • usageExample: 入力例（圧縮JSON）→ 出力例（整形JSON）
   • faq: 「コメントが含まれていたらエラーになる？」「特殊文字はどう扱う？」など

チートシート（2件）

1. Gitコマンドチートシート（git）: コンテンツ内に実例が既に多く、FAQとの相乗効果が高い

   • valueProposition: よく使うGitコマンドを用途別に整理。コマンドをすぐ見つけられる
   • faq: 「git rebaseとmergeの違いは？」「コミットを取り消すには？」など

2. 正規表現チートシート（regex）: 入力→出力の具体例が書きやすい

   • valueProposition: 正規表現パターンをすぐ引き出せる。実例付きで意味がわかる
   • usageExample: 「[0-9]+」で「電話番号 090-1234-5678 から数字のみ抽出」
   • faq: 「JavaScriptとPythonで文法に違いは？」など

5. ゲーム・辞典のLayout共通化をbacklogへ切り出す

今サイクルのスコープ外として、以下の新規backlog項目を追加する（実施はB-100完了後の次サイクル以降）:

• B-XXX: ゲームLayout共通化: 現在page.tsx内で個別実装されているBreadcrumb・TrustBadge・関連導線を共通GameLayoutコンポーネントに集約する
• B-YYY: 辞典コンテンツのFAQ対応: 辞典詳細ページ（漢字・四字熟語・伝統色）への品質要素追加（FAQを含む）

6. 完了条件

以下がすべて満たされた状態をもってB-100完了とする:

1. docs/content-quality-requirements.md が作成されレビュー承認済みであること
2. ToolMeta・CheatsheetMetaに3フィールド（valueProposition・usageExample・faq）がoptionalで追加されていること
3. ToolLayout・CheatsheetLayoutに対応する表示UIが追加されていること（フィールドが空の場合は何も表示しない）
4. FaqSectionコンポーネントが src/components/common/ に作成されていること
5. サンプル4件（ツール2件・チートシート2件）にデータが埋め込まれ、ページ上で表示確認できること
6. TypeScriptのtypecheckが通ること（npm run typecheck）
7. ビルドが成功すること（npm run build）
8. レビュー承認済みであること

7. 実装の順序と分割方針

1. docs/content-quality-requirements.md 作成 → レビュー依頼
2. 型定義の変更（ToolMeta・CheatsheetMeta）→ レビュー依頼
3. FaqSectionコンポーネント作成 → ToolLayout・CheatsheetLayout更新 → レビュー依頼
4. サンプルデータ埋め込み（ツール2件・チートシート2件）→ レビュー依頼

各ステップでレビューを挟む。ステップ1と2は並行して進めても可。

8. 今後の展開

• 次サイクル以降: 全ツール・全チートシートへのデータ埋め込み（builder作業）
• B-024（FAQ/HowTo構造化データ）: 本施策で作成したfaqフィールドを利用してJSON-LDを生成する実装
• ゲーム・辞典のLayout共通化後に同様の品質要素を追加する