基本情報を入力します。
START
このマニュアルの対象
Builderを開いたら、次の2つを選択して使用します。
シミュレータータイプ商品・オーダー製品
商品イメージ方式2D商品
GLBを使う場合は「3D商品」です。
このページは商品画像をベースにする2D商品の説明です。GLBを回転・拡大しながら使うシミュレーターは、「3D商品」操作マニュアルをご覧ください。
QUICK FLOW
まずはこの順番で作れば大丈夫です
2D商品では、最初に商品画像を登録してから、必要に応じて着色範囲やデザイン可能範囲を追加します。
商品画像を1～8枚登録します。
正面・背面等と、着色／デザイン範囲を設定します。
見積に必要なサイズと料金条件を設定します。
カラー、登録画像、自由画像、文字等を設定します。
LIVE PREVIEWで試し、クラウド保存してHTML／ZIPを作成します。
BUILDER SETTINGS
画面左側の8項目
2D商品でも大枠は3D商品と共通です。3番目の項目が「2D商品」用の設定画面へ切り替わります。
01基本情報商品名、基本料金、消費税率、説明文など、シミュレーターの土台を設定します。
BASIC
商品の基本条件を入力します
| 商品・サービス名 | シミュレーターのタイトルとして表示する名称です。 |
|---|---|
| 基本料金（税別・円） | オプションや寸法料金を加える前の基本価格です。 |
| 消費税率 | 概算見積の税計算に使用します。 |
| 概算総額がマイナスの場合 | 割引等で総額がマイナスになった際、そのまま表示するか0円表示にするかを選べます。 |
| 説明文 | 商品・注文方法などの簡単な案内を入力します。 |
| 完成3Dモデル（GLB）のダウンロード | 2D商品では使用しません。 2D商品だけを作る場合はOFFのままで問題ありません。 |
02事業者・相談先／ツール・PDF設定会社・店舗情報、相談先、完成HTMLの配色、見積PDFの内容を設定します。
PUBLISHER
事業者情報は必要な項目だけ公開します
共通事業者プロフィールを取り込んだあと、完成HTML・PDFへ公開する項目をプロジェクトごとに選びます。
社名・住所等を入力しただけでは公開されません。
「公開対象」のチェックがONになっている項目だけが、完成HTMLや見積PDFへ出力されます。
会
事業者情報
社名、担当者、住所、電話番号、Webサイト、ロゴ等。
相
相談先
Web問い合わせ、メール、LINEを必要に応じて使用します。
PDF
PDF・表示
PDF表題、宛先、有効日数、備考、フッター、完成HTMLの配色等。
032D商品商品画像を登録し、表示面・着色パーツ・デザイン可能範囲を設定します。
SELECT 2D
「商品イメージ方式」で2D商品を選びます
「3D素材・練習用の基本形状」を開くと、「3D商品」と「2D商品」を選べます。「2D商品」を選ぶと、同じ場所が商品画像の設定画面へ切り替わります。
3D商品と2D商品を切り替えても、商品名・寸法・数量・オプションなどの共通設定は引き継がれます。ただし、3Dモデル上の配置内容と2D商品画像上の配置内容は別々に管理されます。
PRODUCT IMAGES
商品画像を登録します
最初は「＋ 商品画像を登録する」を押します。2枚目以降は「＋ 商品画像を追加」から登録します。
| 登録できる枚数 | 最大8枚。正面だけでも開始できますが、背面・側面などを用意すると利用者が商品を確認しやすくなります。 |
|---|---|
| 画像形式 | JPG / PNG / WebP。 |
| ビュー名称 | 利用者に分かりやすい名称を付けます。最初の画像は「正面」、2枚目は「背面」が自動提案されます。 |
| ビューの役割 | 正面、背面、左、右、上、下、その他から選びます。 |
| 表示順 | 「前へ」で表示面の順番を調整できます。 |
商品画像は取込時にWeb表示向けへ最適化されます。
極端に大きい画像は端末のメモリ負荷を高めるため、公開前チェックや2D描画パフォーマンス診断の注意表示も確認してください。
COLOR AREAS
色を変えたい部分は「着色パーツ」として設定します
「＋ 着色パーツを囲む」を押し、商品画像上で対象部分を多角形で囲みます。3点以上指定して確定します。
手動で範囲を登録
袖、ボディ、座面など、色変更させたい部分を正確に囲みます。同じ着色パーツに複数の表示面を登録すると、正面・背面等を同じパーツとして扱えます。
クリック位置から自動判定
「クリックした箇所を自動判定して着色」をONにすると、利用者がクリックした地点から近い色の連続範囲を自動判定できます。感度は「低・標準・高」から選べます。
写真では自動判定が常に完全とは限りません。
影、反射、グラデーション、複雑な背景がある商品は、重要な箇所を手動の着色パーツとして囲む方が安定します。
DESIGN AREAS
画像・文字を置ける範囲を設定します
「＋ デザイン領域を囲む」で、ロゴ・写真・文字などを配置してよい範囲を指定できます。
| 領域名称 | 「胸中央」「背面プリント」など、管理しやすい名称を付けます。 |
|---|---|
| 画像を許可 | この領域へ画像を配置できるかを設定します。 |
| 文字を許可 | この領域へ文字を配置できるかを設定します。 |
| 領域でクリップ | ONにすると、配置した画像・文字を領域の外へはみ出さないよう切り抜きます。 |
| 除外部分を囲む | ポケット、穴、透明部分など、デザインさせたくない部分を領域内から除外できます。 |
簡単に始める場合は「領域未指定の表示面は画像全体に配置可能」をONのままでも使えます。
印刷範囲などを厳密に制限したい商品だけ、デザイン領域を明示的に囲んでください。
04寸法・数量・価格計算利用者へ表示する寸法、寸法連動料金、数量と数量割引を設定します。
DIMENSIONS
2D商品では「寸法」と「画像の形」は別です
幅・高さ・奥行の値を見積条件として利用できますが、入力値を変更しても商品画像そのものの縦横比や形は変形しません。
3D商品との大きな違いです。
3D商品では寸法変更をモデルの大きさへ反映できますが、2D商品では寸法は主に表示・料金計算用です。初めて2D商品へ切り替えたときは、奥行が不要な商品を想定して奥行がOFFになる場合があります。
| 使用 | 不要な寸法はOFFにできます。 |
|---|---|
| 表示名 | 「身丈」「横幅」「直径」など、商品に合わせた名称へ変更できます。 |
| 初期値／最小／最大／刻み | 利用者が入力・選択できる範囲を設定します。 |
| ユーザーが直接変更できる | OFFにすると寸法は表示のみになり、利用者による直接入力を止められます。 |
| 寸法料金 | 長さ・高さ・奥行・面積・体積等の料金計算に使用できます。 |
| 数量 | 数量選択、初期数量、上限、数量割引等を設定できます。 |
05料金ルール数量帯、最低料金、割引・加算等、より細かな見積条件を設定します。
PRICING RULES
基本料金だけでは足りない場合に使用します
2D商品でも3D商品と同じ料金ルールを利用できます。必要な場合だけ追加してください。
数量帯
数量に応じて単価・加算・割引を変える条件を設定します。
最低料金
計算結果が一定金額を下回らないようにできます。
固定加算・割引
条件に応じて諸経費や値引きを見積へ追加できます。
見積確認
設定後はLIVE PREVIEWで数量・オプションを実際に変更して、合計金額を確認してください。
06オプションカラー・柄、管理者登録画像、サイズ等の選択肢と加算料金を設定します。
OPTIONS
2Dでは「表示動作」を2D向けに設定します
「選択項目」の中へ選択肢を作り、加算額と、必要に応じて商品画像上の表示変化を紐付けます。
| 表示動作なし | 料金・選択内容だけを見積へ反映します。サイズ、納期、加工方法など、画像を変えない選択肢に向いています。 |
|---|---|
| 表面仕上げ変更 | 単色または柄を、登録した着色パーツまたは自動判定した色範囲へ適用します。 |
| 登録画像を配置 | ロゴ、ワッペン、マーク等を管理者側で登録し、利用者がデザイン領域へ配置できるようにします。 |
パーツ表示／非表示、倍率変更、モデル切替などは3D商品専用です。
2D商品ではこれらの3D専用動作は使用せず、「表示動作なし」「表面仕上げ変更」「登録画像」を使用してください。
TARGET
「対象」は2Dで作成した領域に結び付けます
カラー・柄
「2D商品」で作成した着色パーツのIDまたは名称を対象にします。複数の表示面を同じ着色パーツへ登録しておくと、同じ選択肢を共通利用できます。
登録画像
「2D商品」で作成したデザイン領域のIDまたは名称を配置先として使用します。利用者はカスタマイズ画面から登録画像を選び、許可された領域へ配置します。
PRICE
「選択時」と「適用時」を使い分けます
通常の選択肢は「選択時」、カラー・柄・登録画像は「適用時」にすると、選んだだけでは料金を加えず、実際に商品画像へ適用した内容から料金を計算できます。料金方式は「1見積」「1商品」「1箇所」等から用途に合わせて設定します。
IMPORT / EXPORT
選択肢が多い場合はJSON／CSVも利用できます
設定JSON
選択肢、料金、表示動作、初期選択、柄画像、管理者登録画像等をまとめて保存・復元できます。
CSV一括登録
多数の選択肢と料金を表計算ソフトで作成するときに便利です。画像データそのものはCSVへ含まれません。
07操作・デザイン機能完成シミュレーターで使うズーム、自由画像、文字配置と、2D上のカスタマイズ操作を設定します。
VIEWER
2Dでは回転ではなく表示面を切り替えます
表示面の切り替え
登録した「正面」「背面」「左」「右」等のボタンで商品画像を切り替えます。商品画像の上に表示面切替ボタンが表示されます。
拡大縮小
「ホイール・ボタン拡大縮小」をONにすると、＋／－やマウスホイール等で商品画像を拡大・縮小できます。
「ドラッグ回転」と3D用の「角またぎ貼付」は2D商品では使用しません。
COLOR
カラー・柄を商品画像へ適用する
カスタマイズでカラー／柄を選ぶ
「オプション」で作成したカラーまたは仕上げを選択します。
「カラー変更」または「仕上げ変更」を有効にする
選択した内容に応じて変更ボタンが表示されます。
商品画像上の変更したい箇所をクリックする
手動登録した着色パーツ、または自動着色が有効ならクリック位置から判定した範囲へ適用します。
IMAGE
利用者が画像を自由配置できるようにする
「デザイン画像の自由配置」をONにすると、利用者が画像をアップロードし、許可されたデザイン領域へ配置できます。LIVE PREVIEWでは画像を選択してから、商品画像上の配置したい位置をクリックします。
配置後はサイズ・回転・重なり順を調整できます。画像配置の無料カ所数と、超過分1カ所あたりの料金も設定できます。
TEXT
文字を配置できるようにする
「カスタム文字の貼付」をONにすると、文字内容、文字色、字体、横書き／縦書き、太字、縁取り、影等を設定し、許可されたデザイン領域へ配置できます。
管理者用カスタムフォントの登録や、利用者自身によるフォントアップロードの許可も設定できます。文字配置にも無料カ所数・超過料金を設定できます。
LIVE PREVIEW
右側のLIVE PREVIEWで利用者操作を通して確認します
表示面
正面・背面等を切り替え、各画像が正しい順番・名称で表示されるか確認します。
カラー
手動着色パーツと自動着色の両方を試し、意図しない背景まで変わらないか確認します。
画像・文字
配置可能範囲、クリップ、除外範囲、サイズ・回転・削除が想定どおりか確認します。
見積金額
寸法・数量・選択肢・適用箇所数を変え、概算金額が正しく変わるか確認します。
08シミュレーター出力公開前チェックを行い、単一HTMLまたはZIP一式を作成します。
PREFLIGHT
「公開前チェック」を実行します
商品画像不足、柄画像・登録画像不足、配置先の設定、素材の負荷等を完成HTML生成前に確認します。
2D描画の負荷も確認できます
商品画像の解像度や表示面・着色パーツが多い場合、端末によって描画負荷が高くなることがあります。管理画面の2D描画パフォーマンス診断や公開前チェックの注意表示を参考に調整してください。
DOWNLOAD
完成ファイルを作成します
H
単一HTML
商品画像、設定、管理者登録画像、管理者フォント等を1つのHTMLへまとめて出力します。
ZIP
ZIP一式
index.html、config.json、READMEをまとめたZIPを作成します。
{ }
全体設定JSON
現在のBuilder設定をJSONとして保存します。
単一HTMLとZIP一式は同じ正式ダウンロード利用枠を使用します。
実行前に最新の残り回数が表示され、確認画面を開いただけでは利用回数は消費しません。
2D商品ではThree.jsを使用しません。
商品画像・管理者登録画像・管理者登録フォントは完成HTMLへ埋め込まれるため、3D商品のようなGLBやThree.js用CDNを前提としません。
SAVE & RECOVERY
編集内容の保存と復元
2D商品の商品画像・領域・配置内容も、プロジェクトの編集内容として保存されます。
雲
クラウド保存（上書き）
現在開いているクラウドプロジェクトへ編集内容を保存します。
端
端末の自動保存
編集中の内容をブラウザ側にも自動保存します。クラウド保存とは別です。
↶
前回の編集内容
端末側の前回編集が見つかった場合は「復元する」または「破棄する」を選べます。
商品画像や領域を大きく編集した区切りでは、「クラウド保存（上書き）」を押すことをおすすめします。
FAQ
2D商品でよく迷いやすい点
商品画像は1枚だけでも作れますか？
はい。正面画像1枚だけでも作成できます。背面・側面などを確認させたい場合は、最大8枚まで追加できます。
サイズを変更しても商品画像が横長・縦長になりません。
正常です。2D商品の寸法は主に表示・見積計算用で、入力した幅・高さ等に合わせて元画像を変形する機能ではありません。
色をクリックすると背景まで変わってしまいます。
自動着色では近い色の連続範囲を判定するため、写真によっては意図しない範囲を含むことがあります。着色感度を下げるか、「着色パーツを囲む」で対象部分を手動登録してください。
画像や文字を置ける場所を制限できますか？
はい。「デザイン領域」を囲み、「画像を許可」「文字を許可」を用途に合わせて設定します。「領域でクリップ」をONにすると、領域外へのはみ出しも抑えられます。
3D商品のオプション設定をそのまま2Dでも使えますか？
料金や通常の選択肢は共通利用できますが、パーツ表示、倍率変更、モデル切替等の3D専用動作は2Dでは使用しません。2Dでは「表示動作なし」「表面仕上げ変更」「登録画像」を使用してください。