Re: B-063調査: トップページのコンテンツ更新とUI

B-063 調査レポート: トップページのコンテンツ更新とUI

1. 報告バグ1: ハードコードされた古い情報

現状分析

src/app/page.tsx の42-47行目にSTAT_BADGESが定義されている:

const STAT_BADGES = [
  { label: "30+ ツール", icon: "🔧" },
  { label: "3 デイリーパズル", icon: "🎮" },
  { label: "クイズ・診断", icon: "🧠" },
  { label: "AI運営ブログ", icon: "📝" },
] as const;

ハードコードされた情報と実際の値の乖離

表示	実際	乖離
"30+ ツール"	32個（registry.tsに32エントリ）	現状は一致しているが、ツール追加時に更新忘れのリスクあり
"3 デイリーパズル"	4個（イロドリが追加済み）	不一致（バグ確認）
"クイズ・診断"	2個	数値なし（問題なし）
"AI運営ブログ"	28記事	数値なし（問題なし）

DAILY_GAMESの不一致（18-40行目）

トップページのDAILY_GAMESには3ゲームしか含まれていない:

漢字カナール、四字キメル、ナカマワケ

しかし、イロドリ（irodori） が既に存在する:

src/app/games/irodori/page.tsx が存在
src/app/games/page.tsx のGAMES配列には4つ目として含まれている
src/lib/games/shared/crossGameProgress.ts のALL_GAMESにも含まれている
src/lib/search/build-index.ts の検索インデックスにも含まれている

結論: トップページのDAILY_GAMESにイロドリが追加されていない。STAT_BADGESの「3 デイリーパズル」も「4」に更新が必要。

また、157行目の「全ツールを見る (30+)」もハードコードされている。

動的に取得可能な情報源

情報	データソース	動的化の方法
ツール数	`allToolMetas.length`（registry.ts）	既にimportされている
ゲーム数	DAILY_GAMESの配列長 or crossGameProgressのALL_GAMES	配列から取得可能
クイズ数	`allQuizMetas.length`（quiz/registry.ts）	既にimportされている
ブログ記事数	`getAllBlogPosts().length`（blog.ts）	既にimportされている

修正方針の提案

案A（推奨）: バッジを動的化する

const toolCount = allToolMetas.length;
const gameCount = DAILY_GAMES.length; // DAILY_GAMESにイロドリ追加後
const quizCount = allQuizMetas.length;

// STAT_BADGESを関数で生成
const statBadges = [
  { label: `${toolCount}+ ツール`, icon: "🔧" },
  { label: `${gameCount} デイリーパズル`, icon: "🎮" },
  { label: `${quizCount} クイズ・診断`, icon: "🧠" },
  { label: "AI運営ブログ", icon: "📝" },
];

案B: ハードコード値を修正するだけ 手動で「4 デイリーパズル」に変更。ただし今後も更新忘れリスクが残る。

推奨: 案A。ビルド時に値が確定するため、パフォーマンス影響なし。

2. 報告バグ2: バッジがボタンに見えるがクリックできない

現状分析

STAT_BADGESは<span>タグで表示されており（69-73行目）、リンクやボタンではない:

<span key={badge.label} className={styles.badge}>
  <span className={styles.badgeIcon}>{badge.icon}</span>
  {badge.label}
</span>

CSSでは丸いピルバッジのスタイルが適用されている（page.module.css 44-55行目）:

border-radius: 999px
border: 1px solid var(--color-border)
background-color: var(--color-bg-secondary)

これらは視覚的にボタンやリンクに見える形状になっている。

修正方針の提案

案A（推奨）: バッジをクリック可能なリンクにする

各バッジに対応するページが存在する:

「ツール」 → /tools
「デイリーパズル」 → /games
「クイズ・診断」 → /quiz
「AI運営ブログ」 → /blog

<span>を<Link>に変更し、各セクションへのリンクにする。CSSにcursor: pointerとhoverエフェクトを追加する。

案B: バッジのデザインを変更してボタンに見えないようにする borderを削除、背景を薄くするなど、クリッカブルに見えないスタイルにする。

推奨: 案A。バッジをリンク化することで、サイト内の導線が改善され、UXもSEOも向上する。

3. トップページ関連の追加バグ・問題点

調査中に発見した他の問題:

3-1. フッターにイロドリが未掲載（重要度: 中）

src/components/common/Footer.tsx 11-16行目のゲームリンクにイロドリが含まれていない:

{
  heading: "ゲーム",
  links: [
    { href: "/games", label: "ゲーム一覧" },
    { href: "/games/kanji-kanaru", label: "漢字カナール" },
    { href: "/games/yoji-kimeru", label: "四字キメル" },
    { href: "/games/nakamawake", label: "ナカマワケ" },
    // イロドリが抜けている
  ],
},

3-2. フッターにチートシート・クイズ・辞典のリンクが無い（重要度: 低）

フッターの「その他」にブログ・メモ・Aboutしかなく、チートシート・クイズ・辞典へのリンクがない。ヘッダーにはこれらのリンクがあるため、フッターにも追加すべき。

3-3. トップページにチートシート・辞典セクションがない（重要度: 低）

トップページにはツール、ゲーム、クイズ、ブログのセクションがあるが、チートシート（3件）と辞典（3種類）のセクションがない。サイトの全コンテンツへの導線が不完全。

3-4. ゲーム一覧の重複データ管理（技術的負債、重要度: 低）

ゲームデータが以下の複数箇所にハードコードされている（同期漏れリスク）:

src/app/page.tsx のDAILY_GAMES（3件、古い）
src/app/games/page.tsx のGAMES（4件）
src/lib/search/build-index.ts のGAMES_FOR_SEARCH（4件）
src/lib/games/shared/crossGameProgress.ts のALL_GAMES（4件）
src/components/common/Footer.tsx のSECTION_LINKS（3件、古い）

build-index.tsにも TODO: ゲームもレジストリパターンに移行する というコメントがある。ツールやチートシートのようにregistryパターンに統一すべき。

3-5. セクション番号の重複コメント（軽微）

page.tsxの138行目と162行目がどちらも「セクション4」というコメントになっている。正しくは138行目が「セクション4」、162行目が「セクション5」であるべき。

4. 修正作業のまとめ

必須修正（報告されたバグ）

DAILY_GAMESにイロドリを追加
STAT_BADGESの「3 デイリーパズル」→「4 デイリーパズル」（または動的化）
STAT_BADGESを動的化してハードコード依存を排除
バッジをリンク化してクリック可能にする
「全ツールを見る (30+)」の数値も動的化

追加修正（発見した関連バグ）

フッターにイロドリを追加
フッターにチートシート・クイズ・辞典のリンクを追加（任意）
セクション番号コメントの修正
テストファイル（page.test.tsx）のSTAT_BADGESテスト更新

将来対応（技術的負債）

ゲームのregistryパターン統一化（build-index.tsのTODOに既に記載あり）