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共通化後に同様の品質要素を追加する