図面レイアウトシミュレーター

図面（PDF / 画像）を背景に、什器・設備を 実寸（mm）でドラッグ＆ドロップ配置 できるブラウザ用ツールです。 サーバー不要・単一の index.html だけで動作します。図面データはブラウザ内だけで処理され、外部に送信されません。

公開URL: https://misefits.kokokikaku.com/

GitHub Pages のカスタムドメインとして公開します。リポジトリ直下の CNAME は misefits.kokokikaku.com です。

主な機能

• 任意の図面に対応：PDF・画像（PNG/JPG）をアップロードして背景に設定。
• 縮尺キャリブレーション：図面上の2点をクリックし実寸(mm)を入力するだけで「1px＝◯mm」を確定。どんな縮尺でも正確に検証可能。
• 実寸ドラッグ配置：mm実寸で配置。ドラッグ・回転・拡縮に追従して寸法（W×D mm / φmm）をリアルタイム表示。
• グリッド＆スナップ：50〜1000mmグリッドと自動吸着。回転は15°刻み吸着。
• 什器ライブラリ：客席／厨房設備／水回り・その他／自由図形。
• 複数シート：階ごとに切り替え、配置と縮尺を個別保持。
• 保存・復元：JSONで保存/読込。ブラウザに自動保存。
• PNG書き出し。

公開設定

• GitHub Pages: main ブランチ / / ルート
• カスタムドメイン: misefits.kokokikaku.com
• DNS側で misefits の CNAME を studio8080.github.io に向ける必要があります。

公開時の注意・免責

MiseFitsは、店舗・施設レイアウトの初期検討を補助するための簡易シミュレーターです。表示寸法や配置結果は、入力した図面・縮尺設定・ブラウザ環境に依存します。

施工可否、建築基準法・消防法・保健所等の各種基準、避難経路、設備容量、バリアフリー、安全性、契約・見積条件などの最終判断には使用せず、必ず専門家・施工会社・関係機関へ確認してください。

SEO / 共有設定

• canonical: https://misefits.kokokikaku.com/
• プライバシー・免責: privacy.html（アクセス解析のオプトアウトUI付き）
• 404ページ: 404.html
• 使い方ページ: guide.html（手順・ショートカット・FAQ。HowTo/FAQPage の構造化データ入り）
• OGP / Twitterカード: assets/misefits-ogp.jpg（1200×630）
• 画面内の写真素材: assets/misefits-*.webp（幅1400pxに最適化）
• 構造化データ: WebApplication
• 検索クロール: robots.txt
• サイトマップ: sitemap.xml
• Webアプリ表示: manifest.webmanifest

使い方

1. ページを開く。
2. 「＋PDF / ＋画像」で図面を読み込む。
3. 「縮尺を設定」→ 図面上の2点をクリック → 実寸(mm)を入力。
4. 左のパーツをクリック（またはドラッグ）して配置。四隅ハンドルで回転・サイズ変更、下部パネルで数値指定。
5. 「保存(JSON)」で保存、「PNG書出し」で画像出力。

ショートカット

Delete=削除 / Ctrl/Cmd+D=複製 / Space+ドラッグ=画面移動 / ホイール=拡大縮小

技術メモ

• 描画：Fabric.js 5.3.1 / PDF読込：pdf.js 3.11.174（CDN読み込み・オンライン環境が必要）。
• すべてクライアント側で完結。