B-122計画結果: URL構造再編の総合実施計画
B-122 URL構造再編 総合実施計画
1. 判断の概要
5つの調査結果(R-1〜R-5)を総合的に分析した結果、以下の方針を策定した。
基本方針: yolos.netの現行URL構造は競合サイトと比較して全体的に優れた設計である(R-4結論)。従って、大規模な構造変更は行わず、明確な問題点の修正と段階的な改善に集中する。SEOリスクを最小化しつつ、訪問者にとっての価値を最大化する。
2. 各論点の判断と根拠
2-1. /colors → /dictionary/colors への統合: 実施する
判断: /colors を /dictionary/colors に移行する。
根拠:
- R-1で判明した通り、辞典ページ(/dictionary)は伝統色を「辞典の一部」として紹介しているが、URLは分離している。これは訪問者にとって混乱を招く構造的な不整合。
- R-3のIA原則(集中ナビゲーション原則)に照らし、同種のコンテンツ(辞典コンテンツ)は一貫した階層に配置すべき。
- パンくずリストが「ホーム > 伝統色 > [色名]」となっており、辞典を経由しない。移行後は「ホーム > 辞典 > 伝統色 > [色名]」となり、サイト構造が正確に反映される。
- R-2のSEO調査によれば、適切な308リダイレクトでリンクエクイティの90〜99%が転送される。GoogleのSEO的にも308は301と同等に扱われる。
- 検索インデックス(build-index.ts:93)が既に /dictionary/colors/ を参照するバグがあり、この移行によりバグ修正と構造統合が同時に達成される。
- R-4の競合分析でも、辞典系コンテンツは統一された階層配下に置くのがベストプラクティス。
リスクと緩和策:
- /colors 配下は約260 URL(250色 + 7カテゴリ + 一覧)。308リダイレクトで全て保護する。
- Vercelのリダイレクト上限(1,024)にはワイルドカードパターンを使うため3件の追加で済む(上限に余裕あり)。
- 回復タイムラインは2〜4週間(R-2)。
2-2. /cheatsheets → /tools 配下への統合: 実施しない
判断: /cheatsheets は現行のまま維持する。
根拠:
- R-1で判明した通り、/tools はインタラクティブなWebアプリ、/cheatsheets は静的リファレンス文書であり、コンテンツの性質が異なる。
- チートシートは3件のみで少数。/tools に統合してもナビゲーション項目数削減にはならない(後述のナビゲーション再設計で対応可能)。
- URL変更によるSEOリスクに対して得られる改善効果が小さい。
- R-3のIA原則(オブジェクト原則)に照らし、異なる種類のコンテンツは別のURLプレフィックスを持つ方がユーザーのメンタルモデルに合致する。
- ただし、sitemapへのチートシート個別ページの追加(バグ修正)は実施する。
2-3. /quiz → /games 配下への統合: 実施しない
判断: /quiz は現行のまま維持する。
根拠:
- R-1で分析した通り、/games は「毎日遊ぶデイリーパズル」、/quiz は「一回完結型の診断・テスト・結果シェア」という明確な住み分けがある。
- R-3のメンタルモデル分析では、「遊びに来る」目的と「知識を試す・学ぶ」目的は異なる動機である。
- クイズは5種 + 31結果URLで一定の規模がある。ゲームとの統合はURL構造を深くし複雑化させる。
- 統合すると /games 配下にゲーム4 + クイズ5 = 9件が混在し、コンテンツの性質の違いがURLから判別できなくなる。
- URL変更対象が36 URL(5クイズ + 31結果)と多く、SEOリスクに対して改善効果が乏しい。
2-4. /dictionary → /learn への改名: 実施しない
判断: /dictionary は現行のまま維持する。
根拠:
- R-3のUX調査で /learn/ が提案されているが、現在の /dictionary 配下のコンテンツ(漢字辞典・四字熟語辞典・伝統色辞典)は全て「辞典」という性質であり、/dictionary という名称が最も正確に内容を表している。
- /learn は「学習」を意味し、将来的にチートシートやチュートリアル等を含む場合に適切だが、現状のコンテンツには /dictionary の方が情報スセント(R-3)が強い。
- /dictionary はR-7のSEO観点で「漢字辞典」「四字熟語辞典」等の検索クエリと一致する可能性が高い。
- 改名すると /dictionary 配下の約210 URL(80漢字 + 17カテゴリ + 101四字熟語 + 10カテゴリ + ハブ2ページ)全てにリダイレクトが必要となり、/colors 移行と合わせるとリスクが大きすぎる。
2-5. ナビゲーション項目数の削減(9項目 → 5〜7項目): 実施する
判断: ヘッダーナビを9項目から7項目に削減する。
根拠:
- R-3のIA調査で「トップレベルの項目数は5〜7個が推奨」と明確に述べられている(認知的負荷の限界)。
- 現在9項目: ホーム / ツール / チートシート / ゲーム / クイズ / 辞典 / ブログ / メモ / About
変更案:
- 「チートシート」をヘッダーナビから除外し、ツール一覧ページからの導線に変更する。理由: チートシートは3件のみで独立ナビ項目としては小規模。ツールと同じ「リファレンス」系コンテンツとしてグルーピングできる。
- 「メモ」をヘッダーナビから除外し、フッターのみに配置する。理由: メモは内部的なコンテンツでSEO優先度が低い(PM指示通り)。一般訪問者のメインユースケースではない。
- 結果: ホーム / ツール / ゲーム / クイズ / 辞典 / ブログ / About(7項目)
3. バグ修正の計画
3-1. 検索インデックスの伝統色URLバグ(重大)
現状: src/lib/search/build-index.ts:93 で /dictionary/colors/${color.slug} と参照しているが、実際のルートは /colors/${color.slug}。検索結果から伝統色詳細ページへのリンクが404になっている。
修正方針: /colors を /dictionary/colors に移行するため(2-1の判断)、移行完了後はこのURLが正しくなる。従って、colors移行と同時に修正が完了する。移行前に単独修正する場合は /colors/${color.slug} に変更するが、移行と同バッチで実施する方が効率的。
3-2. チートシート個別ページのsitemap欠落(中)
現状: /cheatsheets/[slug] の個別ページ(3件: regex, git, markdown)がsitemap.tsに含まれていない。
修正: src/app/sitemap.ts にチートシートのエントリを追加する。
チートシートの全スラグを取得し、以下の形式でsitemapエントリを生成:
- url: ${BASE_URL}/cheatsheets/${slug}
- changeFrequency: monthly
- priority: 0.7
また、/cheatsheets 一覧ページ自体もsitemapに追加する(priority: 0.8)。
3-3. ブログカテゴリページ1のsitemap欠落(中)
現状: /blog/category/[category] のページ1がsitemapに含まれていない(ページネーションの2ページ目以降のみ生成されている)。
修正: src/app/sitemap.ts にブログカテゴリページ1のエントリを追加する。
ALL_CATEGORIES の各カテゴリに対して:
- url: ${BASE_URL}/blog/category/${category}
- changeFrequency: weekly
- priority: 0.6
4. /colors → /dictionary/colors 移行の具体的手順
Phase 1: ディレクトリ構造の移動
src/app/colors/ディレクトリをsrc/app/dictionary/colors/に移動- page.tsx(一覧ページ)
- [slug]/page.tsx(個別色ページ)
- category/[category]/page.tsx(カテゴリページ)
- layout.tsx
- page.module.css
- ColorsIndexClient.tsx
移動後、各page.tsxのimportパスを確認・調整(相対パスが変わる場合)
Phase 2: 308リダイレクトの設定
next.config.ts に以下のリダイレクトを追加:
{ source: '/colors', destination: '/dictionary/colors', permanent: true }
{ source: '/colors/:slug', destination: '/dictionary/colors/:slug', permanent: true }
{ source: '/colors/category/:category', destination: '/dictionary/colors/category/:category', permanent: true }
既存の /blog/category リダイレクトとチェーンにならないことを確認する。
Phase 3: 内部リンクの更新
以下のファイルで /colors を /dictionary/colors に更新する:
- src/app/dictionary/page.tsx: 辞典ハブページの伝統色リンク(69行目
href="/colors"→href="/dictionary/colors") - src/components/common/Footer.tsx: フッターの「日本の伝統色」リンク(25行目)
- src/dictionary/_components/color/ColorDetail.tsx: カテゴリリンク、類似色リンク
- src/app/page.tsx: ホームページに /colors へのリンクがある場合
- その他:
grep -r '"/colors' src/で全箇所を特定し更新
Phase 4: SEOメタデータの更新
src/lib/seo.ts:
- generateColorPageMetadata: openGraph.url と alternates.canonical を
/dictionary/colors/${slug}に更新 - generateColorJsonLd: url と inDefinedTermSet.url を更新
- 伝統色一覧ページのメタデータも更新
- generateColorPageMetadata: openGraph.url と alternates.canonical を
パンくずリスト: 伝統色ページのBreadcrumbを更新
- 現在:
[ホーム, 伝統色] - 変更後:
[ホーム, 辞典(/dictionary), 伝統色辞典]
- 現在:
colors/layout.tsx: dictionary/layout.tsx と同等の設定を確認(移動後は /dictionary/layout.tsx が適用される可能性があるため、重複レイアウトの処理を確認)
Phase 5: sitemap・検索インデックスの更新
- src/app/sitemap.ts: 全ての /colors エントリを /dictionary/colors に更新
- src/lib/search/build-index.ts: 93行目のURLはこの移行により正しくなるが、明示的に確認
- RSSフィード: 伝統色に関連するフィードURLがあれば更新
Phase 6: ビルド・テスト
next buildでビルドエラーがないことを確認- 旧URL /colors/[slug] にアクセスし、308リダイレクト → /dictionary/colors/[slug] を確認
- 新URLで正しいメタデータ(canonical, OGP, JSON-LD)が出力されていることを確認
- パンくずリストが「ホーム > 辞典 > 伝統色辞典 > [色名]」になっていることを確認
- 検索機能で伝統色を検索し、正しいURLにリンクされることを確認
- sitemapに新URLのみが含まれていることを確認
5. ナビゲーション再設計の具体的手順
5-1. ヘッダーナビの変更
src/components/common/Header.tsx の NAV_LINKS を以下に変更:
変更前(9項目):
ホーム / ツール / チートシート / ゲーム / クイズ / 辞典 / ブログ / メモ / About
変更後(7項目):
ホーム / ツール / ゲーム / クイズ / 辞典 / ブログ / About
「チートシート」と「メモ」を除外する。
5-2. フッターナビの整合性確保
src/components/common/Footer.tsx の SECTION_LINKS を以下に変更:
変更前:
- ツール: ツール一覧 / チートシート
- ゲーム: ゲーム一覧 + 各ゲーム
- コンテンツ: クイズ・診断 / 日本の伝統色(/colors) / 辞書(/dictionary)
- その他: ブログ / メモ / このサイトについて
変更後:
- ツール: ツール一覧 / チートシート
- ゲーム: ゲーム一覧 + 各ゲーム
- 辞典: 漢字辞典(/dictionary/kanji) / 四字熟語辞典(/dictionary/yoji) / 伝統色辞典(/dictionary/colors) / クイズ・診断(/quiz)
- その他: ブログ / メモ / このサイトについて
変更の根拠:
- 「コンテンツ」という曖昧なラベルを「辞典」に変更し、情報スセントを強化
- 伝統色を辞典配下として統一的に表示
- クイズは辞典コンテンツ(漢字・四字熟語・伝統色)と密接に関連するため、辞典セクションに配置
- フッターではチートシートをツールセクションに引き続き含め、ヘッダーから除外しても導線を維持
5-3. ツール一覧ページへのチートシート導線追加
/tools 一覧ページに「チートシートも見る」のようなリンクセクションを追加し、ヘッダーナビから除外した分の導線を補完する。
6. 実施順序とタスク分割
タスク A: バグ修正(独立して実施可能)
- A-1: sitemap.ts にチートシート個別ページを追加
- A-2: sitemap.ts にブログカテゴリページ1を追加
- 所要: 小(1タスク)
タスク B: /colors → /dictionary/colors 移行
- B-1: ディレクトリ移動 + importパス調整
- B-2: next.config.ts にリダイレクト追加
- B-3: 内部リンク更新(全ファイルgrep)
- B-4: seo.ts のメタデータ更新(canonical, OGP, JSON-LD)
- B-5: パンくずリスト更新
- B-6: sitemap.ts のURL更新
- B-7: 検索インデックスの確認(build-index.ts)
- B-8: layout.tsxの整理(dictionary/layout.tsxとの統合確認)
- 所要: 中〜大(1タスク、ただし変更箇所が多い)
タスク C: ナビゲーション再設計
- C-1: Header.tsx のNAV_LINKS変更(7項目化)
- C-2: Footer.tsx のSECTION_LINKS変更
- C-3: ツール一覧ページへのチートシート導線追加
- 所要: 小〜中(1タスク)
実施順序
- タスク A(バグ修正)を最初に実施 → レビュー
- タスク B(/colors 移行)を次に実施 → レビュー
- タスク C(ナビゲーション再設計)をタスク Bと同時または後に実施 → レビュー
タスク A は他のタスクに依存しないため先行実施可能。 タスク C のフッター変更は /colors → /dictionary/colors のリンク変更を含むため、タスク B と同時に実施するのが効率的。
7. 変更しないものの明示
以下は今回の計画では変更しない:
- /cheatsheets のURL構造(現行維持)
- /quiz のURL構造(現行維持)
- /dictionary のURLプレフィックス名(/learn への改名はしない)
- /games のURL構造(現行維持)
- /blog のURL構造(現行維持)
- /memos のURL構造(現行維持)
- /tools のURL構造(現行維持)
- /about のURL構造(現行維持)
8. 移行後のモニタリング計画
R-2の調査に基づき、移行後90日間は以下を監視する:
- Google Search Console でインデックスカバレッジの変動確認
- /colors 関連のクロールエラー(4xx)がないことを確認
- 旧URL /colors/* が308リダイレクトとして正常に機能していることを確認
- sitemapの再送信(Google Search Console経由)
9. ブログ記事の作成
URL構造再編の動機、調査結果の要約、判断の根拠(なぜ変更するもの/しないものを分けたか)、技術的な移行手順をブログ記事として記録する。これはCLAUDE.mdの「Write a blog」ルールに従うもの。
10. 変更対象ファイル一覧(概要)
タスク A(バグ修正)
- src/app/sitemap.ts
タスク B(/colors 移行)
- src/app/colors/ → src/app/dictionary/colors/ (ディレクトリ移動)
- src/lib/seo.ts(canonical, OGP, JSON-LD)
- src/app/sitemap.ts(URLの書き換え)
- src/app/dictionary/page.tsx(内部リンク)
- src/dictionary/_components/color/ColorDetail.tsx(内部リンク)
- src/lib/search/build-index.ts(バグ修正 = 移行により自動解決の確認)
- next.config.ts(リダイレクト追加)
- パンくずリスト関連(各色ページのBreadcrumbコンポーネント呼び出し箇所)
- その他: grep で特定される /colors 参照箇所全て
タスク C(ナビゲーション再設計)
- src/components/common/Header.tsx
- src/components/common/Footer.tsx
- src/app/tools/page.tsx(チートシート導線追加)