背景や目的

---

以前の記事では、ClaudeのAI駆動開発ツールであるCoworkとCodeを使い、製品改修を試しました。
（記事はこちら：AI駆動開発で製品改修を試した
　　　　　　　　AI駆動開発で製品改修(Claude Code/Cowork比較)）

今回は、もっと難しい事を試してみます。ミニ版ではありますが新規開発をさせてみます。
普段、エンジニアが担当するような設計書作成、PG作成、デプロイ等を、AI駆動開発ツールがどこまで代替できるか確認します。

開発の方針

---

前回は、Claude CodeとClaude Coworkを両方試しましたが、ツールとしては今回はClaude Coworkを使います。
そして、一般的な業務アプリのミニ版として「日報管理システム」を新規開発します。
ポイントは以下の通りです。
１．利用ツール
　Claude Coworkを利用
２．利用AIモデル
　Opus 4.8を利用　※Fable5利用停止のため
３．開発品
　「日報管理システム」を新規開発
４．仕様概要
　社員本人は自分の日報を登録・閲覧し、管理者は全員分の日報を確認
　データは、利用者マスタと日報情報をDBで保持
５．実行環境
　AWS Lambda上でWebアプリとして動作

進め方の案

---

やってみないと詳細は分かりませんが、このように進めてみます。

１．Claudeの準備
　Claudeを使えるようにセットアップし、Claude Desktopをダウンロードします。
２．Claude Cowork上でプロジェクトを作成
　Claude Cowork上で新規プロジェクトを作成します。
３．設計書作成
　雛形を提供して作成したいアプリの設計書を作成してもらいます。
４．PG作成
　プログラムを作成してもらいます。
５．デプロイ
　作成されたプログラムをAWS上にデプロイします。
　今回は手作業でやります。
６．AWSとGoogleAuthセットアップ
　アプリの動作に必要な構築と設定をします。
７．動作確認
　実際にアプリを操作し、想定通りに動作するか確認します。

１．Claudeの準備

---

Claudeのサイトにアクセスし、Claudeを利用できるように準備します。
Claude Desktop内のClaude Coworkを使うため、Claude Desktopアプリをインストールします。なお、Claude Code/Coworkの利用には、Proプランへのアップグレードが必要です。

インストール手順は以前の記事と同じため、そちらを参考にしてください。→参考記事：AI駆動開発で製品改修を試した

インストールが完了すると、起動時以下の画面が表示されます。

Cowork画面が表示されれば、Claudeの準備は完了です。

それでは、次に進みます。

２．Claude Cowork上でプロジェクトを作成

---

開発用の作業エリアとして、プロジェクトを作成します。
用意済みの開発フォルダをClaude Coworkが参照できるように設定します。

・先程ダウンロードしたClaude Desktopの画面を開きます。

・左メニューで「プロジェクト」を押します。

・右側にある「新規プロジェクト」を押します。

・「既存のフォルダを使用」を押します。

・「フォルダを選択」押して、用意済みの開発フォルダを選択します。

選択完了後以下の画面が表示されました。

・名前欄にプロジェクト名等を下表の通りで入力し、「プロジェクトを作成」を押しました。

名前	日報管理システム（新規開発）
手順	ここに設計書雛形や試験仕様書雛形がセットされます。 それを使ってClaudeはアプリ作成をします。 具体的な指示は別途与えます。
ファイルを追加	無し

作成が完了すると、以下のようなプロジェクトホーム画面が表示されます。

３．設計書作成

---

ここから、Claude Coworkに新規開発を依頼します。

開発方針としては、以下の通りです。作業の役割分担を整理しました。

アイテム	作成者
設計書	AI　(雛形は人間提供します)
PGファイル	AI
DBファイル	AI
デプロイ手順	AI
デプロイ作業	人間
動作確認	人間

実際の開発案件では、試験もありますが、今回は割愛します。

まず、設計書を作成しましょう。
設計書の雛形として、Excelファイルをプロジェクトフォルダ内に配置しました。
雛形には複数のシートがあり、主な内容は以下の通りです。

