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構造化データとして効果高）