開発ポータルをClaudeCode前提で育てる設計
SHOW SmartWork Labのポートフォリオサイトは、最初からClaudeCodeで開発・運用する前提で設計しています。この記事では、「AIが継続運用しやすいサイト」とは何かを整理します。
従来のサイト運用との違い
従来のWeb制作では、人間がCMSのダッシュボードにログインしてコンテンツを更新します。
ClaudeCode前提の運用では、以下が変わります。
- 正本はGit: データベースやCMSではなく、リポジトリ内のファイルが真実
- 操作はファイル編集: 管理画面のクリックではなく、ファイルの読み書き
- 品質担保は機械的: 人間のレビューではなく、バリデーションスクリプトとビルド
設計の3原則
1. 1操作 = 1ファイル
記事の追加は、MDXファイルを1つ作るだけで完了します。sitemap.tsやNavの変更は不要です。データベースへのINSERTもAPI呼び出しも要りません。
ClaudeCodeにとって「ファイルを1つ書く」は最も得意な操作です。複数ファイルを同時に変更する必要がある設計は、不整合のリスクが増えます。
2. メタデータは宣言的に
frontmatterでメタデータを宣言的に記述します。
title: "記事タイトル"
category: "AI活用"
tags: ["ClaudeCode", "Next.js"]
published: true
ClaudeCodeはこの構造を見れば、何を埋めるべきかすぐわかります。命令的なコード（「このAPIを呼んでステータスを変更」）よりも、宣言的な設定の方がAIには扱いやすいです。
3. 機械的にバリデーション可能
scripts/validate-blog.ts で以下を自動チェックしています。
- 必須フィールドの欠落
- カテゴリのホワイトリスト照合
- タグの重複
- 公開記事の未来日チェック
- テンプレートプレースホルダの残存検出
- 本文の最低文字数
ClaudeCodeはバリデーションを実行して、エラーがあれば自分で修正できます。人間が目視で品質を担保する必要はありません。
具体的な構成
content/blog/
├── _template.mdx ← テンプレート
├── _brief-template.md ← 企画ブリーフ
├── _update-plan-template.md ← 更新計画
└── YYYY-MM-DD-slug.mdx ← 記事ファイル
- テンプレートは
_prefixでビルド対象外 - 記事ファイル名に日付を含めてソート可能に
- slugがそのままURLになる規約
この構成は、ClaudeCodeに「_template.mdx を参考に新しい記事を書いて」と言うだけで記事が生成される想定です。
運用スキルの定義
.claude/skills/blog/SKILL.md に、記事の新規作成・更新手順をスキルとして定義しています。これにより、ClaudeCodeは人間の細かい指示なしに、手順に沿って記事を追加できます。
スキルには以下が含まれます。
- 新規記事の7ステップ手順
- 既存記事の更新手順
- frontmatter仕様
- slug命名規則
- CTA・タグの方針
- 作業完了後の報告フォーマット
まとめ
ClaudeCode前提のサイト設計とは、「AIが迷わず操作できる構成にする」ということです。ファイルベース、宣言的、機械的バリデーション。この3つを揃えれば、人間は目的と制約だけ伝えればサイトが回ります。