シート名	記載する情報
表紙	アプリ名、作成日、作成者、版数など
改訂履歴	版数、改訂日、改訂内容、改訂者
基本情報	本書の位置づけ、開発名称、本アプリの概要、など
基本設計1(DFD)	機能、データ、外部サービスの関係
基本設計2(テーブル一覧)	利用するテーブルの一覧
基本設計3(テーブルレイアウト)	各テーブルの項目定義
基本設計4(画面リスト)	画面の一覧。画面毎の設計方針等
基本設計5(実行環境)	実行環境を記載
画面10(〇〇画面)	各画面内の構成要素を定義
画面10(〇〇画面)詳細	各画面内の構成要素毎にロジックを記載
ファイルリスト	作成するPGファイル、設定ファイル
コーディング方針	コード作成時の基本ルール

以下は実際のエクセルのイメージです。

今回の要求内容は、基本情報シートに人間(私)が記載しておきました。基本情報：上の中央の図

これを雛形に、設計書を作成してもらいます。
・実際の指示文は以下の通りです。これを入力欄に入力しました。

まず設計書を作成して下さい。以下がその雛形です。このエクセルファイルに記入して完成させて下さい。 C:\Users\v-hegde\Desktop\日報管理システム\開発設計書_日報管理_org.xlsx 作成方法は以下の通りです。 1.各シートで、作成者や更新者の記入欄があります。それはあなたの氏名(AI太郎)を記入して下さい。承認者の欄は、私ヴァルンが記入しますので、追記は不要です。 2.シート「改訂履歴」は、作成(修正)する度に、１行追記して下さい。 3.シート「基本情報」に、今回開発するアプリの要求情報が記載されています。これを参照し、それ以降のシート内を作成して下さい。 4.今回の開発でDB等の静的保存データが含まれる場合は、そのデータフロー図を、シート「基本設計1(DFD)」に記入して下さい。 5.今回の開発でDBを使用する場合は、そのテーブル一覧を、シート「基本設計2(テーブル一覧)」に記入して下さい。 6.今回の開発でDBを使用する場合は、テーブル毎のレイアウト情報を、シート「基本設計3(テーブルレイアウト)」に記入して下さい。 7.シート「基本情報」を参照し、開発すべき画面(機能)の概要情報をリストアップして、その結果をシート「基本設計4(画面リスト)」に記入して下さい。 8.今回開発するアプリの実行環境について、シート「基本設計5(実行環境) 」に記入して下さい。 9.シート「基本設計4(画面リスト)」でリストアップされた各画面毎に、シート「画面10(〇〇画面)」を作成して下さい。その内容は以下のように作成します。 (1)そのシート名の〇〇は、シート「基本設計4(画面リスト)」で記入した名称に変更して下さい。 (2)シート内左部分には、画面の完成図を記載し、その中に全ての構成要素を記入し、番号を付記します。(例)1.-1や1.-2 (3)シート内右部分には、左部分で示した全ての構成要素の情報を記載します。具体的には、構成要素番号、構成要素名称、仕様概要、をそれぞれ記入します。 10.シート「画面10(〇〇画面)」定義した構成要素について、具体的な仕様をシート「画面10(〇〇画面)詳細」に、以下の要領で記入して下さい。 (1)まずそのシート名の〇〇部分を、シート「基本設計4(画面リスト)」で記入した名称に変更して下さい。 (2)シート内では、3,4行目に記載された見出し列に従って記載します。まず、構成要素の番号と名称を合わせて下さい。 (3)シート内の、それ以降の列で、タイプ、必須／任意、タイミングは、選択肢があるので、その中から記入して下さい。 (4)シート内の、その他の列は、3,4行目の記載内容を良く理解し、その内容を記載します。 11.最終的に提供して頂くファイル情報は、シート「ファイルリスト」に記入して下さい。 12.シート「コーディング方針」には、コード作成時の注意事項が記載されています。コード作成時には、これを遵守したコードを作成して下さい。

・「↑」を押して実行します。

しばらくしたら、Claude Coworkから「設計書に入る前に、スコープを2点確認させてください。」と質問がありました。

確認された2点は、以下の通りです。
・アプリの画面構成数 = 4画面(推奨)
・DBエンジン = MySQL/Aurora MySQL(推奨)

