「＋・−」数量変更ボタンに、±10・±20などの高速増減ボタンを追加する方法
見積太郎では、「−」「＋」ボタンで1つずつ増減できる数量変更ボタンを採用していますが、50個、100個といった数量を扱う商品では、何度もボタンを押すのがわずらわしくなります。
そうした場合、作成済みのPRODUCTSコードを生成AIに渡して修正依頼をかけることで、通常の−1・＋1ボタンの両隣に「−10」「＋10」などの高速増減ボタンを追加できます。
特定の数量項目だけ±10ずつにしたり、別の項目は±20や±50ずつにすることも可能です。
◆ 「＋を何度も押す」を減らして、必要な数量へ近づきやすくする ◆
− ／ 数量 ／ ＋
10個増やすなら「＋」を10回押す
−10 ／ − ／ 数量 ／ ＋ ／ ＋10
大きく増減してから1個ずつ微調整
商品数は±10、印刷部数は±50など、必要な項目だけ使い分け
数量項目そのものを追加・変更したい場合はシミュレーターに新たな項目やメニューを追加する方法、数量や選択条件に応じて注意を表示したい場合はシミュレーターにトースト通知を表示する方法もあわせて確認してください。
このカスタマイズが役立つのはどんなとき？
±10や±20の高速増減ボタンは、ある程度まとまった数量を選ぶことが多い商品やサービスに向いています。
- 10部、50部、100部など、まとまった数を選ぶ印刷物やチラシ
- 10個、20個単位で注文されることが多い商品やノベルティ
- 数十人規模まで増減する参加人数、席数、利用人数
- 面積や作業数量など、1ずつ押すより大きく動かしたい項目
- 普段から「＋」を何回も押して数量を合わせている項目
±10ボタンを追加した場合のイメージ
大きく増減したあと、通常の−1・＋1で最後の微調整ができます。
例えば30個にしたいとき、通常の＋1ボタンだけだと何度も押す必要がありますが、＋10ボタンがあれば素早く進められます。
ただし、一般的に 0〜3個程度しか選ばれないような項目に ±10ボタンを付けるのでは意味がありません。商品ごとに「よく使う数量」に合わせて使い分けることが重要です。
既存の±ボタンに、±10ボタンを追加する依頼文
作成済みのPRODUCTSコード全文を生成AIへ添付し、例えば次のように依頼します。
これは「すべての数量入力項目で10ずつ動かせるようにしたい」というケースの例です。
添付の見積太郎用PRODUCTSコードを修正してください。
シミュレーターの数量入力項目は「−」「＋」ボタンで1つずつ増減できるようになっていますが、この数量ボタンの両隣に「−10」「＋10」ボタンも表示して、10個ずつ増減できるようにしてください。
見積太郎のPRODUCTSコードには、対象の数量項目にquick_step: 10 を指定することで対応できます。
既存の「−」「＋」ボタンは削除せず、そのまま残してください。
料金、商品名、項目ID、選択肢ID、min、max、default、計算式、rules、visible_ifなど、数量ボタン以外の設定は変更しないでください。
修正後の var PRODUCTS = [ ... ]; の完全なコードをHTMLまたはZIPで提示してください。上記の例文は、やや冗長ではありますが、「既存の−1・＋1は残す」「数量ボタン以外の設定は変更しない」と明記しておくと、生成AIが（良かれと思って）余計な変更を行うことを避けられます。
特定の項目だけに±10を追加する依頼文
すべての数量項目に±10を追加する必要はなく、例えば「作業人数」は1人ずつの調整でよいけど、「印刷部数」だけは10部ずつ動かしたい、といったようなケースもあると思います。
そういった場合は、AIに次のように依頼してください。
添付の見積太郎用PRODUCTSコードを修正してください。
数量項目のうち、「印刷部数」の項目にだけ、
通常の「−」「＋」ボタンの両隣に「−10」「＋10」を追加してください。
そのためには「印刷部数」に該当する数量項目に quick_step: 10 を追加してください。
それ以外の数量項目は、現在の「−」「＋」だけの状態を維持してください。
料金、項目ID、選択肢ID、min、max、default、計算式、
rules、visible_ifなどは変更しないでください。
修正後の var PRODUCTS = [ ... ]; の完全なコードをHTMLまたはZIPで提示してください。±10ボタンを追加したい対象項目を、具体的な名称で伝えてください。
シミュレーターに実際に表示されている名称（例：「印刷部数」「注文個数」「参加人数」など）を伝えて、その「−」「＋」ボタンの両隣に「−10」「＋10」ボタンを追加してください、と伝えればOKです。
項目ごとに±10・±20などを使い分ける
追加できる高速増減ボタンは±10のみに限らず、商品の性質に合わせて項目ごとに増減幅を変えられます。
| 数量項目の例 | 追加するボタン例 | AIへの伝え方 |
|---|---|---|
| 商品注文数 | ±10 | 商品注文数は10個ずつ増減 |
| 参加人数 | ±5 | 参加人数は5人ずつ増減 |
| 印刷部数 | ±50 | 印刷部数は50部ずつ増減 |
| 細かなオプション数 | 追加しない | デフォルトの±1を維持 |
添付の見積太郎用PRODUCTSコードについて、数量ボタンを次のように調整してください。
・「商品注文数」には −10 / ＋10 を追加
・「参加人数」には −5 / ＋5 を追加
・「印刷部数」には −50 / ＋50 を追加
・それ以外の数量項目は現在のまま
該当コードはquick_step指定を使って対応してください。
数量ボタン以外の料金、ID、min、max、default、計算式、条件分岐は変更せず、
修正後のPRODUCTSコード全文をHTMLまたはZIPで提示してください。
各項目で利用者が実際に選びそうな数量に合わせて設定しましょう。
例えば100部前後を選ぶ印刷部数なら±50、10〜30人程度を選ぶ参加人数なら±5や±10というように、項目ごとに操作しやすい増減ボタンを用意しておくと便利です。
作成済みコードをAIで修正する手順
1．PRODUCTSコードを用意する
現在のシミュレーターで使っているvar PRODUCTS = [ ... ];の全体を用意します。あらかじめテキストファイルにしておくと便利です。
2．どの項目に±高速増減ボタンを付けるか決める
「全部を±10」「印刷部数だけ±10」「商品数は±10、印刷部数は±50」のように、対象項目と増減幅を先に決めておきます。
3．PRODUCTSコードと依頼文をAIへ渡す
当ページの依頼文サンプルを、実際の商品名・項目名・希望する数字に置き換えて、生成AIのチャット画面に貼り付けます。PRODUCTSコードはテキストファイルにしてアップロードしてください。
4．修正後の完全なコードを受け取る
AIにコードの修正を依頼すると、その差分だけを案内される場合がありますが、それだとコードの貼り替えに手間がかかるため、 「修正後のPRODUCTSコード全文をHTMLまたはZIPで提示してください」と指示することをおすすめします。
（※）PRODUCTSコードはジャバスクリプト（JS）という言語で出来ており、そのJSファイルはブラウザによってはダウンロードできない場合があるため、HTMLファイルかZIPファイルを指定したほうが無難です。
5．プレビューで数量を実際に動かす
−10・＋10などのボタンだけでなく、従来の−1・＋1、数量の直接入力、最小値・最大値付近の動作も確認します。
修正後に確認するポイント
AIがコードを修正したら、公開する前に次の点だけ確認しておきましょう。
- 指定した数量項目だけに−10・＋10などが表示されている
- 通常の−1・＋1ボタンも残っている
- 高速増減ボタンを押すと、指定した数だけ増減する
- 最小値・最大値を超えて不自然な数量にならない
- 数量に応じた料金計算がこれまでどおり行われる
- スマートフォンでもボタンが大きく崩れていない
表示がおかしい場合は、修正後のPRODUCTSコードとあわせて、実際の画面のスクリーンショットも生成AIに渡してあげると、AIによる原因究明がはかどります。
「どの項目で」「何を押したときに」「どうなってほしいのに、実際はどうなるか」を文章で説明すると、AIはより正確な修正をしてくれます。
よくある質問
Q すべての数量項目に±10ボタンが付いてしまいますか？
Q ±10ではなく±20や±50にもできますか？
Q 元の−1・＋1ボタンはなくなりますか？
Q コードが分からなくても数量ボタンを変更できますか？
見積もりの使いやすさは、小さな改善の積み重ねから。
見積太郎では、料金計算だけでなく、商品や業種に合わせて入力のしやすさも調整できます。
「＋を何度も押す」という手間がかかる項目を見直し、ユーザーの負担を減らしてあげましょう。
実際の利用シーンに合わせて、見積フォームを最適に育てていける点が「見積太郎」の特長です。
