Claude Code活用 #13 見積もりに添えるAWS構成図を、AIにコードで描いてもらった
blueleaf
前回、公共案件の分厚いRFPから見積もりを組み立てる話を書きました。見積もりには、たいてい「システム構成図」を一枚添えます。「このシステムをどう構築するか」を絵にしたもので、金額の根拠を相手にイメージしてもらうための資料です。今回はそれをAWSで組んだ構成図として描きました。
今回は、その構成図そのものを Claude Code に描いてもらった話です。図はPowerPointで作るのですが、手を動かして作るのではなく、Python（python-pptx）で「アイコンを置いて線を引くコード」を書いてもらい、そこからPowerPointファイルを出力しました。
構成図は、手で作ると地味に時間を食う
システム提案で構成図を添えるのは、見た目を整えるためではありません。「Webサーバーを2台に冗長化して、データベースは別のゾーンに待機系を置いて、障害時に切り替わるようにします」といった構成の意図は、文章で書くより一枚の図で見せたほうが圧倒的に伝わります。冗長化のぶんだけサーバー費用がかかる、といったコスト感の話にもつながります。
ところが、この図を手で作るのが地味に重い作業です。
- AWSの公式アイコン（EC2、RDS、S3、ロードバランサー……）を素材集から探して貼る
- それぞれを等間隔にきれいに整列させる
- 「ユーザー → ロードバランサー → Webサーバー → DB」の矢印を引く
- 実線・破線、線の色を意味ごとに使い分ける（通常の通信は黒、DBの複製は紫、など）
PowerPointやdraw.ioでポチポチやると、それだけで1〜2時間は溶けます。しかも一度きれいに並べても、「Webサーバーをもう1台増やしたい」「ゾーンを縦並びから横並びにしたい」と言われた瞬間に、整列が崩れて手直しが発生します。
アイコンを置いて線を引く「コード」を書いてもらう
そこで Claude Code に、python-pptx というライブラリで構成図を組み立ててもらいました。やっていることを言葉にすると、こうです。
- AWS公式のアイコン画像を、指定した座標に一つずつ配置する
- 各アイコンの真下に「Web1」「DB Primary」といったラベルを中央揃えで置く
- アイコン同士を矢印でつなぐ。副次的な通信は破線、DBの複製は紫の線、と用途で描き分ける
- 全体を「AWS Cloud - Tokyo Region」の枠と、可用性ゾーンの点線枠で囲う
これを人が座標を計算しながら書くのは大変ですが、そこは対話で詰めました。「ユーザーは左端、ロードバランサーはその右、Webサーバーは2つのゾーンに分けて上下に」といった配置の意図を伝えると、Claude Code が座標に落とし込んでコードを書き、PowerPointファイルとして出力してくれます。
出来上がったのが、冒頭の図です（顧客・製品名の部分は伏せた汎用形にしています）。ロードバランサーで受けて、Webサーバーを2つのゾーンに分散し、データベースは主系・待機系をゾーンをまたいで配置、ファイルはS3に保管する──という「二重化して落ちにくくした」構成が、そのまま絵になっています。
見た目の綺麗さより、「渡した先で直せる」を優先してPowerPointにした
図をコードで作るなら、実はHTMLやSVGで描いたほうが、線の太さや余白をより細かく整えられて、見た目はもっと綺麗に仕上がります。それでも今回はあえてPowerPoint（pptx）形式で出力してもらいました。
理由は、この構成図を後で触るのがエンジニアだけとは限らないからです。提案の現場では、営業や提案担当が打ち合わせのあとに「ここの文言だけ直したい」「サーバー1台のミニマム版も一枚ほしい」と、その場で手を入れる場面があります。
そのときに、誰のPCにも入っていて、ダブルクリックで開けて、ドラッグで動かせるPowerPointであることの意味は大きいです。HTMLで渡されると、非エンジニアは開くのも直すのも身構えてしまいます。AIには「最終的にPowerPointで開いて手直しできる形で出して」と出力先を指定できるので、見た目の詰めやすさより「渡した先で誰でも編集できること」を優先しました。
効いたのは「直しが一瞬で、崩れない」こと
一番ありがたかったのは、作るのが速いことよりも、直しても整列が崩れないことでした。
図が「コード」になっているので、「データベースを主系・待機系の2台構成に変えたい」「ゾーンを横並びにしたい」という修正が、該当する座標を書き換えるだけで済みます。手作業だと、一つ動かすと周りとの間隔がずれて全体を並べ直すことになりますが、コードなら他の要素は寸分ずれません。
提案の場では、この「直しの速さ」がそのまま効きます。打ち合わせで「サーバー1台のミニマム構成だといくら？」と聞かれても、EC2とRDSを1台ずつに減らした図をその場で出し直せます。構成の選択肢を、図とセットで複数見せられるようになりました。
一度「描き方」を覚えさせると、次からは一言で済む
もう一つの収穫は、この作業がそのまま次の案件でも使える形になったことです。
構成図には、毎回だいたい同じ「型」があります。ミニマム構成、二重化構成、静的配信を組み合わせた構成……。そこで、よく使う構成パターンのひな形と、配色ルール（通常の線は黒、複製は紫、といった取り決め）、アイコン素材の置き場所を、Claude Code が参照できる手順書としてまとめておきました。
こうしておくと、次の案件では「ロードバランサー＋Webサーバー2台＋データベース二重化の構成で、東京リージョンの図を作って」と伝えるだけで、骨組みの整った図が出てきます。ゼロから座標を相談する必要がなく、最初から「たたき台」が手元にある状態から始められます。一度きちんと作り方を教えておけば、以降は担当者に「いつもの構成で一枚お願い」と頼むのに近い感覚です。
構成図の隣に、スペックとコストの一覧も置く
見積もりでは、構成図の次のページに「どのサーバーを、どんなスペックで、いくらで動かすか」の一覧を添えます。相手が費用感を具体的に判断するための表です。ここも Claude Code に任せた部分が大きかったところです。
助かったのは、主に3つでした。
- 最新の料金を調べて反映してくれる。AWSの各サービスの料金は改定されるので、そのつど調べ直す必要があります。そこを最新の公開料金を参照して単価に落とし込んでくれました。
- 通信量に応じた従量計算をやってくれる。データ転送のように「使った量 × 単価」で決まる項目は、想定トラフィックから掛け算する手間が地味にかかります。そこを計算してくれました。
- 計算の根拠を資料に残してくれる。「S3は 4円/GB・月 × 1TB想定で約26ドル」「円換算はドル円160円で掛ける」といった式を、そのまま資料に書き込んでくれます。あとで「この金額、どうやって出したの？」と聞かれても、根拠が資料に残っているので説明に困りません。
金額の妥当性そのもの（このスペックで足りるか、盛りすぎていないか）は人が判断します。ただ、単価集め・掛け算・根拠書きという「正確さは要るけれど頭は使わない」作業を巻き取ってもらえたのは、地味に大きい効きでした。
任せられること・人がやること
今回の役割分担も、前回までと同じ形に落ち着きました。
AIに任せた：
- AWS公式アイコンの配置と整列、ラベル付け
- 用途ごとに描き分けた矢印・枠線の作図
- 構成変更（台数の増減、ゾーンの並べ替え）に伴う図の作り直し
- よく使う構成パターンのひな形化
- スペック・コスト一覧の単価集め、通信量の従量計算、その計算根拠の明記
人がやった：
- どんな構成にするか（冗長化の要否、コストとのバランス）の設計判断
- 「この図で相手に構成の意図が伝わるか」の確認
- 提出前の最終仕上げ（細かい位置調整はPowerPointで手直し）
どういう構成を提案するかは、可用性の要件と予算感を見ながら人が決めます。AIは、決めた構成を「相手に見せられる一枚」に落とす作図の手間を引き受けてくれました。自動出力そのままで完璧に仕上がるわけではなく、最後の微調整は人がPowerPointで整えますが、それでも一番面倒な「アイコンを並べて線を引く」ところをまるごと任せられたのは大きかったです。
構成図に限らず、「毎回ゼロから作り直している定型の図版」がある方は、一度その作り方をAIに覚えさせておくと、次からの立ち上がりがかなり軽くなると思います。
＼ 最新情報をチェック ／
