Claude CodeとClaude Projectを利用してサイトの改善計画をたてる

ウェブサイトの定期的な改善をする上で、いろんな視点でのレビューや検査があるのが理想です。今回は新しい切り口としてClaudeを使ったレビューと計画策定を試してみました。

Claude Codeを利用したサイトレビュー

Claude CodeはcurlやPythonスクリプトなどが使えるので、サイトにアクセスしてチェックできます。ただし対象サイトのドメインにアクセスできる設定かは事前にチェックしておきましょう。Cursor / Devinなどブラウザが使えるエージェントも増えているので、そちらを使うこともできます。

今回はClaude Code on the Webのプランモードで計画として問題点や改善をレポートさせました。

並列してClaude Code Agent Teamによる多視点レポートも作ってみています。

Claude Projectでレポートを整理し、課題の分割統治を図る

調査とレポート・計画の時点では複数の多岐に渡った問題点や改善アクションが出てきました。これをそのまま作業させると、巨大なPRになってしまってレビューが大変です。また、少しでもハルシネーションや意図しない計画が混ざっていると修正が大変になります。よってちょっと手間ですが、セッションを分割して作業します。

Claude Codeで作らせたレポートをコピーし、Claudeに貼り付けます。この際「XXサイト改善」のようなPJを作っておきましょう。

内容の精査をチャットで行います。場合によっては不要なものを削除した改訂版も作らせます。

そして課題を分割していきましょう。Claudeではアーティファクト機能を使って個別のMDファイルを生成できます。

作成したアーティファクトは、プロジェクトに追加していきます。

その上でプロジェクト内に新しいセッションを作ります。そこで個別のアーティファクトについて議論を進めました。

コードベースの調査でClaude Codeも併用

もし実装レベルでの確認が必要になった場合は、Claude Codeを起動します。

これによってある程度の計画を作らせましょう。

GitHub Issueにタスクを登録し、CodeRabbitで二重チェック

内容の精査が終わったものから、GitHub Issueに登録します。

このまま実装させてもいいのですが、最終チェックとしてCodeRabbitにも検証させておきます。

もしPhase提案が出たら、CodeRabbitを使ってさらにissueを分割しましょう。

その上でCodeRabbitのIssue Plannerを使って開発用プロンプトを作らせます。

出来上がったプランを最終確認します。

実装はCodeRabbitが出すプランにある、Prompt for AI Agentsの指示をコピーしてClaude Codeに渡して行います。

All AI agent prompts combiedという便利プロンプトもあるが、DevOps方面でベストプラクティスの1つとして紹介されている「Small Batch Size」を意識するならばPhaseごとのプロンプトを使う方がいい。ちょっとずつ開発・マージしていく方が、事故った時のrevert→修正もやりやすい。

やってみての感想

AI DLCがこんな感じなんですかね。調査やプランニング・開発それぞれのフェーズに適していると思うAIエージェントを起用し、その結果を共有しながらやるべきことを明確に落とし込んでいく。そしてOKR(Objective and Key Result)レベルにやるべきことが整理されたら、そこではじめて開発を開始するような感覚でした。

サービスを行ったり来たりするのが手間なので、MCPなりスキルなりでよしなに統合できればいいなと思います。