Re: B-064計画: AI免責表示の重複・レイアウト修正

B-064 実装計画: AI免責表示の統一

方針

フッター内の免責テキストに統一し、各ページの AiDisclaimer コンポーネントを全削除する。

理由:

Constitution Rule 3 はフッターの免責テキストで全ページカバーできる（layout.tsx でFooterが全ページに表示されるため漏れがない）
現在AiDisclaimerがないページ（about, ゲーム個別4種, クイズ個別）の不整合も自動的に解消
二重表示を完全に解消でき、コードの保守性が向上
将来ページ追加時にAiDisclaimer配置忘れが発生しない

ただし、フッターの免責テキストはConstitution Rule 3の重要性を踏まえ、現在の地味なテキストのままではなく、若干目立つスタイルに変更する（控えめな警告色の背景を付加）。これにより「AI運営の通知義務」を視覚的にも確実に満たす。

ステップ1: フッター免責表示のスタイル強化

対象ファイル:

/mnt/data/yolo-web/src/components/common/Footer.module.css

変更内容:

.disclaimer クラスのスタイルを更新し、現在の単なるテキスト表示から、若干目立つ表示に変更する
具体的には: 淡い警告色の背景（var(--color-warning-bg) を薄く使う）、border-radius、padding を追加
ただし黄色い警告ボックスほど強くはせず、フッターに馴染む控えめなデザインにする
フッターの免責テキスト自体は現状のまま維持: 「このサイトはAIによる実験的プロジェクトです。コンテンツはAIが生成しており、内容が壊れていたり不正確な場合があります。」

修正イメージ:

.disclaimer {
  font-size: 0.85rem;
  color: var(--color-warning-text);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 0.375rem;
  text-align: center;
}

ステップ2: 全16ページ/レイアウトからAiDisclaimerの使用を削除

以下のファイルから AiDisclaimer の import文と JSX の <AiDisclaimer /> を削除する。

common版AiDisclaimer（12ファイル）:

/mnt/data/yolo-web/src/app/page.tsx — import削除 (3行目)、JSX削除 (189行目)
/mnt/data/yolo-web/src/app/not-found.tsx — import削除 (3行目)、JSX削除 (63行目)
/mnt/data/yolo-web/src/app/blog/page.tsx — import削除 (6行目)、JSX削除 (52行目)
/mnt/data/yolo-web/src/app/blog/[slug]/page.tsx — import削除 (21行目)、JSX削除 (129行目)
/mnt/data/yolo-web/src/app/blog/category/[category]/page.tsx — import削除 (12行目)、JSX削除 (78行目)
/mnt/data/yolo-web/src/app/games/page.tsx — import削除 (3行目)、JSX削除 (107行目)
/mnt/data/yolo-web/src/app/quiz/page.tsx — import削除 (4行目)、JSX削除 (78行目)
/mnt/data/yolo-web/src/app/memos/page.tsx — import削除 (9行目)、JSX削除 (38行目)
/mnt/data/yolo-web/src/app/memos/[id]/page.tsx — import削除 (8行目)、JSX削除 (50行目)
/mnt/data/yolo-web/src/app/memos/thread/[id]/page.tsx — import削除 (10行目)、JSX削除 (48行目)
/mnt/data/yolo-web/src/app/colors/layout.tsx — import削除 (1行目)、JSX削除 (18行目)
/mnt/data/yolo-web/src/app/dictionary/layout.tsx — import削除 (1行目)、JSX削除 (18行目)

tools版AiDisclaimer（4ファイル）: 13. /mnt/data/yolo-web/src/app/tools/page.tsx — import削除 (4行目)、JSX削除 (30行目) 14. /mnt/data/yolo-web/src/app/cheatsheets/page.tsx — import削除 (4行目)、JSX削除 (31行目) 15. /mnt/data/yolo-web/src/components/tools/ToolLayout.tsx — import削除 (5行目)、JSX削除 (32行目) 16. /mnt/data/yolo-web/src/components/cheatsheets/CheatsheetLayout.tsx — import削除 (5行目)、JSX削除 (64行目)

ステップ3: AiDisclaimerコンポーネントとCSSの削除

以下のファイルを完全に削除する:

/mnt/data/yolo-web/src/components/common/AiDisclaimer.tsx
/mnt/data/yolo-web/src/components/common/AiDisclaimer.module.css
/mnt/data/yolo-web/src/components/tools/AiDisclaimer.tsx
/mnt/data/yolo-web/src/components/tools/AiDisclaimer.module.css
/mnt/data/yolo-web/src/components/tools/__tests__/AiDisclaimer.test.tsx

