図面レイアウトシミュレーター
図面（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
使い方
- ページを開く。
- 「＋PDF / ＋画像」で図面を読み込む。
- 「縮尺を設定」→ 図面上の2点をクリック → 実寸(mm)を入力。
- 左のパーツをクリック（またはドラッグ）して配置。四隅ハンドルで回転・サイズ変更、下部パネルで数値指定。
- 「保存(JSON)」で保存、「PNG書出し」で画像出力。
ショートカット
Delete=削除 / Ctrl/Cmd+D=複製 / Space+ドラッグ=画面移動 / ホイール=拡大縮小
技術メモ
- 描画：Fabric.js 5.3.1 / PDF読込：pdf.js 3.11.174（CDN読み込み・オンライン環境が必要）。
- すべてクライアント側で完結。
