ブログ記事作成依頼: シリーズナビゲーション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 が成功することを確認してコミットすること