見積太郎で作ったシミュレーターに、
画像やイラストを追加する方法

＝＝＝AI向け説明用テンプレート＝＝ 

このプロダクトコードは、見積太郎用の PRODUCTS 定義です。
添付された var PRODUCTS = [ ... ]; の構造をできるだけ維持したまま、画像表示用の指定だけを追加してください。

以下のルールに従って、AI側で適切な PRODUCTS 構造へ変換してください。

※このテンプレートは、core.js が section の image / image_alt / images / image_columns / image_position:'below_help' に対応している前提です。
※core.js がこれらに未対応の場合、PRODUCTSコードだけを修正しても画像が表示されない、または指定位置に表示されない可能性があります。

【最重要ルール】

1. 画像は金額計算には含めません。
画像指定は、入力画面上の説明・補足・商品写真・施工イメージ・参考図・参考イラストとしてのみ扱います。

2. 既存の id / kind / pricing / rules / visible_if / options / taxRate / 割引ロジックは変更しないでください。
画像表示のためだけに、価格計算や条件分岐の構造を変えないでください。

3. 画像表示用の指定には、price / monthly / unit / monthly_unit / taxRate を付けないでください。

4. 出力は、修正後の var PRODUCTS = [ ... ]; の完全なコード全文だけにしてください。
説明文や省略記号は不要です。

5. ユーザーが「見出しを付けて」「キャプションを付けて」と明示していない限り、画像用の見出し・説明文・キャプションを勝手に作らないでください。

6. 特に、画像だけを表示するために kind:'info' を追加する場合、label / title / help / desc / text は原則として付けないでください。
「〇〇参考画像」「〇〇イメージ」「参考画像」などのラベルをAIの判断で追加しないでください。

7. image_alt はアクセシビリティ用の代替テキストです。画面上の見出しとして表示するものではありません。
image_alt には短く自然な説明を入れて構いませんが、label と混同しないでください。

【画像ファイル・URLの扱い】

1. URL指定がある場合は、そのURLをそのまま使ってください。

例：
https://example.com/sample.jpg

2. URL指定がなく、sample.jpg / image.png / illustration.webp のようなファイル名だけが指定されている場合は、原則として img/ を付けた相対パスにしてください。

例：
sample.jpg → img/sample.jpg
image.png → img/image.png
illustration.webp → img/illustration.webp

3. ファイル名だけの画像は、ユーザーが img フォルダ内に設置する前提です。
ただし、その説明文をコード内に追加する必要はありません。

【画像指定の書き方】

■ 1枚画像の場合

対象の section に次のように追加します。

image: 'img/sample.jpg',
image_alt: '対象項目の参考画像'

■ 複数画像の場合

対象の section に次のように追加します。

images: [
  { src: 'img/sample1.jpg', alt: '対象項目の参考画像1' },
  { src: 'img/sample2.jpg', alt: '対象項目の参考画像2' }
],
image_columns: 2

※ 複数画像を使う場合は、同じ section に image / image_alt を重複して指定せず、images に統一してください。
※ ユーザーが「PCでは横並び」「2枚並べて」「スマホでは縦並び」などと指示した場合は、image_columns:2 を指定してください。

【対象項目の見つけ方】

1. ユーザーが「〇〇」「〇〇の項目」「〇〇のラベル」「〇〇の説明文」などの項目名を指定した場合、その文字列と一致または近い label を持つ section を探してください。

2. PRODUCTS では、対象が quantity / single / multi / qoptions のいずれかになっている場合があります。
対象の表示見出しが section の label として存在する場合は、その section を優先して修正してください。

3. qoptions の中に options があり、option 側にも同じような label / desc がある場合でも、ユーザーが「〇〇のラベル」「〇〇の項目」と言っている場合は、原則として親の qoptions section を対象にしてください。

4. 既存構造を大きく作り替えないでください。
画像を追加するためだけに qoptions を quantity に変換したり、options の構造を分解したりしないでください。

5. 例に出てくる target_section / target_image_before / target_image_after / step_image_intro などのIDは説明用です。
実際の出力では、既存の section id を確認し、それに合わせた一意のIDに置き換えてください。
例：既存 section の id が service_plan の場合、画像用IDは service_plan_image_before / service_plan_image_after などにしてください。

【既存の画像指定がある場合】

対象 section に既に image / image_alt / images / image_columns / image_position がある場合は、同じ目的の画像指定を重複して追加しないでください。

ユーザーが新しい画像への差し替えを希望している場合は、既存の画像指定を新しい指定に置き換えてください。

ユーザーが画像の追加を希望している場合は、既存の image / image_alt を images 配列に統合し、複数画像として扱ってください。

同じ section 内に image と images を併用しないでください。

【説明文の位置に関する注意】

PRODUCTSでは、説明文が section の help / desc にある場合と、options 内の desc にある場合があります。

ユーザーが「説明文の下」と指示した場合は、対象 section 自体に image / image_alt または images を追加し、image_position:'below_help' を指定してください。

