Claude Codeでブログ基盤を構築した話

AI活用
ClaudeCodeNext.jsブログ

このサイトにブログ機能を追加しました。CMSは使わず、MDXファイルをGit管理する構成です。この記事では、設計判断から実装までの過程を紹介します。

なぜブログ基盤を作ったのか

SHOW SmartWork Labは、AIと自動化で業務改善を支援するポートフォリオサイトです。サイト自体もClaude Codeで開発・運用しています。

これまで技術的な発信はAI運営ログで行っていましたが、運営ログは「何をしたか」の記録であり、「なぜそうしたか」「どう考えたか」を深掘りする場所がありませんでした。

体系的な情報発信のために、ブログ基盤を追加することにしました。

3つの設計案と選定

設計段階では3つの案を比較しました。

  1. TSファイルハードコード方式: 既存のai-log-data.tsと同じパターン。長文のTS文字列管理が破綻する
  2. MDXファイル方式（採用）: 1記事1ファイル。frontmatterでメタデータ管理
  3. Markdown + 別管理メタデータ: 2箇所の同期が必要。運用に乗らない

MDX方式を選んだ最大の理由は、記事追加がファイル1つの作成で完結することです。sitemapの更新もNavの変更も不要。ClaudeCodeにとって最もシンプルな操作です。

技術構成

| 要素 | 技術 | |---|---| | 記事フォーマット | MDX（Markdown + frontmatter） | | frontmatterパース | gray-matter | | Markdown→HTML | remark + remark-html | | ページ生成 | Next.js App Router generateStaticParams | | 構造化データ | BlogPosting schema（記事ごとに自動生成） | | バリデーション | scripts/validate-blog.ts（frontmatter型チェック + 整合性検証） |

記事の追加方法

content/blog/ にMDXファイルを1つ追加するだけです。

content/blog/2026-03-19-my-article.mdx

ファイル名の日付prefix（2026-03-19-）はソート用で、URLには含まれません。上記の場合、URLは /blog/my-article になります。

frontmatterに必須フィールドを記述し、本文をMarkdownで書きます。published: true に設定すれば公開されます。

バリデーションで品質を担保

npx tsx scripts/validate-blog.ts で以下を自動チェックしています。

  • 必須フィールドの欠落
  • カテゴリのホワイトリスト照合
  • タグの重複検出
  • 公開記事の未来日チェック
  • テンプレートプレースホルダの残存
  • 本文の最低文字数

エラーがあればClaudeCodeが自分で修正できるので、人間の目視チェックに頼る必要がありません。

ClaudeCode運用のために整備したもの

ブログ基盤と合わせて、以下の運用ツールを整備しました。

  • スキル定義 (.claude/skills/blog/SKILL.md): 新規作成・更新の手順書
  • 記事テンプレート (_template.mdx): 見出し構成付き
  • ブリーフテンプレート (_brief-template.md): 記事企画の整理用
  • 更新計画テンプレート (_update-plan-template.md): 既存記事の改善用

これにより、ClaudeCodeは「記事を書いて」と言われれば、手順に沿って自律的に作業を進められます。詳しくはClaudeCodeで記事執筆フローを回す方法で解説しています。

まとめ

ブログ基盤で最も重視したのは「ClaudeCodeが迷わず運用できること」です。ファイルベース、宣言的frontmatter、機械的バリデーション。この組み合わせで、人間は方向性を決めるだけでブログが回る状態を作りました。

開発ポータルをClaudeCode前提で育てる設計もあわせてご覧ください。