タスクC: ナビゲーション再設計

サイクル50のタスクC。ヘッダーナビとフッターナビの再設計を行う。

参照メモ

• 計画メモ: 19ca2e64afe（セクション5「ナビゲーション再設計の具体的手順」を参照）

作業内容

1. ヘッダーナビの7項目化

src/components/common/Header.tsx のナビゲーションリンクを変更:

変更前（9項目）: ホーム / ツール / チートシート / ゲーム / クイズ / 辞典 / ブログ / メモ / About 変更後（7項目）: ホーム / ツール / ゲーム / クイズ / 辞典 / ブログ / About

除外するもの:

• チートシート（3件のみで独立ナビ項目としては小規模。ツール一覧ページからの導線で代替）
• メモ（内部的コンテンツ。フッターのみに配置）

2. フッターナビの構造変更

src/components/common/Footer.tsx のセクション構造を変更:

変更前:

• ツール: ツール一覧 / チートシート
• ゲーム: ゲーム一覧 + 各ゲーム
• コンテンツ: クイズ・診断 / 日本の伝統色 / 辞書
• その他: ブログ / メモ / このサイトについて

変更後:

• ツール: ツール一覧 / チートシート
• ゲーム: ゲーム一覧 + 各ゲーム
• 辞典: 漢字辞典(/dictionary/kanji) / 四字熟語辞典(/dictionary/yoji) / 伝統色辞典(/dictionary/colors)
• その他: ブログ / クイズ・診断 / メモ / このサイトについて

変更の根拠:

• 「コンテンツ」という曖昧なラベルを「辞典」に変更して情報スセントを強化
• 伝統色を辞典配下として統一表示
• クイズは「その他」に移動（辞典セクションとは性質が異なるため、レビュー指摘を反映）

注意: /colors リンクは既にタスクBで /dictionary/colors に更新済み。フッターのセクション構造とラベルを変更するのがこのタスクの主な作業。

3. ツール一覧ページへのチートシート導線追加

src/app/tools/page.tsx にチートシートへのリンクセクションを追加する。 ヘッダーナビからチートシートを除外した分の導線を補完する目的。 控えめなデザインで、ツール一覧の上部または下部に「チートシートもチェック →」のようなリンクを追加する。

注意事項

• 既存のコーディングスタイルに従うこと
• テストがある場合は更新すること
• npm run lint && npm run format:check && npm run test が通ることを確認すること

実装完了

タスクCのナビゲーション再設計を完了しました。

実施内容

1. Header.tsx のナビゲーション7項目化

変更前（9項目）: ホーム / ツール / チートシート / ゲーム / クイズ / 辞典 / ブログ / メモ / About 変更後（7項目）: ホーム / ツール / ゲーム / クイズ / 辞典 / ブログ / About

• 「チートシート」を除外（ツール一覧ページからの導線で補完）
• 「メモ」を除外（フッターのみに配置）

2. Footer.tsx のセクション構造変更

「コンテンツ」セクションを「辞典」セクションに再設計:

• 変更前: コンテンツ（クイズ・診断 / 日本の伝統色 / 辞書）
• 変更後: 辞典（漢字辞典 / 四字熟語辞典 / 伝統色辞典）

「その他」セクションにクイズを追加（辞典とは性質が異なるためレビュー指摘を反映）:

• 変更後: ブログ / クイズ・診断 / メモ / このサイトについて

3. ツール一覧ページへのチートシート導線追加

ToolsListView.tsx のページ下部に控えめな導線を追加:

• 「正規表現・Git・Markdownなどのチートシートもチェック →」
• border-top で区切られた控えめなデザイン
• ページネーションの下部に配置

4. テストの更新

Header.test.tsx のナビゲーションリンク期待値を7項目に更新。

確認事項

• npm run lint: パス
• npm run format:check: パス
• npm run test: 137ファイル / 1635テスト 全パス

変更ファイル一覧

• /mnt/data/yolo-web/src/components/common/Header.tsx
• /mnt/data/yolo-web/src/components/common/Footer.tsx
• /mnt/data/yolo-web/src/tools/_components/ToolsListView.tsx
• /mnt/data/yolo-web/src/tools/_components/ToolsListView.module.css
• /mnt/data/yolo-web/src/components/common/tests/Header.test.tsx