Claude・ChatGPTでインタラクティブな見積もり計算ツールを作る方法

Ilya SpiridonovIlya Spiridonov
読了時間14分

自分の料金は把握していても、見込み客がその料金を試す手段は意外とありません。プランを選び、ページを追加して合計額の変化を確認するだけなのに、見積もりが届くのを待つことになります。

ClaudeやChatGPTなら、料金表からその計算ツールを作れます。料金とルールを渡すとAIがページを作成します。自分で行うのは、数字の確認と、会話から実際に動くファイルを取り出すことです。この記事では両方の手順を、貼り付けて使えるプロンプトと6つの検算結果とともに紹介します。

まずは完成した例を試してください。プランを選び、追加ページ数を変え、オプションのオン・オフを切り替えてみましょう。

プロジェクト

ランディングページ1枚、修正1回。

1ページ$150.00、最大10ページ。5ページ以上で追加ページ料金が5%割引。

オプション

見積もり

基本料金
$800.00
追加ページ0 × $150.00
$0.00
数量割引追加5ページから
$0.00
原稿作成
$0.00
一括合計
$800.00
月額サポート毎月請求
$0.00
初回請求額の目安一括合計とサポート1か月分
$800.00

参考見積もり。税別。最終的な作業範囲と価格は提案書で確定します。 金額はUSDです。

価格は小さなWeb制作会社を想定した架空のもので、税金は含めていません。仕組みを確認してから、自社の料金に置き換えてください。

料金とルールを書き出す

プロンプトより先に数字を整理します。AIは説明されたとおりに作るので、料金表が曖昧なら計算ツールも曖昧になります。今回使うのは6つの料金と1つの割引ルールです。

項目料金請求
Basicプラン$800一括
Standardプラン$1,200一括
Plusプラン$1,800一括
追加ランディングページ1ページ$150、0〜10ページ一括
原稿作成オプション$200、任意一括
月額サポート$75、任意毎月

この料金に3つのルールを加えます。

  • 追加ページが5ページ以上なら、追加ページ分の全額に5%の割引を適用します。プラン料金と原稿作成費には適用しません。
  • 月額サポートは一括料金の合計に含めません。月々の契約と制作費は別の支払いだからです。
  • 初回請求額の目安は、一括料金の合計とサポート1か月分の合算です。

初期状態はBasic、追加0ページ、両オプションはオフです。ページ数が空欄、負数、小数、10より大きい数なら、入力欄の横にエラーを表示し、修正するまで合計額を隠します。

AIに依頼する前に、自分で正解を計算してください。どのバージョンも次の6つを満たす必要があります。

  • 最小構成。 Basic、追加0ページ、オプションなし。一括$800.00、月額$0.00、初回請求$800.00。
  • 数量。 Standard、追加2ページ、オプションなし。一括$1,500.00、月額$0.00、初回請求$1,500.00。
  • オプション。 Standard、追加2ページ、原稿作成あり。一括$1,700.00、月額$0.00、初回請求$1,700.00。
  • 割引適用前。 Standard、追加4ページ、原稿作成あり。一括$2,000.00、月額$0.00、初回請求$2,000.00。
  • 割引開始時。 Standard、追加5ページ、原稿作成とサポートあり。一括$2,112.50、月額$75.00、初回請求$2,187.50。
  • 最大構成。 Plus、追加10ページ、原稿作成とサポートあり。一括$3,425.00、月額$75.00、初回請求$3,500.00。

これらは計算ツールとは別に算出した値です。上のツールは6つとも一致します。料金表、3つのルール、6つの結果をプロンプトに貼り付け、後の確認用に結果を保存してください。

Claudeで作成する

ここではClaudeを中心に進めます。会話の横に実際に動くツールを表示する、インタラクティブなアーティファクトを作れるためです。AnthropicによるとアーティファクトはFree、Pro、Max、Team、Enterpriseで利用可能で、コード実行とファイル作成の設定を有効にする必要があります。

プロンプトを貼り付ける

claude.aiかデスクトップアプリで新しい会話を開きます。最初に外部リソースを使わない、単体で完結するインタラクティブなアーティファクトとして作成してください。と書きます。一時的なチャット内の表示ではなく、残して使えるアーティファクトにするためです。続けて次のプロンプトを貼り付け、最後の指定箇所に料金表、3つのルール、6つの期待結果を追加します。

小さなWeb制作会社向けに、実際に動くインタラクティブな見積もり計算ツールを作ってください。
料金表と価格ルールを下に示します。数値は正確にそのまま使ってください。
ルールに不足や矛盾があれば、勝手に値を決めず、先に質問してください。

