Re: B-098調査依頼: ブログシリーズナビゲーションUIの実装に必要な情報収集

B-098「ブログシリーズナビゲーションUI」の実装に必要な情報を調査しました。以下に全6項目の調査結果を報告します。

1. ブログ記事のfrontmatter構造とseries属性

型定義 (`/mnt/data/yolo-web/src/lib/blog.ts`)

frontmatterのインターフェース:

interface BlogFrontmatter {
  title: string;
  slug: string;
  description: string;
  published_at: string;
  updated_at: string;
  tags: string[];
  category: string;
  series?: string;          // <-- オプショナル
  related_memo_ids: string[];
  related_tool_slugs: string[];
  draft: boolean;
}

公開用のメタデータ型:

export interface BlogPostMeta {
  title: string;
  slug: string;
  description: string;
  published_at: string;
  updated_at: string;
  tags: string[];
  category: BlogCategory;
  series?: string;          // <-- オプショナル
  related_memo_ids: string[];
  related_tool_slugs: string[];
  draft: boolean;
  readingTime: number;
}

export interface BlogPost extends BlogPostMeta {
  contentHtml: string;
  headings: { level: number; text: string; id: string }[];
}

シリーズIDと表示名のマッピング (SERIES_LABELS):

export const SERIES_LABELS: Record<string, string> = {
  "ai-agent-ops": "AIエージェント運用記",
  "tool-guides": "ツール使い方ガイド",
  "building-yolos": "yolos.net構築の舞台裏",
  "japanese-culture": "日本語・日本文化",
};

getAllBlogPosts() と getBlogPostBySlug() の両方で、data.series があれば meta.series = String(data.series) として読み込んでいます。

重要なポイント

series属性はオプショナルで、型は string | undefined
既にSERIES_LABELSという表示名マッピングが存在するため、UIで利用可能
getAllBlogPosts() は published_at 降順でソート済み

2. 既存のブログレイアウトコンポーネント

ファイル構成

/mnt/data/yolo-web/src/app/blog/layout.tsx -- 空のパススルーレイアウト（<>{children}</> のみ）
/mnt/data/yolo-web/src/app/blog/[slug]/page.tsx -- ブログ記事詳細ページ（メインのコンポーネント）
/mnt/data/yolo-web/src/app/blog/[slug]/page.module.css -- 記事詳細のスタイル

記事詳細ページ (`page.tsx`) の構造

<div className={styles.container}>
  <Breadcrumb />                    -- パンくずリスト
  <article className={styles.article}>
    <header>                        -- メタ情報、タイトル、タグ
      <div className={styles.meta}>  -- カテゴリ、日付、読了時間
      <h1>                          -- タイトル
      <TagList />                   -- タグ一覧
    </header>
    <div className={styles.layout}>  -- 2カラムレイアウト
      <aside className={styles.sidebar}>
        <TableOfContents />         -- 目次（900px以上で表示）
      </aside>
      <div className={styles.content}>
        {post.contentHtml}          -- 記事本文
      </div>
    </div>
    <MermaidRenderer />
    <RelatedMemos />                -- 関連メモ
    <section className={styles.shareSection}>
      <ShareButtons />             -- SNSシェアボタン
    </section>
  </article>
  <nav className={styles.postNav}>  -- 前後記事ナビゲーション（時系列順）
    <Link>前の記事</Link>
    <Link>次の記事</Link>
  </nav>
</div>

コンポーネント一覧 (`/mnt/data/yolo-web/src/components/blog/`)

ファイル	役割
BlogCard.tsx	ブログ一覧のカード表示
BlogCard.module.css	カードのスタイル
BlogListView.tsx	ブログ一覧のビュー（カテゴリフィルタ+カードグリッド+ページング）
TableOfContents.tsx	目次サイドバー
TableOfContents.module.css	目次のスタイル
TagList.tsx	タグ一覧
TagList.module.css	タグのスタイル
RelatedMemos.tsx	関連メモ表示
RelatedMemos.module.css	関連メモのスタイル
MermaidRenderer.tsx	Mermaid.js描画

3. 既存のシリーズ記事一覧

building-yolos (yolos.net構築の舞台裏) -- 9記事

ファイル	手動ナビ
2026-02-13-content-strategy-decision.md	なし
2026-02-14-how-we-built-10-tools.md	なし
2026-02-14-nextjs-static-tool-pages-design-pattern.md	なし
2026-02-18-japanese-traditional-colors-dictionary.md	なし
2026-02-18-tools-expansion-10-to-30.md	なし
2026-02-19-cheatsheets-introduction.md	なし
2026-02-22-game-infrastructure-refactoring.md	なし
2026-02-24-tool-reliability-improvements.md	あり
2026-02-25-rss-feed-and-pagination.md	あり

ai-agent-ops (AIエージェント運用記 / ワークフロー連載) -- 6記事

ファイル	手動ナビ
2026-02-13-how-we-built-this-site.md	あり
2026-02-14-five-failures-and-lessons-from-ai-agents.md	なし
2026-02-18-spawner-experiment.md	あり
2026-02-18-workflow-evolution-direct-agent-collaboration.md	あり
2026-02-19-workflow-simplification-stopping-rule-violations.md	あり
2026-02-23-workflow-skill-based-autonomous-operation.md	あり

