株式会社OMJテクノソリューションズ Advent Calendar 2025の記事2日目ェ！！
どうもwalrustuskです。セイウチの牙って意味です。
AIを使った開発って、まだ開発フローにおけるデファクトスタンダードがなく、
大企業であっても「〇〇流！AI駆動開発の進め方」というウェビナーをよくお見掛けします。
結果開発がどの段階からなのか、誰が使うのか、どれだけ価値を持続して提供するものなのか、どのような課題を解決するのか
によって、手段となるAIサービスは異なってきます。
だからこそ広い視野で即時分析、利活用、ナレッジ蓄積が必要です。
今回は以下のパターンで、僕がイイナ！と思った活用パターンです。
また、本記事はAI駆動開発 × モック生成 × Spec Kit導入までの流れをまとめたものです。
環境構築の詳細については割愛している部分もありますので、他の記事と併用しながらご覧ください。
これ以外にもまだまだベストプラクティスな手法があるかと思いますので、ぜひいいね♡とコメントをください👍
プリセールスが顧客課題のヒアリングを行い、迅速にモックアップを提案し顧客とイメージの認識合わせを行う。
モックがある程度できた状態のものを再度要件定義として落とし込む。
この記事の手順では以下の環境を利用しています。
ChatGPT Pro
github Spec Kit
github Copilot Pro
Visual Studio Code
モック生成
まずはじめに顧客課題をヒアリングしたのち、顧客情報を載せない前提で、ソフトウェアの場合はモック制作に入ります。
このときノーコードAI開発ツールとしては何が適正ですかね？
Replit？
bolt.new?
v0?
それぞれ適正はありつつ、使用感としてはReplitが強いイメージです。ただ、bolt.newがここ最近v2にアップデートしたり、1日1日単位で進化するためこの記事自体も一瞬で石化しちゃいそうデス。
私の場合はChatGPT Canvasで進めています。
ChatGPTにはコード生成とプレビュー機能が搭載されているのですが、HTML,CSSぐらいしかできないイメージでして、普通にReact組んでくれるんですね。驚きでした。
先ほど挙げた３つのツールは利用量制限・クレジット制なので、うまく節約しながらでも特に小規模開発などはいつの間にか利用量が枯渇しちゃっているので、ある程度のクオリティを担保しながらプレビューもしてくれるChatGPTは高速でフィードバックできるんですよねー！
これは、私なりのやり方ですが、AIを頼るとどうしても自分の頭へのインプットを怠っちゃうというか、どんどん進められてしまうので、ドメイン知識がないままモックというマイルストーンを目指してしまうんですよね。
その解消として、まずはChatGPTとドメイン知識を相互理解する形で目的とコンセプト、業界理解やまずは表に落とし込んだりで人間（自分）への理解を深めます。
この作業のやりこみ具合で、モックがありきたりなサービスになったり、モックを超えられずに終わってしまうような気がしています。
機能面についてですが、エラーは出ます（笑
Replitなどはエラーも自動修正ですが、ChatGPTはエラー出っぱなしであることが多いです。
ただ、それもFixボタンを押すことで即時修正するので、これはラクチン。
Canvas特有の仕様で、ひとつのjsxに全てまとめてくれるケースが多いです。
タブ設置等複数ページ遷移も表現できますがこれは実際の開発時に利用するときは最適化する必要がありそうです。
モックアップとして完成したら、実際にリポジトリに落とし込みをします。
Spec Kitによる設計フェーズ
モックが一通り形になったら、本開発に入っていきます。
AI駆動開発において、AIに任せすぎるとどうしてもチェックやAIが生成したものの理解が甘くなってしまいがちです。
その中で仕様駆動開発の手段としてSpec Kitを取り入れています。
Spec Kitは仕様からソフトウェア開発計画、タスクへの分解、実装を程よく体系化し、AIエージェントと協調してソフトウェア開発を効率的に行えるようにするオープンソースツールキットです。
人間が仕様を書き、AIが技術計画や実装計画を作るため、曖昧なソフトウェアにならずに開発を進めることができます。
もちろんVibe Cordingの精度も上がっては来ましたが、実際の開発では機密性、信頼性の観点で生成コードの意図がブラックボックス化しやすいので、現時点ではまだまだ不安なレベルです。なのでしっかり人間も理解しながら、人間がちゃんとやるべきところをやったうえでの実装をAIに任せるパターンが現状のベストなのではと思っています。
ベースの準備
まずは先ほどChatGPTで作成してモックとして完成した状態で、jsxのダウンロードが可能なので、ダウンロードします。
また、Spec Kitに仕様書を生成してもらうためのプロンプトもChatGPTで作成します。
このアプリをGithub Spec Kitで開発していきます。
Spec Kitの手順に沿って実装するために、まずはモックの要件が満たせるような、/Specifyコマンドのプロンプトを作成してください。
つづいて、jsxファイルをダウンロードしたらgithubリポジトリを作成し、ローカルにClone。
あとは手順通りにspeckitを使ってプロジェクトを作成してください。
※他の方もご紹介いただいていますので、他の方の使い方をご参考ください。
プロジェクトの初期化を行うと、.githubやscriptsフォルダ等が生成されると思います。
ルートディレクトリにmockディレクトリを作成し、そこに先ほどダウンロードしたファイルを格納します。
仕様の作成
まずは仕様を作成していきます。VSCodeの拡張機能でGithub Copilotを利用し、チャットモードから入力していきます。これはこの限りではなく、ターミナル等からもご利用可能です。
Spec Kitが読み込まれているとチャットの候補にもでてくるっぽいです。
まずですが、.github/prompts以下の各ファイルに日本語で出力するように指示を入れます。
仕様書を日本語中心で読みたいので日本語で仕様が出力されるようにしています。英語がわかる人は不要です。。
あとは実際に指示していきましょう。
/specify [先ほどChatGPTで生成したプロンプトをコピペ]
生成されたファイルを見ながら、
/clearifyコマンドを使って再定義や仕様の明確化を行います。
実装計画
要件の明確化が出来たら続いて技術的な詳細を詰めていきます。どういった技術を使うのか、どのような設計にするのか等。これは /planコマンドで指示していきます。
この技術要件や設計をベースに、最後に /tasksコマンドでタスクに落とし込んでくれます。
ここまでやったらあとはエージェントやメンバーに開発をタスク分けして振っていく形になるかと思います。
ただし、上記のコマンドを実行していくと、どこかの拍子で矛盾の有るタスクや仕様が出てきます。
これらをもちろん人間の目で判断して直していくのも必要ですが、/tasksコマンドでタスク分けを終えたあとで、/analyzeコマンドを実行することで、整合性チェックが可能です。
AIエージェントで進めていくと、どこかでコマンドを使わずにチャットボット上のエージェント単独で修正をお願いするケースも出てくるかと思います。極力Spec Kitのコマンドを使って構築していきたいですが、このパターンがでてきたときに/analyzeを使って整合性を保つように対応していくとよいかと思います。
ここまで来たら /implementコマンドで実装でエージェントを回していくことで開発に素早く入ることができるかと思います。
終わりに
いかがだったでしょうか？
だいぶ駆け足となってしまっておりますが、AIサービスの使いやすさの感じ方は人それぞれということもあり、そこのつなぎこみが特殊ケースとなってしまうことが多いと思います。
AIがどんどん進化していく中、AI利活用のスタンダードも日々変わっていく中ではありますが、顧客事情や自社基準によって使えるサービスも制限されるかと思っています。
この手順の他に上流担当の方は設計書への落とし込みや実際に手を動かして設計も必要だったりすると思うので、一概にやり方はこの限りではないですが、業界全体でより良い課題解決手段を導くために頑張っていけたらと思います！