納品物は、単体で完結する独立したアーティファクトです。プレビューと、
quote-calculator.htmlという名前の完全なダウンロード可能ファイルを1つ作ってください。
HTML、CSS、JavaScriptをそのファイル内にまとめ、フォント、画像、スクリプトなどを
外部から読み込まないでください。ブラウザーでファイルを開くだけで動作し、
インストール、外部ライブラリー、AI呼び出し、サーバーを不要にしてください。

プラン選択、追加ページ数の数値入力、原稿作成と月額サポートのチェック欄を設けてください。
入力が変わるたびに見積額を更新してください。基本料金、追加ページ料金、割引、
原稿作成費、一括合計、月額サポート、初回請求額の目安を、それぞれラベル付きで
別々に表示してください。金額はUSDで小数点以下2桁にしてください。

「参考見積もり。税別。最終的な作業範囲と価格は提案書で確定します。」と表示し、
リセットボタンを付けてください。

追加ページ数は0〜10の整数に限定します。空欄や無効な値なら入力欄の横にエラーを
表示し、修正されるまで合計額を隠してください。初期値はBasic、0ページ、オプションなしです。

分かりやすいラベル、見えるキーボードフォーカス、スマートフォンでも読みやすい操作欄を使ってください。
固定IDはpackage、extra-pages、copywriting、monthly-support、resetです。
料金はラベル付きの設定ブロックにまとめてください。
連絡先の収集、注文送信、選択内容の保存、決済は行わないでください。
トラッキングコードは入れず、ホスティングと計測は別にしてください。

納品前に、提供した期待結果の表で確認してください。
修正内容を報告し、最終版のHTMLファイルを渡してください。

料金表、計算式、期待結果：
[ここに用意した表を貼り付ける。]

自分用に書き換えても、3つの指示は残してください。ルールが足りなければ質問させることで、顧客が気づく前に料金体系の漏れを見つけられます。外部リソースのない単一ファイルなら持ち運べます。最後の表との比較は最初の確認になり、自分で行う検算を置き換えるものではありません。

貼り付けるよりファイルがよければ、+ボタンのAdd files or photosからrate-card.csvを添付するか、チャットにドラッグします。AnthropicはCSVを対応ドキュメント形式に含めています。

ファイルには料金、ルール、合計の計算式が入っています。プロンプトの最後の2行を次の指示に差し替え、その下に6つの期待結果だけを貼り付けてください。

料金とルールは添付のrate-card.csvにあります。読み取った料金とルールを確認し、
外部リソースを使わず、単体で完結するファイルとして計算ツールを作ってください。

最初の版を確認する

プランのメニュー、追加ページ数の入力欄、2つのオプション欄、リセットボタンがあり、基本料金、追加ページ、割引、原稿作成、一括合計、月額サポート、初回請求額の7項目が別々に見えるはずです。入力を変えれば、ボタンを押さずに見積額が更新されることを確認します。

修正する

合計額が違ったら、人に依頼するように、どの条件で何が違い、いくらになるべきかを伝えます。

間違った値から、原因のルールを特定できます。Standard、追加5ページ、原稿作成、サポートありなら$2,112.50です。一括合計が$2,042.50なら、追加ページだけでなく全体に割引がかかっています。$2,150.00なら割引が抜けています。

ページ数を空欄にしても前の合計が残る、またはNaNが表示されるなら、「追加ページ数が空欄なら入力欄の横にエラーを表示し、合計額を隠してください。外部リソースなしの単一ファイルを維持してください」と直接頼みます。1回のメッセージで1つだけ変更し、失敗していた条件を再確認してください。

ファイルを書き出す

数字が合ったらファイルを取り出します。ClaudeがDesignテンプレートで作成した場合は、Exportボタンから単体のHTMLを選びます。Anthropicのアーティファクトの説明ではテンプレートの操作をExportと呼び、Claude Designのヘルプでは単体のHTMLを書き出し形式に挙げています。

HTMLの選択肢がなければ、外部リソースを使わず、単体で完結する完全なquote-calculator.htmlをダウンロードできるファイルとして作るよう依頼してください。

既存の料金表をClaude Coworkで使う

CoworkならCSV添付の代わりにフォルダーを使えます。Claudeがコンピューター上のフォルダーから読み込み、完成した計算ツールを同じ場所に保存するので、アップロードやダウンロードは不要です。Anthropicによると、接続したフォルダー内のローカルファイルを読み書きできます。

rate-card.csvをフォルダーに入れ、Claudeのデスクトップアプリで接続します。Coworkは有料プランで利用可能で、対象はPro、Max、Team、Enterpriseです。

同じプロンプトと最初の一文を使い、料金表を貼り付ける最後の2行だけ次の指示に置き換えます。料金とルールはファイルに入っているため、その下には6つの期待結果だけを貼り付けます。

