はじめに
AWS Well-Architected Framework のレビュー、6つの柱すべてを手動でチェックするのは大変ですよね。レビュアーの経験に依存しがちで、品質にもばらつきが出ます。
そこで、構成図をアップロードするだけで、AIが6つの柱に基づいてレビューしてくれるアプリを作りました。
技術スタック
| レイヤー | 技術 |
|---|---|
| フロントエンド | Vite + React |
| AI | Amazon Bedrock（Claude Sonnet 4） |
| バックエンド | AWS Lambda（Function URL） |
| インフラ定義 | AWS Amplify Gen2 と CDK |
| ストレージ | Amazon S3 / DynamoDB |
デモ ─ 操作の流れ
操作はシンプルに3ステップです。
Step 1. 構成図をアップロードして新規レビューを作成
Step 2. 「AIレビューを実行」ボタンをクリック
Step 3. 6つの柱ごとに整理されたレビュー結果が表示される
構成図の画像をClaudeがそのまま読み取り、各柱について「良い点」「改善すべき点」「推奨事項」を出力します。所要時間は約15〜30秒です。
アーキテクチャ
ブラウザ (React)
│ POST { title, content, fileKey }
▼
Lambda Function URL (ai-review)
│ ① S3から構成図画像を取得 → Base64変換
│ ② マルチモーダルでBedrock呼び出し
▼
Amazon Bedrock (Claude Sonnet 4)
│ 6つの柱でレビュー
▼
レビュー結果(Markdown) → DynamoDB保存 → 画面に表示
実装 ─ AIレビューの核心部分
プロンプト設計
レビュー品質を安定させるために、プロンプトで6つの柱の観点と出力形式を明示しています。
あなたはAWS Well-Architected Frameworkの専門家です。 以下の構成図/アーキテクチャに関する情報を分析し、 Well-Architected Frameworkの6つの柱に基づいてレビューコメントを 日本語で提供してください。 ## Well-Architected Frameworkの6つの柱: 1. **運用上の優秀性 (Operational Excellence)**: 開発サポート、インサイトを得る、ワークロードをサポートする 2. **セキュリティ (Security)**: IAM、検知、インフラ保護、データ保護、インシデント対応 3. **信頼性 (Reliability)**: 回復力、変更管理、障害管理 4. **パフォーマンス効率 (Performance Efficiency)**: リソース選定、レビュー、モニタリング 5. **コスト最適化 (Cost Optimization)**: 支出認識、費用対効果の高いリソース、需要と供給の一致 6. **持続可能性 (Sustainability)**: 環境への影響最小化 ## 出力形式: 各柱について以下の形式で評価してください: - 良い点（あれば） - 改善すべき点 - 推奨事項
ポイントは2つです。
- 出力形式を指定 → 毎回一貫した構造のレビューが返ってくる
- 各柱の具体的な観点を補足 → 「セキュリティ」とだけ書くよりも「IAM、検知、インフラ保護…」と書いた方が、より詳細な指摘が得られる
構成図をClaudeに「見せる」─ マルチモーダル入力
S3から構成図画像を取得し、Base64エンコードしてClaude Messages APIに渡します。
// Lambda関数 (handler.ts) から抜粋
// ① S3から画像を取得してBase64変換
const fileData = await getFileFromS3(fileKey, bucketName);
// ② Claude Messages API のマルチモーダル形式で送信
const messageContent = [];
// 画像ブロック（構成図）
if (fileData) {
messageContent.push({
type: 'image',
source: {
type: 'base64',
media_type: fileData.contentType, // 'image/png'
data: fileData.base64,
},
});
}
// テキストブロック（プロンプト + ユーザー入力）
messageContent.push({
type: 'text',
text: fullPrompt,
});
// ③ Bedrockに送信
const command = new InvokeModelCommand({
modelId: 'jp.anthropic.claude-sonnet-4-20250514-v1:0',
body: JSON.stringify({
anthropic_version: 'bedrock-2023-05-31',
max_tokens: 4096,
messages: [{ role: 'user', content: messageContent }],
}),
});
const response = await bedrockClient.send(command);
content 配列に image ブロックと text ブロックを並べるだけで、画像とテキストを同時にClaudeへ入力できます。
Amplify Gen2 でのIAM権限設定
backend.ts でLambdaにBedrock・S3の権限を付与します。
// amplify/backend.ts から抜粋
const aiReviewLambda = backend.aiReviewFunction.resources.lambda;
// Bedrock呼び出し権限（JP cross-region inference profile）
aiReviewLambda.addToRolePolicy(
new PolicyStatement({
actions: ['bedrock:InvokeModel'],
resources: [
'arn:aws:bedrock:*:*:inference-profile/jp.anthropic.*',
'arn:aws:bedrock:ap-northeast-1::foundation-model/anthropic.*',
],
})
);
// S3読み取り権限（構成図の取得用）
aiReviewLambda.addToRolePolicy(
new PolicyStatement({
actions: ['s3:GetObject'],
resources: [`${storageBucket.bucketArn}/*`],
})
);
// Lambda Function URL（フロントから直接呼び出し）
aiReviewLambda.addFunctionUrl({
authType: FunctionUrlAuthType.NONE,
cors: { allowedOrigins: ['*'] },
});
CloudWatchログで動きを確認
Lambda実行時のログでは、処理の流れがそのまま追えます。
2026-02-15T12:44:28.777Z c030cf4b-xxxx-xxxx-xxxx-xxxxxxxxxxxx INFO AI Review handler invoked: {
"version": "2.0",
"routeKey": "$default",
"rawPath": "/",
"rawQueryString": "",
"headers": {
"sec-fetch-mode": "cors",
"referer": "http://localhost:5173/",
"content-length": "149",
"x-amzn-tls-version": "TLSv1.3",
"sec-fetch-site": "cross-site",
"x-forwarded-proto": "https",
"accept-language": "ja",
"origin": "http://localhost:5173",
"x-forwarded-port": "443",
"x-forwarded-for": "xxx.xxx.xxx.xxx",
"accept": "*/*",
"x-amzn-tls-cipher-suite": "TLS_AES_128_GCM_SHA256",
"sec-ch-ua": "\"Not:A-Brand\";v=\"99\", \"Google Chrome\";v=\"145\", \"Chromium\";v=\"145\"",
"x-amzn-trace-id": "Root=1-xxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"macOS\"",
"host": "xxxxxxxxxxxxxxxxxxxxxxxxxx.lambda-url.ap-northeast-1.on.aws",
"content-type": "application/json",
"accept-encoding": "gzip, deflate, br, zstd",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36",
"sec-fetch-dest": "empty"
},
"requestContext": {
"accountId": "anonymous",
"apiId": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
"domainName": "xxxxxxxxxxxxxxxxxxxxxxxxxx.lambda-url.ap-northeast-1.on.aws",
"domainPrefix": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
"http": {
"method": "POST",
"path": "/",
"protocol": "HTTP/1.1",
"sourceIp": "xxx.xxx.xxx.xxx",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36"
},
"requestId": "c030cf4b-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"routeKey": "$default",
"stage": "$default",
"time": "15/Feb/2026:12:44:28 +0000",
"timeEpoch": 1771159468273
},
"body": "{\"title\":\"test03\",\"content\":\"構成図をレビューしてください\",\"fileName\":\"test1.png\",\"fileKey\":\"review-documents/1771159433755-test1.png\"}",
"isBase64Encoded": false
}
| 処理 | 所要時間 |
|---|---|
| S3から画像取得 + Base64変換 | 約1秒 |
| Bedrock推論（Claude Sonnet 4） | 約15秒 |
| 合計 | 約16秒 |
処理時間の大部分はBedrock推論です。画像サイズや構成の複雑さにより10〜30秒程度のばらつきがあります。
具体的なAWSサービス名を挙げて改善点を指摘してくれるので、人手レビューのたたき台として十分実用的です。
ハマりどころ
| 課題 | 対応 |
|---|---|
Lambda環境で Buffer.from() が使えない |
Uint8Array + btoa() で Base64変換 |
| JP inference profile のIAM ARN形式が特殊 | inference-profile/jp.anthropic.* と foundation-model/anthropic.* の両方を許可する必要がある |
| Bedrock呼び出しに15〜30秒かかる | Lambda の timeoutSeconds: 60 に設定 + フロントに経過秒タイマーを表示してUX改善 |
まとめ
| 項目 | 手動レビュー | AIレビュー |
|---|---|---|
| 所要時間 | 数時間〜数日 | 15〜30秒 |
| カバー範囲 | レビュアーの知識に依存 | 6つの柱を網羅 |
| 必要なもの | W/Aの深い知識 | 構成図を用意するだけ |
AIレビューだけで完結するものではありませんが、レビューの効率と品質を底上げする補助ツールとして活用できます。
簡単30秒