B-100 Step3: FaqSectionコンポーネント＋Layout更新

依頼内容

B-100「コンテンツテンプレの品質要件定義と標準装備化」のStep3として、FaqSectionコンポーネントの作成とToolLayout・CheatsheetLayoutの更新を行ってください。

計画メモ

実施計画の詳細はメモ 19ca13cb065 を参照してください。 レビュー結果（軽微な確認事項）はメモ 19ca13ef369 を参照してください。 品質要件定義ドキュメント: docs/content-quality-requirements.md を参照してください。

実装内容

1. FaqSectionコンポーネント（新規作成）

ファイル: src/components/common/FaqSection.tsx（+ CSS Modulesファイル）

• props: faq: Array<{ question: string; answer: string }>
• faqが空またはundefinedの場合は何も表示しない
• アコーディオン形式（<details>/<summary>タグ）でQ&Aを表示
• セマンティックHTML: <section aria-label="FAQ">
• CSS Modulesでスタイル管理

2. ToolLayout.tsx の更新

ファイル: src/tools/_components/ToolLayout.tsx

以下の表示エリアを追加（meta内のフィールドが存在する場合のみ表示）:

1. valueProposition: ヘッダー内（h1・TrustLevelBadge・descriptionの直後）に強調テキストとして表示
2. usageExample: コンテンツセクションの直前に、入力・出力を並べたボックスとして表示
3. FAQ: プライバシー注記の前にFaqSectionコンポーネントを配置

3. CheatsheetLayout.tsx の更新

ファイル: src/cheatsheets/_components/CheatsheetLayout.tsx

同様のパターンで追加:

1. valueProposition: ヘッダー後・TableOfContents前に表示
2. usageExample: コンテンツ後・FAQ前に表示（チートシートの場合は入出力よりも「こんな時に使う」形式が自然な場合がある）
3. FAQ: シェアセクションの前にFaqSectionコンポーネントを配置

注意点

• 各フィールドの存在チェック（optionalなので undefined の場合は表示しない）
• details/summaryタグの使用にあたり、プロジェクト内の既存スタイルとの整合性を確認すること
• レスポンシブデザインに配慮すること
• CSS Modulesの命名規則はプロジェクトの既存パターンに従うこと

完了条件

• FaqSectionコンポーネントが作成されていること
• ToolLayout・CheatsheetLayoutが更新されていること
• npm run typecheck が成功すること
• npm run build が成功すること
• npm run lint が成功すること

完了報告

B-100 Step3「FaqSectionコンポーネント作成 + ToolLayout・CheatsheetLayout更新」を完了しました。

実装内容

1. FaqSectionコンポーネント（新規作成）

• src/components/common/FaqSection.tsx: FAQ表示用の共通コンポーネント

  • propsとして faq: FaqEntry[] | undefined を受け取るシンプルな設計
  • faqが空またはundefinedの場合はnullを返し何も表示しない
  • details/summaryタグによるアコーディオン形式でQ&Aを表示
  • セマンティックHTML: <section aria-label="FAQ">を使用
  • Q./A.ラベルとアコーディオン開閉インジケータ（三角マーカー）付き
  • WebKitの三角マーカーも非表示に設定

• src/components/common/FaqSection.module.css: CSS Modulesでスタイル管理

  • プロジェクトの既存CSS変数（--color-border, --color-primary, --color-text-muted等）を使用
  • レスポンシブ対応: 768px以下でフォントサイズとパディングを縮小
  • TrustLevelBadge.module.cssのdetails/summary実装パターンとの整合性を確認済み

2. ToolLayout.tsx の更新

• valueProposition: headerの末尾（description直後）に太字テキストとして表示。meta.valuePropositionが存在する場合のみ表示
• usageExample: contentセクションの直前に「使い方の例」ボックスとして表示。入力→矢印→出力の横並びレイアウト。descriptionがある場合は補足テキストを下部に表示。meta.usageExampleが存在する場合のみ表示
• FAQ: プライバシー注記の後・シェアセクションの前にFaqSectionコンポーネントを配置

3. CheatsheetLayout.tsx の更新

• valueProposition: headerの末尾（description直後、TableOfContents前）に太字テキストとして表示
• usageExample: contentセクションの後・FAQの前に「こんなときに使えます」ボックスとして表示。ラベルをチートシートに適した形式に変更（「入力」→「シーン」、「出力」→「得られる情報」）
• FAQ: usageExampleの後・シェアセクションの前にFaqSectionコンポーネントを配置

レイアウト配置（品質要件定義ドキュメントの指定に準拠）

ToolLayout:

Breadcrumb → Header(h1/TrustLevelBadge/description/valueProposition) → usageExample → Content → Privacy → FAQ → Share → Related Tools → Related Blog

CheatsheetLayout:

Breadcrumb → Header(h1/TrustLevelBadge/description/valueProposition) → TableOfContents → Content → usageExample → FAQ → Share → Related Tools → Related Cheatsheets

レビュー指摘事項への対応

• usageExampleのラベル: チートシートでは「シーン」「得られる情報」として意味的にフィットするように調整
• details/summaryの既存パターン: TrustLevelBadge.module.cssの実装を確認し、WebKitマーカー非表示など同じ手法で整合性を保った
• レスポンシブデザイン: モバイルでは入力→出力ボックスが縦並びに変わり、矢印も90度回転

検証結果

• npm run typecheck: 成功
• npm run lint: 成功
• npm run format:check: 成功
• npm run test: 全133ファイル・1562テスト通過
• npm run build: 成功（全2984ページ生成）