・今回は、Claude Coworkの推奨通りに下記を選択しました。

その後、Claude君は内容を確認しながら、コマンドの実行とタスクの更新を順を追って進めた。
エンジニアらしく、報連相しながらちゃんとコミュニケーションしてくれましたね。

約14分後、設計書の作成が完了したという回答が表示されました。

早速確認してみます。Excelファイルを開きます。

確認したところ、以下の点が気になりました。
・セル内のテキストが見切れている箇所がある
・元の雛形からフォントが変わっている
・画面リストや画面設計の一部が、テキスト中心で分かりにくい
・DFDや実行環境図で、コンポーネントとデータの関係が分かりにくい
・内容は作成されているが、設計書としては体裁修正や画像追加が必要

そのため、追加の修正指示を入力しました。

作成した設計書を確認しました。以下結果コメントです。修正をお願いします。 1.セル内テキストが表示上見切れている箇所があります。該当箇所の行の縦幅を拡げる等の対応は出来ますか？ 2.全体的に文字のフォントが変わってしまいました。元のフォントに戻せますか？ 3.基本設計4(画面リスト)の対象画面の欄には、実際の画面の画像を貼り付けて貰えますか？画像だけで分かり難い場合、記載したテキストの情報も必要に応じて残せば良いです。 4.基本設計1(DFD)と基本設計5(実行環境) でコンポネントとデータの間に線が無くてわかりずらいです。追加して綺麗に整理してくれませんか？ 5.画面10,20,30,40では左側のイメージがテキスト文のみでNGです。画面の画像を貼り付けて貰えますか？記載されたテキストは必要に応じて残せば良いです。

・「↑」を押して実行します。

フィードバックを反映して以下の通り色々処理と修正がされました。

約10分後に完了メッセージが表示されたため、修正後の設計書を確認しました。

画像の追加や体裁面の修正が行われ、気になった点の多くは改善されていました。また、不要な修正がなかった点も安心できました。
実際の修正は以下の通りです。

修正前：　　　　　　　　　　　　　　　　　　　　修正後：

まだ細かい修正余地はありますが、設計書としては70点程度の状態になった印象です。
追加で3〜4回ほど修正を重ねれば、100点に近づけられそうですが、このレベルでPG作成に進んでみます。

４．PG作成

---

作成した設計書をもとに、PG作成をしましょう。
あわせて、デプロイ手順書も作成してもらいます。
・入力欄に以下の指示を入力しました。

作成した設計書をもとに、プログラム作成に進めてください。 今回は、実際のAWS構築とデプロイ作業は私が行います。 そのため、デプロイ手順書についても、実行手順が分かるように作成してください。

・「↑」を押して実行します。

数秒後、デプロイ手順書の形式とコードの作り込み範囲について、以下の通り質問がありました。

・今回は、Claude Coworkの推奨通りに下記を選択しました。

選択内容を伝えると、その内容をもとにタスクを整理し、PG作成を進めてくれました。

約20分後、Claude Coworkは作業を完了し、コードとデプロイ手順書を作成してくれました。

出来上がったので、実際のファイルを確認してみます。
・開発フォルダを開きました。
以下の通り、PGフォルダとデプロイ手順書が作成されていました。

・PGフォルダを開くと、コードファイルが以下の通り配置されていました。

・デプロイ手順書を開いて確認します。

手順は丁寧に記載されていました。
内容を理解しながら、次はデプロイ作業に進みます。

５．デプロイ

---

デプロイ作業は、AIではなく人間(私)が実施します。

作業は、以下の手順で行いました。

1. DB作成（Aurora MySQL 作成＋スキーマ投入）
   日報情報を保持するため、Aurora MySQLを作成しました。あわせて、Claudeが作成したschema.sqlを使い、日報管理システムで使用するDBとテーブルを作成しました。
   参考URL：Amazon Aurora DBクラスターの作成　（AWSドキュメント）
   
2. 認証環境作成（Google OAuth クライアントID作成）
   Googleアカウント認証に必要なOAuthクライアントIDを作成し、アプリからログインできるよう設定しました。
   参考記事：AWS LambdaでGoogle認証 の構築１)と2)欄を参照。
   
