Claudeと歩むAI仕様駆動開発の開発手法
はじめまして、Risaです。
初投稿なのでお手柔らかにお願いします。
今回TwitterであがったIDEのkiroAIを使った仕様駆動開発を
Claudeで行う方法をご紹介します。
おそらくGPTとCodexでも再現できるかとは思います。
今回はClaudeを使用していきます。
プランはMax 5xかMax 20xを用意してください
Proだと圧倒的にトークンがたりません（ごめんなさい）
まず使用順序を完結に説明します。
ClaudeDesktop⇛Claudecodeの順です。
それでは実践方法を詳しく説明していきます。
ClaudeDesktopを使う実際の流れ
ClaudeDesktopにMCPサーバーを追加する
まずClaudeDesktopを起動します、
ClaudeDesktopには様々なMCPサーバーがありますが以下のMCPサーバーをいれるのがおすすめです。
- context7
ClaudeDesktopの拡張機能の中から選べます
- sequential-thinking
インストール方法はそれぞれ案内に従ってください。
ClaudeDesktopで作る仕様書たち
AI仕様駆動開発においてはテーマ決めと仕様技術スタックが重要です。
あとは的確なプロンプト指示です。
まず大前提としてClaudeDesktopにはコードのは書かせません。
あくまで資料作りにつかいます。
1. アイデアが明確に決まっていない場合
まずClaudeに「〇〇みたいなアプリ(Webサイト)を作りたいんだけどいいアイデアはないかな?」
アイデアを提案してくれるはずです。
2.アイデアが決まっていて適切な開発言語がわからない場合
私「こんな機能がついた〇〇を作成したいです、まずはコードを記述せずに実装方法をおしえてください」
「この〇〇を作るにはどの開発言語がおすすめですか？」
「なぜその〇〇が最適なのですか？」
「そのコンテンツをみんなが見れるようにする場合はどのような方法が最適ですか？」
「なぜその〇〇が最適なのですか？」
とこれでもかと質問攻めしていきます。
これこそが質の高い要件定義方法を実現するポイントです
他のWebサイトのナレッジと比べながら開発言語を決めるのも◎です
「この方法はどうなの？」
と提案すると
「それが最適ですねって教えてくれます」
GitHubのリンクをはるとそのリポジトリをよみこんで、感想をいってくれます。
更に質を上げるなら実際にClaudeが提示してきたものを調べてみるのもおすすめです。
この指示をしないとClaudeはおちゃめなので勝手にコードを記述しはじめます。
3.アイデアが決まって適切な技術スタックが決まった場合
では実際に実装したい機能をもとに要件定義や基本設計段階などの資料を作っていきましょう
- 追加機能がある場合
「〇〇という機能も追加したいです、実装可能ですか？コードを記述せずに結果だけおしえてください」
たまに可能じゃなくても可能とかいうので絶対に信じてはだめです。
しかしほぼ実装可能パターンが多いです。
私がやっている領域がSalesforceの開発というところもありナレッジがすくないので実装できるよ！ってうそつかれたりします🤣
機能要件と技術スタックが決まったらいよいよ仕様書の出力を開始します。
「今までの仕様をドキュメント化したいですアーティファクトを使いMarkdownで出力してください」
Claudeの神機能アーティファクトの出番です。
アーティファクトとは出力したものを右横に実際に表示してくれる機能です。
実際の画面はこんな感じです
そして右上にあるコピーボタンのプルダウンを開くとダウンロードと表示するので
作成したMarkdownをそのままMarkdown形式でダウンロードできます。
これこそが神機能です、実際に履歴をスクロールして実装したい内容とあっているか確認しましょう
出力してもらった資料に不備や不満があったら訂正をいれていきましょう。
私は基本的には以下の3点を出力しています
「今までの仕様をドキュメント化したいです。要件定義書と基本設計書とAPI設計書をアーティファクトを使いMarkdownで出力してください」
機能が多い場合は**「詳細設計書」**を出力させると実装機能の質があがります。
要件定義書には工数とかかいてあるけどそれは無視して大丈夫です
邪魔だったらIDEに読み込んだときに消してしまいましょう。
資料が完成したらダウンロードしてローカルに保存しましょう。
ClaudeCodeでの実装
ClaudeCodeでの開発効率をあげるMCPサーバーのインストール
初回使用時はClaudeCodeのインストールを忘れずにおこなってください
システム要件も忘れずにチェック！
Nodeなどをインストールしておきましょう
- ソフトウェア:
- Node.js 18+
- git 2.23+（オプション）
- PRワークフロー用のGitHubまたはGitLab CLI（オプション）
まずはClaudeCodeにMCPサーバーを追加していきます。
必須級MCPサーバー
1. serenaMCPサーバー
これにはuvのインストールが必要なので
READMEを翻訳しながらインストールしていきましょう
2.context7
ただその2つ(serenaMCPとcontext7)はこの記事の方法が一番うまくインストールできました。
ぜひ参考にしてください
個人的必須級MCPサーバー
3. ずんだもんでClaude Codeの通知を音声で受け取れるMCPサーバー
私はこれがなかったら今頃AI駆動開発やめていたかもしれません
必要なソフトはVOICEVOXです。
無料なのでインストールしていきましょう
それほどに素晴らしいMCPサーバーです。
npmインストールごにclaude mcp add voicevox -- npx @t09tanaka/mcp-simple-voicevoxをプロジェクトのターミナルに入力すればOKです
記事に紹介されているルールはCLAUDE.mdにでも記述すればokです
ネイティブWindowsのかたは以下を参考にしてください
MCPサーバーが無事にインストールできたら次のステップに進みましょう
ClaudeCodeでの初期のやりとり
ClaudeCodeは拡張機能があるのでDLしとくと便利です
簡単に起動できます。
まずはプロジェクトディレクトリに/docsを作りましょう
そしてそこに先ほどダウンロードした資料一覧を格納します。
ここでserenaMCPの出番です。
ClaudeCodeを起動してから以下のプロンプトを入力します
「docsフォルダにこのプロジェクトの仕様書一覧が入っていますserenaMCPで詳細に分析してください」
ここで一回senenaMCPを起動して作るもののオンボーディングをおこないます。
それの実行がおわったらプロジェクトのルールを作っていきましょう
まだ環境構築はしなくていいです。
serenaMCPでの分析がおわったら次に以下のプロンプトを入力します
「docsフォルダと.serenaの資料を参考にCLAUDE.mdを作成してください」
これでOKです
上記で作れなかったらCLAUDE.mdを手動でディレクトリに作成して
「docsフォルダと.serenaの資料を参考に開発のルールをCLAUDE.mdに記述してください」
そしてCLAUDE.mdの最後にずんだもんMCPのルールをコピペして貼りましょう(推奨)
CLAUDE.mdが作成できたら次にこの質問をなげかけます
「このプロジェクトの仕様とルールを説明してください」
このコマンドで出力された結果と考えていたものと差異がなければOKです。
足りないルールやしてほしいことがあればCLAUDE.mdを編集して
「更新したのでプロジェクトの仕様とルールを再度説明してください」
そんな感じでOKです。
環境構築方法は自分で行うかClaudeCodeに任せるかはお任せします。
ClaudeCodeに「環境構築して」って伝えると多分仕様書あたりに環境要件がかいてあるので
それ通りにClaudeCodeがうごきます。
ただNodeがはいっているのにNodeダウンロードしたりしはじめるので
プロンプトで適宜制御する必要があります
おすすめはプロジェクトのディレクトリにフォルダを作成してもらうことです
「仕様書に基づいて必要なフォルダを作成してください実装するコードのファイルは生成しないでください」
実装するコードのファイルは生成しないでくださいを教えてあげるのは
ClaudeCodeは実際のファイルテンプレートまで作ってくれるからです
ルール作りのコツ
実際につかいたいライブラリのURLありませんか？
そのURLをClaudeCodeに教えてあげてルール化するのもおすすめです。
私が開発している領域はSalesforceなのでデザインの基準になる最新のライブラリを
最初はClaudeCodeが知りませんでした。
URLをおしえて「このサイトの〇〇を関連リンクも含めてこの基準で実装するようルール化して」
なんていうこともあります。
さいごに
最近Codex推しが進んでいますが、
最近出力したコードの精度はバグが原因でしたと公式アナウンスがでたので
私はこれからもClaudeCodeしか信じません😹
実際にCodexもつかいましたが出力速度のちがいでClaudeCodeを継続してつかっています
あとはアーティファクトが便利すぎて他の選択肢がありません。
Obsidian使いのわたしには絶対にClaudeなのです…
はじめて記事を作成したので拙い文章で申し訳有りませんでした🙇♀
ぜひ皆さんにとってClaudeの上手な使い方の参考になれば幸いです。
よければXのフォローお願いします！
日々の励みになります、よろしくお願いします！
Discussion