自社サイトに置ける 3D 間取りシミュレーター|工務店の相談席と物件ページに、買い切り・月額なし(間取りシミュレーター)
- Digital9,800 JPY









■向いている方 ・地域の工務店・設計事務所・リフォーム店で、相談の席や見学会でお客さまと一緒に間取りを描きたい方 ・物件ページに、触って 3D で確かめられる間取りを載せたい不動産・工務店の方(見せるだけの設定があります) ・工務店のサイトを作る制作会社・フリーランスの方(クライアントのサイトに組み込んで納品できます) ・ご自身で置くのが不安な方(設置までお任せいただけます。下の「お値段」をご覧ください) ■向いていない方 ・施主として、ご自身の家の間取りを考えたい方(無料の間取りのサービスで足ります。下の比較をご覧ください) ・斜めの壁・3 階以上・屋根の形・日当たりまで確かめたい方(作っていません) ・描いた間取りを、お客さまから問い合わせで受け取りたい方(送る機能は入っていません。PNG か印刷で書き出していただく形です) ・Internet Explorer や古い iPad で使いたい方(Safari は 15.4 以降。3D には WebGL2 が要ります) ■ほかの方法と比べる ・無料の道具: Floorplanner(Basic プラン)(0 円(5 件まで。書き出しには透かし))── ブラウザで間取りと 3D を作れる英語のサービスです。お客さまは、そのサービスの画面で作ります。 ・無料のソフト: Sweet Home 3D(0 円)── 家具を置いて 3D で確かめられる、パソコン・スマホ向けの無料のソフトです。 ・似たサービス: RoomSketcher(無料プランあり。Pro は年 $144)── 英語のサービスです。無料プランには面積の計算が無く、3D の画像に透かしが入ります。 ・このキット: 間取りシミュレーター(¥9,800(税込・買い切り))── 自社のサイトの中で動き、描いた間取りはお客さまのブラウザの中だけに残ります。ほかのサービスの画面へ移らずに、自社のページで相談が続きます。月額はかかりません。 無料の道具で足りる方には、そちらをおすすめします。 ほかの方法の内容と費用は、2026/10/20 に各社のページで確かめたものです。 何ができるか マス目をなぞると部屋になり、ドアと窓を置くと壁に開口が空き、家具を並べると 3D の中に実寸で現れます。 自社サイトの物件ページや相談ページに、そのまま置ける形にしてあります。 ・間取りを描く ── 0.5 m のマス目をなぞって部屋を作ります。部屋名は 19 種類、建物の外形は 4〜16 m、階数は平屋と 2 階建てから選べます ・建具を置く ── ドア・引き戸・窓(腰窓/掃き出し窓)を壁の上に 0.25 m 刻みで。吊元と開く側も選べ、3D の壁には開口が空きます ・収納と階段 ── クローゼット・押入・玄関収納・階段の 4 種。3D では棚板まで組み立てます ・ベランダと玄関ポーチ ── 外壁の面に取り付けます。奥行き 0.5〜3.0 m、手すりの有無つき ・家具を実寸で置く ── 18 種類。ベッドは S / SD / D / Q、テレビは 43 / 55 / 65 / 75 インチから画面の幅を計算します ・広さを数字で見る ── 部屋ごとに面積(m²)と帖。家具と建具には 幅 × 奥行き × 高さ を出し、その場で打ち替えられます ・案を並べて比べる ── 案を 10 件まで持てます。複製して名前を変えれば見比べられます ・図を書き出す ── 間取り図・3D・両方を並べた 1 枚を PNG で。A4 横 1 枚に組み直して印刷(PDF 保存)もできます 見本 https://suminawa.dev/projects/floorplan で、マス目を塗って 3D で見るところまで試せます。 無料の見本には、建具・収納・ベランダ・家具の実寸・寸法表示・複数案・書き出しが入っていません(外形も 9 × 8 m の固定です)。そこから先がこの商品です。 置き方 embed/ の 4 ファイルのうち、読み込む 3 ファイル(CSS 1 つ・JavaScript 2 つ)を同じ階層に置き、ページに 5 行貼ります。 <link rel="stylesheet" href="./floorplan-simulator.css"> <div id="floorplan"></div> <script src="./floorplan.global.js"></script> <script defer src="./floorplan-3d.global.js"></script> <script>FloorplanSimulator.mount(document.getElementById("floorplan"));</script> WordPress のカスタム HTML にも貼れます。ビルドの道具は要りません。React と Next.js 向けの束も同梱しています。page/index.html はダブルクリックで開く単体ページなので、お客さまにお渡しする使い方もできます。描いた間取りはブラウザの中(localStorage)にだけ残り、外部のサーバーには何も送りません。 設定で変えられること 項目 内容 plan 最初に出す間取り(物件データの流し込み) readonly 見せるだけにする。物件ページ向け features.* 3D の有無(外すと three.js を読み込まず、gzip でおよそ 250 KB 軽くなります)、階数の上限、案の切替・書き出し・印刷 catalog.rooms / furniture / openings / sizes 部屋名・家具・建具・外形のプリセット scene.* 3D の中の色(壁・見切り・屋根・床・内装)と自動回転 labels 画面の文言。英語にもできます --fp-*(CSS) 間取り図と操作列の色・角丸・書体(18 個) 価格とライセンス ¥9,800 の買い切りです。買った方は、その後の 1.x アップデートも無料で受け取れます。個人・組織ライセンスがあり、再配布・転売・同種商品化は禁止です。note の有料記事版も同価格です。購入後 14 日間、不具合のご連絡に対応します(hello@suminawa.dev)。 zip の中身 embed(貼る 4 ファイル)/ page(単体ページ)/ dist / src / styles / samples(間取りの JSON 3 つ)/ demo / README.ja.md / LICENSE.md / CHANGELOG.md / package.json ほか。 ■領収書・インボイス 本ショップは適格請求書発行事業者ではないため、BOOTH の購入履歴から領収書は発行されません(BOOTH の領収書はインボイス発行事業者のショップに限られます)。経費の記録には、BOOTH から届く「ご注文の確認」のメールと、お支払い方法の明細(クレジットカードの利用明細など)をお使いください。消費税の仕入税額控除の対象にはなりません。 更新履歴 1.0.2(2026-10-22): 手元で動かすための開発用の道具(React など)をセキュリティ修正版に更新しました。機能の変更はなく、サイトに置いている部品は差し替えなくてもお使いいただけます。 1.0.1(2026-10-20): 拡大したあとに間取りをドラッグ(スマホは 2 本指)で動かせるようにし、「取り消す」「やり直す」(Ctrl/⌘+Z)を足しました。塗っているときにほかの部屋のマスを塗り替えた場合は、部屋名と数をお知らせします。読み込み直後に古い間取りが返ることがあった不具合も直しています。3D に対応していない端末では、固まらずに案内を出します。1.0.0 をお求めの方は無料で更新いただけます。