この指定では、画像は「対象sectionの説明文の下、または選択肢一覧・入力欄の上」に表示されます。

ただし、qoptions / single / multi の各選択肢カード内にある desc の直下へ画像を差し込む処理は、現在の標準仕様では対象外です。
画像追加のために options の構造を作り替えたり、option.desc を移動したりしないでください。

【ユーザーの自然文をどう解釈するか】

■ A. 「〇〇のラベルの上」「〇〇の項目の上」「〇〇の上」と言われた場合

対象 section の直前に、画像だけの kind:'info' section を追加してください。

この場合、kind:'info' には、とくに指定がない限り label / title / help / desc / text / caption を付けないでください。

例：

{
  kind: 'info',
  id: 'target_image_before',
  image: 'img/sample.jpg',
  image_alt: '対象項目の参考画像'
},
{
  kind: 'qoptions',
  id: 'target_section',
  label: '対象項目',
  options: [
    /* 既存の内容 */
  ]
}

※ id は既存idと重複しない自然な名前にしてください。
※ 「target_image_before」のように、対象が分かるIDを付けてください。
※ 「〇〇参考画像」のような label は付けないでください。

■ B. 「〇〇のラベルの下」「〇〇のラベル直下」「〇〇の説明文の上」と言われた場合

対象 section 自体に image / image_alt または images を追加してください。
対象 section の前後に kind:'info' の画像専用 section を追加しないでください。

この指定は、項目名のすぐ下、または説明文より上に画像を表示したいという意味として扱ってください。

例：

{
  kind: 'qoptions',
  id: 'target_section',
  label: '対象項目',
  image: 'img/sample.jpg',
  image_alt: '対象項目の参考画像',
  options: [
    /* 既存の内容 */
  ]
}

複数画像の場合：

{
  kind: 'qoptions',
  id: 'target_section',
  label: '対象項目',
  images: [
    { src: 'img/sample1.jpg', alt: '対象項目の参考画像1' },
    { src: 'img/sample2.jpg', alt: '対象項目の参考画像2' }
  ],
  image_columns: 2,
  options: [
    /* 既存の内容 */
  ]
}

■ C. 「〇〇の説明文の下」「〇〇の説明文の下、入力欄の上」「〇〇の説明文の下、選択肢の上」と言われた場合

対象 section 自体に image / image_alt または images を追加し、image_position:'below_help' を指定してください。

例：

{
  kind: 'qoptions',
  id: 'target_section',
  label: '対象項目',
  image: 'img/sample.jpg',
  image_alt: '対象項目の参考画像',
  image_position: 'below_help',
  options: [
    /* 既存の内容 */
  ]
}

※ この位置は「ラベル直下」とは異なります。
※ 対象 section の後ろに kind:'info' を追加すると、入力欄・選択肢の下に出る可能性があるため、説明文の下に置きたい場合は image_position:'below_help' を使ってください。

■ D. 「〇〇の入力欄の上」「〇〇の選択肢の上」と言われた場合

「説明文の下、入力欄・選択肢の上」と同じ意味として扱ってください。
対象 section 自体に image / image_alt または images を追加し、image_position:'below_help' を指定してください。

■ E. 「〇〇の入力欄の下」「〇〇の選択肢の下」「〇〇の項目の下」「〇〇の下」と言われた場合

対象 section の直後に、画像だけの kind:'info' section を追加してください。

この場合、kind:'info' には、とくに指定がない限り label / title / help / desc / text / caption を付けないでください。

例：

{
  kind: 'qoptions',
  id: 'target_section',
  label: '対象項目',
  options: [
    /* 既存の内容 */
  ]
},
{
  kind: 'info',
  id: 'target_image_after',
  image: 'img/sample.jpg',
  image_alt: '対象項目の参考画像'
}

※ 「〇〇参考画像」のような label は付けないでください。

■ F. 「STEPの冒頭に画像を表示」と言われた場合

該当 STEP の sections 配列の最初に、画像だけの kind:'info' section を追加してください。

例：

{
  kind: 'info',
  id: 'step_image_intro',
  image: 'img/sample.jpg',
  image_alt: '参考画像'
}

※ とくに指定がない限り、 label / title / help / desc / text / caption を付けないでください。

■ G. 「STEPの最後に画像を表示」と言われた場合

該当 STEP の sections 配列の最後に、画像だけの kind:'info' section を追加してください。

例：

{
  kind: 'info',
  id: 'step_image_end',
  image: 'img/sample.jpg',
  image_alt: '参考画像'
}

※ とくに指定がない限り、 label / title / help / desc / text / caption を付けないでください。

【キャプション・見出しを付ける場合】

1. ユーザーが「画像下に〇〇と表示」「キャプションを付けて」と明示した場合だけ、caption または image_caption を追加してください。

例：

caption: '※写真はイメージです'

