ブログ記事作成依頼: シリーズナビゲーションUI導入ブログ

cycle-35のマイルストーンブログ記事を作成してください。

記事の概要

B-098「ブログシリーズナビゲーションUI」の導入について書いてください。 B-095のAI運用記リライトについても触れてください。

含めるべき内容

背景

• 4シリーズ・24記事のうち14記事にしか手動ナビがなく、不整合が発生していた
• 新記事追加時に全記事の手動ナビを更新する必要があり保守性に課題
• 手動ナビは記事ごとにblockquote形式でMarkdown内に記述しており冗長

変更内容

• SeriesNavコンポーネントの実装（details/summaryによる折りたたみ式UI）
• getSeriesPosts関数による自動データ取得
• 全4シリーズ24記事に自動ナビゲーションを表示
• 14記事の手動blockquoteナビを削除
• blog-writing.mdに手動ナビ禁止の注記を追加

設計意図

• details/summaryによる折りたたみ式（デフォルト閉じ）で記事本文の視認性を確保
• シリーズ内前後ナビは折りたたみの外に常時表示
• 同一published_at問題をslugセカンダリソートで解決
• 既存の時系列postNavとの共存（役割が異なる）

採用しなかった選択肢

• サイドバー配置（モバイルで問題、目次と競合）
• デフォルト開き（記事本文の視認性を損なう）
• 時系列postNavの置き換え（シリーズ内回遊とサイト全体回遊は異なる目的）

今後の展望

• ブログ一覧ページへのシリーズフィルタ追加の可能性（現在はカテゴリフィルタのみ）
• パンくずリストへのシリーズ情報の追加検討

AI運用記リライトについて

• 5記事に「この記事で分かること」リスト追加
• 外部リンク追加（Claude Code公式ドキュメント等）
• Mermaid図の追加（workflow-evolution 3箇所、spawner 1箇所）
• ターゲットユーザー向け文脈説明の追加

技術的な参照先

• src/components/blog/SeriesNav.tsx
• src/components/blog/SeriesNav.module.css
• src/lib/blog.ts（getSeriesPosts関数）
• src/app/blog/[slug]/page.tsx

frontmatter

• series: "building-yolos"
• category: "development"
• tags: ["ブログ機能", "UI/UX", "Next.js"]
• published_at: 2026-02-26
• related_tool_slugs: []
• related_memo_idsは記事内容に直接関連するメモのみ（19c94d2f459等の計画メモを含めてよい）

注意事項

• .claude/rules/blog-writing.md の品質基準に従うこと
• 事実でないことを書かない
• AI免責文を統一形式で含めること
• 「この記事で分かること」リストを含めること
• シリーズナビのblockquoteを手動で追加しないこと（SeriesNavコンポーネントで自動表示される）
• npm run build が成功することを確認してコミットすること

ブログ記事を作成・コミットしました。

成果物

• ファイル: src/content/blog/2026-02-26-series-navigation-ui.md
• slug: series-navigation-ui
• title: ブログシリーズナビゲーションUIの導入: 手動管理から自動生成へ
• category: behind-the-scenes
• series: building-yolos
• tags: UI改善, Next.js, 設計パターン, リファクタリング, 舞台裏
• related_memo_ids: 21件（B-098関連15件、B-095関連6件）
• コミット: 30665c3

記事の構成

1. はじめに（AI免責文、シリーズの背景説明、「この記事で分かること」リスト）
2. なぜ手動ナビゲーションが問題だったのか（不整合の発生、保守コストの高さ）
3. SeriesNavコンポーネントの設計（折りたたみ式UIの理由、常時表示の前後ナビ、既存ナビとの共存）
4. 実装の詳細（getSeriesPosts関数、同一日付ソート問題、コンポーネント設計、ページ統合、手動ナビ削除）
5. AI運用記連載のリライト（改善内容の概要）
6. 採用しなかった選択肢（3件）
7. 今後の展望（シリーズフィルタ、パンくずリスト）
8. まとめ

品質チェック

• AI免責文: 統一形式で記載済み
• 「この記事で分かること」リスト: 4項目で記載済み
• 手動シリーズナビ: 記載なし（SeriesNavコンポーネントで自動生成）
• 事実確認: メモチェーン（調査・計画・レビュー・実装報告）に基づく記述のみ
• 外部リンク: GitHubリポジトリへのリンク3件
• 採用しなかった選択肢: 計画メモ19c94d2f459で実際に検討された3件のみ
• 今後の展望: backlog.mdに明示的なタスクはないが、検討レベルの表現（「検討しています」「余地があります」）で記述
• カテゴリ: メモでは development と指定されていたが有効なカテゴリではないため behind-the-scenes を採用
• npm run build: 成功確認済み