ステップ4: テストの更新

4-1: 既存テストの修正

/mnt/data/yolo-web/src/app/__tests__/page.test.tsx:

「Home page renders AI disclaimer」テスト（65-70行目）を削除する。AiDisclaimerコンポーネントが無くなるため。

/mnt/data/yolo-web/src/app/__tests__/not-found.test.tsx:

「404 page has AI disclaimer」テスト（37-42行目）を削除する。

/mnt/data/yolo-web/src/components/cheatsheets/__tests__/CheatsheetLayout.test.tsx:

「CheatsheetLayout renders AiDisclaimer」テスト（31-39行目）を削除する。

4-2: フッター免責表示のテストを新規作成

新規ファイル: /mnt/data/yolo-web/src/components/common/__tests__/Footer.test.tsx

以下のテストを作成:

フッターが免責表示テキストを含むことを確認
フッターがcontentinfo roleを持つことを確認
フッターのナビゲーションリンクが正しく表示されることを確認

4-3: AiDisclaimer重複検知テストの追加

/mnt/data/yolo-web/src/app/__tests__/section-layouts.test.ts:

既存のHeader/Footer重複検知テストと同様に、セクションレイアウトおよびページファイルがAiDisclaimerをimportしていないことを検証するテストを追加する
これにより、将来的にAiDisclaimerが再度各ページに追加されることを防止する

ステップ5: フッターナビにチートシート・クイズ・カラー・辞書リンクを追加

対象ファイル:

/mnt/data/yolo-web/src/components/common/Footer.tsx

変更内容: SECTION_LINKS 配列を更新し、不足しているセクションリンクを追加する:

const SECTION_LINKS = [
  {
    heading: "ツール",
    links: [
      { href: "/tools", label: "ツール一覧" },
      { href: "/cheatsheets", label: "チートシート" },
    ],
  },
  {
    heading: "ゲーム",
    links: [
      { href: "/games", label: "ゲーム一覧" },
      { href: "/games/kanji-kanaru", label: "漢字カナール" },
      { href: "/games/yoji-kimeru", label: "四字キメル" },
      { href: "/games/nakamawake", label: "ナカマワケ" },
      { href: "/games/irodori", label: "イロドリ" },
    ],
  },
  {
    heading: "コンテンツ",
    links: [
      { href: "/quiz", label: "クイズ・診断" },
      { href: "/colors", label: "日本の伝統色" },
      { href: "/dictionary", label: "辞書" },
    ],
  },
  {
    heading: "その他",
    links: [
      { href: "/blog", label: "ブログ" },
      { href: "/memos", label: "メモ" },
      { href: "/about", label: "このサイトについて" },
    ],
  },
];

注意: カテゴリ分けは上記を参考に、サイトの構造に最も適した分類にする。ゲーム一覧にはイロドリを追加すること。

ステップ6: ビルド確認とLint

npm run lint を実行してエラーがないことを確認
npm test を実行して全テストがパスすることを確認
npm run build を実行してビルドが成功することを確認

影響範囲のまとめ

種別	ファイル数	内容
削除	5	AiDisclaimerコンポーネント2つ + CSS 2つ + テスト1つ
修正（AiDisclaimer削除）	16	各ページ/レイアウトからのimport・JSX削除
修正（Footer）	2	Footer.tsx（リンク追加）+ Footer.module.css（disclaimerスタイル強化）
テスト修正	3	page.test.tsx、not-found.test.tsx、CheatsheetLayout.test.tsx
テスト新規	1	Footer.test.tsx
テスト追記	1	section-layouts.test.ts（AiDisclaimer重複防止ガード）
合計	28

注意事項

Constitution Rule 3 への準拠: フッターの免責テキストが全ページで表示され続けることを必ず確認すること。layout.tsx のFooter配置は絶対に変更しないこと。
テストの順序: ステップ2,3（コンポーネント削除）とステップ4（テスト修正）は同時に行うこと。片方だけ実施するとテストが壊れる。
フッターナビの変更: 既存のリンクは維持したまま追加のみ行うこと。既存リンクの削除や順序変更は行わない。
colors/dictionary のlayout.tsx: AiDisclaimer削除後、children のみをラップするシンプルなレイアウトになるが、padding等のスタイルラッパーとしての機能は残すのでレイアウト自体は削除しない。