接続したフォルダーのrate-card.csvを読み、読み取った料金とルールを確認してください。
外部リソースを使わず単体で完結するHTMLの計算ツールを作り、そのフォルダーに
quote-calculator.htmlとして保存してください。元の料金表は変更せず、
保存先を教えてください。

Coworkのタスクはクラウドで実行され、フォルダーにはデスクトップアプリ経由でアクセスします。作業中はアプリを開いたままにしてください。

まだChatとCoworkの選択肢があるアカウントではCoworkを選びます。Anthropicは両者を1つの会話に統合中で、ProとMaxから順次提供しています。統合済みのアカウントでは、通常の会話で同じ依頼をし、従来どおりデスクトップアプリでフォルダーを接続してください。

ChatGPTを使う場合

料金表、プロンプト、6つの検算は同じで、作成とダウンロードの操作だけが変わります。同じプロンプト、料金、ルール、期待結果をChatGPTに渡してください。納品物も同じで、外部リソースなしで単体動作するquote-calculator.htmlをダウンロードできる形にします。

OpenAIのドキュメントによると、生成したHTMLは、HTMLプレビュー対応の画面ではインタラクティブに表示できます。プレビューやレビュー機能は利用する画面によって異なり、Web版ChatGPT Workではチャットでファイルを確認し、必要に応じてダウンロードすると説明されています。

ChatGPTがファイルではなくSite、Canvas、HTMLプレビューとしてページを表示することもあります。それぞれの扱いはChatGPTで作ったHTMLサイトの共有ガイドで説明しています。プレビューがなければ、ダウンロードしてブラウザーで開いてください。

どの場合も、共有するのはダウンロードしたファイルなので、プレビューではなくそのファイルを検証します。

書き出した計算ツールを確認する

見た目が正しくても計算が正しいとは限りません。顧客の前で間違った金額が出れば、損失や信用低下につながります。AIとの会話を閉じ、ダウンロードしたファイルで確認してください。

  1. ダブルクリックで開きます。ログイン、インターネット接続、Claudeの起動なしで動くことを確認します。
  2. Standard、追加2ページ、原稿作成ありを選ぶと、一括合計は$1,700.00です。
  3. 4ページにすると割引なしの$2,000.00です。5ページにして月額サポートを選ぶと、一括$2,112.50、月額$75.00、初回$2,187.50、割引行は-$37.50です。
  4. ページ欄を空にし、-1、2.5、11も試します。それぞれ欄の横にエラーが出て、修正まで合計が隠れることを確認します。
  5. リセットを押します。Basic、0ページ、両オプションなしに戻り、$800.00を表示します。
  6. 6つのうち残りも確認します。最後はPlus、10ページ、両オプションありで$3,425.00、$75.00、$3,500.00になるかを見ます。
  7. ブラウザーをスマートフォン幅に狭めるか、スマートフォンで開きます。横スクロールがなく、操作しやすいことを確認します。
  8. マウスを使わずキーボードで操作します。Tabで全項目に移動でき、フォーカス枠が見え、スペースでチェックを切り替えられる必要があります。MacのSafariでTabからボタンなどに移るには、キーボード設定でキーボードナビゲーションを有効にします。

続いてテキストエディターで開きます。料金がラベル付きの1つのブロックにまとまり、重複していないことを確認してください。後で変更するのも、自分またはAIがこのブロックを編集します。

機密の数値をファイルに入れない

ファイルを開いた人はコードを読めます。非公開の原価、利益率、承認基準額は入れないでください。受信者は自分のコピーを書き換えられるため、ブラウザー上の計算だけで承認済み価格を強制することもできません。

顧客と計算ツールを共有する

ファイルではなくリンクを送ります。メールやクラウドストレージではHTMLがコードとして表示されたり、ブロックされたりします。詳しくは顧客へのHTMLファイル共有ガイドをご覧ください。

Claudeからアーティファクトを共有することもでき、選択肢はプランや組織の設定によって異なります。Anthropicの共有ドキュメントによると、新たに共有されたアーティファクトを開くにはClaudeアカウントが必要です。以前チャットから公開されたものは例外です。Claudeを使う同僚には便利ですが、アカウントのない顧客には登録という手順が増えます。

誰でも開けるリンクなら、書き出したファイルをHTML配信対応のホストにアップロードします。私たちの製品HummingDeckも対応しています。詳細はHTML共有ページにあります。

単一のHTMLファイルなら無料プランで使えます。手順は次のとおりです。

  1. ドキュメントライブラリでドキュメントを追加を選び、quote-calculator.htmlを指定します。必要な条件はHTMLアップロード要件で確認できます。
  2. 処理後に新しいリンクを選び、個人リンクを作ります。まず自分用を作り、テストと分かる名前にします。
  3. 顧客と同じようにプライベートウィンドウでテストリンクを開き、再度検証します。ビューアーは隔離されたフレームで実行するため、自分のパソコンで動くことだけでは受信者用リンクの動作は確認できません。
  4. 同じ方法で顧客用の個人リンクを作成し、送ります。自分のアクセスはテストリンク側に残るので、顧客側の記録を混ぜずに始められます。顧客が開いたら、ドキュメントのリンク欄でそのリンクに記録された閲覧を確認します。

