仕様駆動開発は推奨される手法であるが、非技術者にとって初期仕様の作成は大きな障壁となっている。本動画では、Anthropicが提供するClaude Codeの「Ask User Question」機能を活用し、簡潔な要件記述から詳細な技術仕様書を作成するプロセスを実演する。テキストから画像を生成するアプリケーション開発を例に、APIドキュメントの参照から質問ベースの仕様策定、実装、UI改善までの一連のワークフローを紹介。さらに既存コードベースへのダークモード実装を通じて、新規プロジェクトだけでなく既存プロジェクトにも適用可能なこの手法の汎用性を示している。非技術者でも学習しながら高品質な仕様書を作成できる点が本手法の最大の特徴である。
仕様駆動開発の課題と解決策
仕様駆動開発について話しましょう。誰もがそれを推奨していますが、非技術者や開発者ではない人間として、どうやって最初の仕様を考え出せばいいのでしょうか。良いニュースは、本当に優れたツールがいくつか存在するということです。私が最近試しているのはAnthropicのもので、Ask User Question Toolと呼ばれています。
仕組みはこうです。実装したい機能の最初の説明を考え出します。Claudeがさまざまなトピックについて多数の質問をしてきて、それから実装したいプロジェクトの技術仕様を構築する手伝いをしてくれるのです。これを実際にお見せしましょう。
実践:テキスト画像生成アプリの仕様作成
完全に新しいセッションがあり、specs.mdというファイルがあるとしましょう。Claudeに何を構築してほしいかを記述して、それからClaudeと繰り返しやり取りをしながら、このプロジェクトの完全な技術仕様を構築していきます。
テキストから画像へのジェネレーターを作成します。ユーザーはテキストの説明を提供し、それからGoogle Nano Banana REST APIを使用して4つの異なる画像を生成します。APIは同時生成をサポートしていません。そのため、複数の異なる呼び出しを作成または実行する必要があります。SDKは使用しないでください。REST APIを使用してください。ドキュメントへのリンクを提供します。
書き起こしには満足しています。今度はREST APIにアクセスする方法についてのドキュメントを提供します。これらは単なる初期仕様です。正確に何が欲しいかを説明しただけです。技術スタックについては伝えていません。Claude Codeを使ってこれらの仕様を洗練させる手伝いをしてもらいましょう。
Claude Codeを起動します。YOLOモードになっているので、一度に何でもできるようになっています。継続をクリックします。
Ask User Question機能の活用
開発プロセスのこの部分で使いたいプロンプトがあります。これはClaude Codeチームの一員であるTaricからのもので、彼らはAsk User Questionと呼ばれるこのツールを構築しました。これ以前は、私は手動でこれを行っていました。OpusまたはSonnetとセッションを持ち、提供した仕様に基づいて質問をするよう依頼していました。
行ったり来たりして、それから議論したすべてを取り上げて新しい仕様ドキュメントを作成していました。しかし今では、このプロセス全体が本当に正式化されており、実際に非常に役立っています。プロンプトをコピーしたので、これを送信します。グリーンフィールド、つまりゼロからのプロジェクトで開始する場合に本当にうまく機能しますが、ブラウンフィールドプロジェクトでも役立つ可能性があります。
質問ベースでの仕様の精緻化
ここで質問を開始しました。通常、質問のブロックが表示され、4つのオプションのうち1つを選択することになります。例えば、ここでは4つの画像生成のうち2つが順番に失敗した場合、UIは部分的な結果を即座に表示すべきか、それともユーザーに決定を促すべきかを尋ねています。最初のものを選択しましょう。
次に、APIが同時呼び出しをサポートしていないため、20〜40秒間の4つの連続生成はユーザーにどのように表示されるべきでしょうか。別の2つの質問のセットです。システムはAPIに送信する前にユーザープロンプトを強化すべきか、それともそのまま渡すべきでしょうか。ウェブのみと言って、異なるバリエーションを生成するためにAPIを信頼します。
Gemini APIの管理方法を尋ねています。UIでユーザーが提供すると言います。さて、これらは私が本当に考えてもいなかったことの一部です。Claudeが非常に技術的な質問をいくつかできることを見るのは本当に良いことで、これがあなたが始めたいことです。
フロントエンドのテキストタグについて尋ねています。HTML CSSで行きます。非技術者としても、これを自分自身の学習に使うことができます。利用可能なさまざまなオプションについて多くを知ることができます。LLMやエージェントにあなたのために選択させるのではなく、実際に調査を行って最良のオプションを選択できます。
4つの画像がレイアウトの観点でどのように生成されるべきかを尋ねています。2番目のもの、ミニマルでクリーンなものを選択します。送信します。場合によっては、答えを入力する必要があります。例えば、モバイル画面でどのように表示されるかを尋ねていますが、デスクトップのみにしたいのです。モバイルなしです。
詳細な技術仕様書の完成
合計26の質問をされ、そのすべてが本当に良い質問でした。これらは、エンジニアがアプリの本当に良い設計を考え出すためにあなたに尋ねると想定される種類の質問です。シンプルな仕様ドキュメントから、アーキテクチャの詳細、つまり正確にアーキテクチャがどのように見えるべきか、API統合がどのように見えるか、APIキーがどのように管理されるか、ユーザーインターフェースに関する情報、API呼び出しを行ったときに何が起こるか、プロジェクトのファイル構造がどのように見えるかといったものに進化しました。非常に詳細な仕様です。
これをClaudeに渡す前に、実際にこれを確認して、Opusが何も見逃していないことを確認することを強くお勧めします。しかし、満足したら実装フェーズに進むことができます。
プランモードでの実装
私が通常行うことは、この会話をクリアして、作成した仕様に基づいてすべてを実装するようClaudeに依頼することです。しかし、もう1つ通常行うことがあります。プランモードで動作させたいのです。Shiftキーを2回押すと、プランモードになります。
作成した仕様を取り、それに関するプランを作成するようClaudeに依頼し、そのプランを実装します。プランモードでspecs.mdファイルの仕様を使用してテキストから画像へのアプリを作成するように言いました。これを送信します。Claudeは仕様に基づいてプランを考え出し、必要に応じて調整できます。
考え出したプランはこちらです。index.htmlを作成し、次にCSSを作成します。これがユーザー管理とデータストレージの外観です。すべてに満足しているので、これを受け入れて任せます。
UIの改善とフロントエンドデザインスキル
アプリは完全に機能していますが、作成されたUIが気に入りません。Chrome用のClaude in Chrome拡張機能を使用してウェブページを見てもらい、UIの改善を提案してもらいます。
今、フロントエンドデザインスキルを使って改善を実装しています。これが考え出したものです。退屈なデザインを取り、本当に素晴らしい見た目のものに変換しましたね。カスタムプロンプトまで追加しました。これらは事前構築されたテンプレートです。実際にこれらの1つを試してみましょう。APIテキストを削除して、ここにAPIを追加したことさえ確認できます。
フロントエンドデザインスキルを持つOpusはかなり素晴らしいと言えます。Gemini 2と同等です。かなり素晴らしいです。1つ注意点は、粒状の効果が画像にもかかっていることです。しかし、これがダウンロードされた完全解像度の画像です。画像は良く見えます。その効果を取り除くためにOpusで行う必要がある簡単な繰り返しのようなものかもしれません。
しかし全体的には本当に満足しています。これが、非常にシンプルな基本的なプロンプトからClaude Codeの助けを借りて完全な仕様に至る方法です。
既存コードベースへの適用例
ブラウンフィールドプロジェクト、つまり既存のコードベースでもまったく同じことができます。変更したいことの仕様から始めて、Claudeに手伝ってもらうだけです。
別の仕様ドキュメントを作成しました。ここでは、既存のコードベースにダークモードを実装するよう依頼するだけです。ユーザーがライトモードとダークモードを切り替えられるダークモードの実装を手伝ってください。これを保存します。これについても、現在の会話をクリアして新しく開始します。
最初に使用したのとまったく同じプロンプトを使用しています。これは単なる例です。Opusに依頼するのは非常にシンプルなことだとわかっていますが、既存のコードベースで作業するプロセスを示したいのです。今回は23の異なる質問をされました。ダークテーマへの切り替えだけにしては多いですが、これらは実際に本当に優れた技術的詳細です。
これが私たちの新しい仕様ドキュメントで、以前行ったのと同じプロセスを経ます。今回は、既存のコードベースにこれを実装するようClaude Codeに伝えます。
実装結果とまとめ
ダークモードの動作がこちらです。Claudeはバックグラウンドでこれをテストしています。おそらくちらつきが見えるでしょうが、これはシンプルなユーザープロンプトから、この新しいAsk User Question Toolを使用してより詳細な技術仕様を構築する手助けを得る方法の簡単な例でした。
これらは非常にシンプルな例でした。おそらくより複雑な問題やプロジェクトでこれらをテストしたいでしょう。しかし、アイデアは、仕様の構築を手伝うためだけでなく、学習を手伝うためにもこれらのツールを使用したいということです。特にスキルセットを持っていない場合はそうです。例えば、私はデータサイエンティストやバックエンド開発者に近いです。
フロントエンドスキルは本当に持っていませんが、これらのツールを使用することで、利用可能なさまざまなオプションについて多くを学ぶことができます。とにかく試してみてください。また、プロジェクトの仕様を構築するために何を使用しているかを共有してください。その情報を下のコメント欄で共有してください。とにかく、このビデオが役に立ったことを願っています。
コメント