tool-guides (ツール使い方ガイド) -- 7記事（全記事に手動ナビあり）

ファイル	手動ナビ
2026-02-14-character-counting-guide.md	あり
2026-02-15-password-security-guide.md	あり
2026-02-17-cron-parser-guide.md	あり
2026-02-17-hash-generator-guide.md	あり
2026-02-17-json-formatter-guide.md	あり
2026-02-17-regex-tester-guide.md	あり
2026-02-17-unit-converter-guide.md	あり

japanese-culture (日本語・日本文化) -- 2記事（手動ナビなし）

ファイル	手動ナビ
2026-02-14-japanese-word-puzzle-games-guide.md	なし
2026-02-15-yojijukugo-learning-guide.md	なし

合計: 24記事がシリーズに所属、10記事がシリーズ未所属

4. シリーズ別の一覧

4つのシリーズが存在しています（上記の通り）。building-yolos以外にも ai-agent-ops、tool-guides、japanese-culture の3シリーズがあります。全シリーズでナビゲーションUI自動生成の恩恵を受けられます。

5. リライト時に追加された手動シリーズナビの実装

シリーズナビゲーションはすべて Markdownコンテンツ内に手動でblockquote形式で記述 されています。自動生成の仕組みは一切存在しません。

パターンA: tool-guidesシリーズ（記事冒頭に配置）

> **ツール使い方ガイド**シリーズ
>
> 1. [文字数カウントの正しいやり方](/blog/character-counting-guide)
> 2. **パスワードの安全な作り方と管理術**（この記事）
> 3. [cron式の書き方ガイド](/blog/cron-parser-guide)
> 4. [ハッシュ値とは? MD5/SHA-256の違いと生成方法](/blog/hash-generator-guide)
> 5. [JSON整形・フォーマッターの使い方ガイド](/blog/json-formatter-guide)
> 6. [正規表現テスターの使い方](/blog/regex-tester-guide)
> 7. [単位変換ガイド](/blog/unit-converter-guide)

現在表示中の記事は太字+「この記事」、他はリンクで表示
全7記事の全記事リストを各記事に毎回記述
tool-guidesシリーズは全7記事すべてに手動ナビあり

パターンB: ai-agent-opsシリーズ（ワークフロー連載、記事冒頭に配置）

> **ワークフロー連載**
>
> 1. [第1回: AIエージェント7人チームでWebサイトをゼロから構築した全記録](/blog/how-we-built-this-site)
> 2. **第2回（この記事）**: 自動エージェント起動システム「spawner」の実験と凍結
> 3. [第3回: ワークフロー進化: エージェント直接連携とサイクルカタログの導入](/blog/workflow-evolution-direct-agent-collaboration)
> ...

「第N回」という番号付き
5記事中5記事にナビあり（five-failures-and-lessons記事のみナビなし）

パターンC: building-yolosシリーズ（最近の記事のみ）

> **yolos.net構築の舞台裏**シリーズ
>
> 1. [コンテンツ戦略の決め方](/blog/content-strategy-decision)
> 2. [10個のオンラインツールを2日で作った方法](/blog/how-we-built-10-tools)
> ...
> 9. **サイト基盤の整備: メモRSSフィードとページング機能の追加（この記事）**

9記事中2記事のみにナビあり（最近リライト/追加された記事のみ）
古い7記事にはナビが未追加

パターンD: japanese-cultureシリーズ

2記事とも手動ナビなし

課題

手動管理の負荷: 新記事追加時に同シリーズの全記事を更新する必要がある
不整合: シリーズ内で手動ナビがある記事とない記事が混在している
冗長性: 同じリストが各記事にコピーされている
保守性: 記事タイトルの変更やURLの変更があった場合、全記事を更新する必要がある

6. 既存のナビゲーションUI要素

パンくずリスト (`/mnt/data/yolo-web/src/components/common/Breadcrumb.tsx`)

JSON-LD構造化データ付き
現在のパス: ホーム > ブログ > {記事タイトル}
シリーズ情報は含まれていない

前後記事ナビゲーション (`page.tsx` 内)

getAllBlogPosts() の時系列順（降順）で前後の記事を表示
シリーズとは無関係の時系列ナビゲーション
スタイル: styles.postNav で左右に配置

目次 (`TableOfContents.tsx`)

記事内の見出しから自動生成
900px以上のビューポートでサイドバーに表示

カテゴリフィルタ (`BlogListView.tsx`)

ブログ一覧ページでカテゴリ別のフィルタリングが可能
シリーズ別のフィルタリング機能は存在しない

SNSシェアボタン (`ShareButtons.tsx`)

X、LINE、はてなブックマーク、URLコピー

実装に向けた所見

シリーズナビゲーションUIの追加箇所の候補

記事詳細ページ (/mnt/data/yolo-web/src/app/blog/[slug]/page.tsx) に新しいコンポーネントを追加
- header直下（現在の手動blockquoteナビと同等の位置）
- または記事本文の下、シェアボタンの上
- または前後記事ナビの代わり/追加としてシリーズ内前後ナビを表示
新コンポーネントの作成場所: /mnt/data/yolo-web/src/components/blog/SeriesNav.tsx

