目次
- はじめに
- 企画フェーズ：対話型AIとの壁打ち
- 要件定義・設計フェーズ：Claude Codeに任せる
- 実装：バックエンド（Python + boto3）
- 実装：フロントエンド（React）
- 結合・動作確認
- 応用編：フロントエンドUIのブラッシュアップ
- トラブルシューティング集
- まとめ・今後の展望
1. はじめに
こんにちは。
アプリケーションエンジニア3年目のKokiです。
普段はAIやAWSサービスにあまり馴染みのない部門で働いていますが、最近は社内で自主的にAWSやAIの知見を広める活動に取り組んでいます。
前編では、AWSアカウントの準備からIAMユーザーの作成、AWS CLI・boto3のセットアップ、VS Code・Claude Codeの環境構築までを行いました。まだ前編をお読みでない方は、先にそちらから進めることをおすすめします。
後編となる本記事では、いよいよ「何を作るか」を決めるところから始め、Claude Codeを使った要件定義・設計・実装、そして動作確認までを一気に進めていきます。
- 前編：全体アーキテクチャの説明 → 環境構築まで
- 後編（本記事）：企画 → 要件定義・設計 → 実装 → 動作確認 → まとめ
環境はすでに整っている前提で進めるので、手を動かす部分に集中して読み進めていただけます。
想定所要時間
後編を通しで実施する場合、必須パートのみで約2時間、任意の応用編（UIブラッシュアップ）まで含めると2.5〜3時間程度を見ておくと安心です。内訳の目安は以下の通りです。
| 章 | 内容 | 目安時間 |
|---|---|---|
| 2 | 企画フェーズ（対話型AIとの壁打ち） | 20〜30分 |
| 3 | 要件定義・設計フェーズ | 15〜20分 |
| 4 | 実装：バックエンド | 20〜30分 |
| 5 | 実装：フロントエンド | 20〜30分 |
| 6 | 結合・動作確認 | 10〜15分 |
| 7 | 応用編：UIブラッシュアップ（任意） | 20〜40分 |
※上記に加えて、初めてBedrockやClaude Codeを触る場合は、トラブルシューティング（8章）への対応で15〜30分程度のバッファを見ておくとより安心です。
2. 企画フェーズ：対話型AIとの壁打ち
目安時間：20〜30分
環境が整ったところで、いよいよ「何を作るか」を決めていきます。ここではClaude Codeではなく、普段使っているChatGPTやClaudeのチャット画面を使って、企画のアイデア出しを行います。
2-1. なぜ企画は別のAIと壁打ちするのか
Claude Codeは従量課金制のため、まだ方向性が固まっていない段階の試行錯誤には、無料または定額で使える対話型AIの方がコストを抑えられるため、今回はこのような形式で実施します。
※Claude CodeをUSD 5しか課金していないため・・・
2-2. 実際のプロンプト例
以下のようなプロンプトで壁打ちを始めました。
AIチャットボットを作ろうと思っています。
以下の制約でアイデアを3つ提案してください。
- 使用技術：React（フロント）、Python（バックエンド）、AWS Bedrock（LLM）、boto3
- 実行環境：ローカル環境
- 開発者は自分1人、開発期間は1時間
- 実装にはClaude Code（AIコーディングエージェント）を使用するため、
コード自体を書く時間は短縮できる前提です。
一方で、設計判断・動作確認・トラブルシューティングは自分で行うため、
「機能の複雑さ」は多少高くても良いですが、
「同時に扱う要素・依存関係の数」は少ないシンプルな構成にしたいです
- AWS CLIにはIAMユーザーでログイン済み
- 想定ユーザーはまだ考えておらず、一緒に決めたい
- 今回のスコープ外：ユーザー認証、会話履歴の永続化、社内データ連携（RAG）
それぞれのアイデアについて、以下の項目で教えてください。
- 想定ユーザー
- コンセプト
- 主な機能
- 想定されるメリット
- Claude Codeを使って1時間で実装できそうか（実現性についてのコメント）
最後に、上記3案を「実装の速さ」「初心者への分かりやすさ」の観点で比較し、
どれが今回の条件に最も合うかもコメントしてください。
このように、制約条件（技術スタック、開発規模、想定ユーザー）を先に伝えることで、実現可能な提案が返ってきやすくなります。
そこで返ってきた案に対して、自分がやりたいと思った内容があれば、それを選択し、もしなければ、もう一度AIに尋ねましょう！
方向性が決まったら、その案に対して自分の価値観や理想をプラスしてオリジナリティを出しましょう。
2-3. 壁打ちの結果できた企画書（サンプル）
壁打ちを重ねた結果、以下のような企画に着地しました。（抜粋）
企画書はAIが読み取りやすいmdファイルで出力をお願いしましょう。
企画名：社内ナレッジ相談チャットボット（学習用MVP）
コンセプト：社内のドキュメントやルールについて、気軽に質問できるチャットボット。まずは汎用LLMとの対話のみのMVP（実データ連携は将来拡張）として作る。
主な機能：
- チャット形式でのQ&A
- 会話履歴の保持（セッション内のみ）
- シンプルなUI（入力欄・送信ボタン・会話表示エリア）
今回のスコープ外（将来拡張）：
- 社内文書を参照するRAG機能
- ユーザー認証
- 会話履歴の永続化
このくらいの粒度まで固まっていれば、次のステップ（要件定義・設計）に進む準備は十分です。ポイントは、最初から作り込みすぎず、MVP（最小限の実用製品）としてスコープを絞ることです。スコープを絞ることで、この後の実装もスムーズに進めることができます。
2-4. 企画フェーズで意識したこと
- 技術的な実現可能性と、ユーザーメリットを起点とした企画性、どちらにも偏らないバランスを取る
- 一度で決めようとせず、AIとの対話を何往復かして精度を上げる
- 出てきた企画案はあくまで土台とし、自分自身の考えを反映させて独自性のある企画に練り直す
3. 要件定義・設計フェーズ：Claude Codeに任せる
目安時間：15〜20分
企画書ができたので、ここからはVS Code上のClaude Codeにバトンタッチします。人×AIが考えた企画を、Claude Codeが実装可能な形（要件定義書・設計書）に落とし込んでいきます。
3-1. 企画書をClaude Codeに渡す
VS Codeでプロジェクト用のフォルダを作成し、そのフォルダをVS Codeで開いた状態でClaude Codeを起動します。企画書はテキストファイル（例：plan.md）としてプロジェクト直下に置いておくと、Claude Codeが参照しやすくなります。
ターミナルで以下のように指示を出します。
○○.mdに書いた企画書をもとに、要件定義書と基本設計書を作成してください。
以下の技術スタックを前提にしてください。
- フロントエンド：React（Node.js）
- バックエンド：Python、boto3
- LLM：AWS Bedrock（Nova 2 Lite、リージョンはus-east-1）
要件定義書はrequirements.md、設計書はdesign.mdというファイル名で、
このプロジェクトのディレクトリ直下に作成してください。
3-2. 出力された要件定義書・設計書の例
Claude Codeに指示を出すと、以下のような粒度でrequirements.mdとdesign.mdが生成されます（実際の出力は都度変わるため、あくまでイメージです）。
requirements.md（抜粋イメージ）
## 機能要件
- ユーザーはテキストを入力し、送信できる
- 送信されたテキストはバックエンドAPIに送られ、Bedrock（Amazon Nova）に転送される
- Bedrockからの応答をチャット画面に表示する
- 会話履歴はブラウザのセッション内（画面表示上）でのみ保持する
## 非機能要件
- ローカル環境（localhost）での動作を前提とする
- 認証機能は今回のスコープ外とする
design.md（抜粋イメージ）
## API設計
POST /api/chat
request: { "message": string }
response: { "reply": string }
## ディレクトリ構成
backend/
main.py … APIサーバー本体
bedrock_client.py … Bedrock呼び出し処理
frontend/
src/
App.jsx … チャットUI本体
3-3. 人間が確認・修正すべきポイント
Claude Codeが出力した設計をそのまま鵜呑みにせず、以下の観点で必ず自分の目で確認しましょう。
- スコープが企画書からずれていないか（勝手に機能が追加/削除されていないか）
- 使用するBedrockのモデル名やリージョンが、前編で設定した内容と一致しているか
- API設計がシンプルで、自分が理解できる範囲になっているか
ここで違和感があれば、「〇〇の部分をこう変更してください」とClaude Codeに追加で指示を出し、設計書を修正してもらいます。設計段階で違和感を解消しておくことで、後の実装がスムーズになります。
4. 実装：バックエンド（Python + boto3）
目安時間：20〜30分
設計書ができたら、いよいよ実装です。まずはバックエンドから進めます。
4-1. Claude Codeへの実装指示
design.mdの設計に従って、backend/ディレクトリにPythonのAPIサーバーを実装してください。
以下の点を満たしてください。
- フレームワークはFastAPIを使用する
- POST /api/chat エンドポイントを実装する
- boto3のbedrock-runtimeクライアントを使い、Converse APIでAmazon Nova
（モデルID: us.amazon.nova-2-lite-v1:0、リージョン: us-east-1）を呼び出す
- 認証情報は明示的に渡さず、aws configureで設定済みのデフォルト認証チェーンを
利用する前提とする（その旨がわかるようコメントを残す）
- Bedrock呼び出し失敗時はtry/exceptで例外を捕捉し、
適切なHTTPステータスコードとエラー内容をレスポンスとして返す
- フロントエンド（localhost:5173想定、Viteの開発サーバーのデフォルトポート）からのCORSを許可する
- 必要なライブラリをrequirements.txtにまとめる
4-2. 生成されるコードのイメージ（抜粋）
実際に生成されるコードは環境によって多少異なりますが、Bedrock呼び出しとエラーハンドリングの部分を抜粋するとおおよそ以下のような内容になります（importなど定型部分は省略しています）。
# backend/main.py（抜粋）
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:5173"],
allow_methods=["*"],
allow_headers=["*"],
)
# 認証情報は明示的に渡さず、aws configureで設定済みのデフォルト認証チェーンを利用する
bedrock = boto3.client("bedrock-runtime", region_name="us-east-1")
class ChatRequest(BaseModel):
message: str
@app.post("/api/chat")
def chat(request: ChatRequest):
try:
response = bedrock.converse(
modelId="amazon.nova-2-lite-v1:0",
messages=[{"role": "user", "content": [{"text": request.message}]}],
)
reply = response["output"]["message"]["content"][0]["text"]
return {"reply": reply}
except ClientError as e:
error_code = e.response["Error"]["Code"]
error_message = e.response["Error"]["Message"]
raise HTTPException(status_code=502, detail=f"{error_code}: {error_message}")
# backend/requirements.txt
fastapi
uvicorn
boto3
4-3. バックエンドの起動確認
Claude Codeに「バックエンドの起動確認をお願いします。」と伝えます。
※作成段階で起動確認を実施するケースもある。その場合は不要。
もしくは下記のコマンドで実行します。
cd backend
pip install -r requirements.txt
uvicorn main:app --reload --port 8000
起動後、Claude Codeに「疎通確認をお願いします。」と伝えます。
※作成段階で疎通確認を実施するケースもある。その場合は不要。
もしくは下記のコマンドで疎通確認をしてみましょう。
curl -X POST http://localhost:8000/api/chat \
-H "Content-Type: application/json" \
-d '{"message": "こんにちは"}'
{"reply": "..."}という形式でBedrockからの応答が返ってくれば成功です。
5. 実装：フロントエンド（React）
目安時間：20〜30分
5-1. Claude Codeへの実装指示
design.mdの設計に従って、frontend/ディレクトリにReactのチャットUIを実装してください。
- Viteを使ったReactプロジェクトとして構成する
- 入力欄、送信ボタン、会話表示エリアを持つシンプルなUIにする
- 送信時にバックエンド（http://localhost:8000/api/chat）へPOSTする
- 会話履歴は画面上のstateで保持する（保存はしない）
- APIリクエストが失敗した場合（通信エラー、レスポンスがエラーステータスの場合など）は、
例外を握りつぶさずに会話表示エリアにエラーメッセージを表示する
5-2. 生成されるコードのイメージ（抜粋）
実際に生成されるコードは環境によって多少異なりますが、送信処理とIME対応の部分を抜粋するとおおよそ以下のような内容になります（UIのレイアウト部分は省略しています）。
// frontend/src/App.jsx（抜粋）
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const [isComposing, setIsComposing] = useState(false);
// 送信処理：失敗時は例外を握りつぶさず、エラーメッセージをmessagesに追加して表示する
const sendMessage = async () => {
if (!input.trim()) return;
setMessages((prev) => [...prev, { role: "user", text: input }]);
setInput("");
try {
const res = await fetch("http://localhost:8000/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: input }),
});
if (!res.ok) throw new Error(`エラーが発生しました（status: ${res.status}）`);
const data = await res.json();
setMessages((prev) => [...prev, { role: "bot", text: data.reply }]);
} catch (error) {
setMessages((prev) => [...prev, { role: "error", text: error.message }]);
}
};
// IME変換確定のEnterでは送信しないようにする
const handleKeyDown = (e) => {
if (e.key === "Enter" && !isComposing) sendMessage();
};
// <input onKeyDown={handleKeyDown} onCompositionStart={...} onCompositionEnd={...} />
5-3. フロントエンドの起動確認
Claude Codeに「フロントエンドの起動確認をお願いします。」と伝えます。
もしくは下記のコマンドで実行します。
cd frontend
npm install
npm run dev
ブラウザで表示されたURL（例：http://localhost:5173）にアクセスし、チャット画面が表示されれば成功です。
6. 結合・動作確認
目安時間：10〜15分
バックエンドとフロントエンドをそれぞれ起動した状態で、実際にチャットを試してみます。
- ターミナルを2つ開き、それぞれで以下を起動しておく
cd backend && uvicorn main:app --reload --port 8000-
cd frontend && npm run dev
※Claude Codeに「フロントエンドとバックエンドを起動してください。」と依頼するで良い。
- ブラウザでフロントエンドの画面を開く
- 入力欄にメッセージを入力し、送信する
- Bedrock（Amazon Nova）からの応答がチャット画面に表示されることを確認する
うまく表示されれば、AWS Bedrock × Claude Codeで作るAIチャットボットのMVPは完成です。
7. 応用編：フロントエンドUIのブラッシュアップ
目安時間：20〜40分（任意パート）
機能面の動作確認ができたら、ここからは任意の応用パートです。骨組み（機能）はすでに動いているので、見た目を自分の好みに仕上げていきましょう。見た目だけの変更であれば、API設計などの後戻りしにくい判断に影響しにくく、気軽に試しやすいタイミングでもあります。
7-1. お好みを伝えるプロンプトフォーマット
「スタイリッシュにしてください」だけでは、Claude Codeも何を基準にすればよいか判断できません。以下の項目を埋めるだけで、自分の好みを具体的に伝えられるプロンプトのフォーマットを用意しました。空欄部分に好みを記入して使ってください（特にこだわりがない項目は「特になし」でも構いません）。
現在のfrontend/のチャットUIを、以下の好みに沿ってブラッシュアップしてください。
機能（メッセージの送受信、エラー表示、IME対応など）は変更せず、見た目のみを変更してください。
- 全体的な雰囲気：［例：ミニマルで清潔感のあるSaaS風／ポップでカジュアル／ダークモード基調 など］
- ベースカラー／アクセントカラー：［例：白ベースに水色のアクセント／ネイビー×オレンジ など］
- レイアウトの好み：［例：LINEのような吹き出し形式にしたい／中央寄せのシンプルなカード型 など］
- フォントの好み：［例：丸みのある柔らかい書体／シャープなゴシック体 など］
- 参考にしたいサービス・アプリ：［例：ChatGPTの画面イメージに寄せたい など］
- 使いたいスタイリング手段：［例：CSSのみで実装／Tailwind CSSなどのライブラリを導入してもよい など］
- アニメーション：［例：メッセージ送信時にふわっと表示したい／特にこだわりなし］
- レスポンシブ対応：［例：スマホでも見られるようにしたい／PCのみ確認できればよい］
7-2. 記入例
たとえば「某AIチャットボットのような落ち着いた雰囲気にしたい」場合は、以下のように埋めて渡します。
現在のfrontend/のチャットUIを、以下の好みに沿ってブラッシュアップしてください。
機能（メッセージの送受信、エラー表示、IME対応など）は変更せず、見た目のみを変更してください。
- 全体的な雰囲気：某AIチャットボットのような、落ち着いたダークトーンのSaaS風
- ベースカラー／アクセントカラー：ダークグレーベースに、アクセントは緑
- レイアウトの好み：中央に幅広めのチャットエリア。自分の発言は右寄せ、AIの発言は左寄せの吹き出し形式
- フォントの好み：特になし
- 参考にしたいサービス・アプリ：某AIチャットボット
- 使いたいスタイリング手段：Tailwind CSSを導入してもよい
- アニメーション：メッセージ送信時にふわっと表示されると嬉しい
- レスポンシブ対応：PCブラウザで見られれば十分
7-3. ブラッシュアップ時の注意点
- 一度に全部を欲張らず、まず雰囲気・配色だけ決めて依頼し、そこから吹き出しの形やアニメーションなど細部を追加で指示していくと、イメージとのズレが起きにくいです。
- 見た目の変更のついでに機能（API呼び出し部分やエラー処理、IME対応）まで書き換えられていないか、差分を確認しましょう。
- Tailwind CSSなど新しいライブラリを導入した場合は、
npm installのやり直しや設定ファイルの追加が必要になることがあるため、Claude Codeに起動確認まで依頼すると手戻りが少なくて済みます。
8. トラブルシューティング集
目安時間：発生した場合に15〜30分程度（都度対応）
実際に手を動かす中でつまずきやすいポイントをまとめました。
AccessDeniedExceptionが返ってくる
- IAMユーザーに付与したポリシー（
AmazonBedrockFullAccess）が正しくアタッチされているか -
aws configureで設定したアクセスキーが、前編で作成したIAMユーザーのものと一致しているか
を確認してください。5-2の実装であれば、このエラーは画面の会話表示エリアにも赤字で表示されるはずなので、まずはそのメッセージ内容を手がかりに調べると特定しやすいです。
モデルが見つからない、呼び出せない
modelIdの指定やリージョン（us-east-1）が、前編でBedrockの利用を確認したものと一致しているか確認してください。モデルIDはAWSのアップデートで変更される場合があるため、うまくいかない場合は最新の情報を検索してみてください。こちらも画面上にエラーメッセージが表示されるはずなので、表示内容を確認してみてください。
Claude Codeの出力が期待と違う
一度で完璧な出力を求めず、「〇〇の部分だけ修正してください」のように具体的に差分を指示すると、精度が上がりやすいです。
9. まとめ・今後の展望
前編・後編を通して、以下の流れを一通り体験しました。
- AWSアカウント・IAMユーザー・Bedrockの環境構築
- 対話型AIとの壁打ちによる企画立案
- Claude Codeを使った要件定義・設計・実装
- ローカル環境での動作確認
「考える相手（対話型AI）」と「作る相手（Claude Code）」を使い分けるAI駆動開発のスタイルを、実際に手を動かしながら体験できたのではないかと思います。以前、社内ハッカソンでAI-DLC（AWSが提唱するAI開発ライフサイクル手法）に触れた際の考え方をベースに、今回個人開発の中でも実践してみた形になります。
今後の発展アイデア
今回はMVPとしてスコープを絞りましたが、発展させる方向性としては以下のようなものを考えています。
- 社内文書を参照できるようにするRAG（検索拡張生成）機能の追加
- ユーザー認証の追加
- 会話履歴をデータベースに永続化
- AWS上（ECSやAmplifyなど）へのデプロイ
個人的にはデプロイを実施したことがないので、AWS上でデプロイして、公開してみたいと思っています。
まずは今回のようなシンプルな構成で一通り動くものを作り、そこから少しずつ機能を拡張していくのが、AI駆動開発と相性の良い進め方だと感じました。構成がシンプルな分、何か問題が起きたときにもどこが原因か特定しやすい、というのも実感したポイントです。
最後まで読んでいただき、ありがとうございました。前編・後編を通じて、AWS・VS Code・AI駆動開発のいずれも初めてという方が、最初の一歩を踏み出す助けになれば幸いです。
また次回の記事でお会いしましょう！