ウェブサイト制作用のお見積りシミュレーターを作成しました。
選択するだけで概算の見積額をすぐ計算してくれます。

選択するだけで見積りが作れる

テキスト入力があると、入力する手間のほかに入力する内容を考えるコストがかかります。選択するだけという単純作業で見積りが作れる仕様にしました。

ページ構成など具体的な選択肢にした

下層ページのページ数を入力して計算する方法も考えましたが、「デザインを作り込むサービス紹介ページ」と「テキストベースのプライバシーポリシーページ」では同じ料金にはならないため、具体的な見積金額が出せません。

選択肢にウェブサイトでよく作られるであろうページ項目を網羅し、それぞれの平均単価を設定することで、具体的な料金が算出できるようにしてあります。機能やシステムなどについても同様の仕様です。

ステップ形式でユーザーの負荷を軽減

前項から選択肢がかなり多くなってしまったため、すべての選択肢を1ページに並べるとうんざりしてしまいます。選択するのが面倒に感じてしまうためです。

画面を4つに分けて選択してもらうことで、ユーザーの精神的な負荷を軽減させています。

最後のステップで全項目表示

最後のステップで全項目をチェックできるようにしました。
ステップ形式で入力し終えたけど、「あの項目変えたい」「まだ予算が余っている（逆に足りない）」に対応できるようにしています。

さまざまなシーンに合わせた出力形式

概算見積の内容は、さまざまなシーンで利用されます。

ひとまずメールに貼り付けて上司に確認したり、作成中の資料に掲載したり、作成済みの資料の補足として添付したり、概算見積の内容について制作側に質問したりと、用途はさまざまです。

ここでは「問い合わせフォームに自動記入」「クリップボードにコピー」「PDF出力（印刷）」の3形式で出力できるようにしました。

• ひとまずメールに貼り付けて上司に確認…クリップボードにコピー
• 資料に記載する…クリップボードにコピー
• すでに作成済みの資料に追加…PDF出力（印刷）
• 見積内容について制作者に質問…問い合わせフォームに自動記入

3つのボタンを設置しており、クリックするとそれぞれの形式で出力されます。

というウェブツールを、GeminiとClaude Codeを使って作成してみました。
Geminiが要件まとめてプロンプト作って、Claude Codeが実装。
初回ですでに9割の完成度で、細かい修正を繰り返して合計5時間程度で完成。

便利なツールが簡単にできるのでこれからも作り続けていきます。
Claude Code楽しい！Geminiありがとう！

ウェブサイト制作見積シミュレーターはこちら