■向いている方 ・Web 制作会社・フリーランスの方。お客さまの商品ページに組み込んで納品できます（複数人で使うときは制作会社用のライセンスをお選びください） ・名入れのギフト・オーダー家具・工房の品など、色や素材の組み合わせが多い商品を自社のサイトで売っている方 ・社内に Web の担当の方がいて、サイトにファイルを置き、商品ページに数行を貼れる方 ・月額のサービスを増やさず、買い切りで置きたい方 ■向いていない方 ・3D モデル（.glb）が無く、ご自身でも用意しない方（モデルの制作は含みません。用意から頼みたい方は、別にお見積もりします） ・AR（スマホのカメラで部屋に置いて見る機能）や、選択肢を画面で直す管理画面が要る方（どちらもありません。選択肢は設定の JSON に書きます） ・Shopify のストアに置いて、選んだ内容を注文に残したい方（Shopify 版をお選びください） ・ページに JavaScript のファイルを置けないネットショップのサービスをお使いの方（置けません。置けるかどうか分からないときは、ご購入の前にお問い合わせください） ■ほかの方法と比べる ・無料の道具: <model-viewer>（Google のオープンソース）（0 円）── 3D を回して見せ、素材や色を差し替えられます。選ぶ画面と価格の計算は、ご自身で作ります。3D を見せるだけで足りる方は、これで十分です。 ・標準の機能: Shopify の 3D モデル（商品のメディア）（0 円（Shopify の料金に含まれます））── GLB を上げると、商品ページで回して見せられ、AR にも対応します。色の切り替え・刻印・価格の連動はありません。 ・似たサービス: Zakeke（月 $59 から（年払い。月払いは $69.90）と、販売ごとの手数料）── 色・刻印・画像を選べる月額のサービスです。管理画面と AR があります。 ・このキット: 3D 商品コンフィギュレーター（¥12,800（税込・買い切り））── 色・素材・パーツ・刻印・ロゴを選ぶと、3D と価格がその場で変わります。選んだ内容は JSON・PNG・共有 URL で取り出せます。月額も手数料もかかりません。AR と管理画面はありません。 無料の道具で足りる方には、そちらをおすすめします。 ほかの方法の内容と費用は、2026/10/20 に各社のページで確かめたものです。 何ができるか 商品の 3D モデル（glTF の .glb）と JSON の設定を 1 つずつ用意すると、商品ページに「回して、選んで、価格が出る」コンフィギュレーターが置けます。お客さまが色や容量を押すたびに 3D の商品が変わり、価格がその場で計算されます。選んだ内容は JSON・PNG・共有 URL で取り出せるので、注文フォームやお問い合わせにそのまま添えられます。 選択肢は 5 種類。色（色・粗さ・金属感）、素材、パーツの表示（容量違いなど）、刻印（文字を描いたラベルを貼る）、ロゴ（お客さまの画像を貼る）。JSON に書くだけで、プログラムは書きません 価格は基本価格に選択肢の差額を足します。刻印は文字を入れたとき、ロゴは画像を入れたときだけ足します 大きさ合わせ・照明・床・金属の映り込みは部品が持っています。外部ファイルはありません 「選択内容をコピー」で JSON、「PNG で保存」で横 1,600 px の画像、「共有 URL をコピー」で同じ選択で開ける URL お客さまが選んだ画像はブラウザの中で 3D に貼るだけで、どこにも送りません サーバーも API も要りません。静的なファイル 2 本と CSS 1 本を置くだけで、月々の費用はありません WebGL の無い端末では 3D の表示欄にお知らせを出し、選択肢と価格はそのまま使えます ステンレスタンブラーの GLB と設定 2 つを同梱。買ってすぐ動きます 置き方 素の HTML（<script> 2 本と <div> 1 つ）、npm（mount(要素, 設定)）、React / Next.js（<ProductConfigurator config={…} />）の 3 通り。3D の部品（およそ 1 MB）はページを開いたあとに読み込むので、表示は遅くなりません。 3D モデルの用意 Blender などで書き出した .glb をそのまま読みます（圧縮なし）。設定で触るパーツにオブジェクト名を付け、刻印・ロゴを貼る面には UV を持たせます。設定にあってモデルに無い名前は、画面の左上に小さく知らせます。3D モデルの制作そのものは含みません。 費用 キットは買い切りです。サーバーも API も使わないので、月々の費用はありません。 守り 選んだ画像はブラウザの外に出しません。共有 URL に入るのは選択肢の id と刻印の文字だけです 設定の model.src は相対パスか https:// だけを受け付けます 刻印に使える文字と字数は設定で決められます 動作環境 WebGL の使えるブラウザ（PC・スマートフォンの現行版）。npm・React で使う場合は Node 20 以上、React 19。three.js は依存として一緒に入ります。 価格とライセンス ¥12,800 の買い切りです。買った方は、その後の 1.x アップデートも無料で受け取れます。改変と納品は自由、再配布・転売・同種商品化は禁止。購入後 14 日間、不具合のご連絡に対応します（3 営業日以内に返信）。 zip の中身 embed/（素の HTML 用の 3 ファイルと見本、貼り付け用の断片）、page/（単体で開ける見本ページ）、dist/（npm 用と素の HTML 用の束）、src/・test/（TypeScript のソースとテスト 104 本）、samples/（GLB と設定 2 つ）、demo/、styles/、npm 用の tgz、README.ja.md、LICENSE.md、CHANGELOG.md。 ■領収書・インボイス 本ショップは適格請求書発行事業者ではないため、BOOTH の購入履歴から領収書は発行されません（BOOTH の領収書はインボイス発行事業者のショップに限られます）。経費の記録には、BOOTH から届く「ご注文の確認」のメールと、お支払い方法の明細（クレジットカードの利用明細など）をお使いください。消費税の仕入税額控除の対象にはなりません。 更新履歴 1.1.1（2026-10-22）: 手元で動かすための開発用の道具（React など）をセキュリティ修正版に更新しました。機能の変更はなく、サイトに置いている部品は差し替えなくてもお使いいただけます。 1.1.0（2026-10-20）: 刻印に漢字・かなを入れられるようになりました（設定で変えられます）。長い刻印が途中で切れていたのを、正面に収まるように縮小・折り返しで直しています。スマホで 3D の枠の上を縦になぞるとページが動かなくなっていたのを直し、画面に入るまで 3D を読み込まないようにして軽くしました。動作に必要な React は 19 です（説明書の「React 18 以上」は誤りでした）。設定に知らない項目があると表示を止めて項目名をお知らせするようになったため、更新の前に設定の綴りをご確認ください。1.0.0 をお求めの方は無料で更新いただけます。 【バリエーション】個人・社内用（12,800 円）と、制作会社用（24,800 円）を選べます。制作会社用は、複数人で共有して案件数の上限なくクライアントに納品できるライセンスです（1.x の更新込み）。中身の zip は同じです。