Premium Static Manual

見積太郎
管理画面マニュアル

このマニュアルでは、見積太郎(ミツモッタロー)の管理画面の基本的な使い方を
① 基本情報 → ② ツール設定 → ③ 要望テキスト → ④ カスタムデータ作成 の順にご案内します。


はじめての方でも、生成AIを活用することで自社専用の様々な見積もりシミュレーターを作成できます。

ご利用の流れ

まずは最低限の設定だけで画面を整え、その後に要望テキストを作成し、生成AIで PRODUCTS コードを作る流れがおすすめです。

Step 1 社名・ブランド名とお問い合わせURLを設定
Step 2 要望テキストを作成して、生成AIに投げる
Step 3 PRODUCTSコードを貼り付けて、公開前チェックとプレビュー確認
Basic Information

基本情報

見積もりシミュレーターの画面や、PDF見積書に表示する事業者情報の設定を行うエリアです。

① 基本情報② ツール設定 では、シミュレーター本体やPDF見積書に表示する項目をまとめて調整できます。
まずはここで、会社名・ブランド名・お問い合わせ先など、利用者に見せたい基本情報を設定してください。

はじめは最低限の設定だけでも問題ありません。 とりあえず、「社名・ブランド名」「お問い合わせURL」 の2項目を設定するだけでも、動作確認を進められます。

最低限、設定しておきたい項目

  • 社名・ブランド名:シミュレーター画面やPDF見積書に表示される名称
  • お問い合わせURL:見積もり内容を見た利用者が、そのまま相談に進むためのリンク先

あとから追加できる項目

  • 担当者名
  • 部署名
  • 住所・郵便番号
  • 電話番号・FAX番号など
管理画面の基本情報とツール設定の入力イメージ
① 基本情報、② ツール設定の入力イメージ
Tool Settings

ツール設定

タイトル、補足文、配色、PDF見積書の表示文言などを調整できるエリアです。

② ツール設定 では、シミュレーターの印象を左右する文言や色、PDF見積書に表示する見出しなどを設定できます。 デザインを細かく整えたい場合に便利ですが、最初の段階では無理にすべて埋める必要はありません。

A

表示文言の調整

シミュレーターのタイトル、サブタイトル、補足文、注意書きなどを設定し、利用者に伝わりやすい表現へ整えます。

B

カラーの調整

メイン色、アクセント色、背景色、文字色などを設定し、自社ブランドにあわせた見た目にできます。

C

PDF見積書の文言調整

PDFのタイトル、備考文、補足文などを調整することで、配布資料としても違和感のない印象に仕上げられます。

迷った場合は、まず最低限の設定で進めてください。 最初からすべての項目を細かく調整しなくても、シミュレーター作成そのものは進められます。
まずは動作確認を優先し、その後で見た目を整えると良いでしょう。
Request Text

要望テキスト

生成AIに見積もりシミュレーター用データを作成してもらうための、要件整理エリアです。

③ では、赤色の「要望テキストテンプレート」 をクリックすると、モーダルウィンドウでテンプレートが表示されます。 このテンプレートを参考にしながら、ご自身のビジネスに沿った見積もり要件をまとめてください。

テンプレートをそのままコピーし、生成AIに 「自分のビジネス要件に沿うように整理してほしい」 と依頼しても問題ありません。

要望テキストテンプレートのモーダル表示イメージ
要望テキストテンプレートの表示例
1

テンプレートを参考に要件を整理する

どのメニューを作りたいか、基本料金や選択肢、追加料金、注意事項などを、できるだけ矛盾のない形でまとめてください。

2

要望テキスト欄に貼り付ける

要件をまとめ終えたら、その内容を 【要望テキスト】 のフォーム内に貼り付けます。

3

生成AIへの指示文をコピーする

その下の青いボタン 「生成AIへの指示文をコピー」 をクリックすると、生成AIに投げるための文章をコピーできます。

4

生成AIのチャットへ貼り付ける

コピーした文章を、お好きな生成AIのチャットにそのまま貼り付け、ENTERキーで送信してください。

①や②で設定した情報(会社情報など)などは、コピーした文章内には含まれませんのでご安心ください。生成AIに渡す情報は、要望テキストに記述した内容のみ(見積もり項目・料金・計算条件)になります。

ChatGPT の場合の一例 早ければ数十秒ほどで、var PRODUCTS = [ から始まるコードが出力されます。
コードの最後は、]; で終わる形になります。
生成AIが var PRODUCTS 形式のコードを出力したイメージ
img/m3.jpg:生成AIが出力した PRODUCTS コードの例
Custom Data

カスタムデータ作成

生成AIが出力した PRODUCTS コードを取り込み、チェックとプレビュー確認を行うエリアです。

AIが出力した var PRODUCTS = [ ... ]; の形のコード全文をコピーし、 ④ の「PRODUCTSコード(貼り付け)」 の下にあるフォームへ貼り付けてください。

1

公開前チェックを実行する

貼り付け後、念のため 「公開前チェック」 ボタンを押し、コードに大きな誤りがないか確認します。

2

コードチェックOKを確認する

var PRODUCTS = [ ... ]; の正しい形になっていない場合はエラーになります。「コードチェックOK」 と表示されれば、基本的には問題ありません。

3

注意表示の内容を確認する

注意:1 などが表示される場合は、要望テキストとの不一致や、複雑な要件による不安定さの可能性があります。利用自体は可能ですが、公開前に要望どおりに動くか確認してください。

4

プレビュー表示で実際の動作を確認する

「プレビュー表示」 をクリックすると、別タブでシミュレーターが開きます。要望テキストの内容どおりに動作するか、必ずご確認ください。

注意表示が多い場合の対処 注意:5 など複数のチェックが出る場合は、要望テキストをよりシンプルに書き直すか、より高機能な有料版AIでもう一度出力し直してみてください。
プレビュー表示でシミュレーターの動作確認をしているイメージ
プレビュー表示による動作確認イメージ
+
Advanced Note

複数メニューを作るときの注意

複雑な要件や複数メニューを一度にまとめようとすると、生成結果が不安定になることがあります。

要望テキストの内容に矛盾が多かったり、複雑な要件で複数メニューを大量にまとめて記入した場合は、期待どおりの表示にならないことがあります。

複雑なメニューは、1つずつ作る方法がおすすめです。 複雑な要件のメニューをどうしても複数作りたい場合は、まずメニューごとに別々の要望テキストを作成し、それぞれの PRODUCTS コードを個別に出力すると安定します。

そのうえで、各コードの var PRODUCTS = [ ... ]; の中身だけを取り出し、メモ帳などを使って次のように1つのコードにまとめてください。

var PRODUCTS = [
  {1つ目の ... },
  {2つ目の ... },
  {3つ目の ... },
  {4つ目の ... },
  {5つ目の ... }
];

公開前チェックボタンを押し、取りまとめたPRODUCTSコードに問題がなければ、カスタムデータ(estimate-data.js)をダウンロードして、既存のestimate-data.jsに上書きしてください。