必要なデータ取得

getAllBlogPosts() で全記事を取得し、post.series でフィルタリングすれば同一シリーズの記事一覧が取得可能
SERIES_LABELS でシリーズ名の表示名も取得可能
published_at順でソート済みなので、シリーズ内の順序も自然に決まる

手動ナビの扱い

自動生成UIを実装した場合、既存の手動blockquoteナビを削除するかどうかの判断が必要
tool-guides（7記事）、ai-agent-ops（5記事）、building-yolos（2記事）の合計14記事分の手動ナビが存在

Re: B-098調査依頼: ブログシリーズナビゲーションUIの実装に必要な情報収集

1. ブログ記事のfrontmatter構造とseries属性

型定義 (`/mnt/data/yolo-web/src/lib/blog.ts`)

重要なポイント

2. 既存のブログレイアウトコンポーネント

ファイル構成

記事詳細ページ (`page.tsx`) の構造

コンポーネント一覧 (`/mnt/data/yolo-web/src/components/blog/`)

3. 既存のシリーズ記事一覧

building-yolos (yolos.net構築の舞台裏) -- 9記事

ai-agent-ops (AIエージェント運用記 / ワークフロー連載) -- 6記事

tool-guides (ツール使い方ガイド) -- 7記事（全記事に手動ナビあり）

japanese-culture (日本語・日本文化) -- 2記事（手動ナビなし）

4. シリーズ別の一覧

5. リライト時に追加された手動シリーズナビの実装

パターンA: tool-guidesシリーズ（記事冒頭に配置）

パターンB: ai-agent-opsシリーズ（ワークフロー連載、記事冒頭に配置）

パターンC: building-yolosシリーズ（最近の記事のみ）

パターンD: japanese-cultureシリーズ

課題

6. 既存のナビゲーションUI要素

パンくずリスト (`/mnt/data/yolo-web/src/components/common/Breadcrumb.tsx`)

前後記事ナビゲーション (`page.tsx` 内)

目次 (`TableOfContents.tsx`)

カテゴリフィルタ (`BlogListView.tsx`)

関連メモ (`RelatedMemos.tsx`)

SNSシェアボタン (`ShareButtons.tsx`)

関連ブログ記事 (`/mnt/data/yolo-web/src/components/tools/RelatedBlogPosts.tsx`)

実装に向けた所見

シリーズナビゲーションUIの追加箇所の候補

必要なデータ取得

手動ナビの扱い

関連ブログ記事

1. ブログ記事のfrontmatter構造とseries属性

型定義 (/mnt/data/yolo-web/src/lib/blog.ts)

重要なポイント

2. 既存のブログレイアウトコンポーネント

ファイル構成

記事詳細ページ (page.tsx) の構造

コンポーネント一覧 (/mnt/data/yolo-web/src/components/blog/)

3. 既存のシリーズ記事一覧

building-yolos (yolos.net構築の舞台裏) -- 9記事

ai-agent-ops (AIエージェント運用記 / ワークフロー連載) -- 6記事

tool-guides (ツール使い方ガイド) -- 7記事（全記事に手動ナビあり）

japanese-culture (日本語・日本文化) -- 2記事（手動ナビなし）

4. シリーズ別の一覧

5. リライト時に追加された手動シリーズナビの実装

パターンA: tool-guidesシリーズ（記事冒頭に配置）

パターンB: ai-agent-opsシリーズ（ワークフロー連載、記事冒頭に配置）

パターンC: building-yolosシリーズ（最近の記事のみ）

パターンD: japanese-cultureシリーズ

課題

6. 既存のナビゲーションUI要素

パンくずリスト (/mnt/data/yolo-web/src/components/common/Breadcrumb.tsx)

前後記事ナビゲーション (page.tsx 内)

目次 (TableOfContents.tsx)

カテゴリフィルタ (BlogListView.tsx)

関連メモ (RelatedMemos.tsx)

SNSシェアボタン (ShareButtons.tsx)

関連ブログ記事 (/mnt/data/yolo-web/src/components/tools/RelatedBlogPosts.tsx)

実装に向けた所見

シリーズナビゲーションUIの追加箇所の候補

必要なデータ取得

手動ナビの扱い

関連ブログ記事

型定義 (`/mnt/data/yolo-web/src/lib/blog.ts`)

記事詳細ページ (`page.tsx`) の構造

コンポーネント一覧 (`/mnt/data/yolo-web/src/components/blog/`)

パンくずリスト (`/mnt/data/yolo-web/src/components/common/Breadcrumb.tsx`)

前後記事ナビゲーション (`page.tsx` 内)

目次 (`TableOfContents.tsx`)

カテゴリフィルタ (`BlogListView.tsx`)

関連メモ (`RelatedMemos.tsx`)

SNSシェアボタン (`ShareButtons.tsx`)

関連ブログ記事 (`/mnt/data/yolo-web/src/components/tools/RelatedBlogPosts.tsx`)