AI にサイト制作を任せるとき、最大の失敗パターンは「要件を曖昧にしたまま作り始めること」です。Claude Code は指示に忠実ですが、指示がなければ自分で判断します。その判断がプロジェクトの方針と合っている保証はありません。
前回、開発環境と技術スタックを整えました。今回は 実装に入る前に、AI への指示書をどう書いたか をお伝えします。
CLAUDE.md とは
Claude Code には CLAUDE.md というプロジェクト設定ファイルがあります。リポジトリのルートに置くと、Claude Code が毎回のセッション開始時に自動で読み込みます。プロジェクト固有のルール・制約・手順を書いておけば、何度セッションを重ねても AI が同じ方針で動いてくれます。弊社のリニューアルでは、この CLAUDE.md に約200行の指示を書きました。
実際に書いた10項目
1. ロール設定 — PMとして振る舞え
AI にコードを書かせるだけでなく、タスクの優先順位やスコープ管理も任せました。「実装より何をなぜ作るかを先に確認する」と明記することで、過剰な機能追加を防いでいます。
2. CSS 規約 — Mobile First・!important 禁止
ブレークポイントは 768px と 1024px の2段階。!important は使わず、詳細度の設計で解決する方針です。AI は放っておくと !important を多用するため、明示的な禁止が必要でした。
3. セキュリティルール — sudo 禁止・.env 管理
AI に管理者権限を渡さないルールです。sudo が必要なコマンドは AI が提案だけして、人間が実行する。API キーは .env で管理し、Git には push しない。これは事故防止の最低ラインです。
4. デプロイ手順
git push origin main で GitHub Actions から rsync の自動デプロイ。この手順を CLAUDE.md に書いておくことで、AI が変更後に自動でデプロイまで完了させます。
5. デザイントークン（CSS 変数）
色・フォントサイズ・余白を CSS 変数で定義し、AI に変数名だけで指示できるようにしました。「–ds-accent を使え」と書けば、AI がカラーコードを間違えることはありません。
6. スクリーンショット保存先
Playwright で撮るスクリーンショットの保存先を固定しました。些細なルールですが、これがないとスクショがプロジェクトのあちこちに散らばります。
7. セッション開始/終了チェックリスト
セッション開始時は前回のログとタスク一覧を確認。終了時は学びの記録・タスク更新・未 push コードの確認。このルーティンを CLAUDE.md に書くことで、AI が引き継ぎノートを自動で残すようになります。さらにこのチェックリストを /start-session /end-session というカスタムコマンド（Skill 機能）として登録しました。第3回で詳しく解説します。
8. CMS 実装パターン
Bricks Builder の Vue state 操作や REST API のエンドポイントなど、繰り返し使う技術的な手順をメモとして記録しました。AI は毎回調べ直す手間が省け、実装速度が上がります。
9. サブエージェントの使い分け
Claude Code にはサブエージェント機能があります。UI 確認は ui-designer、コード探索は Explore、設計は Plan と役割を分けるルールを書きました。適材適所で並列に動かすと、1つのセッションで複数の作業が同時に進みます。
10. カラー変更禁止ルール
「フッターの背景色 –ds-dark は変更禁止」。サイト全体のカラーバランスを崩さないための制約です。AI は局所最適に走りやすいため、変えてはいけない設計意図を明文化しておくことが重要です。
要件定義に1時間かけると、実装の10時間が省ける
AI を使うときこそ、要件定義が最も重要な投資です。要件とデータが揃っていれば、デザイン・実装で約4日間。4日間で14ページ、FCP 6.5秒から4.8秒の成果は、この1時間の準備から始まりました。
次回予告
第3回では Skill・Hook・MCP プラグイン を使って、Claude Code をさらに効率的に動かす方法を紹介します。
AI を活用したWEB制作に興味をお持ちですか？