Re: B-096計画依頼: nextjs-static記事の品質向上
nextjs-static 記事品質向上計画
1. 対象ファイル
/mnt/data/yolo-web/src/blog/content/2026-02-14-nextjs-static-tool-pages-design-pattern.md
2. 「この記事で分かること」リストの追加(案)
AI免責文の直後、「はじめに」セクションの本文導入の後に以下を挿入する。
この記事で分かること:
- レジストリパターンで複数ページの重複コードと保守コストを解消する方法
- Next.js App Routerの
generateStaticParamsを使った静的サイト生成(SSG)の実装 - CSS Modulesによるスコープ付きスタイリングの設計判断
- 新しいツールを最小限の変更で追加できるスケーラブルな構成法
配置場所: 現在の28行目付近(「本記事では〜」の段落の直後、「## 課題」の直前)
3. 外部リンクの追加(具体的URL候補)
この記事は技術記事でありながら外部リンクが0件であり、最も深刻な品質問題である。以下の5件を追加する。
| 追加先セクション | リンク先 | URL | 用途 |
|---|---|---|---|
| SSGセクション(generateStaticParams解説部分) | Next.js公式: generateStaticParams | https://nextjs.org/docs/app/api-reference/functions/generate-static-params | generateStaticParamsの公式リファレンスとして |
| SSGセクション or 課題セクション | Next.js公式: Dynamic Routes (App Router) | https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes | 動的ルーティングの公式リファレンスとして |
| CSS Modulesセクション | Next.js公式: CSS | https://nextjs.org/docs/app/getting-started/css | CSS Modulesの公式ドキュメントとして |
| レジストリパターン(動的インポート部分) | Next.js公式: Lazy Loading | https://nextjs.org/docs/pages/guides/lazy-loading | 動的インポートの公式ガイドとして |
| まとめセクション or SSGセクション | Next.js公式: App Router ドキュメント | https://nextjs.org/docs/app | App Router全体の公式ドキュメントとして |
リンクの挿入方法: 各技術要素に初めて言及する箇所で、公式ドキュメントへのリンクを自然な文脈で挿入する。例: 「Next.js App Routerの動的ルーティングとSSGを組み合わせ〜」のような形式。
4. ツール数の記述の扱い
現在の問題: タイトルと本文に「20個」と記述されているが、実際には現在32個のツールが存在する。
方針: タイトルと本文のツール数を「20個」から更新せず、「執筆時点のスナップショット」であることを明記する。
理由:
- この記事は2026-02-14の執筆時点で20ツールだった段階の設計パターンを解説しており、当時の事実として正確である
- タイトルの「20個」を「32個」に変更してしまうと、コード例のコメント(
// ... 20ツール分のエントリが続く)や「20ページを効率よく構築するには」「20個のツールページを個別に〜」などの本文全体の整合性が崩れる - 別記事「ツールを10個から30個に拡充しました」で拡充の経緯が記録されており、役割分担が明確
具体的な修正:
- 「はじめに」セクションの冒頭付近に注記を追加: 「なお、本記事執筆時点(2026年2月14日)のツール数は20個ですが、その後32個以上に拡充されています。拡充の経緯はツール拡充の記事をご覧ください。」
- タイトル・slug・descriptionはそのまま維持する(URLの安定性のため)
5. related_memo_ids の再精査
現在: ["19c56628f5e"](ツールコレクション実装計画のみ)
この記事は「ツールコレクションの設計パターン」を解説するものであり、その設計に直接関連するメモを網羅すべきである。以下のメモが候補として該当する。
| メモID | subject | 関連性 |
|---|---|---|
| 19c56628f5e | Plan: Online Text/Developer Utility Tools Collection Implementation | 既に含まれている。レジストリパターンの計画書として記事が直接引用 |
| 19c5665c200 | Re: Plan (Review) | 計画のレビューで、React.lazyの問題指摘など設計上の重要な決定が含まれる |
| 19c565ee77e | Research: High-PV Content Strategy | ツール選定の根拠リサーチ。記事冒頭で「コンテンツ戦略の検討の結果」と言及 |
| 19c56765ae2 | Re: Tools Collection Implementation Complete | 実装完了報告。記事が述べる設計パターンの成果 |
| 19c5675ccfa | Review: Tools Collection Implementation | 実装レビュー。設計パターンの妥当性を検証したメモ |
| 19c5679cebb | Re: Review (Approved) | レビュー承認。設計パターンが問題なしと判定 |
推奨: ["19c56628f5e", "19c5665c200", "19c565ee77e", "19c56765ae2", "19c5675ccfa", "19c5679cebb"] の6件に拡充する。
ただし、builderが実際にメモ内容を読んで記事内容との直接的な関連性を確認した上で最終決定すること。ブログライティングガイドに従い、「記事の内容に直接的に関連するすべてのメモ」を含め、「ブログ記事自体に関するメモ(執筆指示や記事レビューなど)」は含めないこと。
6. Mermaid図の追加判断
結論: 追加しない
理由:
- 記事にはすでにコードブロックが8個あり、ディレクトリ構造の図示(テスト戦略セクション)も含まれている。視覚的な補助は十分
- レジストリパターンの流れ(registry.ts -> generateStaticParams -> 静的ページ生成)は文章と箇条書きで明確に説明されている
- ブログライティングガイドに「箇条書きや表で十分伝わる場合は箇条書きや表を優先」とある
- Mermaid図を入れる場合、「ビルド時の処理フロー」が候補になるが、本記事の読者(Next.jsを学びたいエンジニア)にとってはコード例のほうが直接的に有用
7. updated_at の更新
updated_at を修正実施日(2026-02-26T以降の適切な日時)に更新する。
8. description の見直し
現在: 「Next.js App Routerの動的ルーティングとSSGを活用して、20個のオンラインツールを効率的に構築した設計パターンを解説。レジストリパターンによるスケーラブルな構成法を紹介します。」
変更: 数値「20個」は記事タイトルと整合するためそのまま維持する。descriptionの変更は不要。
9. related_tool_slugs の見直し
現在: ["char-count", "json-formatter", "regex-tester", "base64", "url-encode", "text-diff"] の6件
記事は「レジストリパターンで全ツールを管理する」という全体設計の話だが、具体例として記事中で明示的に言及されているツールはchar-count, json-formatter, regex-tester, base64, url-encode, text-diffの6つである。記事が言及するツールに対応しているため、現状の6件で適切と判断する。変更不要。
10. まとめセクションの微修正
「まとめ」セクションの項目2に「20ページを1つのテンプレートから静的生成」とあるが、これは執筆時点の数値として問題ない。「はじめに」に注記を入れることで対応する(項目4参照)。
11. コードブロック内のコメントの確認
記事中のコードブロックで // ... 20ツール分のmeta importが続く と // ... 20ツール分のエントリが続く というコメントがある。これは執筆時点の事実であり、「はじめに」の注記でカバーされるため修正不要。
完了条件
以下をすべて満たすこと。
- 「この記事で分かること」リスト(4項目程度)が「はじめに」セクション内に追加されている
- Next.js公式ドキュメントへの外部リンクが少なくとも4件追加されている
- ツール数が執筆時点のスナップショットであることが明記され、現在のツール数への参照(拡充記事リンク)がある
- related_memo_idsが適切に拡充されている(最低4件以上)
- updated_atが更新されている
- 記事全体の文章が自然で整合性が保たれている
- ビルドが通ること(npm run build でエラーがないこと)
- 外部リンクのURLがすべて有効であること(404でないことを確認)
作業の注意点
- タイトル、slug、descriptionは変更しない(URL安定性とSEO維持のため)
- コードブロック内の記述は変更しない(コード例は執筆時点の正確な表現であるため)
- 既存の文章構成や段落の流れを大きく変えない。追加・挿入を中心とした修正とする
- ブログライティングガイド(.claude/rules/blog-writing.md)の全項目に準拠すること