複数のドキュメントがある商談なら、計算ツール、確定した提案書、導入事例を1つのデジタルセールスルームに置けば、顧客は1つのリンクを開くだけです。無料プランでは最大3件のドキュメントを含むルームを1つ利用できます。Web制作の提案書テンプレートを確定提案書に使えます。

見積額と閲覧状況から分かること

計算ツールと提案書の役割は異なります。計算ツールでは買い手が選択肢と目安を確認し、こちらが約束する金額は自分で発行する固定の提案書に記載します。

提案書への回答を受けるなら、ProとBusinessの提案書リンクで承認、変更依頼、辞退を記録できます。これは提案書ドキュメントに紐づく業務上の回答です。署名や、計算ツールに表示されていた金額を取得するものではありません。

無料プランのドキュメントページでは、総閲覧数、ユニーク閲覧者数、閲覧時間、平均完了率を確認できます。Starter以上ではページ別分析と対応するクリックも確認できます。HTMLページへの分析追加ガイドでは分析スクリプトとの違いを比較しています。計算ツールのボタン、チェック欄、プルダウン、数値欄をクリックするとリンククリックとして計上され、閲覧者別・セッション別に回数が表示されます。

閲覧状況が示す範囲

  • 閲覧はリンクが要求され、セッションが始まったことを示します。本人確認にはならず、リンクは転送される可能性があります。
  • クリック数は操作欄が使われた回数です。HummingDeckは選ばれた内容や表示中の合計額を表示しません。数字の入力やキーボードでの選択変更はクリックに含まれません。
  • どちらも購入意思を証明しません。フォローアップが役立つタイミングを考える材料として使ってください。

CPQはconfigure, price, quoteの略で、単なる計算ツールとは異なります。Salesforceの説明では、製品構成、価格ルール、割引と承認、見積書作成を支援し、CRMやERPと連携するソフトウェアです。

今回のツールは単純な1つの料金表の構成選択と価格計算を扱います。見積書の保存、非公開カタログ、割引承認が必要なら、見積もりシステムを使います。

よくある質問

見積もり計算ツールの作成にClaude Coworkは必要ですか？

通常のClaudeの会話で作れます。料金表を貼り付けるか、rate-card.csvを添付してください。Coworkなら接続したフォルダーから読み込み、完成した計算ツールを同じ場所に保存できます。そのフォルダーにアクセスするには有料のClaudeプランと、開いた状態のデスクトップアプリが必要です。

ExcelやGoogleスプレッドシートの料金表から作れますか？

料金表をCSVで書き出して添付するか、表をプロンプトに貼り付けます。作成前に、読み取ったすべての料金とルールをAIに復唱させてください。元のシートと照合し、シートで自分で計算した合計額で完成したツールを検証します。

顧客にインタラクティブな見積もり計算ツールを送るには？

ファイルではなくリンクを送ります。無料プランのHummingDeckリンクなどHTMLを配信するホストへアップロードするか、顧客がClaudeアカウントを持っていればアーティファクトを共有します。まず自分用の別リンクで試し、テスト閲覧が顧客用リンクに記録されないようにしてください。

見積もり計算ツールとCPQソフトは同じですか？

計算ツールは固定の料金表から目安を表示します。CPQは価格ルールや割引承認、見積書作成、CRM・ERP連携も扱います。買い手には計算ツールで選択肢を確認してもらい、約束する価格は固定の提案書で送ってください。

後から価格を変えるには？

ファイル内のラベル付き料金ブロックを書き換えるか、AIに同じ単体ファイルを修正させ、6つの検証を繰り返します。その後HummingDeckのドキュメントで「置き換え」を使うと、既存リンクを維持できます。有効な提案書リンクがある間は置き換えできないため、先にそのリンクを取り消してください。

計算結果のメール送信や顧客の選択内容の保存はできますか？

この記事の版はブラウザー内で計算するところまでです。メール送信、選択内容の保存、決済には、フォームサービス、データベース、見積もりシステムなどが必要です。計算ツールには含めず、約束する価格を固定の提案書で送ってください。

著者について

Ilya SpiridonovはHummingDeckの創業者です。HummingDeckは単体のHTMLファイルを外部の受信者へトラッキングリンクで配信するドキュメント共有プラットフォームです。

参考資料

見積もり計算ツールをリンクで共有する

関連記事：