前回は仕様書を作成し、それを元にアプリ開発を再スタートしました。「プロンプト一発」で作ったときと比べて見た目でどれだけ変わるものなのか、さっそく確認してみましょう。また、以降の開発を効率的に進めていける筆者なりの工夫も紹介したいと思います。
アプリの見た目は変化した?
それでは、第1回でプロンプト一発で作成したアプリと、第3回で仕様書を元に作成したアプリ(フェーズ1終了段階)のスクリーンショットを並べて比較してみます。
第1回のときのアプリ(左)と第3回で作成し直したアプリ(右)
あまり変わっていないのでは? と思われるかもしれません。確かに見た目の違いとしてはレイアウトが縦分割から横分割になったのと、ツールバーが単純なテキストラベルだけのボタンではなくなったくらいです。
UI要素がまだそれほど多くはないので判断が難しいところ……なのですが、「WinUI 3」というモダンなフレームワークによるバランスの取れたデザインになっているように感じますし、ダイアログなどもガイドラインに沿った見た目です。各部のアニメーションの仕方なども最新のWindowsアプリらしい挙動になっています。
ダイアログなどもWinUI 3のFluent Designに則った形に
また、ネイティブアプリなので当然とはいえ、生成されたexeファイルのダブルクリックで単体起動ができます。最初のプロンプト一発で作成したバージョンはそうではなかったので、ちゃんと仕様書で決めた通りの仕組みになっている、ということが分かります。
当たり前ですが、exeファイル直叩きで実行可能
現在のこの状態は、予定しているフェーズ6のうちまだフェーズ1の段階です。最小限の「起動してPDFを読み込み、保存できる」くらいの機能しかありません。ここから少しずつ機能実装していき、完成形に近づけていくことになります。
早く実用したいので、どんどんフェーズを進めて機能追加していきたくなります。が、そこは慎重にいきたいところ。もしすでに動作などに気になるところがあって、以降のフェーズでもその部分をケアする見込みがなさそうであれば、今の時点で問題解消しておいた方が安心・安全です。
仕様書でフェーズごとの計画を確認。現フェーズに関連する課題で、今後対処の予定がなさそうなら早めに解決しておきたい
たとえばスクリーンショットを見るとわかる通り、メニューのショートカット表記がWindows標準になっていないこと、PDFのサムネイルを選択したときのフォーカスが分かりにくいこと、などいくつか気になるところが見つかります。
それらを1つ1つプロンプトで指摘して修正するのもいいでしょう。ですが、もっと効率的に進められる方法があります。「課題・進捗管理用のドキュメント」を新たに作り、それを介して間接的にClaude Codeとやり取りする、というものです。
ドキュメントで課題・進捗を管理しよう
直接プロンプト入力していくのではなく、ドキュメントを介して間接的に指示した方がなぜ良い(と筆者が考えている)のか。
理由としては、プロンプト直だと「細かく指摘しにくい」うえに、「場当たり的な指示になりがち」で、さらには「何をやったのか後で振り返りにくい」ことが挙げられます。
短文で済む修正指摘ならプロンプト直でも問題ないけれど、長文で指示するときは面倒
追加したい機能や改善すべき箇所があるとき、AIに対してはできるだけ詳細に説明した方が正しく対応してくれる確率が高まります。「ここをいい感じに直して」みたいな短く漠然とした指示ではやはり「なんか違う」修正になってしまい、何度繰り返しても良くならなかったりします。
本当に「いい感じ」にしたいのであれば、ユーザーの考えや発生している現象を正確かつ具体的に伝える必要があるので、必然的に説明は長くなるはずです。狭いプロンプト入力欄は、そんな風に長く説明するのに向いたUIとは言えません。
それに、指摘箇所は1つだけとも限らないでしょう。一度にたくさんの追加したい機能や改善すべきポイントが見つかったときには、まとめて、あるいは順序よく対応してもらわなければなりません。その場の思いつきで指示するのではなく、他の課題との兼ね合いも考えながら、最も妥当と思える案に整理してから指示する、というようにした方がよりよい結果になるはずです。
そこで代わりに筆者がおすすめしたいのが「課題・進捗管理用ドキュメントを使う」というものなのです。最初のひな形は「今後の機能追加や修正箇所の指摘など課題管理するためのprogress.mdファイルを作って」のようにClaude Codeに依頼して作成してもらうと良いでしょう。
Claude Codeに作成してもらった課題・進捗管理用ドキュメント
Claude Codeにお願いすると、たいていはMarkdown形式のチェックリストで項目ごとの進捗を管理していく、いわゆるタスクリストが作られます。チェックリストの読み方・書き方は、とりあえず下記の3パターン＋αを覚えておけば大丈夫でしょう。
– [ ] 未解決の課題- [x] 解決済みの課題
– [~] 進行中の課題
– [ ] 未解決のサブ課題
– [x] 解決済みのサブ課題
“`
新たに改善すべき箇所が見つかったら、テキストエディタでprogress.mdを開き、「- [ ] 新しい課題」のように書き加えていきます。そして、Claude Code上では「progress.mdにある課題に取り組んでください」のように指示します。
こんな風に気付いた課題を書き加えていきます
ユーザーの側では、Claude Codeにやってほしいことをどんどんprogress.mdに追記していき、プロンプトでは参照の指示だけをする。AI側で対処が終わったらアプリを動かして確認し、解決したら「次の課題に取り組んでください」と入力する、という繰り返しです。
タスクリストのチェックのオンオフはClaude Codeが適宜やってくれるので、少ない手間で自然と進捗管理ができるようになります。
楽ができるワークフローを作り上げよう
ただ、こうした流れで作業するようになると、次第に「progress.mdにある課題に取り組んでください」などといちいち指示しなければならないことすら面倒になってきます。このあたりも省略できないものか……と思ったときに役立つのが「CLAUDE.md」というファイルです。
これは「Claude Code」にとってのいわば「取説」です。処理開始時にCLAUDE.mdがあるとClaudeはセッション開始時に自動で読み込み、中に書かれている内容を把握して、それに則って作業を始めます。
なので、CLAUDE.mdに守ってほしい一定のルールを記述しておけば、あとは勝手にそれに従ってユーザーの望む流れ(ワークフロー)で処理してくれます。
たとえば「ユーザーが“次”と言ったらprogress.mdを参照して課題を抽出し、次にすべき作業を確認すること」のように書いておくと、ユーザーは「次」と1文字入力するだけで、勝手にClaude Codeが次にすべき作業を特定して進めてくれるわけです。
「次」や「OK」と言ったら所定の手順で作業するようにCLAUDE.mdでルール化
「次」と入力するとprogress.mdから次の対処すべき課題を探して選択肢表示してくれます
このCLAUDE.mdもゼロから作成するのは少し面倒なので、いったんClaudeにCLAUDE.md自体の作成もお任せしてしまいましょう。それをベースに細部を調整して、自分好みの挙動にしていくのがおすすめです。
これを応用することで、完了時にテストを行なったり、外部の仕組みを利用してコードのバックアップを残したり、といったような作業の自動化も可能になります。
今回はあえて触れませんが、Claude Codeにはスキルやエージェントなどの仕組みもあり、それらを活用することでより複雑な作業を自律的に実行したりもできます。ユーザーの負荷を軽減しながら開発効率を高められ、高速なアプリ開発につなげられるでしょう。
「OK」と入力したときは次のステップを選択肢から選べるように
progress.mdに作業内容も書き加えてもらうようにすると、後々リグレッション(巻き戻り)が発生した際にも再修正がしやすくなりますマネジメントの仕方やアイデアが大事!
ここで紹介した手順や手法はあくまでも一例で、ベストと感じられる進め方はきっと1人1人異なることでしょう。しかし、どの方法が自分に合うのかは実際に試してみないと分かりません。とりあえずチャレンジして、何度も成功と失敗を繰り返して学んでいくことで、自分にとって最適な方法を見つけられるものだと思います。
当初予定していた機能がひと通り揃ったフェーズ4まで完了した状態がこちら
もちろんプログラミングに関する専門的な知識はもっているに越したことはありません。が、AIコーディングにおいてはコーディングそのものを学習する(コードを書ける・読めるようになる)よりも、技術トレンドを広く押さえつつ、エンジニアリング周辺のマネジメントをどう組み立てていくかが大事です。
そして、実現したいアイデアを持っていることが何よりも強みになります。多くの人に使ってもらえるアプリ、サービスを作り上げるには他にも考えるべきことが山ほどありますが、「自分専用」ならすぐに実現に向けて作り始められます。まずはその一歩をぜひ踏み出してみてください。