2. ユーザーが「画像見出しを付けて」「〇〇という見出しも表示して」と明示した場合だけ、label を追加してください。

3. ユーザーが明示していない場合、AIの判断で label / help / caption を追加しないでください。

【複数画像の扱い】

1. ユーザーが2枚以上の画像を指定した場合は、images 配列を使ってください。

2. ユーザーが「横並び」「2枚並べて」「PCでは横並び、スマホでは縦並び」と指示した場合は、image_columns:2 を追加してください。

3. 3枚の場合は image_columns:3、4枚の場合は image_columns:4 を使って構いません。
ただし、ユーザーが特に指定していない場合は2枚なら image_columns:2 を基本としてください。

4. 複数画像を指定する場合は、image / image_alt は併用しないでください。

【自然文の解釈例】

ユーザー指示：
「対象項目Aのラベルの上に sample.jpg を表示してください」

解釈：
対象項目Aの section の直前に、画像だけの kind:'info' section を追加する。
label は付けない。
image は img/sample.jpg にする。

ユーザー指示：
「対象項目Bのラベルの下に sample.png を表示してください」

解釈：
対象項目Bの section 自体に image:'img/sample.png' と image_alt を追加する。
kind:'info' section は追加しない。

ユーザー指示：
「対象項目Cの説明文の下に https://example.com/sample.jpg を表示してください」

解釈：
対象項目Cの section 自体に image:'https://example.com/sample.jpg'、image_alt、image_position:'below_help' を追加する。
kind:'info' section は追加しない。

ユーザー指示：
「対象項目Dの説明文の下に sample1.jpg と https://example.com/sample2.jpg の2枚を表示してください」

解釈：
対象項目Dの section 自体に images 配列と image_position:'below_help' を追加する。
sample1.jpg は img/sample1.jpg にする。
https://example.com/sample2.jpg はURLをそのまま使う。
2枚なので image_columns:2 を追加する。
とくに指定がない限り、kind:'info' section は追加しない。

【表示位置が曖昧な場合】

ユーザーが「〇〇に画像を追加」「〇〇の画像を表示」とだけ指示し、表示位置を明示していない場合は、対象 section 自体に image / image_alt または images を追加し、ラベル直下に表示する扱いにしてください。

この場合、対象 section の前後に kind:'info' の画像専用 section を追加しないでください。

【禁止事項】

- 画像を追加するためだけに、既存の計算ロジックを変更しないでください。
- 画像を追加するためだけに、既存の section / option の種類を変更しないでください。
- 画像用の指定に price / monthly / unit / monthly_unit / taxRate を付けないでください。
- ユーザーが希望していない label / help / caption を追加しないでください。
- 「〇〇参考画像」「〇〇イメージ」などの見出しをAIの判断で作らないでください。
- ラベル直下に画像を置く指示なのに、対象 section の後ろへ kind:'info' を追加しないでください。
- 説明文の下に画像を置く指示なのに、対象 section の後ろへ kind:'info' を追加しないでください。
- 画像URLが指定されているのに、勝手に img/ に変換しないでください。
- ファイル名だけが指定されている画像を、勝手に外部URLへ変換しないでください。
- 修正後の PRODUCTS コード内に、説明用コメントや補足コメントを追加しないでください。
- 画像追加箇所以外の整形・並び替え・書き換えは、できるだけ行わないでください。

【最終チェック】

出力前に必ず以下を確認してください。

- var PRODUCTS = [ ... ]; の完全なコード全文になっているか。
- 既存の rules / pricing / visible_if / options / taxRate / 割引ロジックを変更していないか。
- 画像追加以外の文言・価格・条件を勝手に変更していないか。
- ラベルの上に置く画像は、対象 section の直前に kind:'info' として追加しているか。
- ラベル直下・ラベルの下・説明文の上に置く画像は、対象 section 自体に image または images で追加しているか。
- 説明文の下・入力欄の上・選択肢の上に置く画像は、対象 section 自体に image_position:'below_help' で追加しているか。
- 入力欄の下・選択肢の下・項目の下に置く画像は、対象 section の直後に kind:'info' として追加しているか。
- 画像だけを表示する kind:'info' に label / title / help / desc / text を付けていないか。
- AIの判断で「〇〇参考画像」「〇〇イメージ」などのラベルを作っていないか。
- ユーザーが希望していないキャプションを追加していないか。
- 画像指定に price / monthly / unit / monthly_unit / taxRate を付けていないか。
- 複数画像は images:[{src:'...', alt:'...'}] の形式になっているか。
- 複数画像で横並び希望がある場合、image_columns を指定しているか。
- URLがある画像はURLをそのまま使っているか。
- URLがない画像ファイル名は img/ から始まる相対パスにしているか。
- 同じ section 内に image と images を重複して指定していないか。
- 既存の画像指定がある場合、重複追加ではなく、差し替えまたは images への統合になっているか。

＝＝＝テンプレートはここまで＝＝＝