3. アプリのビルドとサーバへの登録
   Lambdaで動作させるため、ローカル環境でコンテナイメージを作成し、ECRへ登録しました。
   参考記事：gpt-oss-20bをRAGツールに組み込んでみた の構築手順の3.と4.を参照。
   
4. アプリのエンドポイント作成
   ECRに登録したイメージを使い、Lambda関数（コンテナ版）を作成し関数URLを発行しました。また、DB接続情報、Google OAuthクライアントIDなどを環境変数に設定しました。作成後、関数URLをGoogle OAuthの承認済みJavaScript生成元にも追加しました。
   参考記事：OSS版EmbeddingモデルをAWSで試用した例　の「AWSで構築：コンテナをLambdaにセット」を参照。

上記は、AIが作成したデプロイ手順をみながら私が実行した内容で、少し大まかに記載しています。同じように試される場合に、詳細情報が必要な場合は上記リンクもご参照下さい。

やってみた感想：
実際に進めてみると、各サービスで「作成→設定→確認→修正」を繰り返す必要があり、経験のある私でもかなり時間がかかりました。
そのため、AWSやDockerの経験、アーキテクチャ理解が少ない場合、AIが作成した手順書だけで進めるのは少し難しいです。言い換えると、開発知識がないと理解不足で苦労しそうです。

６．動作確認

---

デプロイが完了したので、動作確認を行います。
いくつかの機能を確認します。
1) Googleアカウントでログインできること
2) 日報を新規登録できること
3) 登録した日報が一覧に表示されること
4) 詳細ボタンから日報詳細を確認できること
5) 管理者が社員の状況を確認できること

・関数URLにアクセスします。ログイン画面が表示されるかな。。。

表示された！デザインもまあまあかな。

次はログインですね。
・「Sign in with Google」ボタンをクリックします。

Googleアカウントの選択画面が表示されました。OK、ここまでは想定通りです。

・自分のGoogleアカウントを選択します。ログインできるか。。。。

出来た！日報管理システムのホーム画面が表示されました。青色を基調とした画面デザインですね。

次は日報を新規登録できることを確認します。
・「+新規日報登録」を押します。

・内容を入力して、保存を押します。

保存したら、ホーム画面に戻り1件が登録されている事を確認しました。OK！

・「詳細」ボタンを押します。日報詳細が確認できるかな？

出来た！OK。

・「一覧へ戻る」ボタン押すと、

ホーム画面に戻りました。Good！

最後に、管理者権限を持つアカウント(ATD)でログインし、自分が登録した日報を確認できるか試してみます。
・ログイン画面で管理者持っているアカウントからアクセスすると、

ログイン後、画面右上に「管理者」と表示され、社員を選択するオプションが表示されました。また、登録済みの日報も一覧に表示されています。

これで、日報登録から管理者確認まで、主要機能はOKで、成功です！

まとめ

---

Claudeを使って日報管理システムの新規開発を試しました。

設計書やプログラムの作成は、AIを使うことで工数削減ができた様に感じます。特に、最初のたたき台を作成し、それに対して人間が確認・指示・修正を加えていく進め方は、AI駆動開発の有効な使い方だと思いました。

一方で、実際に進めてみると、アーキテクチャ設計やAWS、Docker、認証、DBまわりの知識はやはり重要だと感じました。AI駆動開発で差が出るのは、AIそのものよりも、それを使う側の設計力や技術理解だと思います。

また、今回の規模では大きな問題にはなりませんでしたが、モデル使用量の上限が気になりました。上質モデルをどう安価に利用するか、今後の課題かもしれません。

今回、デプロイ作業は手作業で実施しましたが、ここにも工数削減の余地があると感じました。次回は、デプロイ作業も含めてAIにどこまで支援させられるかを試してみたいと思います。

AI ಯುಗದಲ್ಲಿ, ನಿಮ್ಮ ವಿನ್ಯಾಸ ಕೌಶಲ್ಯ ಮತ್ತು ತಾಂತ್ರಿಕ ಜ್ಞಾನವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು ಅತ್ಯಗತ್ಯ.
(AIの時代こそ、アーキテクチャ設計力と技術知識を磨く必要があります。)